ColdFusiontoFlexSupe rWizard

Information about ColdFusiontoFlexSupe rWizard

Published on November 28, 2007

Author: Goldie

Source: authorstream.com

Content

ColdFusion to Flex Super Wizard:  ColdFusion to Flex Super Wizard Demo by Mary McDonald Northern IN Adobe Users Group What is the ColdFusion to Flex Super Wizard?:  What is the ColdFusion to Flex Super Wizard? The ColdFusion to Flex Super Wizard is an Eclipse Plugin that we will use to automatically generate Master, Detail and Master/Detail pages, that will let the user create, read, update and delete Artist information supplied from a database. What Software do we need?:  What Software do we need? The following software will be used in this example. Windows XP Home Edition (The Operating System I am using) Java2Runtime Environment Std Edition 1.4.2.12 (needed to run Eclipse) Eclipse SDK 32win32 (The tool we will be using to develop in) Flex Builder 2.0 w/Charting (This contains the CFFlex Wizard) Please see my previous article “My First Flex App” in September CFDJ for instructions on how to install Flex Builder and Eclipse. ColdFusion MX 7.0.2 (Contains the ColdFusion Extensions for Flex Builder) To install the ColdFusion Extenstions for Flex Builder (in Flex Builder) Select Help > Software Updates > Find and Install Select the Search for New Features and Install option, click Next. Click New Archive Site Select the ColdFusion_Flexbuilder_Feature.zip file, click Open. (If you installed CF MX 7.0.2 using the default values, look in the Extras Folder) When the Edit Local Site dialog box appears, click OK. Ensure the ColdFusion Flexbuilder feature is selected, then click Finish Select the check box next to ColdFusion_Flexbuilder_Feature.zip, then click Next Accept the terms of the license, then click Next Click Finish Click Install All When the installation is complete, click to restart Flex Builder Lastly, make sure RDS is set up correctly to allow ColdFusion to access the database you will be using. To configure RDS in Flex Builder Make Sure RDS is working:  Make Sure RDS is working Select Window > Preferences > RDS Configuration I will be using the default localhost server in this example Select localhost Enter Description Host Name 127.0.0.1 Port Number 8500 (if you are using the built in web server) I won’t be using the Context Root RDS password To Test the connection select the server then click Test Connection. To view files in Flex Builder select Window > Other Views, RDS, RDS Fileview to select files or RDS Dataview to select data sources. Create the Application:  Create the Application Once everything is installed we are ready to use the CFFlex Wizard to create an application. First Step:  First Step To Create the application while in Eclipse select CTRL + N and select the ColdFusion/Flex application wizard. Press Next and read through text displayed. Press Next again. Do not load previous settings:  Do not load previous settings Since this is a new application we will click Next to specify our settings. (If we wanted to load settings from a previous application we could just select the “Load ColdFusion/Flex Application Wizard Settings” button instead.) Select your data source:  Select your data source Select your RDS Server where your Data Source is located, then select the Data Source being used in your application. Press Next. (ColdFusion uses RDS to get the metadata from your Data Source here). Define Page Layout:  Define Page Layout This is where we will define the Page Layout and Design for our first page. Select Master Page Type:  Select Master Page Type We will select “Master” for the Master Page Type. This will generate a page that just lists information. Then select the “Edit Master Page” button. Select Artists table:  Select Artists table Select the artists table from the list of tables on the left. Select fields:  Select fields Select from the artists table the ARTISTID, FIRSTNAME and LASTNAME. Click Save. Enter page Name:  Enter page Name Enter “List of Artists” next to the Name: label to name the page. Select + to Add the next page. Next build the detail page:  Next build the detail page Name the page Artist Detail and select “Detail” as a Page Type then select the “Edit Detail Page” button. Add the artists table to the detail page:  Add the artists table to the detail page Double click the artists table. This time the wizard automatically ties the artists to the ARTISTID as indicated by the “ID” parameter. Drag pages to the Nav Tree:  Drag pages to the Nav Tree Next we add the 2 pages to the Navagation Tree to the left. Select Next. Enter Flash Remoting Settings:  Enter Flash Remoting Settings Here we can change settings that could affect the Flash Remoting settings, the Web Root URL settings, the Project Name and Web Root Folder where the Project will be placed as well as the Wizard Settings. This time we will accept the default settings, so click Finish. Code is generated automatically:  Code is generated automatically The wizard makes the ArtExample project, then compiles it! Automatically created is the ColdFusion code (as seen by the ColdFusion components on the left) as well as the Flex code (as seen by the Main.mxml Source code on the right). Look at the ColdFusion Component:  Look at the ColdFusion Component Here, we just double clicked on the List_of_Artists.cfc to look inside at the query. Look at the ActionScript model:  Look at the ActionScript model Notice that in the generated folder that there is a model, view, and controller folder. Click on the Artist_Detailartists.as file to look at the Actionscript model. ActionScript 3.0 code:  ActionScript 3.0 code This Actionscript file was automatically generated. Are you blown away yet? Next, we will run the application. Run the Program:  Run the Program Select the Run > button, Flex Application, New button Use Defaults:  Use Defaults Use the defaults here and press the Run button. Press List of Artists tab:  Press List of Artists tab By pressing on the List of Artists tab above, the user sees a list of artists. Users at this point can “automatically” create, read, update and delete Artists from the database in “Real Time”. With Taylor Web Frazier highlighted select the update (pencil icon) button. We will enhance the program to display a detail list of their artwork:  We will enhance the program to display a detail list of their artwork Notice just a list of artists. We want to display a detail list of their artwork on this page as well. To do that we must re-run the wizard. Don’t worry, you don’t have to start again from scratch! Close your browser where the application was running. Call the ColdFusion to Flex Wizard:  Call the ColdFusion to Flex Wizard Select Ctrl-N, ColdFusion/Flex Application Wizard, Next. Load existing Settings:  Load existing Settings This time select the Load ColdFusion/Flex Application Wizard Settings. Press Next. Keep RDS the same:  Keep RDS the same Keep RDS Settings the same, select Next Press Edit Detail Page Button:  Press Edit Detail Page Button The wizard remembered our settings! To add the artist detail grid press the Edit Detail Page button. Add Art Table Detail:  Add Art Table Detail Click on the art table twice to add the art table detail information. Notice the ARTISTID in the art table was used to tie the art table to the ARTISTID in the artists table. Uncheck the MEDIAID and ISSOLD checkboxes under the Display column to not display those fields. Press Save. Press Finish. Run the application. Run the Program:  Run the Program Taylor Webb’s Detail information is displayed in edit mode. Notice the bottom of the page displays Taylor Webb’s artwork allowing the user to add and delete items. Add Master/Detail list of Art for Sale Page:  Add Master/Detail list of Art for Sale Page The last page we are going to add will contain a Master/Detail list of Art for Sale. Select CTRL-N to start the wizard, Coldfusion/Flex Application, Next, Load ColdFusion/Flex Application Settings, Next, Next. Enter Art For Sale in the Name field and select Master/Detail page type then select Edit Master Section. Select the Art table:  Select the Art table To list the names of the artists, double click the art table, select ARTID and ARTName. Uncheck the ARTID Display column so it won’t be displayed. Press Save. Press Edit Detail Button:  Press Edit Detail Button Press the Detail Section tab and the Edit_Detail Section Button. Select ComboBox for ArtistID:  Select ComboBox for ArtistID For the detail page we again select the art table. Under the Input Control column for ARTISTID we are going to select a ComboBox which will list the artist names. To get the names we us a sub-select by pressing the sub-select button. Select the Artists table:  Select the Artists table Here we select the artists table. We select the ARTISTID, FIRSTNAME and LASTNAME fields, but uncheck the ARTISTID under the Display column to only display the artists first and last name. Press Save. Add a ComboBox for MediaID:  Add a ComboBox for MediaID Change MEDIAID Input Control to ComboBox and select the sub-select button on right. Select Media table:  Select Media table Double Click the media table. Select the MEDIAID and MEDIATYPE. Uncheck the MEDIAID Display checkbox. Press Save Change ISSold to Checkbox:  Change ISSold to Checkbox Lastly, change the Input Control for ISSOLD to CheckBox. Press Save. Add Art For Sale Page to the Nav Tree:  Add Art For Sale Page to the Nav Tree Drag the Art For Sale page to the Navagation Tree. Press Finish:  Press Finish Press Finish Press Finish:  Press Finish Press Finish to run the program See Art for Sale tab:  See Art for Sale tab When the user selects the Art for Sale tab, they will see a list of the art being sold that they can add to and delete items from along with the detail of the selected piece on the right. Select Artist by name:  Select Artist by name The user can select information by artist name. Select information by media type:  Select information by media type The user can select information by media type. Recap:  Recap As a recap. We just learned how to use the CF/Flex Super Wizard supplied with ColdFusion MX 7.0.2 and loaded into FlexBuilder 2.0 to create a Master, Detail and Master/Detail page using Flex, ColdFusion and Flash, “automatically”. The ColdFusion/Flex Wizard is just one of the the ColdFusion extensions included in ColdFusion MX 7.0.2. Check out the others too!

Related presentations


Other presentations created by Goldie

TGIF introduction
17. 12. 2007
0 views

TGIF introduction

BCSWC Ed presentation
31. 12. 2007
0 views

BCSWC Ed presentation

KUCS
27. 11. 2007
0 views

KUCS

serviciodetaxi141
30. 11. 2007
0 views

serviciodetaxi141

EtruscanWomen
30. 10. 2007
0 views

EtruscanWomen

lecture07
02. 11. 2007
0 views

lecture07

TurkishStraits
05. 11. 2007
0 views

TurkishStraits

how to succeed in an interview
15. 11. 2007
0 views

how to succeed in an interview

IditarodFacts
16. 11. 2007
0 views

IditarodFacts

gerth van wijk
06. 12. 2007
0 views

gerth van wijk

Lecture Two
17. 12. 2007
0 views

Lecture Two

Seth
29. 12. 2007
0 views

Seth

Deculturalization How Why
02. 01. 2008
0 views

Deculturalization How Why

yoe
03. 01. 2008
0 views

yoe

wheedleton
03. 01. 2008
0 views

wheedleton

EuroLogo2007
04. 01. 2008
0 views

EuroLogo2007

Lecture 4 2005
07. 01. 2008
0 views

Lecture 4 2005

zilles
07. 01. 2008
0 views

zilles

DNO IMA Transition Plan
30. 10. 2007
0 views

DNO IMA Transition Plan

promotions
11. 12. 2007
0 views

promotions

sav ch08
30. 12. 2007
0 views

sav ch08

Classificação
28. 12. 2007
0 views

Classificação

230 Class8
20. 02. 2008
0 views

230 Class8

Terry Hilsberg e Learning
24. 02. 2008
0 views

Terry Hilsberg e Learning

lect12
27. 02. 2008
0 views

lect12

Explorerhiddenslide
27. 03. 2008
0 views

Explorerhiddenslide

planet tute
13. 11. 2007
0 views

planet tute

heat health warning system
29. 10. 2007
0 views

heat health warning system

BaroneComm1
29. 10. 2007
0 views

BaroneComm1

lecnew05 11
03. 12. 2007
0 views

lecnew05 11

Sophie Dawson
31. 10. 2007
0 views

Sophie Dawson

ch14 1406
12. 12. 2007
0 views

ch14 1406

Fabio
16. 11. 2007
0 views

Fabio

flex wilhagen en
31. 10. 2007
0 views

flex wilhagen en

IEE Lec6
12. 11. 2007
0 views

IEE Lec6

SigRes HoughtonR Jan2004
26. 10. 2007
0 views

SigRes HoughtonR Jan2004

chap03
02. 01. 2008
0 views

chap03

Jayant
23. 11. 2007
0 views

Jayant

evans
01. 10. 2007
0 views

evans

Eskilstuna PJ
06. 11. 2007
0 views

Eskilstuna PJ

Subsea experience
07. 11. 2007
0 views

Subsea experience

Hanson DOCS
28. 12. 2007
0 views

Hanson DOCS

Bain eng
05. 12. 2007
0 views

Bain eng

document859
20. 11. 2007
0 views

document859

talk2
14. 11. 2007
0 views

talk2