Case study: blazeds + spring-8insync06 "loosely coupled" UI synchronization Event Notification

Insync06: added "loose coupling" UI synchronization Event Notifications

I. Run the demo:
1. Run the program: http: // localhost: 8400/spring-Flex-testdrive/insync04/index.html;
2. Click search to obtain all contacts from the database.
3. Enter several characters in the search text box, click "Search", and click the name to find the contact.
4. Double-click a contact in the DataGrid to open an independent tab.
5. Modify the first name or last name of the contact and click Save ". Note that the DataGrid will be updated automatically.
6. Add a new contact and click Save to create a new contact. Note that the new contact will be displayed in the DataGrid.
7. delete a contact and note that the contact is removed from the DataGrid.

Ii. Understand the Code:
1. insync06.mxml:

When you create a new contactform tab, add a listener:
VaR form: contactform = new contactform ();
Form. addeventlistener (contactevent. Created, contactcreatedhandler );
Form. addeventlistener (contactevent. Updated, contactupdatedhandler );
Form. addeventlistener (contactevent. Deleted, contactdeletedhandler );
Tn. addchild (form );
Form. Contact = contact;
Tn. selectedchild = form;
All three events are processed by calling the search () method and refresh the program.
Private function contactcreatedhandler (Event: contactevent): void
{
Search ();
}
Search (): Ro. findbyname (searchstr. Text );

2. contactform. mxml

Contactform uses <FX: Metadata> to define three events,
<FX: Metadata>
[Event (name = "contactcreated", type = "contactevent")]
[Event (name = "contactupdated", type = "contactevent")]
[Event (name = "contactdeleted", type = "contactevent")]
</FX: Metadata>
These events are distributed when they are created, updated, and deleted. For example:
Dispatchevent (New contactevent (contactevent. Created, contact ));
Dispatchevent (New contactevent (contactevent. Updated, contact ));
Dispatchevent (New contactevent (contactevent. Deleted, contact ));

Note:

<FX: Metadata>:

You can use the <FX: Metadata> label to insert the metadata label in the mxml file. The metadata TAG provides the flex compiler with information about how to use the mxml component in a flex application. The metadata tag is not compiled as executable code, but provides information for controlling how to compile the corresponding code.

[Event (name = "mxml control event name", type = "Event Type")]

Dispatchevent is the method that contactform inherits from the parent class to distribute events.

3. contactevent.:
The Custom Event Type, inherited from the event.

Package
{
Import flash. Events. event;

Public class contactevent extends event
{
Public static const created: String = "contactcreated ";
Public static const updated: String = "contactupdated ";
Public static const deleted: String = "contactdeleted ";
Public var contact: contact;
Public Function contactevent (type: String, contact: contact, bubbles: Boolean = true, cancelable: Boolean = false)
{
This. Contact = contact;
Super (type, Bubbles, cancelable );
}
}
}

Iii. Summary:

This demo differs from the previous demo in that it uses events to synchronously update controls in the UI. Contactform distributes events when a contact is created, updated, or deleted. Other components in the program register these events as listeners. When a contact is created, updated, or deleted, the tasks are processed as specified. In this case, the main program registers these events as the listener and refreshes the contact's DataGrid to reflect the changes in contactform.