Comments (4) Visits (3786)
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 (4060)
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