October 30th, 2014

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 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)

Bindows 5 = HTML52

Coming soon in a browser near you!

InfiView 2.1 Released0

We are happy to release InfiView 2.1 today.

The major improvement in InfiView 2.1 is that it is built on Bindows 4.1 which supports the latest versions of all the major browsers, including IE8, Firefox 3.6, Safari 4, and Chrome.

Read more about this version at:
http://www.infiview.com/dev/infiview21.html.

For a limited time, the InfiView Framework Developer’s Kit is provided for FREE (not including source code).
To download it go to: http://www.infiview.com/download/

Customers with covered maintenance will receive the full retail version (including source code) directly.

3rd Movie - Infinite Memory0

A cool, short movie describing InfiView’s unique memory management technology.

InfiView - Infinite Memory Feature Presentation from infiview on Vimeo.

If you like it, please share with others (blog, tweet, email, etc.)

And don’t forget, the InfiView Developer Kit is still provided for FREE.
Don’t miss on this special!
Just go to www.InfiView.com and click on the Download button.

Enjoy :)

New Movie - The InfiView Layers0

A cool, short movie describing the capabilities of InfiView’s Layers technology.

Watch it at: http://www.youtube.com/watch?v=ep21_JIJP44

If you like it, please share with others (blog, tweet, email, etc.)

And don’t forget, the InfiView Developer Kit is still provided for FREE.
Don’t miss on this special!
Just go to www.InfiView.com and click on the Download button.

Enjoy :)

InfiView 2.0 Beta - Released Today2

Today we proudly introduce InfiView 2.0 beta (http://www.infiview.com/).

This version is based on Bindows 4.0 and includes several major additions:
- Support for WebKit browsers (such as Safari-4 and Chrome)
- Support of IE8
- Support for nested groups
- Support for external resources
- Simplified launcher format
- New event actions

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

InfiView logo

Three New Products from the Bindows Folks - InfoWorld Review0

Read the excellent review in InfoWorld by Martin Heller (Strategic Developer).
InfoWorld Review.

The review covers our release of three new products: Bindows gauges library toolkit, BindowsFaces, and the Bindows 4.0 Beta.

Regarding Bindows FREE gauges library toolkit - InfoWorld appreciates the facts that the toolkit is completely free, and comes with a gauge wizard and a free subset of the Bindows Ajax library. The gauges are done with vector graphics and are fast enough to be used for soft real-time displays. Try it out online yourself.

The BindowsFaces library, as you might guess from the name, brings Bindows-based Ajax capabilities to Java through JSF. It’s for Java Faces programmers who’d prefer not to get their hands dirty with JavaScript or go through a compilation step. Martin quotes us “BindowsFaces is better than GWT or Oracle ADF.” Obviously, we are biased :)

Moving on to Bindows 4.0 beta “probably makes Bindows the most advanced professional Ajax framework in the market,” according to the Meriazes. One of primary design goal of Bindows 4.0 is to add the “ability to define a fully working application without writing a single line of JavaScript.” To join the 4.0 beta program, contact sales@bindows.net.

Thanks Martin for a great review!

Bindows 4.0 (beta)0

Bindows™ 4.0 (beta) introduces the ability to define a fully working application without writing a single line of JavaScript.
This version introduces several several new concepts along with hundreds of improvements and bug fixes. Some of the main features in this version are:

* Actions - managed asynchronous execution threads
* Name Scopes - makes creating reusable components a breeze
* ADF XML - Custom classes can be defined in pure ADF XML, both UI and simple business logic.
* BindowsFaces™ - enabling JSF to produce full Bindows applications.

Beta Program
To join the 4.0 beta program, please contact sales@bindows.net

Read all about it: http://www.bindows.net/documentation/40/

BindowsFaces(TM)0

BindowsFaces is a components library that enables programmers create powerful Ajax web applications using Java - through JSF.

Use BindowsFaces if you are:
* Developers creating enterprise strength web applications.
* Java developers that do not want to engage in JavaScript “hacking”.
* Bindows programmers that want to expand into and leverage JSF technologies.

Why use BindowsFaces
* Most JSF based frameworks in the market provide the client side components as an afterthought - their client side is quite weak.

* BindowsFaces provides Java developers with a market leading client-side component model, built from the ground up with TRUE object-oriented Ajax.

* Bindows is famous for being full, rich and mature (probably the richest Ajax framework). Bindows also provides the best in market support for developing Section-508 accessible web applications.

Benefits

1. BindowsFaces shields the developer from the complexities of JavaScipt cross-browser programming.

2. BindowsFaces enables you to create full fledged Bindows applications using only JSF.

3. The Bindows legacy provides you with access to the most robust, mature and rich Ajax components (the richest components library) on the market.

4. You (the developer) have full control of how to distribute execution loads between the client and the server. Let the client do 99% of the work - drastically reduce server load and bandwidth utilization.

5. Creation of the client application can be fully automated by the use of XML.

6. Utilize industry standard Java development tools featuring code completion, unit testing etc.

7. The underlying Ajax library is object oriented - very similar to Java and Swing which should make the transition swift and painless for a large portion of the developer community around the world.

8. Cross-browser compatibility and zero-foorprint.

9. Enables an application flow on the client side with actions and events. No need to send an entire HTML page just to change one pice of data.

10. We use true Ajax! No hidden frames…

TERMS:
* To run the BindowsFaces you need Bindows 4.0 (beta).
* The BindowsFaces package is provided FREE of charge, without any warranty and without any commitment for support.

For more information, please goto: http://www.bindows.net/BindowsFaces/

Bindows FREE Gauges Library0

We are proud to release the Bindows gauges library toolkit.

You can use the library to add vector-graphics based, Ajax-enabled gauges to any HTML page. The Bindows free gauges toolkit includes:
* A set of predefined sample gauges.
* An online wizard to easily create and personalize your gauge.
* A non exclusive licence to freely use and distribute gauges based on the library.
* A lightweigth Bindows™ distribution, tailored for use with this library.

The gauge library has been tested with Firefox 2.0.0.9 and IE 5.5+.

The package is provided free of charge, without any warranty and without any commitment for support.

Check it out at Bindows Ajax Gauges Library.

Sample of 2 Bindows gauges - CLICK to see them live (moving) - notice that the clock always shows your local time

Sample of two Bindows gauges - CLICK the gauges to see them live (moving) and notice that the clock always shows your local time

MB Technologies’ InfiView(TM) - 1st Ajax Development Platform for Graphical Web Applications0

AJAXWORLD, New York, NY March 21, 2007 — MB Technologies(TM) announced today the release of InfiView, the first development platform for creating interactive and dynamic graphical Ajax applications. InfiView advances the move toward web-based software by enabling developers to build infinite-sized Web 2.0 mind maps, network topologies, organization charts, LDAP tools and technical diagrams.

InfiView uses Ajax technology and its own unique dynamic memory management to enable developers to systematically create graphical web applications using any amount of data (from very small all the way to infinite). With InfiView-built web-applications, end-users seamlessly interact (pan, zoom, right-click for actions…) with all types of graphical data - such as network topologies, DNA sequences or genealogy charts - oblivious to the vast amounts of data available.

“People need to see data in the form of charts and diagrams in order to understand it,” said Yoram Meriaz, CEO at MB Technologies. “Up until now, there has not been a systematic solution for zero footprint diagramming. MB Technologies solved this problem by identifying shared mathematical characteristics behind each of these elements. InfiView is the framework that we built on top of this foundation to enable developers to expedite time to market with infinitely scalable graphical applications.”

Read the press release at: http://www.prweb.com/releases/2007/3/prweb513256.htm
The InfiView site is: http://www.InfiView.com

Firebug is released as v1.0 beta2

Firebug is a marvelous tool to help in development with Bindows. As it is closing in on the full 1.0 release there are some truly impressive features included such as profiling of javascript code and monitoring of network activity.

There is a special version which works in IE, Firefox and Opera called Firefox Lite which opens up for easy debugging in those platforms also.

It is also possible to edit and visualize CSS and HTML-information live in the browser to tailor different properties and much much more…

Unfortunately the Firebug debugger is not (yet?) capable of showing javascript code which is loaded dynamically using the XMLHttpRequest. All references are made to the included script which has loaded the script.

Go check it out at http://www.getfirebug.com and support the guy who is making this very useful tool!

French Survey: 44% use Bindows as their JavaScript Framework3

According to a survey conducted by LeJournalduNet, a popular IT
publication in France, Bindows dominates the Ajax platform market in France with 44%
market share. Other frameworks included in this survey were Prototype,
Dojo, Yahoo! and Backbase.

“France is becoming an Ajax power and Bindows is taking off all over Europe,” said
Ran Meriaz, MB Technologies president, in response to this survey.

“Bindows is a serious tool for serious software. Bindows leads the market by offering the richest toolset for generating
large-scale, complex enterprise applications using object oriented programming, a Windows look-and-feel and excellent Internationalization.”

Vive le Bindows :)

A peek into the Bindows future… Bindows Vector Graphics (BVG)4

Linkdemo Screenshot

Working with the Bindows product has been an exciting trip so far. With the introduction of SVG-support in Firefox 1.5 we were given the opportunity to draw vector graphics in both Internet Explorer (VML) and Firefox (SVG).

Abhinav Pobbati started working on a sort of graphing tool for a customer and I recently got the opportunity to help him further develop the concept. Now, we have an early demonstration of this simple graph tool which renders its graphics using VML in Internet Explorer and SVG in Firefox, all within the Bindows framework.

The demonstration contains several elements which can be dragged around on the screen. The elements are linked using lines which can be right clicked to show a context menu. Everything with a beautiful pastel coloured background! :)

Try it out!

We plan to name this feature Bindows Vector Graphics (BVG) and we would love to get any comments and suggestions you may have.

IE performance hints4

In Internet Explorer, memory usage has a severe impact on performance. As memory utilisation rise, performance decrease. Also in comparing strings vs comparing variables huge benefits can be found. Here is a simple test that illustrates the behavior:

function test() {
var i;
var ic0 = 100000; // change this to affect memory use
var ic1 = 100000;
var o = {};
var s0=”test”;
var s1 =”test”;
var g,d0,d1,r0,r1
// 1: use up some memory
for ( i = 0 ; i < ic0 ; i++ ) {
o[i] = 1;
}
// 2: compare run 0
d0 = new Date();
for( i = 0 ; i < ic1 ;i++ ) {
g = (s0==”test”);
}
r0 = new Date() - d0;
// 3: compare run 1
d1 = new Date();
for( i = 0 ; i < ic1 ;i++) {
g = (s0==s1);
}
r1 = new Date() - d1;
alert(
“compare run 0 : ” + r0 + “ms\n” +
“compare run 1 : ” + r1 + “ms”
);
}
test();

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