1 / 49

Your First Flex Application

Your First Flex Application. Nick Kwiatkowski 1/11/07. 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!)

yan
Download Presentation

Your First Flex Application

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related