1. Your First Flex Application Nick Kwiatkowski 1/11/07

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

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

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

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

6. 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.

7. 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)

8. Welcome to Eclipse

9. 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)

10. 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.

11. Creating your first project

12. 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.

13. Creating your first project

14. 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.

15. 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”

16. 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

17. Project Properties After a few seconds, Flex Builder will setup your development environment. You will then be presented with a blank Application template.

18. 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

19. Laying out the application

20. Finished Layout:

21. 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

22. 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.

23. 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 –Flex Builder will correctly open and close the block for you.

24. 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.

25. 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 ?wsdlhttp://www.theFlexGroup.org/cfcs/getJobs.cfc ?wsdl We will be using the method “getCatsXML” to populate the Tree component

26. Adding the Web Service Use the following code to create the web service (locate it immediately below the ending Script tag)

27. 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 :

28. 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:

29. 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

30. 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.

31. Oh, no! Lets tell the application to execute the web service by making these changes:

32. 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.

33. 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.

34. 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:

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

36. 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:

37. Setting up the Datagrid Next, we will set the dataProvider to be the new webservice method we just created.

38. 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

39. Setting up the Datagrid Add the itemClick=“” property to the tree to fire off the web service to get the data.

40. Setting up the Datagrid That should be it! Run the application and see if you can get the datagrid to show the job listings.

41. 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.

42. 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.

43. 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 :

44. Displaying the Details Continue with the rest of the fields:

45. Displaying the Details That’s it! Run the project, and view the results!

46. 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!

47. 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

48. Resources Flex Builder & FDS Downloads: –http://www.adobe.com/go/flex/http://www.adobe.com/go/flex/ CF Eclipse Downloads –http://www.cfeclipse.orghttp://www.cfeclipse.org The Michigan Flex Group Mailing Lists –http://www.theflexgroup.orghttp://www.theflexgroup.org Flex Resource Center –http://www.flex.orghttp://www.flex.org

49. Q&A