April 29th, 2017

How to specify column widths using percentages in Bindows tree views2

Columns’ widths in a Bindows BiTreeView based class are restricted to using absolute size values.

We (at the Bindows support) are often asked if is there is a way to use percentages for the column widths.
The bad news is that you must use absolute sizes.
The good news is that the view-manager (the class that handles the visual aspects of the columns, among other things) can easily be extended to support this.

The main steps to achieve this are:
1. When the tree is created, set the desired percentage value you want for each column.
2. Store an array with these percentages on the view-manager object of the tree.
3. Extend the view-manager with a method that converts the percentage values to absolute sizes in pixels.
4. Call this method in all the cases where it needs to be calculated (e.g. when the tree is created and/or resized).

Below is a screenshot of the code. Be sure to read the comments.

blogcode1.png

And this is what the result looks like. The percentage value chosen for each column is written in red and I also marked the row headers (just in case you are uncertain what those were).

blogimage.png

Here you can run the application in your browser.
Try resizing the browser window and see that the relative widths of the columns are preserved.

In a production setting, you would add some more error checking of course.
For a generic solution, the resize listener probably needs to be added to the create event as well (for the case when the tree view is not yet added to the page when setCWP() is called).
And to be perfectly generic, it should allow changing the tree view (i.e. remove the listeners from the current tree and add them to the new tree).
However, this code should cover most situations for you.

How to dynamically update Bindows gauges1

As you surely know by now, the Bindows gauges package is provided free of charge, without any warranty and without any commitment for support.

Still, we get a lot of support questions about updating certain aspects of the gauges dynamically.
Therefore, in this post I will explain the general approach of dynamic updates to the gauges.

For truly dynamic updates you are supposed to use the full version of Bindows. Bindows Free Gauges have some limitations in this area (including not being documented) but if you know your way around Bindows you can still accomplish good things.

So in this example we are going to update the label of a gauge dynamically. Here is the gauge before any modification:

clock.png

The first step is to figure out which object is responsible for the effect that you want. It’s pretty easy to read the xml file that describes the gauge and find the correct class.
If you are unsure, just change some properties, such as color, reload your page and see if you have targeted the correct class.
I am using “sample.html” and “g_clock_bindows.xml” as a base that comes standard with the Bindows Free Gauges package.

It was pretty easy to find the XML tag that is responsible for writing out the word “Bindows”. That tag corresponds to a class in Bindows called BiGauge2Label. If you have access to Bindows, you can examine the source code and find there a non documented method called “setText”. This method corresponds to the XML property called “text” which in turn spells out the word “Bindows”.

Now we just need to add an “id” to this tag. Adding an id ensures that an object with the same name as the id is accessible on the object for the div that we create when we make the gauge itself.

adding_id.png

Now all we have to do is to use that object and call the setText method on it. Note that it doesn’t matter where the tag is in the XML hierarchy. The JavaScript object will be directly accessible on the “clock” object.

dynamic_code.png

And the finished clock now toggles every second between the two labels and looks like this:

clock_changed.png

To learn more about how XML properties and tags relates to Bindows API documentation, check out this blog post.

Click here to run the application.

Imhotep theme designed by Chris Lin. Proudly powered by Wordpress.
XHTML | CSS | RSS | Comments RSS