Shulou(Shulou.com)06/02 Report--

This article is about the usefulness of the combination of SDK based on Flex interface. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Flex is the key product of Sun in the future, which is used to fight against Adobe's Flash and Microsoft's Silverlight. Here will introduce the combination of SDK based on Flex interface, it can be said that the page is relatively concise.

The following is the interface similar to the main interface of a product we are developing, the front-end display is developed by Flex, and the back-end system is based on Java's SOA framework. On the left side of the interface is the navigation bar, and on the right is the content area (of course, there are other columns, ignored here). The content area generally consists of multiple UI Part, each Part fetching data from the backend using an asynchronous mechanism, and it will also receive notification messages from the backend. The entire interface is very consistent with Microsoft CAB ideas, but Flex does not have CAB components, but you can use Microsoft user controls to define piece by piece of content. The UI Part of the content area of the interface may be reused.

In the design, I want to use the idea of interface combination to design, the advantages of using this idea are: 1) the interface is divided into different components, each part implements a function, which is more in line with the SRP principle; 2) when implementing each UI Part, it is relatively simple to focus on one piece of content in the complex interface. 3) it is easy to reuse. Its disadvantages are: 1) each interface is composed of multiple UI Part, which needs to maintain the relationship between UI Part; 2) it is not easy for beginners to understand the implementation of the interface.

In view of the many advantages of Microsoft interface composition, I decided to introduce its idea to Flex and implement a Composition SDK based on Flex myself, which refers to CAB & SCSF and Prism in the implementation of SDK.

Taking into account the functions that the software needs to implement, the SDK will support the following functions:

1 UI Part lifecycle management. When each UI Part is displayed, it needs to get the data from the back end and listen for the data update message. when you click "Tab 2" in the interface, Tab 1 is hidden and stops listening for messages, and Tab 2 is displayed. In my opinion, every UI Part has an Activated, Deactivated, and Closed lifecycle state, when it is in the Activated state, the UI Part displays the required data, when it is in the Deactivated state, the UI Part is hidden and stops updating the data, when it is in the Closed state, the UI Part is closed and stops updating the data, and it will be destroyed. The purpose of the life cycle management function is to realize the life cycle change-driven data update, that is, each component data update is determined by its own life cycle state and does not need to be controlled by the parent node. in order to achieve greater granularity reuse.

2 UI Part combination and dynamic injection. This feature allows each UI Part to be defined directly in the view container class, in which all UI Part is displayed once the container is displayed, or some of these UI Part are dynamically injected and rendered at run time, and specific UI Part is injected as needed when the container is rendered.

3 Master-Details UI Part support. Master-Details UI Part is a special pair of UI Part, and when the data of Master UI Part changes, Details UI Part also needs to be updated, just like the Master-Details View of .NET.

(4) it is implemented by Hook mechanism, so that it can be compatible with standard controls as far as possible when realizing the function of 1x3, and there is no need to create custom controls or only very simple custom controls. The principle of Hook mechanism is as follows: a) each function is implemented by a Hook; B) for example, LifecycleHook, for a component of a leaf node, the Hook maintains its state when it is shown / hidden / closed; for a container node, it not only maintains its own state, but also maintains the state of child controls, such as the VBox container, when VBox is displayed, its state is Activated and all its first-level child node states are also Activated As for the TabNavigator container, when it is displayed, its status is Activated and the status of the currently selected Tab is also Activated, and the status of the rest of the Tab is Deactivated;C) the creation process of Hook is a recursive listening interface root node onChildAdded/Removed event; D) SDK provides Hook registry and Hook manager, Hook registry defines the corresponding Hook for each type of component, and Hook manager defines the Hook instance corresponding to each control.

5 based on the SDK, the design of each view is composed of Workspace and UI Part. Workspace uses Flex standard container controls to define the layout of the interface; UI Part is the implementation of each part of the interface and encapsulates the life cycle-driven data update.

The design of the code is relatively simple, and its structure is as follows:

ComponentTreeHook is the core class of the entire Hook mechanism. It will recursively listen to the onChildAdded/Removed of the root node control. When a child node is added, the entire control tree will be mounted recursively. The mount process code is as follows:

/ * * Create the hooks for current component tree and listen the CHILD_ADD/CHILD_REMOVE * events of each component. * * @ param comp The root component of the component tree. * * / override public function hook (comp:UIComponent): void {if (! isHooked) {super.hook (comp); hookComponentTree (component);}} private function hookComponentTree (comp:UIComponent): void {doComponentTreeHooking (comp, true, hookComponentNode);} / * * Do the hooking for a component tree. * @ param comp The root component. * @ param hookComponentFunc The actual hook function. * * / private function doComponentTreeHooking (comp: UIComponent, hooked: Boolean, hookComponentFunc: Function): void {if (! comp) {return;} / / Hook the node from top to bottom. Var queue: Array = [comp]; var tempComp: UIComponent = null; var tempContainer: Container = null; var tempContainerChildren: Array; while (queue.length > 0) {/ / Get a component from queue. TempComp = queue.shift () as UIComponent; if (! tempComp) {continue;} / / Do the hook for this component. HookComponentFunc (tempComp); / / Get the children of current component and push them to queue. TempContainer = tempComp as Container; / / SmartPart here is treast as a Component. If (tempContainer & &! (tempContainer is ISmartPart)) {if (hooked) {tempContainer.addEventListener (ChildExistenceChangedEvent.CHILD_ADD, onChildAdded, false, CompositionEventPriority.CREATE_HOOK); tempContainer.addEventListener (ChildExistenceChangedEvent.CHILD_REMOVE, onChildRemoved, false, CompositionEventPriority.DESTORY_HOOK) } else {tempContainer.removeEventListener (ChildExistenceChangedEvent.CHILD_ADD, onChildAdded); tempContainer.removeEventListener (ChildExistenceChangedEvent.CHILD_REMOVE, onChildRemoved);} tempContainerChildren = tempContainer.getChildren () For each (var child: UIComponent in tempContainerChildren) {queue.push (child);}} Thank you for reading! This is the end of the article on "what is the use of the combination of SDK based on Flex interface". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.