This commercial version of the Bindows Gauges is based on the latest Bindows version and supports the latest versions of all the major browsers, including Microsoft Edge, Internet Explorer 11, Firefox 44, Safari, and Chrome 49.

The Bindows Gauges Library - Commercial Version price is $49 and includes:

Bindows Gauge is a powerful and highly customizable library toolkit for creation and usage of SVG gauges on your HTML pages.

You can build your own gauge using custom colors, desired shapes, and dimensions using the Gauge Wizard which you can find here.

Recently the commercial Bindows Gauges package was updated to a newer version (4.7). This update makes it friendlier to users who are not familiar with development but would like to get a gauge similar to ones reproduced in the examples provided with the package.

So what’s new in version 4.7?

We support all the latest versions of the major browsers but skipped the VML part so in the commercial versions of the Bindows Gauges IE 8 and lower are not supported anymore. That change allowed us to simplify and expedite the gauge loading process.

Bindows Gauges are compressed in a newer, better way, so now it’s even more lightweight.

You can use two options to define what kind of gauge you would like to use:

type – when you are satisfied with the gauges provided with the package. All the available items are stored in bindows.gaugeList and correspond to every scheme in the package

Or,

xmlsrc – when you would like to use your own XML scheme. Only one of those options should be used and required.

elementId (required) – prepare a div element on your page, where you would like to add the gauge

gaugeId (optional) – the desired id for a gauge. It will be used for changing the gauge’s needle(s) value. If none is set ‘gauge’ id will be used.

callback (optional) – a callback function where you define the gauge’s behavior

width and height (optional) – optional parameters that can be used to define dimensions

Bindows Gauges 4.7 are compatible with previous version of commercial gauges, however order of arguments became important now, so switching to newer version make sure you are sending a list of parameters in order similar to example above.

The commercial version of the Bindows Gauges is based on the latest Bindows version and supports the latest versions of all the major browsers, including Internet Explorer 11, Firefox 38, Safari, and Chrome 43.

The Bindows Gauges Library - Commercial Version price is $49 and includes:

* The full Bindows Gauges Library kit

* Free updates to the Bindows Commercial Gauges Library for 12 months

* Free deployment on one server

The latest released version of the Bindows Gauges Library - Commercial Version is: 4.6

Today we released Version 4.2 of the Bindows commercial gauges library.
This version is based on the latest Bindows version and supports the latest versions of all the major browsers, including Internet Explorer 10, Firefox 20, Safari 5.1, and Chrome 26.

In this new version we enable two ways of using the gauges:

New Browsers (SVG) - Support for new browsers (especially Internet Explorer 9 and higher).
Since IE9 and higher supports SVG, in this option we use only SVG (and we do not use VML).
Therefore, using this option you can use doctype for newest browsers and avoid using iframe.

All Browsers (SVG + VML) - Since IE8 and previous versions of IE do not support SVG, we support them by using VML, in quirks mode. We still use SVG for Chrome, Safari and Firefox. If you want to use doctype, you will need to add an iframe for your gauge.

Existing customers of the Bindows commercial gauges library will get the updated library automatically.

Buy Bindows Gauges Library - Commercial Version

The price of the Bindows commercial gauges library is $49 and includes:

The commercial version of the Bindows Gauges is based on the latest Bindows version and supports the latest versions of all the major browsers, including Internet Explorer 9, Firefox 14, Safari 5.1, and Chrome 21.

The Bindows Gauges Library - Commercial Version price is $49 and includes:

* The full Bindows Gauges Library kit

* Free updates to the Bindows Commercial Gauges Library for 12 months

* Free deployment on one server

The latest released version of the Bindows Gauges Library - Commercial Version is: 4.1.2

Bindows 4.5 beta now includes a new data binding package.Bindows data binding is an advanced feature that provides declarative binding of data sources to components.
See the DataBindingTest (included in the package) for an example.

Customers who wish to participate in the Bindows 4.5 beta program, please contact us at sales@bindows.net.

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.

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).

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.

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:

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.

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.

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

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

Bindows web applications can be written with JavaScript and/or an XML markup language. These two languages can coexist in the same file - the ADF (Application Definition File).
XML is mostly used for the UI but can also be used for logic. Bindows JavaScript has got a very mature API documentation that you can find here.

A very common question we get in support is where the API documentation for the XML markup is.
The surprisingly simple answer is: they are the same!
You just need to learn how to convert between them.

First let’s take a look at a sub section of the API for BiCalendar.

Now let’s make a simple Ajax calendar in both languages and see how they compare.

As you can see, the class BiCalendar can also be used in the XML and the “Bi” is simply omitted. Actually it doesn’t matter if you type BiCalendar or Calendar in the XML. Bindows will accept both.
The boolean XML property “showMonthButtons” correspond to the same property in the API documentation for BiCalendar. Each property can have either a getter, setter or both. The setters are what’s being used in the markup here. In JavaScript you prefix the property name with “get” or “set” and capitalize accordingly to call either the getter or the setter.

If any of this is new to you, take a moment to browse through our ADF sample repository and see how the various classes and properties relate to the API and JavaScript.

Bindows has a great theme engine that helps in creating a consistent experience across all the components in an application. The theme can also be switched by the users on the fly which is an extra bonus. The buttons that are provided in the Bindows package follow the theme and are also very capable. They scale gracefully, support keyboard navigation, etc.

But what if you just want to use a great looking image as a button?
Maybe you are building something that looks more like a website than a standard Bindows application.
This is entirely possible with a BiButton since it’s underlying parts (backgroundFiller property) are pluggable. It is however a fair amount of work.

So, let me show you how to make a simple class that is a clickable component. It is using three images. One for each state (normal, over, down) and switches between them as the user interacts with it using the mouse. This component doesn’t have all the capabilities of a BiButton but it is simple, lightweight and can be quite useful.
Let’s start by looking at the code for the custom button class:

The above image shows the code for my custom class. It derives from BiImage since it’s easy and straightforward.
Since we know exactly how the big the button should be, and it won’t be scaled or anything like that, we can skip BiButton completely and just go with our images.

The class saves three images passed in with the constructor. These images are used for the different states. Listeners are then setup in order to toggle between the states and make sure we get the right image at the right time.

We end with a dispose method to make sure we don’t get any memory leaks.
Now let’s use that class in a small application:

I start off by creating BiUri objects for each state image that I am going to use in the constructor. Since we are passing parameters to the constructor, we will use JavaScript instead of markup. (If you want to use markup - just create properties for the three images states and set them in markup instead.)
Then it’s just a matter of adding the CustomButton object to the ApplicationWindow and trying it out.

A prominent network corporation asked us to demo how InfiView can present in a browser, a large data set, stored on a remote server, while enabling users interaction.InfiView is an Ajax Framework for Data Visualization (100% built in Bindows).

Features

* Display a graphical representation of a computer network with 40,000 nodes representing various network elements (servers, routers) connected with links
* Show two viewports, each showing different parts of the data
* Each viewport can be independently panned and zoomed
* Network elements can be moved (drag with the mouse)
* New links can be created
* Links can be created between nodes in different viewports

Implementation

The InfiView application is the view layer that runs in the browser. It uses client-side technologies like HTML, JavaScript, SVG and VML to render the graphical diagram.

The data for the network resides in a server-side database. The server exposes this data through a JSON web service interface.

We used JSON as the transfer format because it is a good fit for JavaScript web clients; However, XML could also be used.

The application takes advantage of InfiView’s memory management technology so that only the part of the network that is visible on the screen needs to be transferred over the network. As the user pans or zooms the viewport, InfiView intelligently fetches more data from the server as needed (and at the same time, releases unused data from memory).

The backend holds the network database, including the positions and properties of all the nodes, and the links between the nodes. It uses a spatial index to efficiently find all the nodes within a certain rectangle. The demo backend is implemented using the Grails framework.

If you have ever needed to put a line break into the text of a BiLabel you have probably experienced that a simple \n character doesn’t work. In this post I will show you a couple of ways you can use to control the formatting of your labels.
First let’s examine the label.

You can either put the text into the text property:

or inside the tag:

In the last example, where the text is put into the tag, you can get a line break simply by pressing Enter in your code, like this:

So far, we have been using the ”text” property of the BiLabel to give it simple text, however, we can also enter fully formatted HTML code via the HTML property, like this:

Since I had to escape the < and > characters it looks a bit messy. Obviously, if you just called setHtml from JavaScript you wouldn’t have to escape those characters like that; However, since we are now in markup land, we have to do it. If the HTML code was slightly more complicated we would need an even better way to write our HTML.

The trick is to use namespace to have nicely formatted XHTML right inside the markup, that is inside the tag.