The sample application “HelloGravity” included with this post is a small master-detail application that highlights some of the key features of the ADEP Client Component Framework, also known as Gravity.
Installing and Building the HelloGravity Application
Download the project source: HelloGravity.zip
Note: This sample requires FlashBuilder 4.5 and the Flex 4.5.0 SDK.
- Download “HelloGravity.zip” and unzip it into a directory of your choice.
- Open FlashBuilder, and create a workspace that is located at the root of the application above.
- File -> Switch Workspace -> Other…
- Click “Browse” and select the root directory for the HelloGravity application
- Ensure the default Flex SDK is version 4.5.0
- Import the 5 HelloGravity projects into the workspace
- Select “File -> Import…” then “General->Existing Projects into Workspace” – click “Next”
- Browse to the root directory of the sample – click “Choose”
- Select the 5 HelloGravity projects – click “Finish”
- Run the “HelloGravity_main” application
- All applications should compile cleanly. By having the FlashBuilder workspace at the root of the projects, the inter-project dependencies should be satisfied.
- The application should launch in the browser showing a simple list that can be used to select an image and display information about it.
- Note that modifying the “Title” field in the editor will also cause the corresponding label in the list to change.
Structure of the application
The application is made up of three visual components (UiServices), the “Header”, “List”, “Editor”. They are backed by non-visual bundles to manage the application domain model and data services.
The following is a simplified diagram of the application structure:
HelloGravity Application Structure
Each of the application UIServices and bundles are implemented independently, and are in the projects as follows:
This project holds the UIService modules that make up the visual portions of the application. Each of the following modules generate their own SWF when compiled, and each has a configuration (gxml) file in the manifest directory. These modules could also be compiled with independent projects, and in a large system with independent groups working on them it would be normal to separate them.
HelloGravity_main_module: the top level contain that pulls together the header, list and editor UiServices
HelloGravity_header_module: the header for the application containing the title and logo
HelloGravity_list_module: the list control. Note that the list has no linkage or knowledge of the editor
HelloGravity_editor_module: the editor control. Note that the editor has no linkage or knowledge of the list control
HelloGravity_domain_bundle and HelloGravity_domain_interface Projects
These projects hold the domain classes and their corresponding interfaces. The domain classes represent the list of image data that is backing the application.
HelloGravity_dataService_bundle and HelloGravity_dataService_interface Projects
These projects implement the data persistence tier for this application. The interface API is independent of the implementation, and could be used with a server. However, as this is a standalone sample, this implementation simply creates the data list locally and returns the data. However, it is simulating the asynchronous nature and serialization of data that would be present in a real system that is connected to a server.
A series of videos is available on the ADEP developers channel on YouTube that describe the development of this application and the concepts behind it.
YouTube Channel: Client Component Framework (Gravity) Development on ADEP
Video 1 – Setting up the Gravity Development Environment
Learn how to set up a FlashBuilder development environment for use with Gravity. It explains where to find Gravity, how to configure the initial bootstrapping of the application, and how many of the other libraries are used.
Video Part 1: Setup the Gravity Environment – Part 1
Video Part 2: Setup the Gravity Environment – Part 2
Video 2 – Develop a Simple UiService
Learn how to create a Module Bundle and a simple UI Service component to add a header component to the application.
Video 3 – Building a Master-Detail Application with UiServices
Create a simple master-detail application that consists of two UIServices, one containing a summary list and the other the detail information. These two UIServices are wired to an existing domain service.
Video 4 – Create a domain model and domain service
This session covers the concept of a domain model service, and interface bundles. It also explains how Gravity creates and uses application domains and how this enables applications to be build using different Flex SDK’s.
Video 5 – Create a data service and link to the application
This session covers a data service that backs a domain model. It discusses the asynchronous nature of this service and how the binding mechanisms of Gravity and Flex simplify application development. It also covers how to link the FlexBuilder library projects as RSL’s such that the needed SWF is available at runtime.