...
The renderGraph function starts by producing the main display (described in the previous section) at line 626. For each pico (list obtained using jQuery code $('div.pico')), it sets up a click event handler (lines 652-683). Then, it finds the horizontal menu items, and sets each up with a click event handler which will call the renderTab function.
The display of a single pico
The main page is now displaying a graphic representation of all of the picos hosted by this pico engine. Each rounded rectangle has a click event handler which will cause the second pico div (the one with class pico-edit) to become visiblepico is represented by two div tags. The first appears as a rounded rectangle while the second is initially hidden. Each rounded rectangle has a click event handler (established in line 652) which will cause the second pico div to become visible.
When the developer clicks on the rounded rectangle representing a pico, the click handler invokes the function of lines 652-682, shown in a bit more detail here:
| Code Block |
|---|
632: $('div.pico')
652: .click(function () {
659: var $pediv = $(this).next('.pico-edit')
667: $pediv.fadeIn(200)
682: }) |
Among other things, this (anonymous) function locates the second div (the one with class="pico-edit" using the jQuery idiom next('.pico-edit')(line 659)). This div will be known by the name $pediv throughout the rest of the click handler function. Line 667 uses jQuery to fade in the larger rounded rectangle so that this one pico is displayed, taking up most of the screen (95% of the width and 85% of the height (specified by lines 668-676 (not shown here))).
The display of a tab
With one pico being displayed, the developer now sees it with its About tab selected. In this mode, each tab is prepared to be clicked (line 688), so that its content will be rendered (by the renderTab function of lines 351-615).
The display of a single pico
When the developer clicks on the rounded rectangle representing a pico, the click handler invokes one of the tabs, the renderTab function (lines 351-615) is invoked. This function is shown in more detail here:
...