Asynchronous loading of localized data files, or how to check if a file exists without actually reading it
At a first glance, reading data files in Flex is easy. But sometimes things which seem simple (and should be simple!) actually prove to be tricky... I would like to share my experience in this area, hoping it may be of some help to others.
The problem to solve
Let's start with a description of a set of development requirements:
The above requirements look quite analogous to those of the Flex mechanism for dealing with resource bundles for the localization of Strings in ActionScript or MXML, for which Flex provides already everything you need (see Using resources in Flex documentation). Furthermore, we do want a similar policy for loading localized data files as the one Flex uses for loading resource bundles for a given locale chain:
The Flex application uses the list of locales in the localeChain property (of ResourceManager) to determine precedence when getting values from resource bundles. If a value does not exist in the first locale in the list, the Flex application looks for that value in the next locale in the list, and so on. (citation from Flex documentation)
But this resource bundle mechanism does not apply (at least not directly) to the loading of data files. So let's try to implement it by our own. At a first glance, it should be a piece of cake:
Fine. But for our purpose we need to iterate over URLs with relative parts such "dat
So, these APIs offer several means to detect either a loading failure, or a loading success. Can we just rely on just one of them in all cases? Testing in various cases brought a negative answer... The behavior of these APIs varies from one testing platform to another, for reasons such as design or implementation choices or bugs in Flex/Flash, variety of behaviors of browsers and webservers. All in one, I had to use a combination of the means mentioned above to be able to put in place an utility function which works in all the use cases that we tested.
Examples of behaviors which are browser-dependent:
The sample application uses the utility function Asyn
Here is how the sample application looks like:
In this example, the log shows the execution traces corresponding to the loading in Internet Explorer 9 of a data file which is available for the second locale in the locale chain, but not for the first locale. The important point is that, as you can see, the execution sequence includes, for Internet Explorer (at least 8 and 9), an event of type "open" even for a file which does not exist! This does not hold for Chrome or Firefox, but it means we can't blindly consider that a file exists just because we received an "open" event! As a matter of fact, the loading goes differently depending on web browsers, and potentially Flex and Flash versions (see the Adobe bug mentioned above), and web servers (which may react differently to requests for unavailable resources). The utility aims to cope with a variety of behaviors while detecting as soon as possible whether a file exists or not for a given locale. There is no theoretic guarantee that it works optimally in all possible cases, but it has been successfully tested on all the combinations of OS and browser supported by Flash Player 10.3 (recent versions of Chrome, Firefox, Internet Explorer, Opera, Safari, on Windows, Linux, and Mac OSX systems).
You can run the sample application by clicking here. To view the source code, right-click anywhere in the application and press "View Source".
The only new module of Elixir 3.5 is the microcharting module (a.k.a. "Sparklines").
According to the user manual available online:
Since microcharts are based on the Spark architecture, let's see how to modify the skin of the component to:
To display the last value, we use host
Everything else is styling. In this example, the chart (rendered by the <ibm
Here is the result:
Click here to download the source code.
Comments (3) Visits (5958)
If you are like me used to read online documentations more often than the ones installed on your disk, I have a good news for you. Indeed the IBM ILOG Elixir Enterprise 3.5 documentation can now be found online at the following url: http
IBM ILOG Elixir® Enterprise extends the Adobe® Flex® and Adobe AIR™ platforms by adding user interface controls for more intuitive, interactive displays. ILOG Elixir Enterprise provides a full spectrum of advanced graphical displays for the most demanding line-of-business applications.
New graph layout algorithm: Circular layout
Circular Layout is designed for graphs representing interconnected ring and/or star network topologies, as in the following example:
Improved layout of nested graphs thanks to a new mode of Hierarchical Layout
In the previous release, it was necessary to use a combination of "node layout" and "link layout" in
order to lay out a nested graph including intergraph links (links that connect nodes from different subgraphs).
In Elixir 3.5, Hierarchical layout has been improved with a recursive mode such that it can handle by itself an
entire nested graph. This simplifies user's task for configuring the layout: no link layout is needed anymore.
Moreover, it improves the quality of the layout, because instead of optimizing the layout locally for each
individual subgraph the algorithm now performs a global optimization taking into account the entire nested
hierarchy. The quality improvement consists in a reduced number of link crossings and a more regular layout
of the links. The following screenshots illustrate this benefit by comparing the result for the same nested
graph with, and without this new feature:
Nested graph laid out by Hierarchical Layout in recursive mode (new in Elixir Enterprise 3.5)
Same nested graph laid out by Hierarchical Layout in non-recursive mode (old mode in Elixir Enterprise 3.0)
The new recursive mode is enabled by default. If necessary, it can be disabled by setting Hier
Improved self-link and multi-link layout
A new link layout algorithm has been added: Basi
Multi-links and self-links laid out laid out by the new Basi
Other new features
The Elixir team hopes you will enjoy these new features! As usually, feel free to ask any questions.
Comments (2) Visits (9066)
In IBM ILOG Elixir 3.5, we had the opportunity to re-write the calendar as spark component. The component is compatible with Flex SDK 4.5.x.
The keyword for this component is "flexibility", you will understand why in the next sections.
Here is an non exhaustive list of new or improved features:
First of all, the calendar is a real spark component which means that you can customize any pixel of the component.
At the contrary of the previous version which was a sort of black box, you have access to the internals of the calendar, its sub components, how they are placed, how they are rendered etc.
By accessing the Calendar skins you can:
Here are three different skins applied on the same component instance.
The default skin (click on image to enlarge it)
The spark calendar provides sub components (row header, column header, grid, data groups, layouts etc.) and base classes and building bricks to create your own skins.
Multiple calendar display in column view
In the previous versions, the color of the item renderers was used to differentiate two items that are belonging two different calendar.
In addition to colors, in order to easily compare items from two different calendars, the new component can, for each column representing a day, display a sub column per calendar.
When time is selected in sub columns, you can easily determine the associated calendar, for example to create a task on the selected calendar.
Type of view and time range are not correlated
The calendar's core job is to display events in time through different views. In MX calendar, the kind of view is determined by the duration of the queried time range. This is not the case anymore, now you specifies the time range to display and the display mode: columns or grid.
For example this kind of view were not possible in previous versions:
Time range definition
To set the time range, you can:
Item / renderer association
Before the kind of renderer (vertical, bar, horizontal or label) was hard-coded according to event duration.
Now you can specify the kind of renderer to use for each item using a simple custom function. It is very easy and very powerful.
Here are some examples where the default behavior is overridden:
Here are some screen shots of usage of the renderer kind custom function:
The Calendar components now has the ability to filter out some days of week.
Here are some example of usage of day filtering:
Time of day filtering
Another feature often asked is the ability to choose the first and last hour displayed in the view.
In grid display mode, it only applies on horizontal renderers and not labels.
Only the 8am to 6pm part of the day is displayed: the left side of a cell is 8am and the right side is 6pm.
Minimal sizes supported
If an event is very short is may not be readable. If readability is more important for you than exact time projection on the screen, the layout is now supporting a minimal height or width.
With a minimal height, the event is visible but its end is not correctly projected so the label must include end time.
New grid display mode layout properties
In grid display mode, it is now possible to configure the layout to make the horizontal renderer to fill cells.
The horizontal renderer can now overlap each other like in columns display mode.
The definition of working and non working periods is now delegated to dedicated object.
This work calendar allows to:
As this work calendar is also used in the Gantt chart components (resource chart and task chart), it allows a seamless integration of the calendar component in an application using these two components.
New animation engine
The new architecture allows to create new animations:
The sole transition that is not animated is from one display mode to another.
Comments (6) Visits (6499)
Earlier this week we announced the release of Elixir Enterprise version 3.5. Some highlights of this new release include:
If you're interested in checking out the new version, the 90-day trial of Elixir Enterprise will be updated next with the latest enhancements.
In this newly recorded presentation Exploring choices for desktop and mobile RIA applications, learn the pros and cons of these three technologies: HTML 5 and Dojo, Adobe Flex, and Microsoft Silverlight. This recorded presentation has several demonstrations and provides insight about which technology is best for your RIA or project.
The next time you visit the Elixir Enterprise pages on ibm.com you may see a survey window appear. If you are interested in providing us some feedback, please click Yes. We are looking for your feedback to help improve the pages.
The survey should not take more than 5 minutes to complete. Head on over to the Elixir Enterprise page if you're interested in completing the survey.
[If you previously said No but are now interested, clear your cookies and the survey should appear.]
Live webcast: Exploring choices for desktop and mobile RIA applications: HTML5 (Dojo), Silverlight, and Flex
Join us on March 8 @ 12:00pm ET / 9:00am PT to hear Emmanuel Tissandie (Senior Technical Staff Member at IBM) and Christophe Jolif (Advisory Software Engineer at IBM), discuss Exploring choices for desktop and mobile RIA applications including: HTML5 (Dojo), Silverlight, and Flex.
In this one-hour webcast, we'll explore the pros and cons of each platform, looking at the features sets, development tools, and general support environment, as well as things like the popularity and viability of the platform. We will also share our tips and tricks that we've gathered from developing products that work in these various platforms and show demos throughout.
This talk is designed primarily for project developers and development leads, with a primary focus on User interface developers.
Have you registered for Impact 2011 yet? This annual conference is a great event to further build your skills. As well as learn from and talk to IBM ILOG Elixir Enterprise experts, which is always my favorite at these type of conferences. This is why I think you should attend Impact 2011:
These resources can help you prepare for the conference and show you what last year's conference was like. I hope you can make it!
I was excited to discover that IBM Redbook publications has recently released a new IBM ILOG publication draft. Written by a team of IBM ILOG JViews Enterprise and IBM ILOG Elixir Enterprise experts from around the world, this 304 page Redbook provides a step-by-step integration scenarios for both JViews and Elixir Enterprise and highlights actual real-world scenarios that you can implement and how integrate them with other IBM Software products including WebSphere REST Technology, IBM Cognos, IBM Mashup Center, WebSphere Business Monitor and Business Space, and WebSphere Dashboard Framework. But what I liked most from this book is that it provides details for both entry-level developers as well as for the experienced developer.
Redbooks are one of my favorite documentation and resource materials provided by IBM and this one does not disappoint. This book certainly does not discuss all the possible integration scenarios. It highlights the situations where you can take advantage of implementing of specific visualization components. From an Elixir perspective, this book covers the following topics:
This one-minute introductory video produced by the Redbook team provides a high-level abstract of what you will find in the book as well as the authors discussing their contributions:
You can access the current draft of IBM ILOG Visualization Integration Scenarios, available as a free for download. There are also source code and samples that accompany this book. Make sure you download the zip file to continue working on the samples provided.
Comments (4) Visits (5680)
When using Elixir Enterprise diagramming components you would sometimes like to share what you get on screen with other team members or customer.
A first solution is to print the graph on paper, using the appropriate APIs. But maybe it is something we should avoid on a... smart planet
An other way to share content, is to serialize the diagram in a file, as it is illustrated in samples like "Network Editor" or "BPM editor". But it needs a similar application to open and visualize the file.
Thus, we are going to describe the next obvious solution, which is to export the content of the graph in a bitmap file that you could share.
Like many softwares displaying information on screen it is possible to export the graph's content in a bitmap file. This feature is not included in the APIs but you can achieve that with few lines of code.
Whatever the component hierarchy you instanciated in your application to embed the graph, it needs to understand that it is the content of the graph that will be converted as bitmap. Thus we will always acces to the instance of Graph class that is finally used.
For the purpose of this explanation we consider using a Diagram instance in our sample. The Diagram is a skinnable component containing several containers, but the API gives us access to the graph instance contained in the Diagram.
The following code creates a Diagram with a set of nodes and links
<fx:Object id="node2" name="Node2" />
<fx:Object id="node3" name="Node3" />
<fx:Object id="node4" name="Node4" />
<fx:Object id="node5" name="Node5" />
<fx:Object id="node6" name="Node6" />
<fx:Object id="node7" name="Node7" />
<fx:Object id="node8" name="Node8" />
<fx:Object id="node9" name="Node9" />
<fx:Object id="node10" name
Here is what we get on screen:
Because the node coordinates are not explicitly defined they are all (0,0) by defaut. The layout algorithm (TreeLayout) will use the root node (Node1) to arrange the tree, and because it is in (0,0) it explains why some parts of the graph, located in negative coordinates, are not visible . The graph is not scrolled in order to keep this representation and to illustrate that the whole graph's content will be exported as bitmap.
Now let's save this graph in a bitmap file. We are using standard classes and APIs provided by Adobe Flex plateform: a raw bitmap data structure to store the image, and a bitmap encoder to save these data in a file. All following code samples could be put in the click event handler of a Button.
First, we create a bitmap data for the graph image. This is an instance of flas
var bbox:Rectangle = diag
The next step is to draw the graph in the bitmap data, but if we directly draw it, the hiddent part will not be drawn because of the negative coordinates. In this case it will be more like a screen capture and not a "export to" feature.
Thus it needs to perform a translation during the drawing process to put the entire graph's content in the bitmap data.
var matrix:Matrix = new Matrix(); // creates a transform matr
We now have a raw bitmap data representation of the graph which is ready to be saved in a file.
But what will be the exported bitmap format? Flex provides two useful classes to encode raw bitmap data in specific formats: PNG and JPEG. Let's choose the PNG format and its associated encoder, the mx.g
var encoder:PNGEncoder = new PNGE
Comment (1) Visits (5577)
In this post, I will show how to use the drag and drop API with a Timeline component in order to:
1. Drag an event from a DataGrid and drop on the Timeline
To associate a time with a event using a Timeline, we will use a DataGrid that contains
the events and a Timeline.
<mx:DataGrid id="dataGrid" width="25%" height="100%" dragEnabled="true" > <mx:dataProvider> <s:ArrayList> <fx:Object label="event1" /> <fx:Object label="event2" /> <fx:Object label="event3" /> </s:ArrayList> </mx:dataProvider> <mx:columns> <mx:DataGridColumn dataField="label" /> <mx:DataGridColumn dataField="date" /> </mx:columns> </mx:DataGrid> <ibm:HTimeline id="timeline" [...] init
To enable drag and drop, we will use the dedicated API provided by the Flex framework.
The drag/drop event listeners are registered on the main band to:
protected function time
2. Move an event in the Timeline
The same events and methods can be used to drag an event from the Timeline main band and drop it on the same main band to move the event in time. So we will improve the above code to:
protected function time