Small Loader icon while filling a dropdown

[itg-assistant]

Alex Prinias asked 2016-10-14 15:40:09 UTC

Hi guys,

I've seen the Loader icon on filling a TreeView Node and it looks very nice -- not only aesthetically, but reassuring the user that something is going on and the application is not hanging.

I was wondering if there is the possibility to show the same icon during a long ComboBox gets filled. May be in the Tools ?? In fact I tried to "fake" it by adding a Tool with the node-loader theme icon with combobox.Tools["LOADING"].Visible = false, make it visible at the beginning of the procedure filling the combobox and making it again invisible at the end of the procedure, but the icon never shows up. I suppose it has to do with how the refreshing is sent to the browser, of course not as the server code is executed line by line, i.e. the refresh is sent to the browser once the filling procedure has ended and the loader has become invisible again...

Best,
Alex

[itg-assistant]

Luca answered 2016-10-14 15:46:53 UTC

Filling on a drop down event?

The TreeView loading icon replaces the node's icon when expanded without children.

For the ComboBox it's possible to do the same with the drop down button when clicked if the comboBox doesn't have items and the showLoader property is turned on. I can send you a small plugin code that you can try.

[itg-assistant]

Alex Prinias answered 2016-10-14 16:06:58 UTC

Thanks Luca, that will be great! However I don't see a ShowLoader property for the Combobox, that was the first thing I looked for, hoping you have implemented it already.

Alex

[itg-assistant]

Luca answered 2016-10-14 16:42:05 UTC

See attached sample. It's a good example on how to extend Wisej controls on the client and the server.

[itg-assistant]

Alex Prinias answered 2016-10-14 20:31:37 UTC

This is so cool !

I had used the inheritance and the OnWebRender method to create bold menuitems which cannot be selected as menuitems group headers but that was without any javascript.

Are there any conventions that should be kept? Like the name of the folder "Platform" where the javascript resides or anything else? Or just setting the Build Action to Embedded Resource is enough? Does this mean that the extended ComboBox can be in a Library project that can be linked to many applications?

Thanks a lot!

Alex

[itg-assistant]

Luca answered 2016-10-15 13:32:51 UTC

The embedded js and css files have to be in /Platform or /Resources. The minifier built in wisej bundles everything into a single wisej.js. When debug=true the files are just bundled otherwise they are also minified.

AssemblyInfo.cs must have the [assembly:WisejResources] attribute.

Look at the source code in wisej.com/extensions to see the different approaches.

If you want to wire custom events use:

config.wiredEvents.Add("eventName", eventNameWithArgs(DataName)");

The client widget now can fire a simple event or a data event:

this.fireEvent("eventName");

this.fireDataEvent("eventName", {value1:12, value2:"hello"});

Ther server can process the event in OnWebEvent(e). Where the named args coming in from the client can be found here: e.Parameters.DataName.value1.

"DataName" can be any name you declare in wiredEvents, ie: "clickedNode(Node)".

You can also pass controls to the client and receive them from the client. Wisej takes care of "marhsaling" the component reference to/from an id.

You can derive from wisej javascript classes or from qooxdoo classes and create just about any real time web widget and control.

There will be a lot of documentation and samples - after the release.

Best

Luca

[itg-assistant]

Alex Prinias answered 2016-10-16 15:47:35 UTC

This is great!

Can I create a library project with my own extensions so that I can use it as a reference in my future Wisej application projects without having to include the source C# server code -- or even the javascript? I tried making your attached code my "library" and tried using the ComboBoxEx in another project, but although it compiles without any complain, I cannot see the loader icon. Tried setting the AssemblyIfo reference, included the Javascript in a Platform folder but to no avail... Am I missing something or it is just not possible?

Best,
Alex

[itg-assistant]

Luca answered 2016-10-17 14:20:50 UTC

Yes, it should work like any other assembly reference. It's the same as Wisej.Web.dll. The attachment was missing.

[itg-assistant]

Alex Prinias answered 2016-10-17 14:55:17 UTC

Hi Luca,

I meant your attached, but for your convenience I have now included it. I have added a new TestComboBoxEx project with its own Window1, referencing your project. I have changed the AsseblyInfo.cs and created a Platform folder with the javascript in it. If I run it, the loader icon does not show up. If I change the startup project to your project, and its own Window1, it does.

Best,
Alex

[itg-assistant]

Luca answered 2016-10-17 15:02:08 UTC

Hi Alex,

Two issues:

• Remove /Platform and WisejResources from the TestComboBox app. That's needed only in the library project. Otherwise you are declaring the javascript class twice. The library project has all it needs to work.

• You need to set the ShowLoader property to true, add  comboBoxEx2.ShowLoader = true; and it works.

Best,

Luca

[itg-assistant]

Alex Prinias answered 2016-10-17 15:07:51 UTC

Yeah, in the beginning I hadn't put the AssemblyInfo and the Platform in the "client" project, I did it just for checking... The actual problem was of course that I had forgotten this .... small detail, to set the property to true... Duhh!

Thank you Luca!

Alex