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.

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.

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.

This version is based on Bindows 4.0 and includes several major additions:
- Support for WebKit browsers (such as Safari-4 and Chrome)
- Support of IE8
- Support for nested groups
- Support for external resources
- Simplified launcher format
- New event actions

You can download a free evaluation package at: http://www.infiview.com/download/
Customers with covered maintenance will receive the full retail version automatically.

The review covers our release of three new products: Bindows gauges library toolkit, BindowsFaces, and the Bindows 4.0 Beta.

Regarding Bindows FREE gauges library toolkit - InfoWorld appreciates the facts that the toolkit is completely free, and comes with a gauge wizard and a free subset of the Bindows Ajax library. The gauges are done with vector graphics and are fast enough to be used for soft real-time displays. Try it out online yourself.

The BindowsFaces library, as you might guess from the name, brings Bindows-based Ajax capabilities to Java through JSF. It’s for Java Faces programmers who’d prefer not to get their hands dirty with JavaScript or go through a compilation step. Martin quotes us “BindowsFaces is better than GWT or Oracle ADF.” Obviously, we are biased

Moving on to Bindows 4.0 beta “probably makes Bindows the most advanced professional Ajax framework in the market,” according to the Meriazes. One of primary design goal of Bindows 4.0 is to add the “ability to define a fully working application without writing a single line of JavaScript.” To join the 4.0 beta program, contact sales@bindows.net.

Bindows™ 4.0 (beta) introduces the ability to define a fully working application without writing a single line of JavaScript.
This version introduces several several new concepts along with hundreds of improvements and bug fixes. Some of the main features in this version are:

Use BindowsFaces if you are:
* Developers creating enterprise strength web applications.
* Java developers that do not want to engage in JavaScript “hacking”.
* Bindows programmers that want to expand into and leverage JSF technologies.

Why use BindowsFaces
* Most JSF based frameworks in the market provide the client side components as an afterthought - their client side is quite weak.

* BindowsFaces provides Java developers with a market leading client-side component model, built from the ground up with TRUE object-oriented Ajax.

* Bindows is famous for being full, rich and mature (probably the richest Ajax framework). Bindows also provides the best in market support for developing Section-508 accessible web applications.

Benefits

1. BindowsFaces shields the developer from the complexities of JavaScipt cross-browser programming.

2. BindowsFaces enables you to create full fledged Bindows applications using only JSF.

3. The Bindows legacy provides you with access to the most robust, mature and rich Ajax components (the richest components library) on the market.

4. You (the developer) have full control of how to distribute execution loads between the client and the server. Let the client do 99% of the work - drastically reduce server load and bandwidth utilization.

5. Creation of the client application can be fully automated by the use of XML.

You can use the library to add vector-graphics based, Ajax-enabled gauges to any HTML page. The Bindows free gauges toolkit includes:
* A set of predefined sample gauges.
* An online wizard to easily create and personalize your gauge.
* A non exclusive licence to freely use and distribute gauges based on the library.
* A lightweigth Bindows™ distribution, tailored for use with this library.

The gauge library has been tested with Firefox 2.0.0.9 and IE 5.5+.

The package is provided free of charge, without any warranty and without any commitment for support.

InfiView uses Ajax technology and its own unique dynamic memory management to enable developers to systematically create graphical web applications using any amount of data (from very small all the way to infinite). With InfiView-built web-applications, end-users seamlessly interact (pan, zoom, right-click for actionsâ€¦) with all types of graphical data - such as network topologies, DNA sequences or genealogy charts - oblivious to the vast amounts of data available.

“People need to see data in the form of charts and diagrams in order to understand it,” said Yoram Meriaz, CEO at MB Technologies. “Up until now, there has not been a systematic solution for zero footprint diagramming. MB Technologies solved this problem by identifying shared mathematical characteristics behind each of these elements. InfiView is the framework that we built on top of this foundation to enable developers to expedite time to market with infinitely scalable graphical applications.”

Firebug is a marvelous tool to help in development with Bindows. As it is closing in on the full 1.0 release there are some truly impressive features included such as profiling of javascript code and monitoring of network activity.

There is a special version which works in IE, Firefox and Opera called Firefox Lite which opens up for easy debugging in those platforms also.

It is also possible to edit and visualize CSS and HTML-information live in the browser to tailor different properties and much much more…

Unfortunately the Firebug debugger is not (yet?) capable of showing javascript code which is loaded dynamically using the XMLHttpRequest. All references are made to the included script which has loaded the script.

According to a survey conducted by LeJournalduNet, a popular IT
publication in France, Bindows dominates the Ajax platform market in France with 44%
market share. Other frameworks included in this survey were Prototype,
Dojo, Yahoo! and Backbase.

“France is becoming an Ajax power and Bindows is taking off all over Europe,” said
Ran Meriaz, MB Technologies president, in response to this survey.

“Bindows is a serious tool for serious software. Bindows leads the market by offering the richest toolset for generating
large-scale, complex enterprise applications using object oriented programming, a Windows look-and-feel and excellent Internationalization.”

Working with the Bindows product has been an exciting trip so far. With the introduction of SVG-support in Firefox 1.5 we were given the opportunity to draw vector graphics in both Internet Explorer (VML) and Firefox (SVG).

Abhinav Pobbati started working on a sort of graphing tool for a customer and I recently got the opportunity to help him further develop the concept. Now, we have an early demonstration of this simple graph tool which renders its graphics using VML in Internet Explorer and SVG in Firefox, all within the Bindows framework.

The demonstration contains several elements which can be dragged around on the screen. The elements are linked using lines which can be right clicked to show a context menu. Everything with a beautiful pastel coloured background!

In Internet Explorer, memory usage has a severe impact on performance. As memory utilisation rise, performance decrease. Also in comparing strings vs comparing variables huge benefits can be found. Here is a simple test that illustrates the behavior: