your first flex application n.
Skip this Video
Download Presentation
Your First Flex Application

Loading in 2 Seconds...

play fullscreen
1 / 49

Your First Flex Application - PowerPoint PPT Presentation

  • Uploaded 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

Download Now 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
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