Nick Kwiatkowski Michigan Flex Users Group

makeshiftklipInternet και Εφαρμογές Web

31 Οκτ 2013 (πριν από 3 χρόνια και 9 μήνες)

63 εμφανίσεις

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.


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.

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


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



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!