Your first flex application
1 / 49

Your First Flex Application - PowerPoint PPT Presentation

  • Updated On :

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Your First Flex Application' - yan

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Your first flex application

Your First Flex Application

Nick Kwiatkowski


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

    Welcome to eclipse1
    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 project2
    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 project3
    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 properties1
    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 properties2
    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 properties3
    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 application1
    Laying out the application

    <insert demo here>

    Laying out the application2
    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 application3
    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 service1
    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 service2
    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:


    • We will be using the method “getCatsXML” to populate the Tree component

    Adding the web service3
    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 tree1
    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 tosetup theenvironment

      • Otherwise, clickthe 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 no1
    Oh, no!

    • Lets tell the application to execute the web service by making these changes:

    Oh no2
    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 datagrid1
    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 datagrid2
    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 datagrid3
    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 datagrid4
    Setting up the Datagrid

    • Next, we will set the dataProvider to be the new webservice method we just created.

    Setting up the datagrid5
    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 datagrid6
    Setting up the Datagrid

    • Add the itemClick=“” property to the tree to fire off the web service to get the data.

    Setting up the datagrid7
    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 details1
    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 details2
    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 details3
    Displaying the Details

    • Continue with the rest of the fields:

    Displaying the details4
    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 done1
    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


    • Flex Builder & FDS Downloads:


    • CF Eclipse Downloads


    • The Michigan Flex Group Mailing Lists


    • Flex Resource Center