Your Rating: Results: PatheticBadOKGoodOutstanding! 0 rates
Adobe Digital Enterprise Platform Experience Services, version 10.0

Overview of the sample

This sample demonstrates how to use the data modeler plug-in and Data Management Services to develop an Adobe Digital Enterprise Platform Experience Services content-based application. With the data modeler plug-in in Flash Builder, developers can connect to Experience Services - Content Repository, and they can design entity models and then deploy the data model to Experience server. Based on the data model, developers can implement CRUD operations with content that from the Content Repository just using the drag-and-drop method in the flex application.

The key feature to demonstrate in this sample is the Model Driven Development with CRX repository.

Components layout

Path

Description

/etc/aep/config/dataservices/datamodel/MDDwithCRX.fml

The data model file

/content/samples/usecases/mddwithcrx

A sling:folder node represent for the sample, with sling:resourceType point to /apps/samples/mddwithcrx

/apps/samples/mddwithcrx

Render node of the sample, has a sling:resourceSuperType property point to /libs/samples/components/flex

/etc/clientlibs/aep/samples/mddwithcrx/MDDwithCRXDataModel.swf

Main swf file for the sample

/content/MDDwithCRX

The data store location for the sample, where companies and employees are located.

To better understand how we built the sample, download the source files.

Running the sample

You can access the following URL in browser directly: http://<server_name>:<server_port>/content/samples/usecases/mddwithcrx.html  or follow the steps below:

  1. Access the main page of your Experience Server http://<server_name>:<server_port>.
  2. Log in using admin user.
  3. After login, in landing page, click Getting Started.
  4. In the sample page, under APPLICATION USE CASE SAMPLES, click Model Driven Development with CRX.
  5. If you did not log in, a login form displays. Log in with admin user.  If you have already logged in, the main page of the sample displays.

After successful login, you can view the company and employee information. You can add Company item and add Employee item to the Company in the sample application. If you do some operation on the sample, the node changes in CRX repository, so you can check the node information in CRXDE Lite/content/MDDwithCRX.

Developing your own application

Preparing your environment

Ensure that you have correctly installed your development environment. This environment includes Flash Builder 4.5.0, the Experience Services tooling for Flash Builder, and Adobe Digital Enterprise Platform Experience Services. For the detailed information, see Installing ADEP.

Accessing the sample source files

Download the source files 

Development steps

Create the project

  1. In Flash Builder, click File > New > Flex Project for ADEP-Experience Services and input the value for Project name, such as "MDDTest".
  2. Click Next to configure the server information.
  3. Click Next to configure Experience Services. In this sample, Composite Application Framework Services and UX Components are not used. Leave Composite Application Framework Services and UX components deselected.

  4. Click Next to check the Build Paths.
  5. Click Finish to create the project.

Create the data model

  1. Before creating Data Model, change the deployment hander for this project. Right click the project MDDTest, click Properties, then click Adobe > Data Model > Design Mode, select Use project settings, and select Content in the Deployment Handler drop-down list. Click OK.
  2. In the view Package Explorer, click Filters to deselect .model, then the .model folder displays in the project.
  3. Click Open Data Model for Active Flex Project, the file MDDTest.fml is created in the .model folder.
  4. Go to Window > Open Perspective > Data Model to switch to the Data Model perspective.
  5. Switch to the Design mode of the file MDDTest.fml, drag Entity - Create an Entity in the left tool bar, to the blank space, name the entity to CompanyTest.
  6. Then add properties to the entity also using the drag-and-drop method, drag Text Property in the left tool bar, to the entity CompanyTest below the existing property id, and input "name".
  7. Using the same method to add the properties: address, city, state, zip, industry. After the entity CompanyTest created, we can create the entity EmployeeTest in the same way with the properties: firstName, lastName, title, phone, email.
  8. Add relationship to the two entities:
    - Add a property to the Employee entity and name it companyTest.
    - Click the property, then in the Properties view, click the tab General, set the Type to CompanyTest. In the model editor, a relationship is drawn between the CompanyTest and EmployeeTest entities.
  9. Save the model then deploy the model. Click Deploy Model to Data Services server.
  10. Then the Deploy Data Model dialog will pop up, choose Experience server (localhost) as the Server, and select the check box Overwrite existing model if the model name is already defined on the server.
  11. Click Finish, then the model will be deployed onto the Content Repository.

Create MXML application

Create a simple MXML application based on that data model.

  1. Switch to the MDDTest.mxml in your project default package, and switch to its design mode.
  2. If your perspective is still Data Model, switch to Flash perspective. In the component view, drag a DataGrid component from Controls folder onto the Design area. To find the component view, choose Window > Show View > Other... > Flash Builder > Components.
  3. Click the Data/Services panel. If it is not visible, choose Window > Show View > Other... > Flash Builder > Data/Services.
  4. In the Data/Services panel, expand CompanyTestService and then drag the getAll():CompanyTest method onto the DataGrid component in Design View. Two message boxes display. Click OK. The DataGrid column headers change to reflect the data returned by the call to the service.
  5. Save your project.
  6. Now it’s a simple display application, you can then add a form to enable CRUD capabilities. Still in the view Data/Services, expand CompanyTestService, and then expand Data Types, right-click CompanyTest, select Generate Form…
  7. In the Generate Form dialog box, select Model Driven Form as the Form Type.
  8. Click Next to deselect some column, or click Finish to generate the form directly.
  9. After the form generated, move it below the DataGrid component in Design view.
  10. Make a few changes to enable update and delete functionality, open the MDDTest.mxml in Source view and locate the following line:
  11. Edit the line as follows:
  12. Repeat the steps 1-11 to create datagrid and generate form for EmployeeTestService.
    Note: After you add the datagrid for EmployeeTestService, and drag getAll():EmployeeTest[] on it, there are two <fx:Object> with the same id "id1" in the source code. You need to manually change one of them to other name such as "id2". And in the step 11 repeated for EmployeeTestForm, the code is:
  13. Till now, you may see the application in design mode as following:
  14. Save your project.

Add association between CompanyTest and EmployeeTest in the application

  1. Open the MDDTest.mxml in Source view.
  2. Locate to the <fx:Declarations>…</fx:Declarations> part, add the following line in this part.
  3. Then locate to the <s:DataGrid id="dataGrid">…</s:DataGrid>, add click property like following.
  4. Then locate the <fx:Script><![CDATA[ … ]]></fx:Script>, add the following lines in this part.
  5. Save your project.

Run the application

To create node or delete node when running the application, you can use anonymous user but you need to configure the ACL for the user according to the following steps:

  1. Open http://<server_name>:<server_port>.
  2. Enter admin/admin as user name/password, click Sign In.
  3. Click Content Explorer in the right side panel.
  4. Click the node “content” in the left tree.
  5. In the top bar, click Security > Access Control Editor.
  6. Click the check box next to ACL, then click Set selected policies.
  7. Click New ACE, and then click Browse, select user, and click Search Now, select anonymous, and click select.
  8. In Privileges list, select jcr:all.
  9. Click the Green arrow, and then click OK

Note: If you want to add authentication for the application, the login page should be needed, and you can refer to the detailed sample code to learn how to add authentication to such applications.

In the MDDTest project, right click MDDTest.mxml and click Run As > Web Application, then the application launched.

Next steps

  1. Readers are encouraged to study the source code of this sample for the detail.
  2. To learn more about other samples, such as Composite Application samples and Data Services samples, click here

Legal disclaimer

Any references to company names, company logos and user names in sample material or sample forms included in this documentation and/or software are for demonstration purposes only and are not intended to refer to any actual organization or persons.

Labels
  • None

Search this content