"Actual Combat project" "FLEX" #900 implement drag control functionality

First, function description: Drag the control's functionality (similar to the drag control inside the Flex,vs).

Note: You may have different statements about the registration and distribution of events. Because in Flex and in Java, there are different names. But the essence is the same.

Register Event = = Set Listener Event | | Dispatch event = = Trigger Event, others call "broadcast"

We all know what it means.

Description

1, Application page (place control list, page container, Property Panel Application page of these three modules) [PS: The following abbreviation: Main Page ]

1.1 Main Page loading left, middle and right three modules-- module loading technology ==> No tutorials

2. Control List Module

2.1 Request Server-side data (use vs at this side) and request server-side data (UrlLoader) ==> tutorial "FLEX" #002 request service-side data (UrlLoader)

2.2 Processing the data returned by the server (generate a list of controls, where the tree control is used to directly copy the JSON objects that are passed back to the tree)

2.3 Setting the drag-and-drop control of a tree control drag -and-drop technology ==> tutorial FLEX #005 Drag

3. Control Container

3.1 Registering the Control list drag events -Create, register, and distribute technologies for custom events, communication technology between modules ==> "FLEX" #003 custom events, inter-module communication

3.2 Handling dragged events, generating controls, distributing events ( initializing property panel events )

3.3 Controls in control container drag, and control size change, dispatch control Change Event -- control position, size change technology

3.4 Register Properties Panel, property values change the event that is dispatched (change the value of the property, the control changes, eg: Change the width of the property, the control must also change)

4. Properties panel

4.1 Registering the control container, the event dispatched after the control has been generated (initializing the Properties panel event)--reflection mechanism ==> tutorial FLEX #004 reflection mechanism

4.2 Event handling method (Generate Properties panel)

4.3 Register the Change event (TextInput the property value changes event in event handling) for the property value in the Properties panel (control)

4.4 Register the control to change the event and handle it (change the property value of the corresponding property in the properties panel)

second, the function of the technology used:

1. Module loading

2. Request Server Data

3. Drag

4. Custom events (create, register events, distribute events)

5. Control position, size change algorithm

6. Reflection mechanism

Three, the whole idea simple flow diagram:

"Actual Combat project" "FLEX" #900 implement drag control functionality