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

Summary of COLDFUSION MX 7.0.2-USING COLDFUSION MX WITH FLEX 2

  • Page 1

    Using coldfusion mx with flex 2.

  • Page 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, f...

  • Page 3

    3 contents chapter 1: using flash remoting update . . . . . . . . . . . . . . . . . . . . 5 about flash remoting update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 using flash remoting update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 data tra...

  • Page 4

    4 contents 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 ...

  • Page 5

    5 1 chapter 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 ...

  • Page 6

    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 data source. To sp...

  • Page 7

    Using flash remoting update 7 to 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 argum...

  • Page 8

    8 using flash remoting update 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 u...

  • Page 9

    Using flash remoting update 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 logoutuser method, which handles server side logout. W...

  • Page 10

    10 using flash remoting update destination="coldfusion" source="cfide.Samples.Logintest.Logintest"> fault="serverfault(event)" /> destination="coldfusion" source="cfide.Samples.Logintest.Logintest"> fault="serverfault(event)" /> fault="serverfault(event)" /> the application.Cfm file authenticates th...

  • Page 11

    Using flash remoting update 11 the 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. Data translation the following table lists the ...

  • Page 12

    12 using flash remoting update.

  • Page 13

    13 2 chapter 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 ...

  • Page 14

    14 using the flex messaging event gateway 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 applicati...

  • Page 15

    Configuring a flex messaging event gateway 15 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 ...

  • Page 16

    16 using the flex messaging event gateway the flex messaging event gateway configuration file is a simple java properties file that contains the following properties: the following is an example configuration file: # # flex event gateway configuration # # this is the destination of the messages. Des...

  • Page 17

    Enabling communication with flex 17 2. Copy the following section from the sample messaging-config.Xml file to the web application messaging-config.Xml file: *.

  • Page 18

    18 using the flex messaging event gateway 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 desti...

  • Page 19

    Sending outgoing messages 19 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 send...

  • Page 20

    20 using the flex messaging event gateway 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 sen...

  • Page 21

    Using session and client variables 21 to="#mailto#" subject="#mailsubject#"> #mailmessage# to="#mailto#" subject="#mailsubject#"> #mailmessage# if the flex application sends the message in the header instead of in the body, you create and populate the structure, as the following example shows: using...

  • Page 22

    22 using the flex messaging event gateway 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 r...

  • Page 23

    Data translation 23 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 setremotecredentials metho...

  • Page 24

    24 using the flex messaging event gateway.

  • Page 25

    25 3 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 uniqu...

  • Page 26

    26 use coldfusion event gateway adapter 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 include...

  • Page 27

    Set up your development environment 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...

  • Page 28

    28 use coldfusion event gateway adapter 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 creat...

  • Page 29

    Create the flex application 29 import the required actionscript classes in this section, you create a script block and import a set of classes that you will use. 1. Create a script block for actionscript code directly below the tag: ]]> 2. Directly below the tag, add the following actionscript impor...

  • Page 30

    30 use coldfusion event gateway adapter 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 s...

  • Page 31

    Create the flex application 31 verify that your code is correct your code should match the following code example. Verify that the content is correct. Layout="absolute" creationcomplete="initapp()"> import mx.Messaging.Events.*; import mx.Messaging.Producer; import mx.Messaging.Messages.Asyncmessage...

  • Page 32

    32 use coldfusion event gateway adapter editable="true"/> editable="true"/> id="emailmessage" editable="true"/> click="sendmessage();"/> not sent yet."/> create the coldfusion application the coldfusion application puts the information received from the flex application in a structure. It then sends...

  • Page 33

    Test the application 33 to="#mailto#" subject="#mailsubject#"> #mailmessage# to="#mailto#" subject="#mailsubject#"> #mailmessage# 2. Save the file handleemail.Cfc in the c:\cfusionmx7\wwwroot\flexgatewayexamples folder. Test the application to test the sample application, you must set up the testing...

  • Page 34

    34 use coldfusion event gateway adapter 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...

  • Page 35

    35 4 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 as...

  • Page 36

    36 using the flex data service assembler 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. How coldfusion and flex interact the fl...

  • Page 37

    Application development and deployment process 37 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 t...

  • Page 38

    38 using the flex data service assembler 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...

  • Page 39

    Application development and deployment process 39 the destination can include the following: samples.Contact.Contactassembler request.

  • Page 40

    40 using the flex data service assembler remote false false false false.

  • Page 41

    Application development and deployment process 41 --> 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.Xml file to the section of the web application flex-messaging-service.Xml f...

  • Page 42

    42 using the flex data service assembler 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 loc...

  • Page 43

    Application development and deployment process 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 relate...

  • Page 44

    44 using the flex data service assembler the arguments are as follows: ■ fillargs is a list of arguments to pass to the fill method ■ item is the record to check to determine if it is in the result set ■ iscreate indicates whether the record is new a sample fillcontains method, which determines whet...

  • Page 45

    Enabling ssl 45 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 ...

  • Page 46

    46 using the flex data service assembler 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 t...

  • Page 47

    Data translation 47 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 usi...

  • Page 48

    48 using the flex data service assembler 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...

  • Page 49

    Example application 49 ". Sql was :" & cfcatch.Sql> creating the sync method the sync method has a specific signature. The sync method accepts an array as its argument and have a return value of an array. The arrray that the sync method accepts contains java changeobjects, which flex creates and doc...

  • Page 50

    50 using the flex data service assembler the sync method calls the private methods docreate , doupdate , and dodelete . If an error 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

    Example application 51 ". Sql was :" & cfcatch.Sql> ". Sql was :" & cfcatch.Sql> ". Sql was :" & cfcatch.Sql> ". Sql was :" & cfcatch.Sql> ". Sql was :" & cfcatch.Sql>.

  • Page 52

    52 using the flex data service assembler 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: returntype="samples.Contact.Contact[]" access="remote"> ". Sql was :" & ...

  • Page 53

    Example application 53 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: access="remote"> had a value of #key#.")> value of #key#.")> was :" & cfcatch.Sql> access="remote"> had a value of #key#.")> valu...

  • Page 54

    54 using the flex data service assembler creating the dao cfc you create the dao cfc to perform direct manipulations of the back-end database. The dao cfc appears as follows: returntype="samples.Contact.Contact[]"> select contactid, firstname, lastname, address, city, state, zip, phone from contacts...

  • Page 55

    Example application 55 arrayappend(ret, obj); returntype="void"> type="samples.Contact.Contact"> insert into contacts(firstname, lastname, address, city, state, zip, phone) values ( cfsqltype="cf_sql_varchar" />, cfsqltype="cf_sql_varchar" />, "cf_sql_varchar" />, , "cf_sql_varchar" />, , ) select c...

  • Page 56

    56 using the flex data service assembler and city = cfsqltype="cf_sql_varchar" /> and state = cfsqltype="cf_sql_varchar" /> and zip = cfsqltype="cf_sql_varchar" /> and phone = cfsqltype="cf_sql_varchar" /> order by contactid desc arguments.Contacts.Setcontactid(qgetid.Contactid); returntype="void"> ...

  • Page 57

    Example application 57 returntype="void"> type="samples.Contact.Contact"> delete from contacts where contacts.Contactid = value="#arguments.Contacts.Getcontactid()#" cfsqltype="cf_sql_integer" /> returntype="void"> type="samples.Contact.Contact"> delete from contacts where contacts.Contactid = value...

  • Page 58

    58 using the flex data service assembler creating 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: //initialize the cfc with the default properties values. This....

  • Page 59

    Example application 59 returntype="any"> returntype="any"> returntype="void"> returntype="void"> returntype="any"> returntype="any"> returntype="void"> returntype="void"> returntype="any"> returntype="any"> returntype="void"> returntype="void"> returntype="any"> returntype="any"> returntype="void"> ...

  • Page 60

    60 using the flex data service assembler returntype="void"> returntype="void"> returntype="any"> returntype="any"> returntype="void"> returntype="void"> returntype="any"> returntype="any"> returntype="void"> returntype="void"> specifying the destination in the data-management- config.Xml file to ens...

  • Page 61

    Example application 61 3. To ensure that the channel is enabled, remove comments from around the channel definition for the cf-dataservice-rtmp channel. 4. Add the following destination to the data-management-config.Xml file: 0 samples.Contact.Contactassembler localhost remote false false false fill.

  • Page 62

    62 using the flex data service assembler sync get count 5. Save the file. Run the application to run the application, browse to the contactmgr.Mxml file. The flex contact manager application theflex contact manager application includes the following files: ■ contactmgr.Mxml ■ hourglass.Mxml ■ mini.M...

  • Page 63

    Example application 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 ...

  • Page 64

    64 using the flex data service assembler 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 event.To...

  • Page 65

    Example application 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"; } e...

  • Page 66

    66 using the flex data service assembler height="100%" change="contact=contact(dg.Selecteditem)" > > headertext="first name"/> name"/> height="100%" change="contact=contact(dg.Selecteditem)" > > headertext="first name"/> name"/> > headertext="first name"/> name"/> headertext="first name"/> name"/> n...

  • Page 67

    Example application 67 text="{contact.Phone}"/> click="updatecontact()" width="60"/> visible="{dg.Selectedindex!=-1}" width="60"/> visible="{dg.Selectedindex!=-1}" width="60"/> hourglass.Mxml the hourglass.Mxml file contains the following: text="{contact.Phone}"/> click="updatecontact()" width="60"/...

  • Page 68

    68 using the flex data service assembler import 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(dia...

  • Page 69

    Example application 69 fault="faulthandler(event)" conflict="conflicthandler(event)"/> height="100%" editable="true"> editable="false"/> name"/> name"/> import mx.Controls.Alert; import mx.Data.Conflict; import mx.Data.Conflicts; import mx.Data.Events.Dataconflictevent; import mx.Rpc.Events.Faulteve...

  • Page 70

    70 using the flex data service assembler 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...

  • Page 71

    Example application 71 wait.Png the wait.Png file appears as follows:.

  • Page 72

    72 using the flex data service assembler.

  • Page 73

    73 5 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 ...

  • Page 74

    74 using 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 ...

  • Page 75

    Eclipse rds support 75 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 install all. 11. When the installation is complete, click yes to restart ...

  • Page 76

    76 using the coldfusion extensions for flex builder 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 ...

  • Page 77

    Eclipse rds support 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: to rename a folder or file, right-click the folder or filename. Using the rds dataview the rds dataview lists all the ...

  • Page 78

    78 using the coldfusion extensions for flex builder 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 op...

  • Page 79

    Eclipse rds support 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: 1. Expand a data source. 2. Double-click the columns to be named ...

  • Page 80

    80 using the coldfusion extensions for flex builder 4. (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 ...

  • Page 81

    Coldfusion/flex application wizard 81 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 rela...

  • Page 82

    82 using the coldfusion extensions for flex builder 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 coldfus...

  • Page 83

    Coldfusion/flex application wizard 83 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 vi...

  • Page 84

    84 using the coldfusion extensions for flex builder 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 applicati...

  • Page 85

    Cfc to actionscript wizard 85 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....

  • Page 86

    86 using the coldfusion extensions for flex builder 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 m...

  • Page 87

    Services browser 87 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 automa...

  • Page 88

    88 using the coldfusion extensions for flex builder 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 tha...

  • Page 89

    Services browser 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 se...

  • Page 90

    90 using the coldfusion extensions for flex builder 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 c...