Passing complex types parameters in extensions

Welcome to Wisej Support.
Questions, suggestions and plain old bugs - are all welcome here!
Answered
0
0

In a previous question I asked for more options in JustGauge but as you have published the source I thought it would be an idea to have a go myself.

So far I’ve been able to update the widget to the latest version and get the simple properties such as pointer, reverse and symbol to work (and I’m amazed by how simple you guys have made this) but I’m stumped on how to add custom sectors which require a more complex structure:

customSectors: [{
color : “#00ff00”,
lo : 0,
hi : 50
},{
color : “#ff0000”,
lo : 50,
hi : 100
}]

I’ve looked at the chart.js and jQueryKnob extensions but cannot spot anything similar. Is there an example somewhere I am missing?

Thanks

Nic

  • You must to post comments
Best Answer
0
0

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

 

  • You must to post comments
0
0

Thanks Luca,

I’ve sent you a copy of the extension.

Nic

  • You must to post comments
0
0

Sounds good. Send the project, I’ll be more than happy to take a look.

  • You must to post comments
0
0

Hi Luca,

I’m almost there. I’ve managed to get everything I want into the gage control but I have one problem left:

Somehow the labelColor property means that the labels are invisible on the control unless I actually specify a color. I have not changed this property from your original implementation so I’m at a loss.  I’m not really sure how your color defaults work for themeable colors.

I’m happy to return the enhanced extension to you for publication. I would just like to understand where I’ve gone wrong on color.

Thanks

Nic

  • You must to post comments
Showing 4 results
Your Answer
Post as a guest by filling out the fields below or if you already have an account.
Name*
E-mail*
Attachment
File Name Size
There are currently no files uploaded.
Maximum number of files 5, maximum file size 3.9MB.
Supported file formats: zip pdf gif jpg bmp png cs vb theme json