July 22nd, 2014

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!

How to use KeyBundles in Bindows2

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.

Bindows KeyBundle code

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.

keybundletest.png

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

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:

Bindows BiThreeStateCheckBox

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.

Bindows 3CB Sample

The code for this sample is pretty straightforward:

3CB Code

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

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

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.

bicollapsiblepaneltest.png

bicollapsiblepaneltest2.png

Instant forum for your site0

See the BarracudaDrive Bulletin Boardpowered-by-bindows-5.png

A turnkey solution - add a Forum to your site

The BarracudaDrive Bulletin Board, provided by Real_Time_Logic is a free application delivered with the BarracudaDrive Web Server.

The BarracudaDrive Bulletin Board is powered by Bindows “zero-footprint” Rich Internet Application framework.

The bulletin board, which is designed using cutting edge web-technology, looks and behaves more like a traditional Windows application than a web application.

To see the BarracudaDrive Bulletin Board: http://barracudaserver.com/products/BarracudaDrive/BulletinBoard.lsp

No technical experience is needed

The free bulletin board requires no installation or configuration. The BarracudaDrive Web Server’s integrated database engine makes it possible for us to deliver a zero configuration bulletin board — i.e. there is no need for you to install a database and connect the bulletin board to the database.

The Bulletin Board is one of five plugins delivered with the BarracudaDrive Web Server.

Advantages

  • Fast
    After the initial load, the bulletin board is extremely fast since the bulletin board is using web services when communicating with the server. Traditional bulletin boards must send the whole page content to the client every time the user interacts with the bulletin board. In contrast, our bulletin board only sends the changed content, making it very fast even on slow network connections. One can easily host a high volume forum from a home computer with a DSL connection.
  • Spam Prevention
    Many bulletin boards, such as phpBB, get infested with spam. Spammers use automated computer programs to: trawl the internet for public bulletin boards, automatically register with the bulletin boards found, and infest the bulletin boards with spam. Since our bulletin board is using web-services, a spammer would have to write a very sophisticated program in order to spam the BarracudaDrive bulletin board. In addition, our bulletin board includes an optional spam filter that forces new users to play a hangman game and prove they are human beings and not spam machines before they can register.
  • Private or Public Forum
    With one button click, you can select a public forum or a private forum that can only be accessed by users with a valid BarracudaDrive user account. See our blog for articles and tips for how you can manage your bulletin board.

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