Flex Test Drive: Deploy your application to a web server
Download the Test Drive solution files (ZIP, 14 MB)
Code
No code changes.
Tutorial
In this tutorial, you take a look at where your service code,your server-side class files, need to be placed on your web server so your Flex application can access them. Because this is application server dependent,refer to the section for your server side-technology—PHP, ColdFusion, or Java.
PHP
When moving a Flex and PHP application to a production server, you must make sure that:
- the Zend Framework is installed on the server
- the gateway.php and amf_config.ini files are placed on the server and updated to reflect proper locations on the production server
- the PHP classes that the Flex application calls are located in one of the directories specified in the amf_config.ini file.
Step 1: In Flash Builder, browse the generated EmployeeService file.
This is the services.employeeservice._Super_EmployeeService.as file. Locate the source, endpoint, and destination assignment statements (see Figure 1).
When you create a data service in Flash Builder, you specify the location of the PHP class to call. The name of this class is hard-coded in this generated service file but its location is not.
Note the endpoint, the file to invoke, is set equal to gateway.php located somewhere on your PHP server. If you are using Flash Builder 4.5 for PHP, a public folder for the PHP project is created and the generated gateway.php and amf_config.ini placed in it. When you deploy your files to a web server, you need to ensure the gateway.php remains in this same location (or you need to modify the Flex service class file).
If the PHP class ever changes, you can refresh the data service from the Data/Services view and the generated files will be updated. If you rename the PHP class, though, you will need to recreate the data service.
Step 2: Open the generated Flash Remoting files.
In Flash Builder for PHP, open gateway.php and amf_config.ini located in the public folder of the TestDrive PHP project.
gateway.php is the endpoint for all Flash Remoting requests from your application. It (along with the Zend framework) handles the service request, invoking the correct class method and handling all data translation and packaging. It references a configuration file, amf_config.ini, which sets the location of the webroot, the location of Zend framework, a production flag (to suppress debug messages), and the directories to look in for classes specified in service calls:
[zend]
;set the absolute location path of webroot directory, example:
;Windows: C:\apache\www
;MAC/UNIX: /user/apache/www
webroot =/usr/local/zend/apache2/htdocs/
;set the absolute location path of zend installation directory,
example:
;Windows: C:\apache\PHPFrameworks\ZendFramework\library
;MAC/UNIX: /user/apache/PHPFrameworks/ZendFramework/library
;zend_path =
[zendamf]
amf.production = true
amf.directories[]=TestDrive/services
Because the directories that contain classes used in Flash Remoting service calls are listed here, when you deploy your Flex application to a web server, any PHP classes it calls must still be located in one of the directories specified here. Otherwise, you need to update this file so the new service file location is also listed. You should also set amf.production to true so debug messages are suppressed.
Of course, you also need to update the amf_config.ini file to reflect the locations of the web root and the Zend Framework on the production server.
Step 3: Open your PHP web root folder.
Locate the Zend Framework folder.
You need to make sure the Zend framework is also installed on your production server and that the correct location for it is specified in the amf_config.ini file.
In this module you've learned the basics for deploying a Flex application: creating a release version, including the application on a web page, and ensuring your application can access your server-side service files.
ColdFusion
You can place your Flex application and the ColdFusion components it calls anywhere in the /ColdFusion/wwwroot/. They don't have to be in the same folder and they can be in any subfolders. The relative path between them does not matter. The CFCs, however, do need to be located in the same location as they were on the development server relative to the web root.
If you want to put the CFCs outside the web root, you have to create a ColdFusion mapping pointing to that location and then specify to use ColdFusion mappings in the configuration file used for Flash Remoting requests.
Step 1: Locate the Flash Remoting configuration file.
Select Project > Properties and select Flex Compiler.
You will see the following compiler argument:
-services "/Applications/ColdFusion9/wwwroot/WEB-INF/flex/services-config.xml"
This compiler argument was added when you created the project (and specified it to use a ColdFusion server and Flash Remoting). It specifies the location of the services-config.xml file that contains the details for how the communication between the application and the server should occur and what server-side classes handle the requests and translation and packaging of data.
Step 2: Open the services-config.xml file.
This file is located in /ColdFusion9/wwwroot/WEB-INF/flex/. Locate the coldfusion tag in the my-cfamf channel definition.
You will see settings for whether ColdFusion uses mappings to find CFCs, whether public as well as remote methods will be accessible, and how to handle the case of property values when converting between ColdFusion and ActionScript (since ColdFusion is case-insensitive and ActionScript is case-sensitive).
<coldfusion>
<access>
<use-mappings>true</use-mappings>
<method-access-level>remote</method-access-level>
</access>
<use-accessors>true</use-accessors>
<use-structs>false</use-structs>
<property-case>
<force-cfc-lowercase>true</force-cfc-lowercase>
<force-query-lowercase>true</force-query-lowercase>
<force-struct-lowercase>true</force-struct-lowercase>
</property-case>
</coldfusion>
Near the top of the file, you will also see an include statement for a remoting-config.xml file.
<service-include file-path="remoting-config.xml" />
Note: If you are not using ColdFusion 9, your configuration files will look slightly different. Refer to your ColdFusion documentation for details.
Step 3: Open the remoting-config.xml file.
It is located in /ColdFusion9/wwwroot/WEB-INF/flex/. Locate the ColdFusion destination.
This is the default destination that is used for calls to any ColdFusion component from a Flex application; the wildcard (*) character for the source means a CFC in any location can be called. In this case, the location of the CFC must be specified in the Flex application file.
<destination id="ColdFusion">
<channels>
<channel ref="my-cfamf"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
Note: You can also specify named destinations that are associated with a particular CFC endpoint.
Step 4: In Flash Builder, browse the generated EmployeeService file.
This is the services.employeeservice._Super_EmployeeService.as file. Locate the source and destination assignment statements (see Figure 2).
When you create a data service in Flash Builder, you specify the location of the CFC to call and this value is hard-coded in this generated service file. Note that the destination is set to ColdFusion, the name of the default destination in the remoting-config file and the source is the path to the CFC from the web root.
If the CFC ever changes, you can refresh the data service from the Data/Services view and the generated files will be updated. If you move or rename the CFC, though, you will need to recreate the data service. This means that when you deploy your Flex application to a web server, any CFCs it calls must be located in the same location as they were on the development server relative to the web root.
In this module you learned the basics for deploying a Flex application: creating a release version, including the application on a web page, and ensuring your application can access your server-side service files.
Java
When moving a Flex and Java application to a production server, you must set up BlazeDS for the web application that you are adding your Flex application to. You must also edit the remoting-config.xml file so that it has a destination with the name you used in your application and that points to the correct Java class.
Step 1: Locate the required BlazeDS files.
Open your /testdrive/ folder.
If you are creating a new web application, you can just package and deploy your development application. Otherwise, you need to set up BlazeDS for the production web application. You can get the necessary files from the development web application or download the BlazeDS WAR file and get them from the extracted WAR file.
Open the /testdrive/WEB-INF/lib folder. You need to copy all these JAR files to the lib folder of the production web application (see Figure 3). Most of these are used to handle communication between Flash Player and the server except flex-rds-server.jar and derby.jar. The flex-rds-server.jar is used by Flash Builder at development time to create a data service by introspecting the server-side classes. The derby.jar is, of course, for the Apache Derby embedded database that this application uses.
Open the /testdrive/WEB-INF/flex folder. You need to copy this folder to the WEB-INF folder of the production web application. It contains all the BlazeDS configuration files.
Open the /testdrive/WEB-INF/web.xml file. You need to copy this file to the production WEB-INF folder as well. If the production web application already has a web.xml configured, you can just copy the Servlet mapping for MessageBrokerServlet and listener for HttpFlexSession. Here is the code:
<!-- Http Flex Session attribute and binding listener support -->
<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>
<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</servlet-name>
<display-name>MessageBrokerServlet</display-name>
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
<init-param>
<param-name>services.configuration.file</param-name>
<param-value>/WEB-INF/flex/services-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>MessageBrokerServlet</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>>
</servlet-mapping>
The other Servlet mapping you see in the web.xml file is for the RDSDispatchServlet which is used by Flash Builder to create a data service by introspecting server-side classes.
Step 2: Open the services-config.xml and remoting-config.xml files.
They are located in the /testdrive/WEB-INF/flex/ folder.
In the services-config.xml file, you will see an include statement for remoting-config.xml.
<service-include file-path="remoting-config.xml" />
In remoting-config.xml, locate the employeeService destination:
<destination id="employeeService">
<properties>
<source>services.EmployeeService</source>
<scope>application</scope>
</properties>
</destination>
The application on the production server that you add your application to must also have a remoting-config.xml with a destination with this name and that points to the correct Java class. The Java class can be located in a different place than it was on the development server; this destination must reflect the location on the production server.
Step 3: Locate the Flex application's reference to the service-config.xml file.
In Flash Builder, select Project > Properties and select Flex Compiler.
You will see a compiler argument that looks something like this:
-services "/Applications/tomcat/webapps/testdrive/WEB-INF/flex/services-config.xml"
This compiler argument was added when you created the project and specified it to use a Java server and BlazeDS.
Step 4: In Flash Builder, browse the generated EmployeeService file.
This is the services.employeeservice._Super_EmployeeService.as file. Locate the destination assignment statement (see Figure 4).
When you create a data service in Flash Builder, you select a service from a list of destinations already defined in the remoting-config.xml file.
If the class ever changes, you can refresh the data service from the Data/Services view and the generated files will be updated. If you move the class, you need to make sure the destination in the remoting-config.xml file is updated to reflect the new location. If you rename the class during development though, you will need to recreate the data service.
In this module you learned the basics for deploying a Flex application: creating a release version, including the application on a web page, and ensuring your application can access your server-side service files.
To build on your knowledge, view some of the other Test Drive tutorials which cover
customizing the appearance of your application and using the expressive Flex charting components.
Learn more
Refer to the following resources to learn more about this topic:
Documentation: Accessing data with Flex
- Deploying applications that access data services
- Writing secure services
- Writing secure applications
Documentation: Using Flex 4.5
Documentation: Developing ColdFusion 9 Applications
Flex Developer Center
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Modify the database
- Flex Test Drive: Add charts and graphs
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Change the appearance of your application
- Flex Test Drive: Change the appearance of your application
- Flex Test Drive: Add charts and graphs
- Flex Test Drive: Modify the database
