Download
your first flex application n.
Skip this Video
Loading SlideShow in 5 Seconds..
Your First Flex Application PowerPoint Presentation
Download Presentation
Your First Flex Application

Your First Flex Application

288 Vues Download Presentation
Télécharger la présentation

Your First Flex Application

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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 fewseconds even onthe fastest PC.(you may see theadobe logo here)

  8. Welcome to Eclipse

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

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

  13. Creating your first project <insert demo here>

  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 <insert demo here>

  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 <mx:Script> • 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?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 tosetup theenvironment • Otherwise, clickthe 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/ • CF Eclipse Downloads • http://www.cfeclipse.org • The Michigan Flex Group Mailing Lists • http://www.theflexgroup.org • Flex Resource Center • http://www.flex.org

  49. Q&A