Your SlideShare is downloading. ×
0
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Flex Rails Pres
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flex Rails Pres

3,702

Published on

Flex with Rails; presented at Ruby Ireland Meetup

Flex with Rails; presented at Ruby Ireland Meetup

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,702
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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(quot;Save Record FAILED - see errorsquot;); } else { Alert.show(quot;Save Record FAILED - But errors not available - Unexpected response from serverquot;); } } else { Alert.show(quot;Save Record - Unexpected response from serverquot;); } } } public function fault(event : Object) : void { Main.debug(quot;AccGjDocSave#fault, event = quot; + event); var faultEvent : FaultEvent = FaultEvent(event); Alert.show(quot;AccGjDoc could not be saved!quot;); } } }
  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(quot;/acc_gj_docs.xmlquot;, _responder); } public function neww() : void { ServiceUtils.send(quot;/acc_gj_docs/new.xmlquot;, _responder); } public function create(rec : AccGjDoc) : void { ServiceUtils.send(quot;/acc_gj_docs.xmlquot;, _responder, quot;POSTquot;, rec.toXML(), true); } public function update(rec : AccGjDoc) : void { ServiceUtils.send(quot;/acc_gj_docs/quot; + rec.id + quot;.xmlquot;, _responder, quot;PUTquot;, rec.toUpdateObject(), false); } public function destroy(rec : AccGjDoc) : void { var params:Object = {}; params[quot;acc_gj_doc[lock_version]quot;] = rec.lock_version; ServiceUtils.send(quot;/acc_gj_docs/quot; + rec.id + quot;.xmlquot;, _responder, quot;DELETEquot;, params, false); } public function show(rec : AccGjDoc) : void { ServiceUtils.send(quot;/acc_gj_docs/quot; + rec.id + quot;.xmlquot;, _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 = quot;e4xquot;, useProxy:Boolean = false) : void { var service:HTTPService = new HTTPService(); service.url = url; service.contentType = sendXML ? quot;application/xmlquot; : quot;application/x-www-form-urlencodedquot;; service.resultFormat = resultFormat; if (method == null) {//the method wasn't set, so default sensibly service.method = (request == null) ? quot;GETquot; : quot;POSTquot;; } else if ((method == quot;PUTquot;) || (method == quot;DELETEquot;)) { service.method = quot;POSTquot;;//PUT and DELETE don't work in Flash yet if (request == null) { request = new Object(); } request[quot;_methodquot;] = 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=quot;1.0quot; encoding=quot;utf-8quot;?> <!-- ABCList.mxml --> <mx:Panel xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; title=quot;Listquot; label=quot;AbcThingsquot; layout=quot;verticalquot; width=quot;100%quot; height=quot;100%quot;> <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=quot;dgquot; x=quot;0quot; y=quot;0quot; width=quot;100%quot; height=quot;100%quot; dataProvider=quot;{model.abcThings}quot; change=quot;onSelect()quot;> <mx:columns> <mx:DataGridColumn headerText=quot;Codequot; dataField=quot;codequot;/> <mx:DataGridColumn headerText=quot;Namequot; dataField=quot;namequot;/> <mx:DataGridColumn headerText=quot;Currencyquot; dataField=quot;currency_idquot; labelFunction=quot;currencyCodequot;/> <mx:DataGridColumn headerText=quot;Statusquot; dataField=quot;status_codequot; labelFunction=quot;statusNamequot;/> </mx:columns> </mx:DataGrid> </mx:Panel>
  24. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <!-- ABCEdit.mxml --> <mx:Panel xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; xmlns:anb=quot;com.anbawn.components.*quot; xmlns=quot;*quot; title=quot;Editquot; layout=quot;verticalquot; width=quot;100%quot; height=quot;100%quot;> <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(quot;Validation errors, record not saved.quot;); 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=quot;nameVquot; source=quot;{dr_name}quot; property=quot;textquot; required=quot;truequot;/> <mx:HBox> <mx:VBox> <mx:Form id=quot;formH1quot; x=quot;0quot; y=quot;0quot; width=quot;100%quot; height=quot;100%quot; > <mx:FormItem label=quot;Code:quot; required=quot;truequot;> <mx:TextInput id=quot;dr_codequot; text=quot;{datarec.code}quot; /> </mx:FormItem> <mx:FormItem label=quot;Name:quot; required=quot;truequot;> <mx:TextInput id=quot;dr_namequot; text=quot;{datarec.name}quot; /> </mx:FormItem> <mx:FormItem label=quot;Currency:quot;> <mx:ComboBox id=quot;cb1quot; dataProvider=quot;{appModel.currencies}quot; selectedItem=quot;{datarec.currency}quot; labelField=quot;namequot;/> </mx:FormItem> <mx:FormItem label=quot;Status:quot;> <mx:ComboBox id=quot;cb2quot; dataProvider=quot;{appModel.statusesOfMasterEntity}quot; selectedItem=quot;{datarec.status}quot; labelField=quot;namequot;/> </mx:FormItem> </mx:Form>
  26. <mx:HBox> <mx:Button visible=quot;{datarec.deleting==false}quot; label=quot;Savequot; click=quot;validateAndSubmit()quot;/> <mx:Button visible=quot;{model.viewState == AppModelLocator.VIEW_STATE_NEW}quot; label=quot;Resetquot; click=quot;resetForm()quot;/> <mx:Button visible= quot;{model.viewState == AppModelLocator.VIEW_STATE_EDIT}quot; label=quot;Deletequot; click=quot;doDelete()quot;/> </mx:HBox> </mx:VBox> </mx:HBox> </mx:Panel>
  27. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <!-- CheckBoxXYZ.mxml --> <mx:HBox xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; horizontalAlign=quot;centerquot;> <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(quot;rowSelectEventquot;)); } else //discard the user action by resetting the box cb1.selected = data.selected; } ]]> </mx:Script> <mx:CheckBox id=quot;cb1quot; selected=quot;{data.selected}quot; click=quot;selectRow(event)quot; /> </mx:HBox>
  28. package com.anbawn.components { import mx.controls.DataGrid; import mx.collections.ArrayCollection; import flash.display.Sprite; [Event(quot;rowSelectEventquot;)] 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)

×