This diagram illustrates the layers of the Rich Web Application Backplane. There are four layers illustrated in Figure 1:
In Figure 1, the topmost of the four layers of a Rich Web Application shows a user interface. Across the top line of the user interface layer is a row of five buttons:
Beneath the row of five buttons, the user interface is composed of four columns of edit boxes which are populated with expense information. The first column contains classification information -- the most abstract grouping of expense items, such as "Food", "Travel", "Housing", etc. The second column of edit boxes contains clarifying information about the expense classified by the first column of edit boxes; e.g., "lunch at airport", "airfare" and "hotel". The third column contains the amount of the expense detailed in the previous two edit boxes in currency amounts. The fourth and final column of edit boxes contains the date upon which the expense was transacted. Beneath the columns of letterboxes is an automatically updating pie-chart, which reflects the percentage of each class of expense which comprises the entire expense budget.
The Abstract Presentation Layer is illustrated by two groupings of items. The first group is labeled, "Atomic" and contains two independent items: "Output" and "Input". The second grouping is labeled "Group", which includes: "Select", "Trigger" and "List".
The Control Layer is illustrated by a snapshot of part of a flow chart, which contains the sequencing of user interaction and calculation on model data.
The Model Data Layer is illustrated by a snippet of code, containing model data in an XML instance:
<expenses>
<travel>100</travel>
<personal>200</personal>
<food>125</food>
</expenses>
Return to the text immediately following Figure 1.