This blog explains how to setup the perfect environment and projects to build Flex applications on top of the Netweaver CE stack. This setup enables you to build stand-alone flex applications, that are deployed as Java web-applications that don't require web-dynpro containers.
Required development software
To build the perfect Flex project, you need the following IDE software:
Netweaver Developer StudioBesides that, you need the following server software:
0.1.
Netweaver Composition Environment(either on your desktop or on a server)0.1.
Apache Server(on your desktop)Middleware:
0.1. BlazeDS 4 (binary distribution) (this isn't software that should be installed, but basically a library that needs to be copied to your Java-project)
Setup the Java project in NWDS
To setup the Java project, start at the "Development configurations" perspective. Right click in the "Component Browser" and choose "New", "Development Configuration". From there you can import a configuration or create one from scratch.
Create the development configuration
If you create a Development Configuration from scratch, you will see a pop-up window, in which you can enter the name of the Development Configuration and Source Software component.
Once you click next, you can select the Software Components that you would like to include in your project. You can de-select all software components here and only select the software components from the list below:
0.1. ENGFACADE
0.2. SAP_BUILDT
If you plan on adding webdynpro functionality in a later stage, you may also want to select
0.1. FRAMEWORK
0.2. WD-RUNTIME
Create the web-application
After clicking finish, the development configuration should be created and a project can be created from there by right-clicking the software component (yellow) and selecting "New" "Development Component"
Once you have clicked "Development Component", a pop-up will open in which you can select the type of development component. From the tree, select "sap.com", "Java EE", "Web Module" and click "Next".
The web-module will be the container for the flex application, but will also contain additional logic to e.g. access back-end applications.
In the next page, you can supply details about the Development Component:
From this window you can click "Finish" straight away. When you do, a project is created in your workspace and the wizard will ask whether you want to switch to the Java EE perspective to edit it. Choose "No" here, because we still need to build an EAR (Enterprise Application Repository) project, so that we are able to deploy the web-application to the server.
Create the enterprise application
To create the EAR project, right click on the software component (yellow) and click on "New", "Development Component". From the tree, select "sap.com", "Java EE", "Enterprise Application" and click "Next".
In the next page, you will be able to name the enterprise application:
From this window you can click "Finish" straight away. When you do, another project is created in your workspace and the wizard will ask you again whether you want to switch to the Java EE perspective to edit it. Click "No' again, because it would be nice if the EAR has a reference to the web application.
Select the ear component and click on "Dependencies" in the "Component Properties" tab. From there, click "Add", select the Web application and click Finish:
The Flex application should be listed in the "required DCs" list now.
Take down the location of the WebContent folder
Now it is time to switch to the "Java EE" perspective. Open the flex application project and open the WebContent folder consecutively. This folder is still empty, but will contain our flex application later. In order to know where the release build of the flex application needs to be written to, right-click the WebContent folder and click on "Properties". The location property indicates where on the disk, this folder can be found:
Copy the location to a spot where you can easily find it again (notepad?)
Add BlazeDS to the project
Next, the project should be prepared for back-end communication using BlazeDS. Once you downloaded BlazeDS, go through the following steps:
0.1. Unzip the downloaded file (blazeds-bin-4.0.0.14931.zip)
0.2. Unzip the blazeds.war file
0.3. Copy the contents of de blazeds.war file to the Webcontent folder of the flex web application project.
Once copied, there will be an error in the project, this can easily be solved by opening WEB-INF/web.xml and perform the following changes:
0.1.
Remove the second line starting with <!DOCTYPE0.1.
Replace line <web-app> with <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">0.1.
Remove line <display-name>MessageBrokerServlet</display-name>To enable RDS (remove data service), which allows Adobe Flash Builder to introspect classes in the Java application:
0.1.
Remove line <!-- begin rds, and end rds -->0.1.
Remove line <display-name>RDSDispatchServlet</display-name> +and <description>BlazeDS Application</description> +tag of both the MessageBroker servlets as well as the RDSDispatchServlet in the web.xml +within the <web-app> tags of web.xml0.1.
Add <security-role-map><role-name>MBeanCreator</role-name><server-role-name>administrators</server-role-name> </security-role-map> within the <web-j2ee-engine> tag of file web-j2ee-engine.xmlThe "crossdomain.xml" file allows back-end data to be retrieved from another server than server where the flash application is located. More info on the "crossdomain.xml" can be found on Adobe Developer Connection (http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html) and SAP Help (http://help.sap.com/saphelp_nwce72/helpdata/en/71/e6e62b89f84da29aecc97c3338b53e/frameset.htm).
Prepare the Enterprise Application
To be able to include the web application into the enterprise application, a little more needs to be done than to just add a dependency. To add the web application, please go through following steps:
0.1. Open the Enterprise Application Project in the Project Explorer
0.2. Right click the project and in the context menu, choose "Java EE Tools", "Generate Deployment Descriptor Stub". The application.xml appears in the META-INF directory of the Enterprise Application Project.
0.3.
Double click the application.xml and change the context-root into something easier and more enticing, e.g. <context-root>flexapp</context-root>
The context-root determines on what location on the server the application will be located, e.g.: http://ce-server:50000/flexapp.
Setup the Apache environment
When you run a flex application from Flash builder, Flash builder will try to write files to the folder structure of a web-server and launches a web-browser pointing at the web-site related to that folder.
Unfortunately this doesn't really work for a CE server. When flash builder writes content to a directory structure, this content is not automatically available through the web-server due to caching.
Besides that, it is also considered a bad practice to write directly to the directory structure of a CE server. Instead web-applications should always be deployed through EAR archives.
An easy way to avoid writing files to the directory structure of the CE server is to use a second server that does allow for that. This server doesn't necessarily have to be a Java server (as it will not be executing Java code), so Apache is an easy option.
0.1. To set-up apache for this purpose, you will have to find the htdocs folder and create a directory there with the same name as the context-root that was set in application.xml
0.2. Copy the contents of de blazeds.war file to the new folder.
Setup the Flex Project in Adobe Flash Builder
Flash Builder is used to create the actual Flex application that will be deployed on the CE server.
Create the Flex Project
To create a project, click on "File", "New", "Flex Project". In the pop-up that appears, you can enter a project name. To communicate with the Java server, select "J2EE" under "Server technology", and to make life easy, check "Use remote object access service" and check "BlazeDS":
Once you click next, you are asked to enter server the location of the J2EE server.
0.1. The root folder is the folder that Flex builder will use to write the debugging version of your flex application to. This is the folder that the BlazeDS files were copied to earlier.
0.2. The root URL is the http-address of that same folder.
0.3. The context root is the same as the the context root that was entered in the application.xml during preparation of the enterprise application
After keying these details, the configuration needs to be validated before you can continue. Press the "Validate Configuration" button to do so. Once the configuration has been validated, click the "Next" button to go to the next wizard page.
In this page, keep all values as they are, except for the "Main application file". Conveniently change this file to index.mxml. Besides a flash-file (index.swf), Flash Builder will also generate a index.html and index.html is one of the welcome pages set in the Java web application so that it will automatically show the application on requesting the directory (e.g.
http://ce-server:50000/flexapp,%20will%20automatically%20show%20index.html).
After clicking next, Flash Builder will generate the project and will open file index.mxml.
To build a very tiny little application, insert the following line somewhere between the <s:Application> tags: <s:Label text="Hello world"/>. A miniature application is ready for now and will show "Hello world" on execution.
To try if the application works, press Ctrl+F11 to run the application. On pressing "Run", Flash Builder will generate a debug version of the application, push it to the web-server's directory structure and launch the browser. You should see "Hello world" in the browser.
Publishing the flex application to NWDS
Now a tiny flex application is ready, we can publish it into the NWDS web application, by choosing "Project", "Export Release Build" from the menu.
In the pop-up that appears, you can enter the location to which the flex application should be published. Enter the WebContent location of the Java web application here that you took down earlier.
After pressing finish, the flex application has been published to the location of the WebContent directory. Conveniently, this location will be stored in the project as the bin-release directory, so that you don't have to key it in when you generated the project next time.
To examine what has been generated you can open the WebContent directory from the Package Explorer, but opening folder bin-release:
Building and deploying the application
The build process and deployment is executed from the NWDS. During this step, the web-application is built and prepared into a .war and will then be packed into an .ear file. After the ear-file is complete, it will be sent to the server for deployment.
Building
To make NWDS aware of the new flex application content, right-click on the WebContent folder and choose "Refresh". After Refresh you should see the application "index.swf" as part of its content. A html container, index.html, is generated as well.
To build the application and package it into an ear-file, it is probably easiest to just build the ear project. Because there is a dependency between the ear project and the web-application project, the web-application will automatically be built if necessary too.
Build the ear-project by right-clicking the ear project and picking "Development Component", "Build" from the context menu. From the "Build DCs", accept the defaults and press "OK" to build the archives.
Deploying
To deploy the application, open up the "Server" tab in the bottom of the screen.
If no servers have been defined yet, it's now time to do so:
0.1. Right-click on an empty spot in the content area of the tab and pick "New", "Server" from the context menu.
0.2. Enter the server's host name and click "Next"
0.3. Enter the instance number (default instance number is 0) of the server and click "Finish"
When the server is there, indicate which projects you would like to publish (deploy) to the server.
0.1. Right-click the Server-name and choose "Add and Remove Project" from the context menu.
0.2. Select the ear project you would like to publish to the server and press "Add". The selected project will then move to the "Configured Projects" list.
0.3. If you didn't uncheck "If the server is started, publish changes immediately", NWDS will deploy the projects' ear file to the server right after you press "Finish".
Note: If you didn't deploy anything before, you will have to enter a valid user and password of a user that has sufficient authorization to deploy applications.
After the application has been deployed it can be run by launching a browser and pointing it to http://:
/context-root (e.g.
http://ce-server:50000/flexapp😞
