Transcript 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!)
– 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 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 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 addon for Flex Builder.
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
• 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
• Simple! Click on the icon in your startmenu!
• Eclipse will launch…
It takes a few
seconds even on
the fastest PC.
(you may see the
adobe logo here)
Welcome to Eclipse
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
• 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 project
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 project
<insert demo here>
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 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 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 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
• 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 application
<insert demo here>
Finished Layout:
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 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
• 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 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 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 Service
• Use the following code to create the web
service (locate it immediately below the
ending Script tag)
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 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
• 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 to
setup the
environment
– Otherwise, click
the play button
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, no!
• Lets tell the application to execute the web
service by making these changes:
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
• 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 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 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 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 Datagrid
• Next, we will set the dataProvider to be the
new webservice method we just created.
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 Datagrid
• Add the itemClick=“” property to the tree to
fire off the web service to get the data.
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
• 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 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 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 Details
• Continue with the rest of the fields:
Displaying the Details
• That’s it! Run the project, and view the
results!
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 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
• 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
Q&A