Transcript An Introduction to Flex

Nick Kwiatkowski
Michigan Flex Users Group
 There
are many technologies that are
combing forces to become what is now
known as the “Web 2.0”

“Tim O’Reilly argued that the web had become a
platform, with software above the level of a
single device, leveraging the power of the "Long
Tail", and with data as a driving force”
 Getting,
displaying and manipulating that
data in a useable manner is the key concept
of the Web 2.0 world.
 So,
how do we push that dynamic, rich data
to our clients and end-users?


AJAX / JavaScript – Using the features that have
existed in the browser and allowing the browser
to make calls to your server to pull data sets
(instead of retrieving entire pages of
information)
Java – Uses the Java platform to run applications
(sometimes within the browser) on the end user’s
machine. Often thought as “outdated” “slow”
and “functional”
 Flash
– Uses the Adobe Flash Player to deliver
applications and “applets” to the end user.


Flash started out primarily as a way to deliver
animations to the end user, so it often has a bad
connotation as simply being able to deliver “Skip
Intros”
In the past few years, it has become the primary
way to deliver video and dynamic applications on
the web.


Sites like YouTube, Yahoo News, etc. all deliver their
applications via the Flash Player.
In fact, > 96% of all internet connected
computers have the Flash Player installed!
 Flex
is a
Framework that
“compiles” or
generates
applications that
are run in the
Flash Player.
 This gives Flex
applications huge
reach, reliability
and compatibility.
Flash Player
Flex
Framework
 The
Flex Suite of products is broken down
into three primary categories:



The Flex SDK / Flex Framework – Is the
framework that will actually generate your
applications. Flex SDK is open-source!
FlexBuilder – FlexBuilder is an IDE that is based
on the Eclipse, and is used to make Flex
applications
Server Side Products – Such as LiveCycle DS or
BlazeDS give your Flex applications additional
features. More about this in a later
presentation.
 Lets
get started by installing FlexBuilder.
You can grab a free, 30 day trial off our
fileserver.

 If
http://flexcamp.gotgeeks.com
you install FlexBuilder, you will not need to
install the FlexSDK separately – it will install
it for you!
 You have two version you can install – Plugin
and Standalone. Both versions are pretty
much the same – use the Plugin version if you
already have Eclipse installed on your PC.
<flexCamp:Demo>
 Most
Flex Applications are derived from a
special form of XML, called MXML.



MXML is a well-formed XML document that is used
to describe how an application or object is laid
out.
Luckily, you can use the Design View to layout
your application!
Unlike HTML, which leaves each browser to do its
own interpretation of the document, your MXML
gets compiled down to the a format that the
Flash player can run.
 You
place objects
and ‘widgets’
within other
objects.
 The highest level
of your application
is the
<mx:Application>
tag. You will fill
this with many
other objects.
But before we get too far…
 Now
we have our first Eclipse Project setup,
lets decide what we want to create.


Lets start with a very simple application – an
employee directory.
It is going to show some information in a datagrid on the left side of the screen, and some
detailed information on the right side.


Also known as a “Master-Detail” setup.
We will pull the data from a web service on our
server.
 So,
lets first
choose what
information we
want to see in the
Master view…
 Also, lets choose
what we want to
display in the
Details view…
 ContactID
 FirstName
 LastName
 JobTitle
 EmailAddress
 BusinessPhone
 Once
we have dragged the DataGrid, the
Form Container, and the Text Inputs onto the
stage, we now need to start doing some
code. Switch to the Code view.
 The first thing you will note is the XML that
was generated by FlexBuilder’s Design View.
 Note the hierarchy, particularly with the
Application, Form and its components.
 The
first thing we want to change is the
Columns.



Change the 1st Column to read Last Name, and
use the dataField LASTNAME.
Change the 2nd Column to read First Name, and
use the dataField FIRSTNAME.
Remove the 3rd Column.
 Add
a new parameter to the dataGrid called
the “id”. This is what we will refer back to
the dataGrid as when we do our work.
 Switch back to the Design View and notice
the changes.
 Next,
lets introduce a concept called
binding.
 Binding in Flex allows you to dynamically
replace a portion of code with a variable.
When the variable changes, the change is
displayed to the user in the placeholder.
 Binding is done by the {braces} around a
variable.
 In our case, we will use Binding to tell Flex
to display the details of an employee
selected in our Data Grid.
 The
DataGrid has a property, known as
selectedItem. This selectedItem allows you
to dive into a “row” of data


For example, if we wanted to show the First
Name of the row of data that was selected, we
would use the binding statement of
{dataGrid.selectedItem.FIRSTNAME}
When the user selects a new entry in the
datagrid, the selectedItem object changes, and
the first name is updated.
 Update
the “text” property of the Label
(that will be used to hold the Contact ID) to
read:

“{dataGrid.selectedItem.CONTACTID}”
 Add
the “text” properties to each of the
other TextInput tags. Use the variables
FIRSTNAME, LASTNAME, TITLE,
BUSINESSPHONE.
 Hopefully,
this wasn’t too difficult.
 Let try running your application!

Internet Explorer or Safari should launch, and
you should see your application run for the first
time!
 But

why is there no data??
We haven’t told Flex where to get the data yet!
<flexCamp:Demo>
 So,




the next step is to retrieve some data.
Flex applications can talk to just about any web
service, web server or application server.
.NET, PHP, ColdFusion, Ruby, Perl, Java, etc. all
have ‘connectors’ for Flex.
In addition, you can use Web Services to get data
generically from just about anywhere.
If you don’t have an application server, you can
store XML data on any web server.
 We
will be using a Web Service to get some
data to populate our application.
 Our
Web Service will be located at
http://flexcamp.gotgeeks.com/demo.cfc?ws
dl


Web Services have a parameter called a
‘method’. This method is essentially the
‘function’ or the request for a certain piece of
data.
We will be using the “GETCONTACTS” method.
 Add
a few lines to the bottom of your
application (in source view), before the close
of the </mx:Application> tag.
 Write
a new <mx:WebService> tag, that
includes the id, and wsdl properties to tell
Flex where our web service is.
 In
the DataGrid, add the property of
dataProvider, and add a binding to
wsContacts.GETCONTACTS.lastResult
 The
one last step that we have is to tell the
Flex Application to actually get the data
from the server.
 This doesn't happen automatically. Rather,
we need to tell Flex to do this via an Event.
 Events happen when something in Flex
happens, for example, when a Button gets
pushed, or when the application finishes
loading.
 Find
the main <mx:Application> tag, and add
a new property.

Add the property creationComplete, and enter in
the statement :

wsContacts.GETCONTACTS.send()
 Run
your application and see what happens!
 This
was really a brief overview of the basics
of Flex.
 We built a very simple application, and had it
talk to a web service to present the user
with some data.


Very few lines of code, but very powerful. The
data grid allows for sorting, dragging, etc., with
no extra work!
Binding allows for you to display dynamic data to
users
Thank you!