4.5Ajax setting up
4.5Ajax setting up
4.5.1The AjaxZone tag
Description
The « AjaxZone » tag defines which items and which zones must have an Ajax behavior.
Example
| Rendering |
|
XHTML settings | <bluage:AjaxZone id="salutationSelection"> … <bluage:Select id="slc_salutation" instancenamelist="salutationList" instancename="instanceSalutation" tablefield="Salutation.id" listkey="Salutation.value" listvalue="Salutation.id" action="true"> <select> <option value="1">Mr</option> <option value="2">Mrs</option> </select> </bluage:Select> … <bluage:DynamicText id="dynAjax" instancename="instanceSalutation" tablefield="Salutation.value" > </bluage:DynamicText> </bluage:AjaxZone> |
| Screen activity diagram |
|
| Entities Diagram |
|
| Service activity diagram | N/A |
Tag attributes: reference
| Tag | AjaxZone |
| Description | One or more items expected to have an Ajax behavior |
| Diagram |
|
Tag attributes: description
| Attribute | Required | Description |
| id | Y | Zone ID |
4.5.2The Draggable tag
Description
The « Draggable » tag allows defining which item may be « dragged »
Example
| Rendering |
|
XHTML settings | <bluage:AjaxZone id="friendsSelection"> <bluage:Table id="id_table1" instancename="friends_list" selectioninstancename="instance_friends" source="service" listtype="Friend" parentinstancename="selectedContact.notFavoriteFriend"> … <bluage:Column headername="col_2" id="myObject_col_2"> <td colspan="1" rowspan="1"> <bluage:Draggable id="beMyPrefered"> <bluage:DynamicTextid="txtmyObjectname" tablefield="Friend.label"> </bluage:DynamicText> </bluage:Draggable> </td> </bluage:Column> </bluage:Table> </bluage:AjaxZone> |
| Screen activity diagram |
|
| Entities Diagram |
|
| Service activity diagram |
|
Tag attributes: reference
| Tag | Draggable |
| Description | Surrounds the items that may be « dragged » |
| Diagram |
|
Tag attributes: description
| Attribute | Required | Description |
| Id | Y | ID |
| styleclass | N | Display style |
| This tag may contain various items (Blu Age™ and/or html). |
4.5.3The Droppable tag
Description
The « Droppable » tag indicates a drag destination zone, it surrounds the item getting the ‘drop’ event.
Example:
| Rendering |
|
XHTML settings | <bluage:AjaxZone id="favoriteFriendsSelection"> <bluage:Droppable id="dropPref" sourceid="beMyPrefered"> <bluage:Table id="id_table2" instancename="favorite_friends_list" selectioninstancename="instance_favorite_friends" source="generic" listtype="Friend" parentinstancename="selectedContact.favoriteFriend"> <table id="id_tab2" /> … </bluage:Table> </bluage:Droppable> </bluage:AjaxZone> |
| Screen activity diagram |
|
| Entities Diagram |
|
| Service activity diagram |
|
Tag attributes: reference
| Tag | Droppable |
| Description | Defines which zone receives the Drop event. |
| Diagram |
|
Tag attributes: description
| Attribute | Required | Description |
| Id | Y | ID |
| sourceid | Y | Corresponding « Draggable » tag ID. |
| styleclass | N | Display style. |
| This tag may contain various items (Blu Age™ and/or html). |