1. Nick Kwiatkowski Michigan Flex Users Group

2.  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” platform"Long Tail"  Getting, displaying and manipulating that data in a useable manner is the key concept of the Web 2.0 world.

3.  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”

4.  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!

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

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

7.  Lets get started by installing FlexBuilder. You can grab a free, 30 day trial off our fileserver.  http://flexcamp.gotgeeks.com 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.

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

11.  You place objects and ‘widgets’ within other objects.  The highest level of your application is the tag. You will fill this with many other objects.

12. But before we get too far…

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

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

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

18.  The first thing we want to change is the Columns.  Change the 1 st Column to read Last Name, and use the dataField LASTNAME.  Change the 2 nd Column to read First Name, and use the dataField FIRSTNAME.  Remove the 3 rd 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.

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

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

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

24.  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!

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

27.  Our Web Service will be located at http://flexcamp.gotgeeks.com/demo.cfc?ws dl 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 tag.

28.  Write a new 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

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

30.  Find the main 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!

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

32. Thank you!