[SOLVED] Passing complex types parameters in extensions

Hi Nic,

I’m glad that you are playing with the extensions. They really show the flexibility of Wisej.

In general, when adding a control or a property to a control you are dealing with 3 aspects: 1) client side in javscript; 2) server side in .NET; 3) designer. Fortunately you can use all the Visual Studio designer features and Wisej connects the client with server so you can focus the programming to very clear responsibilities.

In this case you are looking at adding an array of objects. You can create a .NET class CustomSector with the properties Lo, Hi and Color. Capitalize the first character to be consistent with .NET names. Make the CustomSector class implement IWisejSerializable to set the CamelCase option to true (we should probably make this the default – it’s already the default for enumerations).

The Lo, Hi, and Color properties can be simple {get; set;} and can declare any of the designer specific attributes if needed.

This is the simple IWisejSerializable implementation to turn on camel casing:

#region IWisejSerializable

// Serialize using camel case to be javascript compatible.
 bool IWisejSerializable.CamelCase { get { return true; } }

string[] IWisejSerializable.IgnoreList { get { return null; } }

bool IWisejSerializable.Serialize(TextWriter writer, WisejSerializerOptions options) { return false; }

#endregion

Once you have the CustomSector class, add a property to the control like this:

[DefaultValue(null)]
[MergableProperty(false)]
[TypeConverter(typeof(ArrayConverter))]
[Editor("System.ComponentModel.Design.ArrayEditor, System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
public CustomSector[] CustomSectors

{

  get;

  set;

}

Now you have the property and you need to send it back to the client. JustGage is one of the three ways we have to implement a Wisej control and it’s the most integrated since it actually creates a javascript class “wisej.web.ext.JustGage”.

In JustGage.OnWebRender, add:

config.customSectors = this.CustomSectors;

You also have to add a corresponding property to the javascript side, in wisej.web.ext.JustGage.js inside the properties: {} block add:

customSectors: {init: null, check:”Array”},

Then in __createJustGageElement, add the property to the config object:

var config = {
 id: elementId,
 value: this.getValue(),
 min: this.getMinimum(),
 max: this.getMaximum(),
 showMinMax: showLabels,
 title: showTitle ? this.getTitle() : " ",
 customSectors: this.getCustomSectors(),
 label: showLabels ? this.getLabel() : " ",
 titleFontColor: this.__resolveColor(this.getTextColor()),
 labelFontColor: this.__resolveColor(this.getLabelColor()),
 gaugeColor: this.__resolveColor(this.getBackgroundColor()),
 };

This should be all.

If you want the new CustomSectors propery to update the widget when it’s changed, modify the property to this:

[DefaultValue(null)]
[MergableProperty(false)]
[TypeConverter(typeof(ArrayConverter))]
[Editor("System.ComponentModel.Design.ArrayEditor, System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
public CustomSector[] CustomSectors

{

  get
  {
     return this._customSectors.
  }

  set
  {
     this._customSectors = value;
     Update();
 }
}
private CustomSector[] _customSectors;

Otherwise you can call justGage1.Update() after changing the custom sectors.
If you change only a property of an existing CustomSector array element you still need to call Update(). Unless you
connect the CustomSector instanced to the owner and call Update from the property setters in there.

This is mostly Visual Studio .NET designer and component model coding and not specific for Wisej.

HTH. If you need more help, send me the project you have extended. And if you want to, we can incorporate it and publish the updated JastGage that you have done.

Best,
Luca