Bindows Blog

40,000 interactive nodes in a browser!
Enterprise data visualization with InfiView6
Ran posted in InfiView, JavaScript on November 29th, 2010

http://infiview.labs.bindows.net

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.

Got questions or comments? please contact me (ran @ bindows.net)

How to break lines and format labels4
Johan Lund posted in Developing in Bindows on November 10th, 2010

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.

First, let’s declare the namespace in the application tag:

Then, we can use it like this:

The result of the above code would look like this:

Good luck and enjoy your formatting!

How to use KeyBundles in Bindows2
Johan Lund posted in Developing in Bindows on November 3rd, 2010

Bindows has many built in behaviors that trigger when a user is pressing a key. A great example is a selection model that gives you the ability to select and deselect, multiple and discontinuous items in a list. For many years Bindows has modeled its behavior and copied all the keyboard shortcuts from the Windows environment. But hard coded keyboard shortcuts are no longer a viable solution in a changing landscape. Mac users use the Command key instead of the Control key and Control+Click equals right click on the Mac. Sometimes developers/users don’t agree with more esoteric shortcuts such as F2 for editing a tree item. Language reasons could be another motive for having different shortcuts. For example the word ”Bold” in English systems has the keyboard shortcut Ctrl+B while in Swedish it’s called ”Fetstil” and the shortcut Ctrl+F is used. New versions of accessibility software such as JAWS have also been known to introduce new conflicting shortcuts. We need a central location for keeping and easily maintaining these keyboard shortcuts. Up until now, if a keyboard shortcut was implemented in Bindows you had to override methods in Bindows in order to change it. Knowing which methods, and how, wasn’t always straight forward. That’s why we have implemented ”key bundles” in Bindows 4.1.

BiKeyBundle & C.O

Starting with Bindows 4.1 there are no hard coded keyboard shortcuts scattered across the code anymore. Instead, we have the BiKeyBundle object that contains many BiKeystroke objects, which in turn are used internally by Bindows. The BiKeyBundle object is serialized from a file called DefaultKeyboardBundle.js at startup. If you want to change the default shortcuts you can make your own version of DefaultKeyboardBundle.js and overwrite the one that comes with Bindows. Another option - create a small file with the few shortcuts you want to add or change, and merge it with the default bundle.

A keybundle file is a simple associative array that BiKeyBundle understands. You can include it in your application in several ways. I think it would be best to look at an example.

1. Here the shortcut keys have been put straight into the ADF. Because the ”merge” property hasn’t been set it, will default to overwrite. This actually means that the DefaultKeboardBundle won’t load at all which means that Bindows will only know about the shortcuts you specified here and nothing else. For this little application it is fine, and it will actually get rid of some bloat. The keystrokes consist of an identifier, that is associated with a behavior in some Bindows components, and the actual keys that will trigger it. Some actions can also be triggered by multiple keys. All the keystrokes in the first example belong to a section called ”keystrokes”. You don’t actually have to specify it as it is the default section. There are other sections such as the ”modifiers” which is used together with mouse clicks. You are welcome to snoop around in the DefaultKeyBundle.js for more info, if you are interested.

2. Actually the same as the first section but this time using ”merge” so we do not destroy what we did in section one. Also note that we omitted the ”keystrokes” section here.

3. This time we merge changes that we load from a json file called KeyBundleTest_overrides.json. The file is simplistic in nature.
To see if Ctrl+P (defined as custom.key in the json file) was pressed, you ask the event if the key pressed matched that identifier by using the ”e.matchesBundleShortcut” method.

API
http://www.bindows.net/bindows/docs/api/BiKeyBundle.html
http://www.bindows.net/bindows/docs/api/BiKeystroke.html

Sample Application (KeyBundleTest.xml)
http://www.bindows.net/bindows/samples/applauncher/