MACROMEDIA COLDFUSION MX 7.0.2-USING COLDFUSION MX WITH FLEX 2 Use Manual

Advertisement

Quick Links

Using ColdFusion MX with Flex 2

Advertisement

Table of Contents
loading

Summary of Contents for MACROMEDIA COLDFUSION MX 7.0.2-USING COLDFUSION MX WITH FLEX 2

  • Page 1 Using ColdFusion MX with Flex 2...
  • Page 2 Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved. Copyright © 2006 Adobe Macromedia Software LLC. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without written...
  • Page 3: Table Of Contents

    Contents Chapter 1: Using Flash Remoting Update ....5 About Flash Remoting Update ........5 Using Flash Remoting Update .
  • Page 4 Chapter 5: Using the ColdFusion Extensions for Flex Builder ..........73 About the ColdFusion Extensions for Flex Builder .
  • Page 5: Chapter 1: Using Flash Remoting Update

    In addition, you can use Flash Remoting Update to create cfldap cfquery Macromedia Flash Forms and Flash applications that contain features such as server call backs and customized user interface. You can use Flash Remoting Update with all configurations of ColdFusion MX 7.0.2 (server, multiserver, and J2EE) on all the platforms that ColdFusion MX 7.0.2 supports.
  • Page 6: 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 ■...
  • Page 7 To use the CFC resource in your Flex Builder 2 project: For each Flex Builder 2 project, set the Flex compiler property by doing the following: Select Project > Properties. Select the Flex complier option. Enter the following in the Additional Compiler Argument text box: --services=C:\CFusionMX7\wwwroot\WEB-INF\flex\services-config.xml In the mxml file, you use the tag to connect to your CFC named...
  • Page 8 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 tag to authenticate the user. cflogin Flash Remoting Update supports the same authentication mechanism as any HTTP request from the browser, including getting and setting cookies.
  • Page 9 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 method, which handles server side logoutuser logout.
  • Page 10 <mx:RemoteObject id="cf" destination="ColdFusion" source="CFIDE.samples.LoginTest.logintest"> <mx:method name="getData" result="serverResult(event)" fault="serverFault(event)" /> <mx:method name="logoutuser" /> </mx:RemoteObject> <mx:Form x="10" y="10"> <mx:FormItem label="username"> <mx:TextInput id="username" text="admin"/> </mx:FormItem> <mx:FormItem label="password"> <mx:TextInput id="password" text="adminpwd"/> </mx:FormItem> <mx:FormItem direction="horizontal"> <mx:Button label="Login" click="logIn();"/> <mx:Button label="Logout" click="logOut()"/> </mx:FormItem> <mx:Button label="Get Secure Data" click="getData();"/> </mx:Form>...
  • Page 11: Data Translation

    The CFC contains two functions: . The function logoutuser getData getData authenticates the user against the flexadmin role and returns a string.The logoutuser function calls the <cflogout> tag to log the user out on the server. <cfcomponent> <cffunction name="logoutuser" access="remote"> <cflogout>...
  • Page 12 Using Flash Remoting Update...
  • Page 13: Chapter 2: Using The Flex Messaging Event Gateway

    You should be familiar with ColdFusion event gateway in ColdFusion MX Developer’s Guide. This document also assumes that you are familiar with Adobe Flex Data Services. Macromedia ColdFusion MX Standard Edition does not support event gateways. Contents About Flex and ColdFusion ..........14 Configuring a Flex Messaging event gateway .
  • Page 14: About Flex And Coldfusion

    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.
  • Page 15: Configuring A Flex Messaging Event Gateway

    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. The ColdFusion Event Gateway Adapter sends the message to the Flex Message Service. The Flex Message Service passes the message to the Flex application.
  • Page 16: Enabling Communication With Flex

    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.
  • Page 17 Copy the following <destination> section from the sample messaging-config.xml file to the web application messaging-config.xml file: <!-- ======================================== --> <!-- ColdFusion Messaging Gateway --> <!-- ======================================== --> <destination id="ColdFusionGateway"> <adapter ref="cfgateway" /> <properties> <!-- Star ('*') means gatewayid is found in the 'gatewayid' message header.
  • Page 18 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.) 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 services-...
  • Page 19: Sending Outgoing Messages

    Sending outgoing messages Your ColdFusion application sends a message to a Flex application by doing the following actions: The ColdFusion application sends an outgoing message, in a tag in the listener cfreturn CFC’s listener method, or by calling the ColdFusion function.
  • Page 20: Handling Incoming Messages

    Sending outgoing message example The following example from a CFM page creates a structure that contains the message. The is the destination ID specified in the messaging-config.xml file for the instance destination of the Flex Messaging event gateway to send the message to. The is the body of the body message.
  • Page 21: Using Session And Client Variables

    <!--- Create a structure to hold the message object sent from Flex---> <cfset messagebody = event.data.body> <!--- Populate the structure. ---> <cfset mailfrom="#messagebody.emailfrom#"> <cfset mailto="#messagebody.emailto#"> <cfset mailsubject="#messagebody.emailsubject#"> <cfset mailmessage ="#messagebody.emailmessage#"> <!--- Send email with values from the structure. ---> <cfmail from="#mailfrom#" to="#mailto#"...
  • Page 22: Authentication

    Authentication Flex and ColdFusion provide the following authentication features for communicating through the Flex Messaging event gateway: Restricting IP addresses that are allowed to send a message through the Flex Messaging ■ event gateway Specifying remote credentials in Flex, and then authenticating those credentials in ■...
  • Page 23: Data Translation

    The session ID is the client ID assigned to your Flex application. Reloading the Flex application starts a new session with a new session ID. To set credentials in a message in Flex, before sending the message through the gateway to the CFC, you use the method, as follows: setRemoteCredentials...
  • Page 24 Using the Flex Messaging Event Gateway...
  • Page 25: Chapter 3: Use Coldfusion Event Gateway Adapter

    CHAPTER 3 Use ColdFusion Event Gateway Adapter This tutorial shows you how to create a Flex application to send a message to a ColdFusion application and a ColdFusion component to send a message to a Flex application. The sample application does not take advantage of capabilities that are unique to Adobe Flex, instead, it describes the communication with ColdFusion applications that the ColdFusion Event Gateway Adapter enables.
  • Page 26: Set Up Your Development Environment

    Set up your development environment The ColdFusion Event Gateway Adapter lets you create applications in which Flex Data Services and ColdFusion MX 7.0.2 communicate. Flex Data Services includes the ColdFusion Event Gateway Adapter. ColdFusion MX 7.0.2 includes the Flex Messaging event gateway.
  • Page 27 To ensure that Flex Data Services recognizes the ColdFusion Event Gateway Adapter, you edit the messaging-config.xml file, which is located in the C:\fds2\jrun4\servers\default\samples\WEB-INF\flex directory if you installed Flex Data Services using the default settings. To enable communication through the Flex Messaging event gateway: Copy the <adapter-definition>...
  • Page 28: Create The Flex Application

    Create the Flex application The Flex application in this tutorial is a simple form in which you specify the elements of an e-mail message, including the recipient, the sender, the subject, and the message body. Create a new MXML file In this section, you create an MXML file in which the layout of user interface elements is exactly as you specify them, or absolute.
  • Page 29: Import The Required Actionscript Classes

    Import the required ActionScript classes In this section, you create a script block and import a set of classes that you will use. Create a script block for ActionScript code directly below the <mx:Application> tag: <mx:Script> <![CDATA[ ]]> </mx:Script> Directly below the tag, add the following ActionScript import statements: <![CDATA[ import mx.messaging.events.*;...
  • Page 30 Send a message to ColdFusion In this section, you create a function to send a message through the Flex Messaging event gateway to a ColdFusion application. You then create a structure, named msg, that contains the gateway ID, and the information necessary to send an e-mail message. The gateway ID is the ID you assign when you create the gateway instance in ColdFusion MX Administrator.
  • Page 31 Verify that your code is correct Your code should match the following code example. Verify that the content is correct. <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()"> <mx:Script> <![CDATA[ import mx.messaging.events.*; import mx.messaging.Producer; import mx.messaging.messages.AsyncMessage; public var pro:mx.messaging.Producer; public var con:mx.messaging.Consumer; public function initApp() { pro = new mx.messaging.Producer();...
  • Page 32: Create The Coldfusion Application

    <mx:TextInput x="103" y="13" width="291" id="emailto" editable="true"/> <mx:TextInput x="103" y="43" width="291" id="emailfrom" editable="true"/> <mx:TextInput x="103" y="73" width="291" id="emailsubject" editable="true"/> <mx:TextArea x="103" y="102" width="291" height="236" id="emailmessage" editable="true"/> <mx:Label x="63" y="15" text="To:" textAlign="right"/> <mx:Label x="37" y="103" text="Message:" textAlign="right"/> <mx:Label x="52" y="45" text="From:"/> <mx:Label x="37" y="75" text="Subject:"/> <mx:Button x="402"...
  • Page 33: Test The Application

    <!--- Send the e-mail. ---> <cfmail from="#mailfrom#" to="#mailto#" subject="#mailsubject#"> <cfoutput>#mailmessage#</cfoutput> </cfmail> <!--- Create the structure to send back to Flex. ---> <cfset success = StructNew()> <cfset success.body = "E-mail was sent at " & Now()> <cfset success.destination = "ColdFusionGateway"> <!--- Send the structure to Flex. ---> <cfset ret = SendGatewayMessage("Flex2CF2", success)>...
  • Page 34 Run the application To run the Flex application, you browse to the MXML file. Open the http://localhost:8700/samples/dataservice/myapp/flexemail2cf.mxml file in a browser. 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. Enter the name of the sender in the From text box.
  • Page 35: Chapter 4: Using The Flex Data Service Assembler

    CHAPTER 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.
  • Page 36: About Flex And Coldfusion

    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. To use the Flex Data Service assembler, the Flex application must be running on Flex Data Services 2.0.
  • Page 37: Application Development And Deployment Process

    The ColdFusion server sends the results to the Flex Data Service assembler. 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. The ColdFusion Data Service adapter sends the results to the Flex Data Management Service.
  • Page 38 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 <adapters> 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.
  • Page 39 The destination can include the following: <!-- ======================================== --> <!-- ColdFusion Sample - Contact sample application --> <!-- ======================================== --> <destination id="cfcontact"> <!-- Use the ColdFusion adapter for any CF specific destinations --> <adapter ref="coldfusion-dao"/> <!-- Use the ColdFusion configured channels which have the instantiate-types flag set to false.
  • Page 40 <!-- allow "public" (and remote) or just "remote" methods to be invoked --> <method-access-level>remote</method-access-level> </access> <!-- controls for forcing property names to lowercase when converting to ActionScript --> <property-case> <!-- cfc property names --> <force-cfc-lowercase>false</force-cfc-lowercase> <!-- Query column names --> <force-query-lowercase>false</force-query-lowercase>...
  • Page 41 --> <auto-refresh>true</auto-refresh> <!-- Determines whether order is important for this filled collection. Allows for performance optimization when order is not important. Optional. Default value is true. --> <ordered>true</ordered> </fill-method> </server> </properties> </destination> To enable the Data Services adapter: Copy the following ColdFusion-specific <channel-definiton> sections (cf-dataservice-rtmp and cf-polling-amf) from the sample services-config.xml file to the <channels>...
  • Page 42 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. (Optional) Turn on the ColdFusion-specific debugging output in the Flex console by adding the following <pattern>...
  • Page 43 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 methods.
  • Page 44: Authentication

    The arguments are as follows: is a list of arguments to pass to the method ■ fillArgs fill is the record to check to determine if it is in the result set item ■ indicates whether the record is new ■...
  • Page 45: Enabling Ssl

    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 method, as in setRemoteCredentials() the following example: ds = new DataService(“mydest”);...
  • Page 46 To enable SSL, you do the following: Create the keystore ■ Configure Flex ■ Enable SSL in the ColdFusion MX Administrator ■ To create the keystore: 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"...
  • Page 47: Data Translation

    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.
  • Page 48: Example Application

    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 back- end 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 –...
  • Page 49 <cfif structKeyExists(arguments, "param")> <cfreturn dao.read(param=arguments.param)> <cfelse> <cfreturn dao.read()> </cfif> <!--- If the SQL failed, mark this change with the error. ---> <cfcatch type="database"> <cfset msg = "Error during fill: " & cfcatch.queryError & ". SQL was :" & cfcatch.sql> </cfcatch> <!--- If anything else happened, mark this change with --->...
  • Page 50 method calls the private methods , and . If an error sync doCreate doUpdate doDelete occurs, the method updates the change object with the failure to inform the Flex application that the change was not processed. The ChangeObject has two APIs, processed() .
  • Page 51 <cfset new = dao.update(old, new)> <!--- Mark this change as processed successfully. ---> <cfset co.processed()> <!--- If the SQL failed, mark this change with the error. ---> <cfcatch type="database"> <cfset msg = "Error during update: " & cfcatch.queryError & ". SQL was :" & cfcatch.sql> <cfset co.fail(msg)>...
  • Page 52 Creating the count method method returns the number of records that would be returned by the fill method. count The return type of the method is numeric. It appears as follows: count <cffunction name="count" output="no" returntype="samples.contact.Contact[]" access="remote"> <cfargument name="param" type="string" required="no"> <cftry>...
  • Page 53 Creating the get method method has a specific signature. It returns one record from the database, as a CFC instance. It appears as follows: <cffunction name="get" output="no" returnType="samples.contact.Contact" access="remote"> <cfargument name="uid" type="struct" required="yes"> <cftry> <!--- This is the user to look up. ---> <cfset key = uid.contactId>...
  • Page 54 Creating the DAO CFC You create the DAO CFC to perform direct manipulations of the back-end database. The DAO CFC appears as follows: <cfcomponent output="false" > <cffunction name="read" output="true" access="public" returntype="samples.contact.Contact[]"> <cfargument name="id" required="false"> <cfargument name="param" required="false"> <cfset var qRead=""> <cfset var obj="">...
  • Page 55 ArrayAppend(ret, obj); </cfscript> </cfloop> <cfreturn ret> </cffunction> <cffunction name="create" output="false" access="public" returntype="void"> <cfargument name="Contacts" required="true" type="samples.contact.Contact"> <cfset var qCreate=""> <cfset var localFirstName=arguments.Contacts.getFirstName()> <cfset var localLastName=arguments.Contacts.getLastName()> <cfset var localAddress=arguments.Contacts.getAddress()> <cfset var localCity=arguments.Contacts.getCity()> <cfset var localState=arguments.Contacts.getState()> <cfset var localZip=arguments.Contacts.getZip()> <cfset var localphone=arguments.Contacts.getphone()> <cftransaction isolation="read_committed">...
  • Page 56 and City = <cfqueryparam value="#localCity#" cfsqltype="CF_SQL_VARCHAR" /> and State = <cfqueryparam value="#localState#" cfsqltype="CF_SQL_VARCHAR" /> and Zip = <cfqueryparam value="#localZip#" cfsqltype="CF_SQL_VARCHAR" /> and phone = <cfqueryparam value="#localphone#" cfsqltype="CF_SQL_VARCHAR" /> order by contactId desc </cfquery> </cftransaction> <cfscript> arguments.Contacts.setcontactId(qGetID.contactId); </cfscript> </cffunction> <cffunction name="update" output="false" access="public" returntype="void">...
  • Page 57 <cffunction name="delete" output="false" access="public" returntype="void"> <cfargument name="Contacts" required="true" type="samples.contact.Contact"> <cfset var qDelete=""> <cfquery name="qDelete" datasource="contacts"> delete from Contacts where Contacts.contactId = <cfqueryparam value="#arguments.Contacts.getcontactId()#" cfsqltype="CF_SQL_INTEGER" /> </cfquery> </cffunction> <cffunction name="count" output="false" access="public" returntype="samples.contact.Contact[]"> <cfargument name="id" required="false"> <cfargument name="param" required="false"> <cfset var qRead=""> <cfquery name="qRead"...
  • Page 58 Creating the Value Object CFC To create the Value Object to return to Flex, you create a CFC by using the cfproperty and including get and set methods. The Value Object CFC appears as follows: <cfcomponent output="false" alias="samples.contact.Contact"> <!--- These are properties that are exposed by this CFC object. ---> <!--- These property definitions are used when calling this CFC --->...
  • Page 59 <cfthrow message="'#arguments.val#' is not a valid numeric"/> </cfif> </cffunction> <cffunction name="getfirstName" output="false" access="public" returntype="any"> <cfreturn this.firstName> </cffunction> <cffunction name="setfirstName" output="false" access="public" returntype="void"> <cfargument name="val" required="true"> <cfset this.firstName = arguments.val> </cffunction> <cffunction name="getlastName" output="false" access="public" returntype="any"> <cfreturn this.lastName> </cffunction> <cffunction name="setlastName" output="false" access="public" returntype="void">...
  • Page 60 <cfreturn this.state> </cffunction> <cffunction name="setstate" output="false" access="public" returntype="void"> <cfargument name="val" required="true"> <cfset this.state = arguments.val> </cffunction> <cffunction name="getzip" output="false" access="public" returntype="any"> <cfreturn this.zip> </cffunction> <cffunction name="setzip" output="false" access="public" returntype="void"> <cfargument name="val" required="true"> <cfset this.zip = arguments.val> </cffunction> <cffunction name="getphone" output="false" access="public" returntype="any">...
  • Page 61 To ensure that the channel is enabled, remove comments from around the channel definition for the cf-dataservice-rtmp channel. Add the following destination to the data-management-config.xml file: <destination id="cfcontact"> <adapter ref="coldfusion-dao"/> <channels> <channel ref="cf-dataservice-rtmp" /> </channels> <properties> <metadata> <identity property="contactId"/> </metadata> <network>...
  • Page 62 Flex application. The contact.as file should be in the dataservice\samples\contact folder. contactmgr.mxml The contactmgr.mxml file contains the following: <?xml version="1.0" encoding="utf-8"?> <!-- /////////////////////////////////////////////////////////////////////////// ///// // Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors. // All Rights Reserved. Using the Flex Data Service Assembler...
  • Page 63 // 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. // If you have received this file from a source other than Adobe, // then your use, modification, or distribution of it requires // the prior written permission of Adobe.
  • Page 64 private 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.selectedIndex = 0;...
  • Page 65 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.deleteItem(contact);...
  • Page 66 <mx:Binding source="state.text" destination="contact.state"/> <mx:Binding source="zip.text" destination="contact.zip"/> <mx:Binding source="phone.text" destination="contact.phone"/> <mx:HDividedBox width="100%" height="100%"> <mx:Panel title="Contact List" width="100%" height="100%"> <mx:DataGrid id="dg" dataProvider="{contacts}" width="100%" height="100%" change="contact=Contact(dg.selectedItem)" > <mx:columns> <mx:DataGridColumn dataField="contactId" headerText="Id"/ > <mx:DataGridColumn dataField="firstName" headerText="First Name"/> <mx:DataGridColumn dataField="lastName" headerText="Last Name"/> </mx:columns> </mx:DataGrid> <mx:ControlBar> <mx:TextInput id="searchText"...
  • Page 67 <?xml version="1.0" encoding="utf-8"?> <!-- /////////////////////////////////////////////////////////////////////////// ///// // 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.
  • Page 68 <?xml version="1.0" encoding="utf-8"?> <!-- /////////////////////////////////////////////////////////////////////////// ///// // 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.
  • Page 69 <mx:DataService destination="contact" id="dataService" fault="faultHandler(event)" conflict="conflictHandler(event)"/> <mx:Panel title="Contact List" width="100%" height="100%"> <mx:DataGrid id="dg" dataProvider="{contacts}" width="100%" height="100%" editable="true"> <mx:columns> <mx:DataGridColumn dataField="contactId" headerText="Id" editable="false"/> <mx:DataGridColumn dataField="firstName" headerText="First Name"/> <mx:DataGridColumn dataField="lastName" headerText="Last Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> </mx:columns> </mx:DataGrid> </mx:Panel> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.data.Conflict; import mx.data.Conflicts;...
  • Page 70 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.
  • Page 71 wait.png The wait.png file appears as follows: Example application...
  • Page 72 Using the Flex Data Service Assembler...
  • Page 73: Flex Builder

    CHAPTER 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.
  • Page 74: About The Coldfusion Extensions For 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 ■...
  • Page 75: Eclipse Rds Support

    Select the check box next to ColdFusion_FlexBuilder_Feature.zip, and then click Next. Select the I Accept The Terms In This License Agreement option, and then click Next. Click Finish. Click 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.
  • Page 76 Configuring RDS Before using RDS, you must configure ColdFusion servers. To configure any ColdFusion servers that you want to connect to using RDS: In Flex Builder or Eclipse, select Window > Preferences > RDS Configuration. To configure the default localhost server, select localhost and specify the following: Description ■...
  • Page 77 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.
  • Page 78 Building queries in the RDS Query Viewer To build and execute a query using the RDS Query Viewer: 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.
  • Page 79 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: Expand a data source. Double-click the columns to be named in the SELECT statement.
  • Page 80 (Optional) Specify sort order by doing the following: Locate the column in the Properties panel. Click in the Sort Type cell of the column you want to sort by. Specify Ascending or Descending. (Optional) If you specify multiple sort columns, you specify precedence using the Sort Order cell.
  • Page 81: Coldfusion/Flex Application Wizard

    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.
  • Page 82 Starting the ColdFusion/Flex Application wizard To start the ColdFusion/Flex Application wizard: Configure your RDS servers. For more information, see “Configuring RDS” on page In Flex Builder, select File > New > Other. Under ColdFusion Wizards, select ColdFusion/Flex Application Wizard, and then click Next.
  • Page 83 To create a page: Click the plus sign (+). In the Name: text box, enter the name for the page. Select the page type (master, detail, or master/detail). Click Edit Master Form or Edit Detail Form, depending on the type of form you are creating.
  • Page 84 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. ■...
  • Page 85: Actionscript To Cfc Wizard

    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: In Flex Builder, go to the Project Navigator. Right-click an ActionScript class file. Select ColdFusion Wizards >...
  • Page 86: Rds Crud Wizard

    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.
  • Page 87: Services Browser

    (Optional) Select the Primary Key column if a primary key is not defined in the database. (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.
  • Page 88 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. Components that are located in any directories specified in the ColdFusion MX ■ Administrator Mappings page Components that are located in any directories specified in the ColdFusion MX ■...
  • Page 89 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.
  • Page 90 To create a web service object in ColdFusion: Place your mouse pointer where you want to insert the code. View the list of web services. Highlight a web service or a method in a web service and right-click. Select Insert CFInvoke. The code that the Service Browser generates appears in the ColdFusion file.

This manual is also suitable for:

Coldfusion mx

Table of Contents