Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Get this document free

Generating a J2Ee Database Application Flex Java How - PDF

VIEWS: 15 PAGES: 29

Generating a J2Ee Database Application Flex Java How document sample

More Info
									Rich-Internet
Anwendungen auf
Basis von ColdFusion
und Flex

Sven Ramuschkat
SRamuschkat@herrlich-ramuschkat.de


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


                                     ®
Objectives

   Understand how ColdFusion and Flex work together
   Become familiar with Flex Builder and the Flex Builder ColdFusion
    extensions
   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



Global



         Web Applications          Rich Internet
                                   Applications
 Reach




Local
          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
        Compile
                            XML/HTTP
                                                 LC Data Services
                            REST
                            SOAP Web Services J2EE Application Server

                            Existing Applications & Infrastructure

                                                                              ®
       ADOBE
       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




                                                                                                  ®
<mx:RemoteObject>

   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"
                     destination="ColdFusion"
                     source="Path.To.CFC"/>
   <mx:RemoteObject> does not invoke any methods, it simply defines the
    connection.
   All methods of the CFC become local ‘proxy’ methods to the RemoteObject
    object.
   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="http://www.adobe.com/2006/mxml">
       <mx:Label text="Hello world" />
    </mx:Panel>




                                                                                 ®
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
    handler




                                                                              ®
RemoteObject ‘data mapping’

   ART.cfc and ART.as are ‘copies’ of each other
   They are linked through code in ART.as:
     [RemoteClass(alias="CFPF.cfc.ART")]
   When CF returns a populated instance of ART.cfc, Flex automatically receives
    an instance of ART.as (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:states>
       <mx:State name="edit">
          ..code that defines the State
       </mx:State>
    </mx:States>
   States are defined in Design View States panel




                                                                    ®
Demo 7

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




                                                             ®
Questions?




             ®

								
To top