22 Visualization
[This is a feature of Carousel]
The data model which is built into Carousel is a very powerful and versatile data storage mechanism, however, it can become quite difficult to navigate its multi layered hierarchy from a debugger. This is where the visualizer comes into its own.
The data visualization built into Carousel is meant to be used as part of your development, debugging and testing but is not meant to be deployed as part of the final release application.
Using the Visualizer within the Carousel Editor
Start the Carousel editor in NetBeans and click the Carousel|Visualization|Show the data visualizer menu. 
The visualizer will appear docked in the NetBeans IDE and will reflect the data which is contained in the files referenced from the datasets.xml file. As you reference parts of the model from the components will build itself and you can use the visualizer to simplify the binding of components
The left pane contains a tree which allows you to navigate all of the paths in the data model.
When you click a node in the tree its attributes are displayed in the table on the top right of the window. This table will always include the 'value' and 'id' attributes regardless of whether they contain data or not.
The refresh button below the model tree needs to be clicked whenever a change to the model has taken place if you want a true reflection of the current state of the data model.
The toolbar above the attributes table offers a number of extra options for manipulation of the model. Some of these options are also available on the node's popup context menu.
Table 22-1 - Visualizer tools
|
|
|
|
|
|
Adds a new node to the model
|
|
Deletes the current node from the model
|
|
|
|
|
|
Add a new attribute to the model node. This method does not prevent duplicates
|
|
Delete the selected attribute from the model node. The standard attributes (id and value) cannot be deleted
|
|
Copy to the model path to the clipboard. The full path of the selected node is placed on the clipboard. This value can then be pasted as text.
|
If you wish you can pre-define your model in one of the dataset files then you can start binding your screen components more easily. For example you can define the following nodes in the model
Code Sample 22-1 - Predifined model
< datasets >
< dataset id = "${getCustomerID()}" >
< data value = "" id = "surname" />
< data value = "" id = "dob" />
< data value = "" id = "firstname" />
< data id = "gender" />
< data value = "" id = "title" />
< data value = "" id = "address1" />
< data value = "" id = "address2" />
< data value = "" id = "address3" />
< data value = "" id = "postcode" />
|
Now, open the customer details page and click on the customer surname edit field. Expand the data model in the visualizer and double click on the node '${getCustomerID()}/surname'. You will see the data property for the component change to this value and any time you click on this component the visualizer will automatically select this node.
Debugging with the Visualizer
The visualizer makes it easier to debug your Carousel applications as it provides you with an up to date representation of the datamodel at any given time. When you start a debugging session for a Carousel application from netBeans the visuaslizer will automatically update with the state of the model. It will start from the root of the project's model and create the entire model hierarchy.
If you were logged in you could rate this article or add a comment.
;)