August 24th, 2016

New Bindows Commercial Gauges Library (4.7) - Available Now0

The latest Bindows Commercial Gauges Library (version 4.7) - is available now (Bindows Commercial Gauges Library)

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:

* The full Bindows Gauges Library kit
* Free updates to the Bindows Commercial Gauges Library for 12 months
* Free deployment on one server

All customers with an active or perpetual maintenance plan can get the updated retail version directly from us.

Bindows Gauges Library 4.7

New Bindows Commercial Gauges (4.7) - Coming Soon0

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.
  • Some more nice design for gauges were developed. Check out it here
  • We have changed the way arguments are transferred. Since quite a big amount of options can be predefined, we create an optional JSON. Here is an example:

      var options = {
         type: bindows.gaugeList.CLOCK_2,
         elementId : 'gaugeDiv',
         gaugeId : 'clock',
         callback : function() {},
         width: 400,
         height: 400
      };

      bindows.loadGaugeIntoDiv(options);

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.

Updated! Bindows Commercial Gauges0

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

Buy Bindows Gauges Library - Commercial Version

Buy the Bindows Commercial Gauges Library here: Bindows Commercial Gauges

Bindows Commercial Gauges V. 4.6

Bindows 4.60

Bindows 4.6 supports the latest current versions of all major browsers, including Internet Explorer 11, Firefox 38, Safari, and Chrome 42; it also includes several new improvements and bug fixes.

For detailed description of Bindows 4.6 - http://www.bindows.net/documentation/bindows46.html

All customers with an active or perpetual maintenance plan can get the updated retail version directly from us.

The apps on the Bindows site are already updated.

Bindows 4.30

Bindows 4.3 supports the latest current versions of all major browsers, including Internet Explorer 11, Firefox 25, Safari 5.1, and Chrome 31; it also includes several new improvements and bug fixes.

For detailed description of Bindows 4.3 - http://www.bindows.net/documentation/bindows43.html

All customers with an active or perpetual maintenance plan will get the updated retail version directly from us.

The apps on the Bindows site are already updated.

InfiView 2.2 Released1

Due to changes introduced in the latest Firefox and Chrome releases we created an updated version of InfiView - version 2.2

InfiView 2.2 is based on Bindows 4.2 and supports the latest current version of all the major browsers (including Internet Explorer 10, Firefox 21, Safari 5.1, and Chrome 27).

Customers with an active maintenance plan will get the updated retail version (full) automatically.

The apps on the InfiView and Bindows sites are already updated.

To learn more about InfiView, go to www.InfiView.com

Bindows commercial gauges library, version 4.20

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 full Bindows Gauges Library kit
  • * Free updates to the Bindows Commercial Gauges Library for 12 months
  • * Free deployment on one server

Buy the Bindows Commercial Gauges Library here: Bindows Commercial Gauges

Bindows Retail Gauges V.412

Bindows 4.20

Bindows 4.2 supports the latest current versions of all major browsers, including Internet Explorer 10, Firefox 19, Safari 5.1, and Chrome 25; it also includes several new improvements and bug fixes.

For detailed description of Bindows 4.2 - http://www.bindows.net/documentation/bindows42.html

All customers with an active or perpetual maintenance plan will get the updated retail version directly from us.

The apps on the Bindows site are already updated.

InfiView 2.1.2 Released0

Due to changes introduced in Firefox 13 and Firefox 14 we created a quick update version of InfiView - version 2.1.2

InfiView 2.1.2 is based on Bindows 4.1.2 and supports the latest current version of all the major browsers (including Internet Explorer 9, Firefox 14, Safari 5.1, and Chrome 21).

Customers with an active maintenance plan will get the updated retail version (full) automatically.

The apps on the InfiView and Bindows sites are already updated.

To learn more about InfiView, go to www.InfiView.com

Bindows Commercial Gauges Library0

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

Buy Bindows Gauges Library - Commercial Version

Buy the Bindows Commercial Gauges Library here: Bindows Commercial Gauges

Bindows Retail Gauges V.412

Bindows 4.1.20

Due to changes introduced in Firefox 13 and Firefox 14 we created a point-update version of Bindows - version 4.1.2

All customers with an active or perpetual maintenance plan will get the updated retail version directly from us.

The apps on the Bindows site are already updated.

InfiView 2.1.11

Due to changes introduced in Firefox 11 we created a quick update version of InfiView - version 2.1.1

Customers with an active maintenance plan will get the updated retail version (full) automatically.

The apps on the InfiView and Bindows sites are already updated.

Bindows 4.1.18

Due to changes introduced in Firefox 11 we created a quick update version of Bindows - version 4.1.1

Customers with an active maintenance plan will get the updated retail version directly from us.

The apps on the Bindows site are already updated.

Bindows 4.5 beta0

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.

Bindows Data Binding

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.

API docs for Bindows XML Markup1

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.

APIdoc.png

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

JavaScript vs XML

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.

I hope you found this useful.

How to use images as buttons in Bindows0

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:

CustomButton.js

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:

CustomButtonTest.xml

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.

Good luck with your buttons.

You can download the complete sample here: CustomButton.zip.

Go ahead and try the application here.

40,000 interactive nodes in a browser!
Enterprise data visualization with InfiView
6

Click to run

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

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:

text in property

or inside the tag:

text in 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:

line break in tag

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:

block quotes

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:

namespace

Then, we can use it like this:

xhtml label code

The result of the above code would look like this:

xhtml result

Good luck and enjoy your formatting!

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