October 21st, 2014

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.

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