Using ColdFusion MX with Flex 2
Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Adobe Systems Incorporated, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and
Contents Chapter 1: Using Flash Remoting Update . . . . . . . . . . . . . . . . . . . . 5 About Flash Remoting Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Using Flash Remoting Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Data translation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Chapter 2: Using the Flex Messaging Event Gateway . . . . . . . . . 13 About Flex and ColdFusion . . . . . . .
Chapter 5: Using the ColdFusion Extensions for Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 About the ColdFusion Extensions for Flex Builder . . . . . . . . . . . . . . . . 74 Installing the ColdFusion Extensions for Flex Builder . . . . . . . . . . . . . . 74 Eclipse RDS Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 ColdFusion/Flex Application wizard . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 1 1 Using Flash Remoting Update You can use Macromedia Flash Remoting Update to create rich Internet applications in ColdFusion MX 7.0.2. Contents About Flash Remoting Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Using Flash Remoting Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Using Flash Remoting Update To specify a CFC to connect to, you do one of the following: ■ Specify the CFC, including the path from the web root, in the MXML. ■ Create a named resource for each CFC that you connect to. This is similar to registering a data source. To specify the CFC in the MXML: ■ Specify the CFC, including the path from the web root, in the MXML; for example: PAGE 7To use the CFC resource in your Flex Builder 2 project: 1. For each Flex Builder 2 project, set the Flex compiler property by doing the following: a. Select Project > Properties. b. Select the Flex complier option. c. Enter the following in the Additional Compiler Argument text box: --services=C:\CFusionMX7\wwwroot\WEB-INF\flex\services-config.xml 2. In the mxml file, you use the tag to connect to your CFC named resource.
Flash Remoting Update and authentication The Flash client passes the username and password, which are set in the Flash client, to the CFC. To authenticate users when using Flash Remoting Update, you can then use the cflogin tag to authenticate the user. Flash Remoting Update supports the same authentication mechanism as any HTTP request from the browser, including getting and setting cookies. This mechanism allws you to take advantage of the same authentication systems you use for any normal HTTP request.
When you click the Logout button, the application calls the setRemoteCredentials method, which sets the username and password to null, and logs out the user on the client side. In addition, the application calls the logoutuser method, which handles server side logout. When you click the Get Secure Data button, the application calls the getData method in the MXML file, which, in turn, calls the getData function in the CFC.
PAGE 11The CFC contains two functions: logoutuser and getData. The getData function authenticates the user against the flexadmin role and returns a string.The logoutuser function calls the tag to log the user out on the server.
Using Flash Remoting Update
CHAPTER 2 2 Using the Flex Messaging Event Gateway You can develop an application that uses the Flex Messaging gateway type to send messages to and receive messages from an Adobe Flex application. To do so, you configure the Flex Messaging gateway. This document provides information about how to write and test an application that uses the event gateway. You should be familiar with ColdFusion event gateway in ColdFusion MX Developer’s Guide.
About Flex and ColdFusion ColdFusion includes the Flex Messaging event gateway, which uses the ColdFusion Event Gateway Adapter to send messages to and receive messages from Adobe Flex Data Services. This means that ColdFusion applications and Flex applications can publish to and consume events from the same event queue. NO T E To use the Flex Messaging event gateway to interact with a Flex application, the Flex application must be running on Flex Data Services.
8. The Flex Messaging event gateway and the ActionScript translator convert ColdFusion values to the appropriate ActionScript 3.0 data types, and then the gateway sends the message to the ColdFusion Event Gateway Adapter. 9. The ColdFusion Event Gateway Adapter sends the message to the Flex Message Service. 10. The Flex Message Service passes the message to the Flex application.
The Flex Messaging event gateway configuration file is a simple Java properties file that contains the following properties: Property Description destination A hard-coded destination. If you specify this value, any destination information in the message is ignored. host The host name or IP address of the Flex Data Services server. allowedIPs A comma- delimited list of IP addresses from which the Flex Messaging event gateway accepts messages.
2. Copy the following section from the sample messaging-config.xml file to the web application messaging-config.xml file:
3. Change the ID of the destination so the destination ID for each ColdFusion destination on that machine is unique. (For example, because ColdFusion finds the destination by locating its name in a machine wide registry, you should not specify the same destination ID in both the flex and the samples web application.) 4. To use the ColdFusion-specific channels (to support value objects), copy the following channels from the sample services-config.xml file to the web application servicesconfig.
Sending outgoing messages Your ColdFusion application sends a message to a Flex application by doing the following actions: 1. The ColdFusion application sends an outgoing message, in a cfreturn tag in the listener CFC’s listener method, or by calling the ColdFusion SendGatewayMessage function. 2. A method provided by the Flex Messaging gateway gets called when you send an outgoing message.
Sending outgoing message example The following example from a CFM page creates a structure that contains the message. The destination is the destination ID specified in the messaging-config.xml file for the instance of the Flex Messaging event gateway to send the message to. The body is the body of the message. The sendGatewyMessage CFML function sends the message to the instance of the gateway. success.msg = "Email was sent at " & Now()> success.
#mailmessage# 2. Save the file handleemail.
Run the application To run the Flex application, you browse to the MXML file. 1. Open the http://localhost:8700/samples/dataservice/myapp/flexemail2cf.mxml file in a browser. 2. Enter a valid e-mail address in the To text box. Ensure that the e-mail address is one whose incoming e-mail you can check. 3. Enter the name of the sender in the From text box. 4. Enter the subject in the Subject text box. 5. Enter the message in the Message text area. 6. Click Send.
CHAPTER 4 4 Using the Flex Data Service Assembler This chapter describes how to develop an application that uses the Flex Data Service assembler provided with ColdFusion MX 7.0.2. It describes how you can configure the Flex Data Service assembler and write and test an application that uses the assembler. This chapter assumes that you are familiar with ColdFusion components, as well as accessing and using data in ColdFusion applications. It also assumes that you are familiar with Adobe Flex Data Services.
About Flex and ColdFusion The Flex Data Service assembler lets ColdFusion developers use ColdFusion components (CFCs) to provide the back-end data management for a Flex application that uses the Data Management Service. N OT E To use the Flex Data Service assembler, the Flex application must be running on Flex Data Services 2.0.
7. The ColdFusion server sends the results to the Flex Data Service assembler. 8. The Flex Data Service assembler and the ActionScript translator convert ColdFusion values to the appropriate ActionScript 3.0 data types, and then the assembler sends the results to the ColdFusion Data Service adapter. 9. The ColdFusion Data Service adapter sends the results to the Flex Data Management Service. 10. The Flex Data Management Service passes the results to the Flash client.
Configuring a destination for the ColdFusion Data Service Adapter To ensure that Flex recognizes the Flex Data Service assembler, you add the coldfusion-dao adapter to the section and a destination to the data-management-config.xml file that is in the WEB-INF/flex folder of the server on which you want to run the Flex application. To add the coldfusion-dao adapter, copy the following adapter-definition to the sectoin of the data-management-config.
The destination can include the following:
remote false false false
--> true true To enable the Data Services adapter: 1. Copy the following ColdFusion-specific sections (cf-dataservice-rtmp and cf-polling-amf) from the sample services-config.
The sample services-config.xml file is located in the C:\fds2\resources\config folder, and the web application flex-messaging-service.xml file is located in the C:\fds2\jrun4\servers\default\samples\WEB-INF\flex folder when you install Flex in the default location. 2. (Optional) Turn on the ColdFusion-specific debugging output in the Flex console by adding the following tag in the tag in the section of the web application services-config.xml file: DataService.
Selecting a methodology When you create your ColdFusion CFCs, you can put the database manipulation functionality directly in the methods in the assembler CFC and create a Value Object CFC, which is a CFC that contains property definitions and related get and set methods. However, to separate the lower level database functionality from the high level Flex assembler operations, you can use the Bean/DAO methodology.
The arguments are as follows: ■ fillArgs ■ item ■ isCreate is a list of arguments to pass to the fill method is the record to check to determine if it is in the result set indicates whether the record is new A sample fillContains method, which determines whether the fill arguments (part of the first or last name) are in the Contact item passed to the function, is as follows: >
You can set the cerdentials by doing either of the following: ■ Specifying credentials in ActionScript ■ Specifying credentials in the Flex destination Specifying credentials in ActionScript To specify credentials in ActionScript, you use the setRemoteCredentials() method, as in the following example: ds = new DataService(“mydest”); ds.
To enable SSL, you do the following: ■ Create the keystore ■ Configure Flex ■ Enable SSL in the ColdFusion MX Administrator To create the keystore: 1. Generate the SSL server (ColdFusion) keystore file by using the keytool utility, with a command similar to the following: keytool -genkey -v -alias FlexAssembler -dname "cn=FlexAssembler" keystore cf.
The previous example specifies the location of the keystore for Flex Data Services with integrated JRun, installed using the default settings. If you are using a different server, specify the location of the cacerts file for the JRE that you are using. For example, if you are using JBoss, you specify the keystore location as $JAVA_HOME/jre/lib/security/ cacerts. To enable SSL in the ColdFusion MX Administrator: 1.
Example application This section describes creating a Flex application that uses the ColdFusion Data Service adapter and Flex Data Service assembler so that a ColdFusion component handles the backend database management. You can download the source code for the files that are included in the Flex sample Contact application from “Using ColdFusion with Flex – Part 1: Creating and Running a Contact Manager Application.
Creating the count method The count method returns the number of records that would be returned by the fill method. The return type of the count method is numeric. It appears as follows:
Creating the get method The get method has a specific signature. It returns one record from the database, as a CFC instance. It appears as follows:
Creating the DAO CFC You create the DAO CFC to perform direct manipulations of the back-end database. The DAO CFC appears as follows: PAGE 55ArrayAppend(ret, obj);
localLastName=arguments.Contacts.getLastName()> localAddress=arguments.Contacts.getAddress()> localCity=arguments.Contacts.
and City = and State = and Zip = and phone = order by contactId desc arguments.Contacts.setcontactId(qGetID.
delete from Contacts where Contacts.contactId = PAGE 58Creating the Value Object CFC To create the Value Object to return to Flex, you create a CFC by using the cfproperty tag and including get and set methods. The Value Object CFC appears as follows: PAGE 64private function resultHandler(event:ResultEvent):void { Hourglass.remove(); if (event.token.kind == "create") { dg.selectedIndex = contacts.length - 1; } else if (event.token.kind == "delete" && contacts.length>0) { var index:int = event.token.index < contacts.length ? event.token.index : contacts.length -1; dg.selectedIndex = index; contact = contacts[index]; } else if (event.token.kind == "fill" && contacts.length>0) { dg.
private function newContact():void { dg.selectedIndex = -1; contact = new Contact(); } private function updateContact():void { var token:AsyncToken; if (!contacts.contains(contact)) { Hourglass.show(this); ds.createItem(contact); token = ds.commit(); token.kind = "create"; } else if (ds.commitRequired) { Hourglass.show(this); token = ds.commit(); token.kind = "update"; } } private function deleteContact():void { Hourglass.show(this); var index:int = dg.selectedIndex; ds.
PAGE 67 PAGE 68import mx.managers.PopUpManager; import mx.core.IFlexDisplayObject; private static var dialog:IFlexDisplayObject; public static function show(parent:DisplayObject):void { dialog = PopUpManager.createPopUp(parent, Hourglass, true); PopUpManager.centerPopUp(dialog); } public static function remove():void { PopUpManager.removePopUp(dialog); } ]]> mini.mxml The mini.mxml file contains the following:
contact.as The contact.as file contains the following: /////////////////////////////////////////////////////////////////////////// ///// // // Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors. // All Rights Reserved. // The following is Sample Code and is subject to all restrictions on such code // as contained in the End User License Agreement accompanying this product.
wait.png The wait.
Using the Flex Data Service Assembler
CHAPTER 5 5 Using the ColdFusion Extensions for Flex Builder The ColdFusion Extensions for Flex Builder include wizards that help generate code for common tasks and an extension that lets you connect to remote servers from Adobe Flex Builder and Eclipse. To use the ColdFusion Extensions for Flex Builder, you should be familiar with ColdFusion components, as well as accessing and using data in ColdFusion applications. You should also be familiar with Adobe Flex Builder.
About the ColdFusion Extensions for Flex Builder To make some common coding tasks easier, the ColdFusion Extensions for Flex Builder include the following: ■ Eclipse RDS Support plug-in, which lets you access files and data sources on a ColdFusion server. ■ ColdFusion/Flex Application wizard, which lets you create master and detail pages in an application to create, read, update, and delete records in a database.
7. Select the check box next to ColdFusion_FlexBuilder_Feature.zip, and then click Next. 8. Select the I Accept The Terms In This License Agreement option, and then click Next. 9. Click Finish. 10. Click 11. Install All. When the installation is complete, click Yes to restart Flex Builder. To uninstall the ColdFusion Extensions for Flex Builder, you must first disable them, and then uninstall them. To uninstall the ColdFusion Extensions for Flex Builder: 1.
Configuring RDS Before using RDS, you must configure ColdFusion servers. To configure any ColdFusion servers that you want to connect to using RDS: 1. In Flex Builder or Eclipse, select Window > Preferences > RDS Configuration. 2. To configure the default localhost server, select localhost and specify the following: 3. ■ Description ■ Host name (127.0.0.
Using the RDS Fileview The RDS Fileview lists all the folders and files on the RDS server. You use the navigation buttons as indicated in the following table: Button Action Refresh the active RDS server. Create a file in the currently selected folder. Delete the currently selected file. Create a folder in the currently selected folder. Delete the currently selected folder. NO T E RDS Eclipse Support does not support file operations such as copy and paste, drag and drop, and changing file attributes.
Building queries in the RDS Query Viewer To build and execute a query using the RDS Query Viewer: 1. Click the RDS Query Viewer icon on the RDS Dataview tab. The RDS Query Viewer opens in its own tab, which means that if you have other documents open, the RDS Query Viewer has focus. 2. Do one of the following: ■ Enter the SQL, and double-click the field names and table names as appropriate. ■ Click the Visual Query Builder button.
Using Visual Query Builder You use the Query Builder to define a SQL statement. The following image shows the Query Builder user interface: To build a SQL statement using the Table pane and the Properties panel: 1. Expand a data source. 2. Double-click the columns to be named in the SELECT statement. As you select columns, the Query Builder creates the SELECT statement in the area at the lower edge of the pane. 3.
4. 5. (Optional) Specify sort order by doing the following: a. Locate the column in the Properties panel. b. Click in the Sort Type cell of the column you want to sort by. c. Specify Ascending or Descending. d. (Optional) If you specify multiple sort columns, you specify precedence using the Sort Order cell. (Optional) Specify selection criteria by doing the following: a. Locate the column in the Properties panel. b. Click in the Condition cell. c. Select WHERE. d.
ColdFusion/Flex Application wizard The ColdFusion/Flex Application wizard creates ColdFusion and Flex files for a create, read, update, delete (CRUD) application. You specify the master, detail, and master/detail pages to include in the application, and the relationship between the application’s pages. The wizard lets you use Visual Query Builder to generate the SQL statements. For more information about using Visual Query Builder, see “Using Visual Query Builder” on page 79.
Starting the ColdFusion/Flex Application wizard To start the ColdFusion/Flex Application wizard: 1. Configure your RDS servers. For more information, see “Configuring RDS” on page 76. 2. In Flex Builder, select File > New > Other. 3. Under ColdFusion Wizards, select ColdFusion/Flex Application Wizard, and then click Next. 4. After reading the introductory text, click Next. 5.
To create a page: 1. Click the plus sign (+). 2. In the Name: text box, enter the name for the page. 3. Select the page type (master, detail, or master/detail). 4. Click Edit Master Form or Edit Detail Form, depending on the type of form you are creating. The Visual Query Builder starts. 5. Use Visual Query Builder to specify the data source, tables, and fields to include in the form, and then click Save to save the query.
Tips for creating applications with the ColdFusion/ Flex Application wizard Although the ColdFusion/Flex Application wizard greatly simplifies creating CRUD applications, you should keep the following in mind to ensure that you create the application that you designed. ■ To adjust UI elements, open the MXML file in Flex Builder design mode.
ActionScript to CFC wizard The ActionScript to CFC wizard lets you create a ColdFusion component (CFC) based on an ActionScript class file. To use the ActionScript to CFC wizard: 1. In Flex Builder, go to the Project Navigator. 2. Right-click an ActionScript class file. 3. Select ColdFusion Wizards > Create CFC. 4. Enter the location of the CFC file in the Save to Project Folder text box, or click Browse and select the location. 5. Enter the filename of the CFC in the CFC Filename text box. 6.
RDS CRUD wizard The Remote Development Services (RDS) CRUD Wizard lets you dynamically create a ColdFusion component (CFC) based on a table that is registered in the ColdFusion Administrator on a ColdFusion server. To use the RDS CRUD wizard, you must have the Eclipse RDS Support plug-in installed. (The Eclipse RDS Support plug-in is installed when you install the ColdFusion wizards.
6. (Optional) Select the Primary Key column if a primary key is not defined in the database. 7. (Optional) To specify the primary key column in addition to the other values specified in the CFC, select the Primary Key is Controlled by the User option. If the primary key is automatically generated by the database (the identity field), do not select this option. 8. To replace existing files, select the Overwrite Files If They Already Exist option. 9.
Browsing components The Service Browser lists the following components: ■ Components that the ColdFusion component browser lists The ColdFusion component browser is located at cf_root/wwwroot/CFIDE/ componentutils/componentdoc.cfm.
Managing web services The Services Browser lets you manage a list of web services by adding or deleting WSDL URLs from a list. In addition, when you are editing a ColdFusion file, you can use the Services Browser to generate CFML code to invoke a web service or to create a web service object. Similarly, when you are editing an ActionScript file, you can use the Services Browser to generate ActionScript.
To create a web service object in ColdFusion: 1. Place your mouse pointer where you want to insert the code. 2. View the list of web services. 3. Highlight a web service or a method in a web service and right-click. 4. Select Insert CFInvoke. The code that the Service Browser generates appears in the ColdFusion file. The following is an example of the code that the Service Browser generates: createObject("webservice", "http://arcweb.esri.com/services/v2/ MapImage.wsdl").
