Generating a J2Ee Database Application Flex Java How - PDF by mve10293


More Info
Anwendungen auf
Basis von ColdFusion
und Flex

Sven Ramuschkat

München & Zürich, März 2009


   Understand how ColdFusion and Flex work together
   Become familiar with Flex Builder and the Flex Builder ColdFusion
   Use the ColdFusion wizards
   Build a Flex application from scratch
   Use data bindings and data providers
   Work with the RemoteObject Class
   Use the Flex Builder debugger

Application Evolution


         Web Applications          Rich Internet

          Mainframe                Client/Server

          Text UI           Rich   Integrated media GUI

            “           Rich Internet Applications
                        are the next evolution of
                        the web

Source: Gartner Research, May 11, 2005                   ®
Engagement Drives Application Value

     “Our research and conservative models show that well-designed
     RIAs can produce eye-popping results that can help prove the value
     of current investments and make the case for future RIA projects.”
                      - Ron Rogowski, Forrester Research, 2007
        ADOBE FLEX 3
A highly productive, free open source framework
for building expressive web applications that
deploy consistently on all major browsers
and on the desktop with Adobe AIR

Understanding Flex

   2 languages
                                                        Flex Builder IDE
        MXML (actually a library of ActionScript)
        ActionScript 3                              Flex SDK

   Compilers                                          MXML     ActionScript

   Debuggers                                           Flex Class Library

   Rich Component Library                                 Debuggers

 Flex Builder IDE
      Eclipse Plugin or turn-key install
      Accelerates Design
      Design view and code view

How Flex works in the Browser

    Flex Builder IDE                          Browser

 Flex SDK                                     Flash Player
   MXML      ActionScript

     Flex Class Library     SOAP        HTTP/S         AMF/S         RTMP/S

                            Web Server
                                                 LC Data Services
                            SOAP Web Services J2EE Application Server

                            Existing Applications & Infrastructure

       ColdFusion 8
The fastest and easiest way to build Java
based (J2EE) applications and web sites

ColdFusion is…

 Both a language (CFML) and a web application engine (server)
 Provides necessary services – database, email, integration, etc.
 Premiere server-side solution for building Rich Internet Applications (RIA)
 Available since 1995 – first commercial web app server in the world

ColdFusion is Java

 Productivity                                   ColdFusion            JSP          EJB

    Lower Development Costs
    Lower Maintenance Costs

 Enterprise-Services
    Enterprise Database Drivers
    Reporting / Charting / Graphs
                                                                Java Byte Code
    Full-text searching                                        (deployed as EAR)
    PDF Documents / Forms
    Image Manipulation
    MS Exchange Integration
    Much more…                      J2EE Application Servers

The Enterprise Hub

Flex Builder

   Flex Builder is an Eclipse based IDE used to build Flex applications
   Flex Builder can be installed as:
        A standalone IDE
        As a plug-in in an existing Eclipse installation

   Key areas of interest:
        The editor
        Design view
        Navigator (Project panel)
        Outline panel
        Problems panel
        ColdFusion extension panels

Flex Builder ColdFusion Extensions

   Flex Builder ColdFusion extensions support:
        RDS Dataview panel
        RDS Fileview panel
        Services Browser panel
        SQL query builder
        CFC->AS and AS->CFC conversion wizards
        Database table abstraction wizard
        ColdFusion / Flex application generation wizard
        Extensive CFML and ColdFusion documentation

   During Flex Builder installation, ColdFusion extensions are saved locally but
    are not actually installed into the IDE
        Install using Help -> Software Updates -> Find and Install
        File is located in C:\Program Files\Adobe\Flex Builder 3\Installers\ColdFusion Extensions for Flex Builder\

Demo 1

   Demo 1: creating a Flex/CF project in Flex Builder.

CFC wizard

   ColdFusion extensions for Flex Builder feature powerful wizards
   CFC wizard creates all CFCs needed to access a database table
   CFC wizard is ‘well hidden’ in the RDS dataview
        Expand tables and right-click on a table

Demo 2

   Demo 2: generating the ColdFusion CFC’s using the CFC creation wizard

Accessing data on the server

   Flex applications can access back-end data is a variety of ways:
        HTTP calls
        Web Services (SOAP)
        RemoteObject (AMF)
        RTMP using Blaze or LiveCycle Data Services

   Using RemoteObject to connect to ColdFusion provides:
        Simplest integration
        Best performance
        Automatic object mapping between CFCs and AS classes <--- VERY powerful
        Don’t need Blaze or LiveCycle Data Services, everything you need comes with ColdFusion


   The <mx:RemoteObject> tag is used to define a ColdFusion component
    or Java Class to be accessed via Flash Remoting (AMF)

    <mx:RemoteObject id="artRO"
   <mx:RemoteObject> does not invoke any methods, it simply defines the
   All methods of the CFC become local ‘proxy’ methods to the RemoteObject
   When local ‘proxy’ methods are invoked, Flex relays them to the server.

Demo 3

   Demo 3: using a Remote Object to populate a DataGrid with results returned
    by ColdFusion

Custom components

   Custom Flex components may be created in MXML or ActionScript
   One use of custom components is the creation of “views” (following the MVC
    design pattern) to seperate the UI layer
   An MXML custom Flex component is a file with an MXML tag other than
    <mx:Application> as the outermost tag

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Panel xmlns:mx="">
       <mx:Label text="Hello world" />

The event object

   When Flex dispatches an event, an event object is always created
   To use the event object, pass it to the event handler
    <mx:method name="get" result="getHandler(event)"/>
   In the event handler, accept the event object
    private function getHandler(event:ResultEvent):void
          myVO = event.result as ART;

Demo 4

   Demo 4: display a selected object using a custom component and an event

RemoteObject ‘data mapping’

   ART.cfc and are ‘copies’ of each other
   They are linked through code in
   When CF returns a populated instance of ART.cfc, Flex automatically receives
    an instance of (vice versa)

Interactive Debugger

   Flex Builder features a powerful interactive debugger that supports:
        Breakpoints
        Step-by-step debugging
        Expression evaluation

   Flex Builder has a ‘Flex Debugging’ perspective

Demo 5

   Demo 6: exploring the Interactive Debugger in Flex Builder

Enhancing the user experience

   States are used to define different views.
   States define the differences between views (the delta)
   Every application has a base state, whether it is used or not
   Defining states creates an MXML block

       <mx:State name="edit">
          ..code that defines the State
   States are defined in Design View States panel

Demo 7

   Demo 7: enhance the user experience using a View State



To top