Your First Flex Application

Information about Your First Flex Application

Published on November 28, 2007

Author: VolteMort

Source: authorstream.com

Content

Your First Flex Application:  Your First Flex Application Nick Kwiatkowski 1/11/07 What is Flex?:  What is Flex? The Adobe Flex suite represents three major products: Flex SDK – A compiler that turns source code into SWF (Flash Player) files (FREE!) Flex Builder – A GUI built on the Eclipse platform that allows developers to easily create files that can be compiled by the SDK Flex Data Services (FDS) – A Java engine that allows for enhanced functionality of Flex What is Flex?:  What is Flex? What do you need to start? At a very minimum, you need just the free SDK to compile your applications. Although this is like making a C# application without Microsoft Studio. Very painful. Most developers will need to get Flex Builder. Flex Builder is available as a 30 day downloadable trial from Adobe’s website. Currently comes in three versions : Standard, Charting and Standard + Charting. What is Flex?:  What is Flex? Depending on what you plan on doing, you may also need the Flex Data Services Server. This allows for Real-time Data Push, Collaboration applications (using messaging), and Data Sync. Flex Data Services is available as a FREE server add-in using the Flex Data Services Express Edition. Check website for limitations. Did you say Charting? In order to generate charts natively within Flex, you need to purchase the Charting add-on for Flex Builder. What is Flex?:  What is Flex? Do I need to install any server software? You do not necessary need to add any server software to your web-server to use Flex. Flex can deploy as a .SWF file, which is no more than an image file, according to the Web Server. However, if you want to interact with data, you will need to connect to some middleware application such as .NET, ColdFusion, or PHP. Flex Builder:  Flex Builder When you install Flex Builder, you have two options: Flex Builder IDE Use this version if you do not already have Eclipse installed. Flex Builder Plugin Use this version if you already have Eclipse 3.2 installed on your machine There is no functionality difference between these versions. Starting Flex Builder:  Starting Flex Builder Simple! Click on the icon in your start-menu! Eclipse will launch… It takes a few seconds even on the fastest PC. (you may see the adobe logo here) Welcome to Eclipse:  Welcome to Eclipse Welcome to Eclipse:  Welcome to Eclipse If you are developing applications to connect to a ColdFusion server, it is highly recommended to install the CFEclipse Eclipse Plugin Also, Flex Builder comes with “RDS Components” that you need to install manually. This allows you to connect to databases and create some components automatically. This requires access to a Coldfusion server (free one will work) Creating your first project:  Creating your first project For this meeting, we are going to create a simple “Job Lister” that will allow users select jobs from an organized list and view its data. Although connectivity will not be discussed, we will be connecting to a ColdFusion server via SOAP (Web Services) to collect our data. Creating your first project:  Creating your first project Creating your first project:  Creating your first project ALL development efforts in Flex Builder are organized via “Projects”. Projects allow Flex Builder to help organize your files, and will help its prediction of your typing (intelli-sence) We will begin by creating a new project to hold our application. Creating your first project:  Creating your first project <insert demo here> Project Properties:  Project Properties The first option you have is how you want your Flex application to access its data. This example, we will use “Basic”, but the others will work if you have FDS or a ColdFusion server available. Project Properties:  Project Properties Next, you will need to give a name to your project. This will also be the directory that will be created on your hard drive. If you want to work on the project in a different location, deselect the “Use Default Location” Project Properties:  Project Properties Next you will be able to select the name of the application, and its output directory. The Main Application File will also be the name of the SWF that is created. We will be leaving these at their default Project Properties:  Project Properties After a few seconds, Flex Builder will setup your development environment. You will then be presented with a blank Application template. Laying out the application:  Laying out the application Before we begin any programming, we need to layout the application Remember the layout that was drawn earlier We will click on the “Design” tab within our jobLister.mxml file to begin laying out the application Laying out the application:  Laying out the application <insert demo here> Finished Layout::  Finished Layout: Laying out the application:  Laying out the application Vertical layout = Items will be stacked on top of each other in the order they were added. Think: Microsoft Word Horizontal layout = Items will be stacked from left to right as space permits Canvas = You have x,y positioning available for each item Think: Photoshop Laying out the application:  Laying out the application HBox, VBox, Canvas are invisible containers that just hold the objects within them. Sub-item’s percentages are based on 100%, not screen real-estate. VDividedBox, HDividedBox allows for visible handle that the user can drag to resize the child objects. Adding the Web Service:  Adding the Web Service Next, we will need to switch to the source code view. Take a look at our generated code! Before the first HBox but after the Application tags, add some line-feeds Create a new scripting block by typing in <mx:Script> Flex Builder will correctly open and close the block for you. Adding the Web Service:  Adding the Web Service This scripting block will allow us to interact with the Web Service Create a new function called initApp that has no parameters and a “void” return type. Adding the Web Service:  Adding the Web Service Next, we will create a “web service” object within the application. This is an invisible object that will not be rendered to the end user or within the IDE. Our WSDL will be: http://www.theFlexGroup.org/cfcs/getJobs.cfc?wsdl We will be using the method “getCatsXML” to populate the Tree component Adding the Web Service:  Adding the Web Service Use the following code to create the web service (locate it immediately below the ending Script tag) Connecting the Tree:  Connecting the Tree Next, we want to populate the Tree with the data we got from the Web Service This is much easier than you might think! There is a property of the Tree component called the dataProvider, which will let us simply connect the two together Add the following property to the tree : Connecting the Tree:  Connecting the Tree You noticed the {} in the statement This is called a Binding We are telling Flex we want to use the lastResult of the webservice named wsJobs, and the method getCatsXML We will also need to set the label and showRoot property for the tree to show the data properly: Running the application:  Running the application Now it’s time to debug! We can do this simply by running the application to see what we got The first time you want to run the app, you need to setup the environment Otherwise, click the play button Oh, no!:  Oh, no! You probably noticed there was no data in the application We didn’t tell the application to actually execute the web service. Close the web browser and return to the source code. Oh, no!:  Oh, no! Lets tell the application to execute the web service by making these changes: Oh, no!:  Oh, no! Re-Run the application. You should now see three categories show up in the tree component. Clicking on the categories will bring up some sub-categories. Clicking on the sub-categories will do nothing right now. Setting up the Datagrid:  Setting up the Datagrid Now we have the tree working, we want to populate the datagrid with our job listings There is another webservice method called “getJobs” that returns all the jobs, given a certain category_id We know the category_id because it is supplied to us via the Tree that we bound to. The tree holds all the data we passed it from the webservice, not just what was displayed to the user. Setting up the Datagrid:  Setting up the Datagrid First, lets setup the next method in the webservice Modify the tree to give it an id of “treeJobs” Modify the webservice object to include the following: Setting up the Datagrid:  Setting up the Datagrid Next, we want to choose the columns we want to display to the user in the datagrid: We can choose from the following columns that are returned to us via the Webservice: JOB_ID COMPANY TITLE JOB_TITLE SALARY CATEGORY_ID Setting up the Datagrid:  Setting up the Datagrid In our example, we are going to choose to display the JOB_ID, COMPANY_NAME, and TITLE To do this, we need to modify the DataGridColumn objects to reflect the following: Setting up the Datagrid:  Setting up the Datagrid Next, we will set the dataProvider to be the new webservice method we just created. Setting up the Datagrid:  Setting up the Datagrid And finally, we need to tell the web service to pull the listing of jobs based on our categories. We do this via the itemClick() event of the tree component. When the user clicks on something, we will have the web service get the job listings – and when it gets the data, it will list the jobs of that category Setting up the Datagrid:  Setting up the Datagrid Add the itemClick=“” property to the tree to fire off the web service to get the data. Setting up the Datagrid:  Setting up the Datagrid That should be it! Run the application and see if you can get the datagrid to show the job listings. Displaying the Details:  Displaying the Details We wouldn’t want to display ALL the information in the Datagrid – that would be too much if we would have a real job listing Often times, we need to display the details in a separate area. Displaying the Details:  Displaying the Details First, lets give the datagrid a name: dgJobListings Next, we need to setup our bindings in the textfields that we created earlier. Within the DataGrid component, there is a “SelectedItem” property. Displaying the Details:  Displaying the Details This special selectedItem property points to the currently selected row. You can bind to hidden columns (those that we choose not to display from the webservice) simply by doing a {datagrid.selectedItem.rowname} Lets start with the job ID text field : Displaying the Details:  Displaying the Details Continue with the rest of the fields: Displaying the Details:  Displaying the Details That’s it! Run the project, and view the results! Project is done!:  Project is done! All that’s left is to publish the SWF file to your web server Just copy the bin directory from your project to the web server (into any directory), and your set. Nothing else has to happen! Project is done!:  Project is done! We are just scraping the surface, but this will at least get you rolling… Attend future meetings of the Michigan Flex Group for details on how these components work with each other Resources:  Resources Flex Builder & FDS Downloads: http://www.adobe.com/go/flex/ CF Eclipse Downloads http://www.cfeclipse.org The Michigan Flex Group Mailing Lists http://www.theflexgroup.org Flex Resource Center http://www.flex.org Q&A:  Q&A

Related presentations


Other presentations created by VolteMort

Global Supply Chain
13. 04. 2008
0 views

Global Supply Chain

Green Accounting CT 2006
18. 04. 2008
0 views

Green Accounting CT 2006

Chapter 01
10. 04. 2008
0 views

Chapter 01

jmkfah
09. 04. 2008
0 views

jmkfah

climate and science 07
07. 04. 2008
0 views

climate and science 07

2006080708
26. 03. 2008
0 views

2006080708

wcor06
21. 03. 2008
0 views

wcor06

FP7 MTAPU
18. 03. 2008
0 views

FP7 MTAPU

apostles symbols
16. 08. 2007
0 views

apostles symbols

G070221 00
28. 11. 2007
0 views

G070221 00

how we help you become pregnant
03. 12. 2007
0 views

how we help you become pregnant

greenfieldlrp
03. 10. 2007
0 views

greenfieldlrp

ch4
16. 11. 2007
0 views

ch4

Habitat El Bosque Tropical
20. 11. 2007
0 views

Habitat El Bosque Tropical

ghostgirl
21. 11. 2007
0 views

ghostgirl

serious blow
16. 08. 2007
0 views

serious blow

Gospel
16. 08. 2007
0 views

Gospel

Jesus Feeds 5000
16. 08. 2007
0 views

Jesus Feeds 5000

Exegeting Jesus Parables
16. 08. 2007
0 views

Exegeting Jesus Parables

KNEZEVIC Desimir
04. 10. 2007
0 views

KNEZEVIC Desimir

week9
14. 12. 2007
0 views

week9

coldwar
19. 12. 2007
0 views

coldwar

icde07 hagonzal
23. 11. 2007
0 views

icde07 hagonzal

organic solvents
30. 12. 2007
0 views

organic solvents

ID172 LOGANALY
31. 12. 2007
0 views

ID172 LOGANALY

Meconium
04. 01. 2008
0 views

Meconium

dutch history fo rdummies
11. 12. 2007
0 views

dutch history fo rdummies

life cycle
09. 08. 2007
0 views

life cycle

2006Stats RRT C 5 3
09. 08. 2007
0 views

2006Stats RRT C 5 3

Ethical Issues at End of Life
09. 08. 2007
0 views

Ethical Issues at End of Life

Lecturx7
09. 08. 2007
0 views

Lecturx7

ESI toolkit
07. 11. 2007
0 views

ESI toolkit

Sure of faith
16. 08. 2007
0 views

Sure of faith

HARTLEY WSOWS 20040204
05. 09. 2007
0 views

HARTLEY WSOWS 20040204

Biodiesel web
09. 11. 2007
0 views

Biodiesel web

csce520 lect2
16. 11. 2007
0 views

csce520 lect2

SM Aula 8 v3
28. 12. 2007
0 views

SM Aula 8 v3

33Chris
04. 01. 2008
0 views

33Chris

Celebration of life martha
09. 08. 2007
0 views

Celebration of life martha

life as an astronomer
09. 08. 2007
0 views

life as an astronomer

Ilene Lewis
09. 08. 2007
0 views

Ilene Lewis

Deep Drill Active HT2
09. 08. 2007
0 views

Deep Drill Active HT2

issues
28. 12. 2007
0 views

issues

families
24. 02. 2008
0 views

families

2005 OSD CAIG Presentation
04. 03. 2008
0 views

2005 OSD CAIG Presentation

sears techmission values2005
16. 08. 2007
0 views

sears techmission values2005

GSutter ppts
24. 06. 2007
0 views

GSutter ppts

griffiths LD summit 08nov06 post
24. 06. 2007
0 views

griffiths LD summit 08nov06 post

Griffiths D4L 26apr07 v2
24. 06. 2007
0 views

Griffiths D4L 26apr07 v2

Charlotte English FINAL
12. 03. 2008
0 views

Charlotte English FINAL

FOREIGN POLICY 1920s 1930s
14. 03. 2008
0 views

FOREIGN POLICY 1920s 1930s

Florence Labord Moodle
24. 06. 2007
0 views

Florence Labord Moodle

Einführung MKT Übungen
24. 06. 2007
0 views

Einführung MKT Übungen

kt cohort seminars sep20 2006
24. 06. 2007
0 views

kt cohort seminars sep20 2006

Karpati EPICT Final Review
24. 06. 2007
0 views

Karpati EPICT Final Review

JCampbell ppt
24. 06. 2007
0 views

JCampbell ppt

Boise Police 2 1 05
06. 11. 2007
0 views

Boise Police 2 1 05

Cheryl Keenan COABE 050505
09. 08. 2007
0 views

Cheryl Keenan COABE 050505

Lum db v1
16. 08. 2007
0 views

Lum db v1

2007 April Poll Powerpoint
05. 09. 2007
0 views

2007 April Poll Powerpoint

Viennot
02. 10. 2007
0 views

Viennot

EUROPEAN E INVESTOR 20040921
03. 10. 2007
0 views

EUROPEAN E INVESTOR 20040921

PulmonaryThromboembo lism
19. 11. 2007
0 views

PulmonaryThromboembo lism

Raffle Pandemic Flu Planning
05. 09. 2007
0 views

Raffle Pandemic Flu Planning

Face
11. 10. 2007
0 views

Face

navypowerpt
30. 11. 2007
0 views

navypowerpt

IHSLG CPD ERes RCSI 07
24. 06. 2007
0 views

IHSLG CPD ERes RCSI 07

retreat petery
16. 08. 2007
0 views

retreat petery

Open Day talk StudentLife
05. 12. 2007
0 views

Open Day talk StudentLife

LSIDs
09. 08. 2007
0 views

LSIDs

HF diff
16. 08. 2007
0 views

HF diff

IKT taikymas pradiniame ugdyme
24. 06. 2007
0 views

IKT taikymas pradiniame ugdyme

Dylan Symposium Presentation
09. 08. 2007
0 views

Dylan Symposium Presentation

Are We There Yet
16. 08. 2007
0 views

Are We There Yet

h0ykom ren
24. 06. 2007
0 views

h0ykom ren

hAykom ren
24. 06. 2007
0 views

hAykom ren

Halton Data Fair Winner MsNeilly
09. 08. 2007
0 views

Halton Data Fair Winner MsNeilly

careers 07
09. 08. 2007
0 views

careers 07

IBC05B
02. 01. 2008
0 views

IBC05B

Eating the Elephant
26. 11. 2007
0 views

Eating the Elephant

LSLR pt2
09. 08. 2007
0 views

LSLR pt2

pgeog251 ch18 af
27. 11. 2007
0 views

pgeog251 ch18 af

henny eyova
24. 06. 2007
0 views

henny eyova

ksypolitos SCH TelematicServices
24. 06. 2007
0 views

ksypolitos SCH TelematicServices

Morgan town 2007
09. 08. 2007
0 views

Morgan town 2007

IMS State of Open Source 0606
24. 06. 2007
0 views

IMS State of Open Source 0606

h dillon training shoestring
24. 06. 2007
0 views

h dillon training shoestring

Click on SUNY for internetII
05. 09. 2007
0 views

Click on SUNY for internetII

kruul
24. 06. 2007
0 views

kruul

228 210 RSCEast PowerPressed
24. 06. 2007
0 views

228 210 RSCEast PowerPressed

kanayama
24. 06. 2007
0 views

kanayama

Businessplan NYSERnet
05. 09. 2007
0 views

Businessplan NYSERnet

gse program
24. 06. 2007
0 views

gse program

ica 20105 cert 2 it 2007
24. 06. 2007
0 views

ica 20105 cert 2 it 2007

Mukherjee sbatransition
09. 08. 2007
0 views

Mukherjee sbatransition

Kinsinger VA
09. 08. 2007
0 views

Kinsinger VA

ALA05O lszewski
29. 11. 2007
0 views

ALA05O lszewski

lec12 04 lcca
09. 08. 2007
0 views

lec12 04 lcca

I GIG2
16. 08. 2007
0 views

I GIG2