AN INTRODUCTION

TO FLEXNick Kwiatkowski

Michigan Flex Users Group

WELCOME TO THE WEB, 2.0 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 WHAT? 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”

AND… 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!

SO, WHERE DOES FLEX FIT? 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

SO, HOW DO I START? 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 Lets get started by installing FlexBuilder.

You can grab a free, 30 day trial off our fileserver.http://flexcamp.gotgeeks.com

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

INSTALLING FLEXBUILDER

<flexCamp:Demo>

WELCOME TO FLEXBUILDER

THE BASICS OF A FLEX APP 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.

FLEX IS HIERARCHAL 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.

Application

Horizontal Container

Button

Input Box

Horizontal Container

Text Box

CREATING YOUR FIRST PROJECT

But before we get too far…

LETS PLAN OUR APPLICATION 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

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

THE EMPLOYEE FINDER

THE EMPLOYEE FINDER 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

THE LAYOUT

GETTING INTO THE CODE 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.

GETTING INTO THE CODE 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.

GETTING INTO THE CODE 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.

BINDING The DataGrid has a property, known as

selectedItem. This selectedItem allows you to dive into a “row” of dataFor 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.

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

GETTING INTO THE CODE

GETTING INTO THE CODE

TESTING THE APP 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!

TESTING THE APP

<flexCamp:Demo>

GETTING THE DATA 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.

GETTING THE DATA Our Web Service will be located at

http://flexcamp.gotgeeks.com/demo.cfc?wsdlWeb 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.

GETTING THE DATA 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

GETTING THE DATA 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.

GETTING THE DATA 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!

WRAPPING UP 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

QUESTIONS?Thank you!