Flex Rails Pres

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites & 1 Group

    Flex Rails Pres - Presentation Transcript

    1. Adobe Flex with Rails Philip Sexton • The Rails Way • Flex Architecture • Demonstration • Code • Finish
    2. Other Flex/Rails Presentations • Flex on Rails; RailsConf 2007 BOF; Peter Armstrong • Using Adobe Flex with Rails; RailsConf 2007 Berlin; Borre Wessel • Building Rich Internet Applications with Flex and Rails; RailsConf 2007 Berlin; Simon Bateman
    3. Web Apps for Data Management
    4. Web Apps for Data Management • Responsive
    5. Web Apps for Data Management • Responsive • html/css
    6. Web Apps for Data Management • Responsive • html/css • + Ajax (Async Javascript and XML)
    7. Web Apps for Data Management • Responsive • html/css • + Ajax (Async Javascript and XML) • Scaleable
    8. Web Apps for Data Management • Responsive • html/css • + Ajax (Async Javascript and XML) • Scaleable • REST architecture
    9. Ajax and REST • IBM article: Ajax and REST, Part 1 •
    10. Ajax Engine
    11. The best answer to the client requirement??? • Single HTML Page • Ajax • CSS • Stateful Client • Cross-browser
    12. Adobe Flex • Technical overview
    13. Flex runtime architecture - from Adobe: Flex 2, technical overview Flex runtime architecture e Flex runtime architecture is closely aligned with the just-in-time deployment model of web applications. e client portion of a Flex application is deployed as a binary le that contains the compiled bytecode for the application. Users then deploy this le to a web server just as they would an HTML le or an image. When the le is requested by a browser, it is downloaded and the bytecode is executed by the Flash Player runtime. As illustrated in Figure 3, once started, the application can request additional data or content over the network via standard HTTP calls (sometimes referred to as REST services) or through web services (SOAP). Flex clients are server agnostic and can be used in conjunction with any server environment, including standard web servers and common server scripting environments such as JavaServer Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®. Browser Browser MXML and ActionScript Flash Player Data Data Web Server Web Server XML/HTTP XML/HTTP Flex Data Services 2 REST REST SOAP Web Services SOAP Web Services Java EE Application Server J2EE Application Server Existing Applications and Infrastructure Existing Applications and Infrastructure Figure 3: Flex runtime architecture. If the Flex client application is used in conjunction with Flex Data Services, the application has access to additional services. Flex clients can make direct calls to Java objects as well as subscribe to real-time data feeds, send messages to other clients, and integrate with existing Java Message Service (JMS) messaging systems. e Flex Data Services application runs on the server within the Java web container. Flex development model and application framework e development process for Flex applications mirrors the process for Java, C#, C++, or other traditional client development languages. Developers write MXML and ActionScript source code using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then compiled into bytecode by the Flex compiler, resulting in a binary le with the *.swf extension.
    14. including standard web servers and common server scripting environments such as JavaServer Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®. Browser Browser MXML and ActionScript Flash Player Data Data Flex Framework Web Server Web Server XML/HTTP XML/HTTP Flex Data Services 2 REST REST SOAP Web Services SOAP Web Services Java EE Application Server J2EE Application Server - from Adobe: Flex 2, technical overview Existing Applications and Infrastructure Existing Applications and Infrastructure Figure 3: Flex runtime architecture. If the Flex client application is used in conjunction with Flex Data Services, the application has access to additional services. Flex clients can make direct calls to Java objects as well as subscribe to real-time data feeds, send messages to other clients, and integrate with existing Java Message Service (JMS) messaging systems. e Flex Data Services application runs on the server within the Java web container. Flex development model and application framework e development process for Flex applications mirrors the process for Java, C#, C++, or other traditional client development languages. Developers write MXML and ActionScript source code using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then compiled into bytecode by the Flex compiler, resulting in a binary le with the *.swf extension. Flex Application Framework MXML ActionScript Compile Flex Class Library Figure 4: The Flex framework comprises MXML, ActionScript, and the Flex class library. As shown in Figure 4, the Flex application framework consists of MXML, ActionScript 3.0, and the Flex class library. Developers use MXML to declaratively de ne the application user interface elements and use ActionScript for client logic and procedural control. Adobe Flex 2 7
    15. Flex product line - from Adobe, Flex 2, technical overview Flex product line overview As shown in Figure 2, the Flex product family comprises four separate products: • Flex So ware Development Kit (SDK)— e core component library, development languages, and compiler for Flex applications • Flex Builder IDE—An Eclipse-based development environment that includes code editors, visual layout tools, project management tools, and an integrated debugger • Flex Data Services—A Java server-based application that enables high-performance data transfer, cross-tier data synchronization and con ict management, and real-time data messaging • Flex Charting—A library of extensible charting components that enables rapid construction of data visualization applications Figure 2: Members of the Flex product line. Flash Player No discussion of the Flex product would be complete without mentioning Flash Player. Flex applications are deployed as compiled bytecode that is executed within the Flash Player runtime. Installed on over 97% of Internet-connected PCs, Flash Player provides a consistent runtime environment that works across browsers and operating systems, enabling Flex applications to deliver much greater cross-platform compatibility than other RIA technologies. Flash Player provides a unique combination of capabilities that developers can use in their applications, including rich text rendering, powerful graphics APIs, an animation engine, and an integrated audio/video codec. ese capabilities not only contribute to the rich out-of-the-box look and feel displayed in Flex applications, but they are also available to developers who need to construct
    16. Actionscript • Wikipedia: ECMAScript
    17. Demonstrate Sample User Interfaces
    18. Flex and Rails - request / response • code samples from Peter Armstrong: pages 10..12 • other code samples
    19. package com.anbawn.eile.trn.command { import com.adobe.cairngorm.commands.ICommand; import com.adobe.cairngorm.control.CairngormEvent; import mx.controls.Alert; import mx.rpc.IResponder; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; ... public class AccGjDocUpdate implements ICommand, IResponder { public function AccGjDocUpdate() { } public function execute(event : CairngormEvent) : void { var model : AccGjDocsModel = AppModelLocator.getInstance().accGjDocs; var delegate : AccGjDocsDelegate = new AccGjDocsDelegate(this); var doc :AccGjDoc = event.data as AccGjDoc; if (...) { delegate.update(event.data); ... } } public function result(event : Object) : void { var result:Object = event.result; var model : AccGjDocsModel = AppModelLocator.getInstance().accGjDocs; var doc :AccGjDoc; if (result is XML) { var x:XML = XML(result); if (x.name().localName == ...) { doc = AccGjDoc.fromXML(x); model.updateDoc(doc); ... } else if (...errors...) { var errors :ServerErrors; ... Alert.show(\"Save Record FAILED - see errors\"); } else { Alert.show(\"Save Record FAILED - But errors not available - Unexpected response from server\"); } } else { Alert.show(\"Save Record - Unexpected response from server\"); } } } public function fault(event : Object) : void { Main.debug(\"AccGjDocSave#fault, event = \" + event); var faultEvent : FaultEvent = FaultEvent(event); Alert.show(\"AccGjDoc could not be saved!\"); } } }
    20. package com.anbawn.eile.trn.business { import mx.rpc.IResponder; import mx.controls.Alert; import com.anbawn.eile.util.ServiceUtils; import com.anbawn.eile.model.AccGjDoc; public class AccGjDocsDelegate { private var _responder : IResponder; public function AccGjDocsDelegate(responder : IResponder) { _responder = responder; } public function index() : void { ServiceUtils.send(\"/acc_gj_docs.xml\", _responder); } public function neww() : void { ServiceUtils.send(\"/acc_gj_docs/new.xml\", _responder); } public function create(rec : AccGjDoc) : void { ServiceUtils.send(\"/acc_gj_docs.xml\", _responder, \"POST\", rec.toXML(), true); } public function update(rec : AccGjDoc) : void { ServiceUtils.send(\"/acc_gj_docs/\" + rec.id + \".xml\", _responder, \"PUT\", rec.toUpdateObject(), false); } public function destroy(rec : AccGjDoc) : void { var params:Object = {}; params[\"acc_gj_doc[lock_version]\"] = rec.lock_version; ServiceUtils.send(\"/acc_gj_docs/\" + rec.id + \".xml\", _responder, \"DELETE\", params, false); } public function show(rec : AccGjDoc) : void { ServiceUtils.send(\"/acc_gj_docs/\" + rec.id + \".xml\", _responder); } } }
    21. package com.anbawn.eile.util { import mx.rpc.IResponder; import mx.rpc.AsyncToken; import mx.rpc.http.HTTPService; public class ServiceUtils { /** * Note: PUT and DELETE don't work with XML since the _method hack * workaround doesn't work. */ public static function send( url:String, responder:IResponder = null, method:String = null, request:Object = null, sendXML:Boolean = false, resultFormat:String = \"e4x\", useProxy:Boolean = false) : void { var service:HTTPService = new HTTPService(); service.url = url; service.contentType = sendXML ? \"application/xml\" : \"application/x-www-form-urlencoded\"; service.resultFormat = resultFormat; if (method == null) {//the method wasn't set, so default sensibly service.method = (request == null) ? \"GET\" : \"POST\"; } else if ((method == \"PUT\") || (method == \"DELETE\")) { service.method = \"POST\";//PUT and DELETE don't work in Flash yet if (request == null) { request = new Object(); } request[\"_method\"] = method; } else { service.method = method; } service.request = request; service.useProxy = useProxy; var call:AsyncToken = service.send(); if (responder != null) { call.addResponder(responder); } } } }
    22. Flex - views and components • code samples
    23. <?xml version=\"1.0\" encoding=\"utf-8\"?> <!-- ABCList.mxml --> <mx:Panel xmlns:mx=\"http://www.adobe.com/2006/mxml\" title=\"List\" label=\"AbcThings\" layout=\"vertical\" width=\"100%\" height=\"100%\"> <mx:Script> <![CDATA[ import mx.controls.Alert; ... [Bindable] public var model:AbcThingsModel = AppModelLocator.getInstance().abcThings; private function onSelect() : void { ... } private function statusName(item:Object, column:DataGridColumn):String { return item.status.name; } private function currencyCode(item:Object, column:DataGridColumn):String { return item.currency.currency; } ]]> </mx:Script> <mx:DataGrid id=\"dg\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" dataProvider=\"{model.abcThings}\" change=\"onSelect()\"> <mx:columns> <mx:DataGridColumn headerText=\"Code\" dataField=\"code\"/> <mx:DataGridColumn headerText=\"Name\" dataField=\"name\"/> <mx:DataGridColumn headerText=\"Currency\" dataField=\"currency_id\" labelFunction=\"currencyCode\"/> <mx:DataGridColumn headerText=\"Status\" dataField=\"status_code\" labelFunction=\"statusName\"/> </mx:columns> </mx:DataGrid> </mx:Panel>
    24. <?xml version=\"1.0\" encoding=\"utf-8\"?> <!-- ABCEdit.mxml --> <mx:Panel xmlns:mx=\"http://www.adobe.com/2006/mxml\" xmlns:anb=\"com.anbawn.components.*\" xmlns=\"*\" title=\"Edit\" layout=\"vertical\" width=\"100%\" height=\"100%\"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.core.Application; import mx.events.ValidationResultEvent; import mx.events.CloseEvent; ... [Bindable] public var datarec:AbcThing; [Bindable] private var appModel : AppModelLocator = AppModelLocator.getInstance(); [Bindable] private var model : AbcThingsModel = AppModelLocator.getInstance().abcThings; private function validateAndSubmit():void { var invalid:Boolean = false; var vResult:ValidationResultEvent = nameV.validate(); if (vResult.type == ValidationResultEvent.INVALID) invalid = true; if (invalid) { Alert.show(\"Validation errors, record not saved.\"); return; } var rec:AbcThing = new AbcThing( dr_name.text, dr_code.text, 0, //currency_id:int = 0; Currency(cb1.selectedItem), 0, //status_code:int = 0; StatusOfMasterEntity(cb2.selectedItem), datarec.created_by, datarec.created_at, datarec.updated_by, datarec.updated_at, datarec.lock_version, datarec.id); CairngormUtils.dispatchEvent(EventNames.SAVE_ABC_THING, rec); }
    25. private function resetForm():void { ... } private function confirmResetForm(event:CloseEvent):void { if (event.detail == Alert.YES) CairngormUtils.dispatchEvent(EventNames.RESET_NEW_THING); } private function doDelete():void { ... } private function confirmDelete(event:CloseEvent):void { if (event.detail == Alert.YES) CairngormUtils.dispatchEvent(EventNames.DELETE_THING, datarec); } ]]> </mx:Script> <mx:StringValidator id=\"nameV\" source=\"{dr_name}\" property=\"text\" required=\"true\"/> <mx:HBox> <mx:VBox> <mx:Form id=\"formH1\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" > <mx:FormItem label=\"Code:\" required=\"true\"> <mx:TextInput id=\"dr_code\" text=\"{datarec.code}\" /> </mx:FormItem> <mx:FormItem label=\"Name:\" required=\"true\"> <mx:TextInput id=\"dr_name\" text=\"{datarec.name}\" /> </mx:FormItem> <mx:FormItem label=\"Currency:\"> <mx:ComboBox id=\"cb1\" dataProvider=\"{appModel.currencies}\" selectedItem=\"{datarec.currency}\" labelField=\"name\"/> </mx:FormItem> <mx:FormItem label=\"Status:\"> <mx:ComboBox id=\"cb2\" dataProvider=\"{appModel.statusesOfMasterEntity}\" selectedItem=\"{datarec.status}\" labelField=\"name\"/> </mx:FormItem> </mx:Form>
    26. <mx:HBox> <mx:Button visible=\"{datarec.deleting==false}\" label=\"Save\" click=\"validateAndSubmit()\"/> <mx:Button visible=\"{model.viewState == AppModelLocator.VIEW_STATE_NEW}\" label=\"Reset\" click=\"resetForm()\"/> <mx:Button visible= \"{model.viewState == AppModelLocator.VIEW_STATE_EDIT}\" label=\"Delete\" click=\"doDelete()\"/> </mx:HBox> </mx:VBox> </mx:HBox> </mx:Panel>
    27. <?xml version=\"1.0\" encoding=\"utf-8\"?> <!-- CheckBoxXYZ.mxml --> <mx:HBox xmlns:mx=\"http://www.adobe.com/2006/mxml\" horizontalAlign=\"center\"> <mx:Script> <![CDATA[ import mx.controls.DataGrid; public var dataGrid:DataGrid; private function selectRow(event:Event) :void { if ( ... ) { data.selected = !data.selected; if (dataGrid != null) dataGrid.dispatchEvent(new Event(\"rowSelectEvent\")); } else //discard the user action by resetting the box cb1.selected = data.selected; } ]]> </mx:Script> <mx:CheckBox id=\"cb1\" selected=\"{data.selected}\" click=\"selectRow(event)\" /> </mx:HBox>
    28. package com.anbawn.components { import mx.controls.DataGrid; import mx.collections.ArrayCollection; import flash.display.Sprite; [Event(\"rowSelectEvent\")] public class DataGridPlus extends DataGrid { override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void { var dp:ArrayCollection = dataProvider as ArrayCollection; var item:Object; if (dp != null) { if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex); if (item != null && item.selected) color = 0xFFFF00; //yellow //0xFF8800;//orange } super.drawRowBackground(s,rowIndex,y,height,color,dataIndex); } public function myDrawRowBackgrounds() :void { super.drawRowBackgrounds(); } } }
    29. Flash Player? • Adobe says... • on more than 97% of internet-enabled PCs • Flash Player 9: 90.3% (June 2007)
    30. Flex? • see Peter Armstrong’s Presentation: pages 15..18
    31. Flex, Be Aware • not html, hence search engines ! • printing ! • no back button
    32. Flex / Rails • Cairngorm • RubyAMF (Aaron Smith) • Resources • www.adobe.com/products/flex • www.flexiblerails.com (see links and resources there)

    + philipsextonphilipsexton, 3 years ago

    custom

    3796 views, 3 favs, 0 embeds more stats

    Flex with Rails; presented at Ruby Ireland Meetup

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 3796
      • 3796 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events