Your first flex application
This presentation is the property of its rightful owner.
Sponsored Links
1 / 49

Your First Flex Application PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on
  • Presentation posted in: General

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

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

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

    Welcome to Eclipse


    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 project1

    Creating your first project


    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>


    Finished layout

    Finished Layout:


    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:

      • http://www.theFlexGroup.org/cfcs/getJobs.cfc?wsdl

    • 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


    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


    Your first flex application

    Q&A


  • Login