Flex Introduction


Published on

Flex Introduction

Published in: Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flex Introduction

  1. 1. Day 1. Adobe Flex Introduction. Name of Senthil Kumar presentation • Company name Srinivasan
  2. 2. Road Map Rich Internet Application How does it works RIA - Architecture Why we need to Use Flex About Flex Introducing the Flex 3 Product Line Flex -Designer / Developer Flex and Eclipse Integration
  3. 3. RIA – Rich Internet Applications • Rich Internet Application ( RIA ) is an web based application that function as desktop application. • It generally split the process that is User Interaction and related activity will be on the client side • Data Manipulation/Operation on the Application Server side. • What we need to follow  More connected  More alive  More Interactive  More Responsive http://sensaran.wordpress.com 3
  4. 4. Most common tools – AJAX ,OpenLaszlo ,Flex /Flash, AIR , Silver Light and Java http://sensaran.wordpress.com
  5. 5. RIA Architecture Html Services Rich Internet Application Browser Presentation Logic Network App Logic Data Access Layer DB Ease of Use Enhanced User Experience Reduced Server Load Lost Data Light Weight Faster Processing time http://sensaran.wordpress.com
  6. 6. Anatomy of a Rich Internet Application Menus & NavigationControls Bi-Directional Audio & Video Data Visualization & Collaboration Real Time Data Push & Alerting Resizable Views/Effects/ Transitions Chat Rich Data Entry Mapping, Geo-Coding, Annotations & White boarding Data Synchronization & Conflict Resolution Offline http://sensaran.wordpress.com
  7. 7. Where did it came from – Flash Back Early 1990’s. 1.Flash was first originated by SmartSketch Application Flash Smart Sketch 2. In 1995 it was acquired by Macromedia and it called as Flash . 3. In 2004 it was acquired by Adobe Systems in the same year they had released the Adobe Flex 1.0 Drawing Application using pen computer by Pen point OS http://sensaran.wordpress.com
  8. 8. Where did it came from Flex 1.0 & 1.5 (2004 Macromedia) Primarily for enterprise market, Flex Builder IDE based on Dreamweaver Flex 2 (2006 Adobe) Flex SDK was free (compiler + class library), AS3 and Flash Player 9, Flex Builder based on open source Eclipse platform. Flex 3 (2008 Adobe) Flex 3 SDK open sourced, Flex Builder enhancement, AIR Flex 4 (2009 – present, Adobe) Biggest change in skinning and component architecture- sparks, targets flash player 10 http://sensaran.wordpress.com
  9. 9. Widest Reach in the World
  10. 10. What is Flex? • Client-side, deployed as Flash .swf • Flex Framework – MXML (Macromedia XML) • Declarative language to define User Interface • Similar to XHTML – User Interface Components • Buttons, ComboBoxes, Layout Managers, Containers, Effects – Class Libraries • Everything in the mx.* packages • Validation Routines, Web Services, DataTypes Expressiveness Rich Media Performance Real Time Desktop and Offline http://sensaran.wordpress.com 10
  11. 11. It’s a standards-based language and programming model that supports common design patterns. works with Adobe Air create desktop applications Browser-less runtime for RIA’s Adobe AIR (Apollo) Adobe Integrated Runtime versatile runtime environment allows use of Flash, Actionscript or HTML and JavaScript code http://sensaran.wordpress.com
  12. 12. What does it contain ? Action Script Mxml Framework and Class Lib.. Flex Charting Flex data Service http://sensaran.wordpress.com
  13. 13. Introducing the Flex 3 Product Line http://sensaran.wordpress.com
  14. 14. Flex vs. Flash • • • • Flex evolved from Flash Flash was a complete animation tool Flex is a development platform Output of Flex is a compiled SWF file Flex Builder (and SDK) Flash Authoring Library AS2 AS3 Flash Compiler MXML CSS Flex Compiler SWF http://sensaran.wordpress.com 14
  15. 15. Where does Flex fit in? DESIGN & DEVELOPMENT TOOLS CLIENT APPLICATION TIER Flash Player Creative Suite Flash Professional Browsers HTTP/S, Sockets, AMF, RTMP, SOAP, WS*, SMTP, REST, … Flash Catalyst Flash Builder AIR SERVICES TIER Flex Framework Flash Platform Flash Media Services Server Family RESOURCE TIER EIS Databases Directories LiveCycle 3rd Party Services ECM Repository Message Queues http://sensaran.wordpress.com SAP…
  16. 16. Types of Flex Apps. Flex Browser Application  SWF Desktop Application  AIR Desktop Application Browser Application http://sensaran.wordpress.com
  17. 17. “ 12/27/2013 What’s AIR™?  .air Packages Adobe Integrated Runtime (AIR) is a cross-platform runtime that allows you to leverage your existing web applications skills to build and deploy Rich Internet Applications (RIAs) to the desktop http://sensaran.wordpress.com  Deploy to desktop with double click install  Distribute as standalone or packaged with runtime  Remember JWS? 17
  18. 18. Flex for designers • • • • MXML ~ HTML, Actionscript ~ Javascript CSS support/Runtime skinning support States Management Layout/Navigation – Canvas, Form, VBox, HBox, ControlBar, Accordion, LinkBar, MenuBar, ViewStack • Controls – Button, CheckBox, ComboBox, DataGrid, TextInput, List, Label, Tree • Charts – BarChart, PieChart, LineChart http://sensaran.wordpress.com 18
  19. 19. Flex for developers • Actionscript ~ Javascript + Java. • MXML ~ Actionscript • Familiar syntax – Similar to C++, Java, C#, JavaScript • Dynamic Language, Strong/Weak Typing – Variables can hold any type – Can bind variable to specific data type • Visibility Modifiers – Public - Accessible to anyone – Private - Only accessible inside the class (current .mxml or .as) – Protected - Accessible inside the class and subclasses – Internal - Only accessible to classes in the same package • Default value (when visibility is omitted) http://sensaran.wordpress.com
  20. 20. How does it works Flex Builder IDE Flash Player Flex SDK MXML Browser Action Script Flex Class Library Web Server Compile .swf http://sensaran.wordpress.com
  21. 21. Where Flex is Used Product Configuration Rich Media Applications Line of Business Applications Data Visualization Complex, Multi-Step Processes Product Selection http://sensaran.wordpress.com
  22. 22. Developing RIAs… 10 reasons to use Adobe Flex http://sensaran.wordpress.com
  23. 23. # Flex delivers the Rich Internet Application (framework,components and service) http://sensaran.wordpress.com
  24. 24. #2 – Flex applications overcome browser limitations • Create a new generation of expressive, high performance and collaborative online applications. http://sensaran.wordpress.com
  25. 25. #3 – Flex leverages your existing skills • HTML, XML, JavaScript, Ajax, J2EE and .NET developers will be productive with Flex in no time. http://sensaran.wordpress.com
  26. 26. #4 – Flash Player has widest reach in the World We can easily build, test and deploy http://sensaran.wordpress.com
  27. 27. #5 – vector drawing and two way audio/video integration Cross-platform vector drawing API Integrated two-way audio/video Advanced communication protocols Performance Flash Player External API http://sensaran.wordpress.com
  28. 28. #6 – Flex plays well with others With XML/SOAP support and J2EE integration, Flex unifies disparate data services on the client. http://sensaran.wordpress.com
  29. 29. #7 – Flex makes you (and your applications) look good • Transitions, effects, skinning and visual component states deliver immersive user experiences. http://sensaran.wordpress.com
  30. 30. #8 – Flex will make you go faster • Flex transforms the developer experience - with productive coding tools, integrated debugging and automated testing support. http://sensaran.wordpress.com
  31. 31. #9 – Flex makes it easier to work with data • Data synchronisation, offline storage, publish/subscribe messaging and real-time data push for “data-rich” applications. http://sensaran.wordpress.com
  32. 32. #10 – You can build flex applications for free! • Compile and deploy Flex applications at no cost with the Flex 2 SDK… download it from Adobe.com. http://sensaran.wordpress.com
  33. 33. Configure Flex plugin in eclipse Requirements (i) Eclipse (INDIGO) (ii) Adobe Flex SDK (3.0.0) http://sensaran.wordpress.com
  34. 34. Eclipse Installation Instruction  Download the zipped eclipse folder from http://www.eclipse.org/downloads/.  Extract the Zipped folder should have the following files http://sensaran.wordpress.com
  35. 35. Flex Plugin Installation Instruction  Download the zipped Flex SDK folder from following link https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse
  36. 36. Configure Flex SDK in eclipse  Go to Eclipse directory create the folder should be named as “links”.  Inside links folder create “link” file name, that file name should be named as “com.adobe.flexbuilder.feature.core.link”.  The newly created file, should have the extension as a “link”. http://sensaran.wordpress.com
  37. 37. Cont.,  Now eclipse folder directory should be like below snap shot. http://sensaran.wordpress.com
  38. 38. Cont.,  Open the link file (com.adobe.flexbuilder.feature.core.link) using notepad or some editor.  In the editor you need to paste the Adobe Flex SDK director path. We should need the file path like below path=C:/Program Files/Adobe/Flex Builder 3 Plug-in(Let me consider that, I have a Flex SDK in the above path). Save & Close the file. http://sensaran.wordpress.com
  39. 39. Cont.,  Click “eclipse.exe”.  When you open the eclipse IDE in first time, it will ask you to create the workspace directory.  Create workspace and click OK. http://sensaran.wordpress.com
  40. 40. Cont.,  Eclipse IDE will loads the welcome screen. When you will using first time. http://sensaran.wordpress.com
  41. 41. Cont.,  Go to Window -> Open Perspective -> Other http://sensaran.wordpress.com
  42. 42. Cont.,  We will get dialog box , when clicked the Other… option is available in the Window menu. Now we will be able show a Flex Development Perspective. http://sensaran.wordpress.com
  43. 43. Cont.,  Now the Flex IDE is Configured with our eclipse IDE.
  44. 44. Flex SDK Configuration  Click Window -> Preferences  The Preference window dialog box will be appear.  We will find the Flex -> Installed Flex SDK’s Option is In the left navigation menu of the preference dialog box.  Click Add button in the Right side.  Give Adobe Flex SDK Location Path and name.  The snap shot is in the following slide.  Now we can type the flex code, compile(Build) and run using Eclipse IDE. http://sensaran.wordpress.com
  45. 45. http://sensaran.wordpress.com
  46. 46. Flex Builder 3 Installation Instruction Download the Flex builder 3 exe file using the below link http://download.macromedia.com/pub/flex/flex_builder/FB3_ win.exe
  47. 47. http://sensaran.wordpress.com