Bindows Blog

Bindows 4.30
Ran posted in Developing in Bindows on November 27th, 2013

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
Ran posted in Developing in Bindows, InfiView on May 24th, 2013

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
Ran posted in Bindows Gauges, Developing in Bindows on April 4th, 2013

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 4.20
Ran posted in Developing in Bindows on March 25th, 2013

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.

Bindows 4.1.20
Ran posted in Bindows Clients, Developing in Bindows on July 24th, 2012

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
Ran posted in Developing in Bindows, InfiView on April 19th, 2012

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
Ran posted in Bindows Clients, Developing in Bindows on March 20th, 2012

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
Ran posted in Beta Programs, Developing in Bindows on February 16th, 2012

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.

How to specify column widths using percentages in Bindows tree views2
Johan Lund posted in Developing in Bindows, JavaScript on March 21st, 2011

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.

How to dynamically update Bindows gauges1
Johan Lund posted in Bindows Gauges, Developing in Bindows on March 11th, 2011

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.

Click here to run the application.

API docs for Bindows XML Markup1
Johan Lund posted in Developing in Bindows on December 15th, 2010

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.

I hope you found this useful.

How to use images as buttons in Bindows0
Johan Lund posted in Developing in Bindows, JavaScript on December 9th, 2010

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.

Good luck with your buttons.

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

Go ahead and try the application here.

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/

How to create a 3-State Checkbox3
Johan Lund posted in Developing in Bindows on October 28th, 2010

Our wonderful users requested us to develop a Three State Checkbox component, and we (of course) complied and added it into Bindows 4.1. The new UI component is called BiThreeStateCheckBox (3CB), and it looks like this:

The 3CB (sometimes referred to as a tri-state checkbox) is basically a checkbox with an extra state. If you count the disabled state it actually has four states.

Two examples of situations where you might need such a control:

• To indicate that the user has not yet made a choice (undetermined state)
• To indicate a partial state. E.g. In a file tree, whether some, all, or no files have been selected in one of the subtrees.

Usage

A user can check and uncheck the 3CB just like a normal checkbox. In Bindows, we call the middle state the undetermined state. You can only get to this state by setting it programmatically from JavaScript. The 3CB inherits from the standard BiCheckBox class, which in turn inherits from BiComponent. This gives you a multitude of options.

The checkbox is pretty easy to setup and use. In the AppLauncher (http://www.bindows.net/bindows/samples/applauncher/) check out the 3CB sample application, called ThreeStateCheckBoxTest.xml.
The application is simple and looks like this.

The code for this sample is pretty straightforward:

Usability considerations

I have seen some implementations of 3CB’s that allow the user to toggle to the middle state. This is generally not a good idea. If, for example, the user can choose between three mutably exclusive colors, e.g. red, blue and green, then there are better controls for this. You have to remember that a three state checkbox does not visually present all the possible options that the user can choose from. Also keep in mind that if a user has to go from the first state to the third, he might have to pass through the second state which may or may not be natural. It might also not be immediately apparent that the checkbox has more than two states.

In most cases, checking a checkbox should not perform actions immediately. It could very well turn on a setting immediately but it shouldn’t, for example, delete a file. Users are used to being able to check/uncheck checkboxes safely then pressing a button that performs the action on the selected items.

Finally, here is a link to the API documentation for this component.
(http://www.bindows.net/bindows/docs/api/BiThreeStateCheckBox.html)

How to create a collapsible panel in Bindows1
Johan Lund posted in Developing in Bindows on October 20th, 2010

In Bindows 3 we introduced animations and in Bindows 4 we included a component that draws power from those animations - BiCollapsiblePanel (BCP).

The collapsible panel is a graphical component that you can fill with any other BiComponent and that can be folded and unfolded with an animation. These types of components are becoming increasingly more popular as it allows the user to simply hide parts of the application that are not needed at a given time.

Anatomy of a collapsible panel

Caption
The caption can be customized so that when it is clicked it acts like a collapse button. Another useful feature is that using the code you can hide the background gradient, without having to hack the theme. All that is left is the title. This can be used (e.g.) for displaying a news headline, when the user clicks on it the text body unfolds. The caption is its own class ”BiCollapsiblePanelCaption”. The BCP delegates work to it but you can also gain direct access to this class and set properties on it. You could for example get hold of the BiLabel that is the caption label and change it to display nicely formatted html, or supply an icon to the BiLabel. Keep in mind that the height of the caption is limited to a single row.

Title
The title can be aligned left, right or center. If you don’t want a title, simply supply it with an empty string.

Collapse button
The collapse button can be aligned left or right. It displays different images based on the current alignment and fold state of the BCP itself. It isn’t strictly needed since you can configure the panel to close on caption click so it can also be removed completely.

Content panel
This is where you put the components that you want inside the BCP. Although this is a sub component you can simply add components to the BCP itself and the ”add” method call will be delegated to the content panel automatically.

Alignment / Orientation

A BCP can be aligned left, right, top or bottom. These alignments (also referred to as ”orientations”) are named west, east, north and south. Technically you can put a BCP anywhere you want. The orientation setting simply specifies in which direction the panel will open and how the arrows on the collapse button will look. It’s up to you to tell it the way you want it to open.

Other options

The BCP can of course be collapsed and expanded programmatically. We call this ”fold” and ”unfold”. You can also control the animation object and tweak the speed and easing curve for how the panel animates. A convenience method, available in the BCP itself allows you to set the speed without getting into the animation object. There are also events that trigger before the panel is about to fold and unfold, or when the panel has completed folding and unfolding. This is useful if (for example) you want to populate the panel with a different UI right before it opens or be notified when a user has opened the panel.

Limitations, Gotchas

Perhaps the biggest limitation of the BCP right now is that you cannot put your own buttons in the caption bar.

If you place your BCP inside a layout manager such as BiBox (extremely useful) you might have to call ”pack” on the BCP to get it to recalculate its preferred size based on it’s children.

Since the BCP uses the Bindows animation framework, you need to include the ”Animation” package in the ”Resources” section of your ADF before you can use them. Just check the samples if you are unsure on how to do this.

XML Code

Although BCP’s can be created entirely from JavaScript code I’m going to briefly touch on what they look like in XML markup.

<CollapsiblePanel title="Click me" width="150" height="150" orientation="north"
top="0" left="200" backColor="#EBEBEB">
	<Label text="Hello World"/>
</CollapsiblePanel>

As you can see it’s pretty easy to understand. This panel unfolds from the top down. Note that the backColor can be set directly on the BCP and common properties like this one are delegated to the content panel automatically. Then it’s just a matter of nesting the UI that you want inside its tags.

If you want to see more code samples and take the BCP for a spin, Bindows comes with two sample applications that demonstrate many of the features and customizations of the BCP. These files are called CollapsiblePanelTest.xml and CollapsiblePanelTest2.xml and you can find them in the ”test” folder or in the AppLauncher (http://www.bindows.net/bindows/samples/applauncher/).

Also don’t forget to check out the API of both BiCollapsiblePanel: http://www.bindows.net/bindows/docs/api/BiCollapsiblePanel.html

and BiCollapsiblePanelCaption: http://www.bindows.net/bindows/docs/api/BiCollapsiblePanelCaption.html.

Bindows 5 = HTML52
Ran posted in Developing in Bindows, JavaScript, Uncategorized on May 26th, 2010

Coming soon in a browser near you!

Oracle/Hyperion Customers - Support for IE8 and Firefox 3.60
Ran posted in Bindows Clients, Bindows Global Partnership Program, Developing in Bindows, In the press, Marketing, Special Pricing on May 14th, 2010

Hyperion web software is making use of our Bindows technology.
Several Oracle/Hyperion customers contacted us, complaining that their systems do not run in IE8.
Oracle/Hyperion systems that use Bindows 3.0 - this version of Bindows does not support IE8 and Firefox 3.6 (however, Bindows 4.1 does support them).

Several suggestions have been posted on the web showing how to modify Bindows 3.0 files to enable such support.
Those suggestions are not accurate and not complete.

WARNING: Modifying and using modified Bindows files without a license is illegal and constitutes a Copyright Infringement.

We have developed a solution that enables applications using Bindows 3.0 to operate in IE8 and Firefox 3.6.
The solution has been tried and tested - references available upon request.
The solution includes a license that allows using the files that we provide.

Price
The complete solution includes:
* Several Bindows files, modified by us that enable running Bindows 3.0 in IE8 and Firefox 3.6.
* A license for your company to use the files we provide.
* Support is not included (can be purchased separately).

Price starts at $5,000 for the first CPU, quantity discounts available (if you are located in GA local sales tax will be added).

Contact
General Information: info@bindows.net
Partners: ran@bindows.net
Sales: sales@bindows.net

Bindows 4.1 beta - Released Today0
Ran posted in Beta Programs, Developing in Bindows on January 14th, 2010

Today we start the Bindows 4.1 beta program.

This beta program will test several new features (key bundles, collapsible panel, threestate checkbox) and additional improvements.
For more details: http://www.bindows.net/documentation/Bindows41Beta.html .

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

Bindows Tools - New plugin for IntelliJ IDEA 90
Ran posted in Developing in Bindows on October 27th, 2009

As many of you might already know we have a plugin out there called ”Bindows Plugin”, that help with development of Bindows applications in IntelliJ IDEA. JetBrains changed a number of things in IntelliJ IDEA 8 which broke our plugin. To be honest, we haven’t had the time to fix it and soon IntelliJ IDEA 9 will be released with even more changes introduced. Most notably, JetBrains dropped its support for internal browser windows and we used several of those in the Bindows Plugin.

So we built a new plugin from scratch. It’s called Bindows Tools and you install it normally from the plugin manager inside IntelliJ IDEA. It is a facet that you attach to your project module and includes features such as:

- live templates
- code completion for Bindows xml
- ADF launcher
- support for switching between multiple Bindows distributions (or toolkits as we call them now)
- customizable html launcher files also allows for launching InfiView applications
- cross platform support (Windows, Mac and Linux)
- multiple browsers support

In addition to this, JetBrains has added some great new JavaScript and Bindows aware features since IntelliJ IDEA v7.

To try the plugin, download IntelliJ IDEA v9 ultimate (ideaIU-90.xxx).
The pre-release version can be found here: http://www.jetbrains.net/confluence/display/IDEADEV/Maia+EAP

The plugin homepage in JetBrains plugin repository is here: http://plugins.intellij.net/plugin/?id=4503

And our page with information about the plugin can be found here:
http://www.bindows.net/documentation/tools/intellij_plugin/