Flex 3 - Developing Rich Internet Application

  • View
    218

  • Download
    0

Embed Size (px)

Text of Flex 3 - Developing Rich Internet Application

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    1/170

    Flex 3: Developing Rich InternetApplications

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    2/170

    Adobe Flex Workshop

    Topics

    Understanding course format

    Reviewing course outline

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    3/170

    Understanding course formatThis course is divided many units, most of which presents new information and

    contain demonstration, walkthrough and a lab. At the end of each unit you will

    find a summary and a short review to test your knowledge of the units

    content. The following icons are used throughout the guide

    Concepts introduce new information

    Labs let you practice new skills on your own

    Walkthroughs guide you, through procedures

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    4/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    5/170

    Rich Internet ApplicationIn this unit, you will understand what a Rich Internet application (RIA)

    is. You will understand the Anatomy of RIA.

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    6/170

    Rich Internet Application

    Objectives

    After completing this unit, you shall be able to:

    Rich Internet Application

    RIA technologies

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    7/170

    Rich Internet ApplicationTopics

    In this unit, you will learn the following:

    Understanding RIA

    Understanding the foundation of RIA

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    8/170

    Understanding RIA

    In 2002, Macromedia coined the term rich Internet application (RIA)

    Rich Internet Applications (RIA) combine the flexibility, responsiveness,

    and ease of use of desktop applications with the broad reach of the web.

    RIA provide a dynamic web experience that is rich and engaging, as well as

    interactive

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    9/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    10/170

    Concept of RichnessRichness in Data model

    Support of sophisticated data models: eg, XMLList, ArrayList

    Ability to send and receive data in/out of these data structures

    asynchronously

    Ability for a user interface control to manipulate the data through powerful

    Data binding

    Data can be obtained from server without redrawing the entire page

    Efficiently utilize network bandwidth transmitting only portion of data that

    changed.

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    11/170

    Concept of RichnessRichness in User Interface

    RIA offers a very rich set of user interface controls which can intelligently

    interact with data model

    For example: controls like charts, graphs, calendar control, DataGrid, rich text

    editors etc The User interface can incorporate rich multimedia content.

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    12/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    13/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    14/170

    Summary

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    15/170

    Adobe Flex 3In this unit, you will understand what Adobe Flex is and how Adobe Flex and

    Adobe flash player help in constructing Rich Internet Application. You

    Will also understand the process of how MXML code you write is transformed

    into a SWF file delivered to the client.

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    16/170

    Adobe Flex 3Objectives

    After completing this unit, you shall be able to:

    Explain the different technologies in Adobe Flex product line

    Understand the application flow of a Flex application

    Know where and how to get help

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    17/170

    Adobe Flex 3Topics

    In this unit, you will learn the following:

    Understanding Adobe Flex

    Adobe Flex product line

    Flex Architecture Flex resources

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    18/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    19/170

    Where is Flex used

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    20/170

    How Flex works

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    21/170

    How flex works in the browser

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    22/170

    Flex is

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    23/170

    Adobe Flex SDK Adobe Flex SDK included Flex framework and Flex compiler, enabling you

    to Freely develop and deploy Flex application using any IDE of your choice.

    Flex SDK includes all components needed to create flex applications thatrun in any browser

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    24/170

    Flex Architecture

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    25/170

    Flex enables

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    26/170

    Flex makes you

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    27/170

    Flex ResourcesFlex tutorials

    http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-

    programming-tutorials.htm

    Documentations

    http://flex.org/

    http://www.adobe.com/support/documentation/en/flex/

    Flex component explorer

    http://examples.adobe.com/flex3/componentexplorer/explorer.html

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    28/170

    Summary

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    29/170

    Flex BuilderIn this unit, you will understand the Flex builder and its workbenches. You will

    learn how Flex builder is used for code hinting, debugging

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    30/170

    Flex BuilderObjectives

    After completing this unit, you shall be able to:

    Understand the Flex builder and its workbenches

    Use Flex builder effectively for design, development and debugging

    Create a Flex Project

    Create, compile and run a Flex application

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    31/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    32/170

    Understanding Adobe Flex Builder

    Adobe Flex Builder is eclipse based development tool enabling

    Intelligent coding that included editors like MXML, ActionScript, CSS,

    XML.

    Interactive step-through debugging and code hinting Rich Visual layout

    Visual UI and behaviors

    Interactive data visualization

    Skinning and styling

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    33/170

    Flex builder workbenches The term workbench refers to the flex builder development environment.

    The Flex builder workbench contains three primary elements

    Perspectives

    Editors

    Views

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    34/170

    Flex builder workbenchesUnderstanding Perspectives

    Perspectives includes combination of views and editors that are suited to

    perform certain set of task

    Flex builder has two default perspectives

    Development

    Debugging

    May have other perspectives if using plug-in configuration, like java.

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    35/170

    Flex builder workbenchesUnderstanding Editors

    An editor is the visual component in the workbench that is typically used to

    edit or browse the resource

    An Editor is where files of various types are edited in either

    Design mode

    Source mode

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    36/170

    Flex builder workbenchesUnderstanding Views

    A view supplies support tool when modifying a file in editor

    Navigator view allows you to manage files, folders and projects

    Problems view show errors in your code

    Outline view hierarchically present and allows you to navigate to, all of the

    code elements and user interface in a file

    perspectivesSource and design mode selectors

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    37/170

    perspectivesSource and design mode selectors

    views editor

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    38/170

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    39/170

    Creating a project and your first

    applicationTo begin development, you need to learn the following

    Create a Flex project

    Create a main application page

    Compile the application

    Run the application

  • 8/8/2019 Flex 3 - Developing Rich Internet Application

    40/170

    Creating a project A project is a grouping of resources that make up a flex application

    When a project is created a number of files and folders are automaticallycreated

    bin-debug folder: where your compiled applications resides

    html-template folder: where the html wrapper page resides

    .settings folder: where some configuration file resides .actionScriptProperties, .flexProperties and .project files: project