A.2. JSON Rendering
Vaadin 5 uses JSON, a lightweight data-interchange format, to communicate UI rendering with the browser, because it is very fast to parse compared to XML. JSON messages are essentially JavaScript statements that can be directly evaluated by the browser. The client-side engine of Vaadin parses and evaluates the UIDL messages with the JSON library that comes with the Google Web Toolkit.
Section 3.2.3, “JSON” gave a general introduction to JSON as part of the architecture of Vaadin. In this section, we look into the technical details of the format. The technical details of the JSON messages are useful mainly for debugging purposes, for example using the Firebug plugin for Mozilla Firefox.
To view a UIDL message, open the Firebug panel in Firefox, select
Net tab, select a "POST UIDL" request,
open the Response tab, and click . This displays the entire UIDL message, as shown in Figure A.1, “Debugging UIDL Messages with Firebug” below.
JSON messages are represented as nested lists and associative arrays (objects with named properties) in JavaScript syntax. At the top level, we can find an associative array with the following fields:
- changes
-
Changes to the UI caused by the request.
- meta
-
Meta-information regarding the response and the application state.
- resources
-
Information about application resources.
- locales
-
Locale-specific data for locale-dependent components, such as names of months and weekdays.
The "changes" field contains the actual UI changes as a
list of components. Components that can contain other components are
represented in a recursive list structure.
A component is represented as a list that first contains the UIDL tag of the
component, which identifies its class, followed by data fields. The basic
representation of component data as attributes and variables is defined in the
base classes of the framework. Attributes are represented as an associative
array and variables as a separate associative array inside the special
"v" attribute. For example, a Button
component is communicated with a JSON representation such as the following:
["button",
{"id": "PID5",
"immediate": true,
"caption": "7",
"v":{"state":false}}
]
A component can give its data also in additional fields in the list instead of
the attributes or variables, as is done for the Label
component:
["label",
{"id": "PID4",
"width": "100.0%"},
"Some text here"]
The meta-information field can contain certain types of information, which are
not displayed in the UI, but used by the client-side engine. The
repaintAll parameter tells that the changes include the
entire window contents, not just partial changes. Other data includes
redirection details for expired sessions.