Generate libraries for the Client Component Framework

Use the modeler to generate client-side libraries to integrate with the Adobe Enterprise Platform Client Component Framework. Other components of modular client applications can use the model-generated libraries to access Data Services destinations.

View full size graphic
A.
Model-generated client-side libraries

B.
Client application component that uses the libraries.

The modeler generates ActionScript interfaces and implementation classes to support the use of dependency injection (DI). The Client Component Framework uses the following strategy to achieve loose coupling of components:

  • Interfaces are packaged in a library and deployed to the framework. A manifest file is also deployed that identifies the service and makes it discoverable.

  • Implementation classes are bundled and deployed. A manifest file is also deployed to identify the service for which the bundle provides an implementation.

  • Other client components that are deployed include a manifest file that identifies the services they consume. The framework determines which implementation bundle performs the service operations.

Consumer components are programmed against the service interfaces. Therefore, any implementation can be deployed and used successfully by consumer components.

Perform the following tasks to create the interfaces and implementation libraries to use with the Client Component Framework:

  1. Create the project. (See Create the Flex Library Project.)

  2. Create a model for the project and develop the model as usual. (See Create models.)

  3. Configure code generation properties and generate code. (See Configure code generation for the Client Component Framework.)

  4. Add the generated ActionScript files to your Adobe Enterprise Platform projects. (See Using the generated code.)

Create the Flex Library Project

Use a Flex Library Project to develop the model and generate code for use with the Client Component Framework. Configure the project so that the Component Application Framework and RIA core libraries are added to the build path.

After you create the project, create and develop the model.

Create a Flex Library Project:

  1. In Flash Builder, click File > New > Project.

  2. Select Flex Library Project and click Next.

  3. Type a name for the project and click Finish.

  4. In the Package Explorer view, right-click the project and click Properties.

  5. In the properties tree, select Adobe > Experience Services.

  6. O the General tab, select Enable Experience Services, select Composite Application Services, and click OK.

  7. In the dialog box, click Yes.

  8. Create a model for the project. (See Create models.)

    Note: You cannot configure Flex library projects to have a default model. When using models in library projects, you need to manually initiate ActionScript code generation.

Configure code generation for the Client Component Framework

Configure ActionScript code generation to create the interfaces and classes for integrating your Data Services client into the Client Component Framework.

Generated ActionScript interfaces and classes are organized into the following packages by default:

  • [model name].api: Includes generated interfaces.

  • [model name].domain: Includes value object classes for entities.

  • [model name].service: Includes service classes for entities and services.

Optionally, you can specify the package names. Separating interfaces and classes is useful because they are deployed separately in the framework.

You can also separate custom services and implicit data management services in different packages. Configure service packages according to the requirements of your application architecture.

Configure code generation:

  1. Set the ActionScript Generation code generator to Client Component Framework. (See Specify the code to generate.)

  2. (Optional) Configure interface and class package names. The following properties apply to the Client Component Framework generator:

    • Package

    • Entity Package

    • Service Package

    • Interface Package

    • Model Driven Form Package

    For descriptions of these properties and for information about configuring them, see Configure code properties.

  3. Generate the ActionScript interfaces and classes. (See Generate code.)

Manifest file generated for client components

In addition to ActionScript code, the Client Component Framework generator produces a manifest file. The Client Component Framework reads manifest files at runtime and performs tasks such as registering services and determining dependencies.

The generated manifest includes information about both the interface and implementation libraries. However, interface libraries and implementation bundles are deployed separately, each with their own manifest. If you manually create the manifests, you can copy content from the generated manifest. You cannot use the generated manifest directly.

Note: When you use the Composite Application Framework development tools, manifests are created automatically. Typically, you do not manually create manifests.

The model generates the manifest file by default. If you do not need the manifest file, configure the model. The following procedure uses Design mode to configure manifest file generation. In Source mode, add a SuppressManifestGeneration item to the model’s ActionScriptGeneration annotation.

Configure manifest file generation:

  1. In Design mode, click an empty space in the model editor.

  2. In the Properties view, click the Code Gen tab.

  3. To generate no manifest file, select Suppress Manifest Generation.

ActionScript code generated for client components

The Client Component Framework generator produces ActionScript interfaces and classes.

Interfaces

An interface is created for each entity value object and data management service, and each remoting and custom service.

  • Entity value object interfaces: The interface name is the entity name prefixed with the letter I (Ientityname). The interface defines getter and setter functions for each data property in the entity. All getter functions are bindable on the propertyChange event. The interface also defines functions for entity methods.

  • Entity service wrapper interfaces: The interface name is the entity name prefixed with the letter I and suffixed with the word Service (IentitynameService). The interface defines functions for the CRUD operations that entity service wrappers typically provide. The create, update, delete, and fill functions return com.adobe.gravity.utitly.async.IToken objects.

  • Remoting and custom service wrapper interfaces: The interface name is the name of the custom service prefixed with the letter I (Iservicename). The interface defines a function for each service function. When the service function returns a value, the interface function definition returns an com.adobe.gravity.utitly.async.IToken object.

Classes

The classes that the modeler generates for the Client Component Framework are similar to those that the default ActionScript generator produces:

  • Entities: Value object classes and service wrapper classes.

  • Remoting and custom services: Service wrapper classes.

The classes implement the corresponding generated interfaces as well as extending Data Services classes and interfaces as usual.

Using the generated code

Use the generated interfaces and classes in applications that run within the Client Component Framework. For example, you can create Composite Application Framework tiles or Flex applications that use the libraries to interact with Data Services.

Note: Information about integrating the generated libraries with Composite Application tiles is not available at this time.

Create a separate project for interfaces

The Client Component Framework requires that interfaces and implementation classes are bundled separately. To facilitate this architecture in your development environment, create another Flex Library project and import your generated interfaces.

When you move the interfaces, preserve the fully qualified names of the interfaces. The names of the packages in the new library must match the names of the packages where the modeler saved the generated interfaces. For example, the modeler saves generated interfaces in src/product/api. The name to use for the packages in the new project is product.api.

After you move the interfaces, add the new project to the build path of the original library project.

Move interfaces to a different project:

  1. In Flash Builder, click File > New > Flex Library Project.

  2. Type a name for the project and click Finish.

  3. Right-click the src folder of the new project and click New > Package.

  4. In the Name box, type the name of the package that contains the interfaces.

  5. Drag the interface files from the original project to the package that you just created, and click OK in the Move dialog box.

Configure the build path of the original project:

  1. Right-click the project that you used to generate the ActionScript classes and click Properties.

  2. In the properties tree, select Flex Library Build Path, and then click the Library Path tab.

  3. Click Add Project, then select the project that now contains the interfaces and click OK.

    The project is added to the Build Path Libraries list on the Library Path tab.

  4. In the list, expand the project and double-click the Link Type properly.

  5. In the Library Path Item Options dialog box, change Link Type to External, and click OK.

  6. Click OK to save the changes and close the Properties dialog box.

Coding against the interfaces

The applications that run in the Client Component Framework consume interface libraries, not the implementation classes. When developing client components that use model-generated ActionScript libraries, you code against the generated interfaces.

Interfaces for data management and remoting services return results in com.adobe.gravity.utitly.async.IToken objects. Create an instance of an IToken object and use the addSuccessHandler function to register a result handler. The result object that is passed to the handler is compatible with the lastResult property of CallResponder objects.

The following example application uses the Product service to populate a data grid. The model in a different project generated the data management service for the Product entity. That model also generated the ActionScript interface and implementation classes. The bold font highlights the use of the generated interfaces, as well as the IToken class:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600"> 
    <fx:Script> 
        <![CDATA[  
            import product.api.IProduct; 
            import product.api.IProductService; 
            import com.adobe.gravity.utility.async.IToken;  
            import mx.events.FlexEvent; 
             
            [Bindable]  
            var productService:IProductService;  
             
            protected function dataGrid_creationCompleteHandler(event:FlexEvent):void 
            { 
                var token:IToken = productService.getAll(); 
                token.addSuccessHandler(gaResultHandler);  
                 
            } 
            protected function gaResultHandler(result:Object):void 
            { 
                getAllResult.lastResult= result; 
            } 
             
        ]]> 
    </fx:Script> 
    <fx:Declarations> 
        <s:CallResponder id="getAllResult"/> 
     
    </fx:Declarations> 
    <s:DataGrid id="dataGrid" x="83" y="61" 
                creationComplete="dataGrid_creationCompleteHandler(event)" requestedRowCount="4"> 
        <s:columns> 
            <s:ArrayList> 
                <s:GridColumn dataField="productid" headerText="productid"></s:GridColumn> 
                <s:GridColumn dataField="description" headerText="description"></s:GridColumn> 
                <s:GridColumn dataField="price" headerText="price"></s:GridColumn> 
                <s:GridColumn dataField="productname" headerText="productname"></s:GridColumn> 
            </s:ArrayList> 
        </s:columns> 
        <s:typicalItem> 
            <fx:Object description="description1" price="price1" productid="productid1" 
                       productname="productname1"></fx:Object> 
        </s:typicalItem> 
        <s:AsyncListView list="{getAllResult.lastResult}"/> 
    </s:DataGrid></s:Application>

The following procedure describes how to use Flash Builder to create a component for the Client Component Framework.

Code against interfaces:

  1. In Flash Builder, create a Flex project for Adobe Enterprise Platform. (LINK TBD).

  2. Add the project that contains the interface classes to the build path:

    1. Right-click the project and click Properties.

    2. In the properties tree, select Flex Library Build Path, and then click the Library Path tab.

    3. Click New Project, then select the project that contains the interfaces and click OK.

      The project is added to the Build Path Libraries list on the Library Path tab.

    4. In the list, expand the project and double-click the Link Type property.

    5. In the Library Path Item Options dialog box, change Link Type to External, and click OK.

    6. Click OK to save the changes and close the Properties dialog box.

  3. Open the MXML file of your project, and add import statements for the interface classes and (if necessary) the IToken class.

  4. Use the interfaces to declare required variables.

The Data/Services view and Flex projects for ADEP

Flex projects for ADEP do not support the use of the Data/Services view for connecting to Data Services. You cannot connect to the services with which the ActionScript interfaces correspond. Therefore, the services are not available to drag onto the editor for automatically generating service calls.

However, the services represented in the project’s model do appear in the Data/Services view. Therefore, you can introspect deployed models and use the services that appear in the Data/Services view.

You must configure the Gesture Generator to use the Client Component Framework generator. With this generator, the code that is generated to call service functions uses interfaces instead of implementation classes.

Note: The generated code references the ActionScript classes that are generated for the project. You must modify the code so that it references classes from the interface project.

Configure the Gesture Generator:

  1. Right-click the project and click Properties.

  2. In the properties tree, select Adobe > Data Model >Code Generation.

  3. For Gesture Generator, select Client Component Framework.

Interface-backed model-generated forms

To cause the code in model-generated forms to use interfaces instead of implementation classes, configure the Model Driven Form generator. Otherwise, generate forms for use in the Client Component Framework using the usual procedures. (See Generate a model-driven form.)

Note: The code in generated forms references the ActionScript classes that are generated for the project. You must modify the code so that it references classes from the interface project.

Configure the Model Driven Form generator:

  1. Right-click the project and click Properties.

  2. In the properties tree, select Adobe > Data Model >Code Generation.

  3. For Gesture Generator, select Client Component Framework.