I Log On Saa S

1,041 views
948 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,041
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

I Log On Saa S

  1. 1. FlexUserGroup@福岡 ILog on SaaS とくなが たかひさ [id : totty_jp] FlexUserGroup
  2. 2. i. PaaS/SaaSの上  PaaS(Platforme as a Service)  インターネット上で、基盤となるプラットフォームを提供するサービス  SaaS(Software as a Service)  インターネット上で、ソフトウェアを提供するサービス  Flexでクライアント(Flash)を作り、SaaS上に乗っける  つまり・・・ on FlexUserGroup
  3. 3. ii. 構成  UIは、もちろん、Flex(Flash)  SaaS(PaaS)環境  Salesforce.com  データを取得して、Flexで表示  データ取得方法  SalesforceのASのAPIを利用 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:sf="http://www.salesforce.com/" layout="absolute"> <sf:connection id="conn" /> </mx:Application> FlexUserGroup
  4. 4. ii. 構成  Salesforce上のコンテンツとして、Flexを作成  静的リソースとして、swfをアップロード  直接も参照できるが、Visualforce(画面)を参照 ユーザ A ユーザ A セールスフォース社 セールスフォース社 Force.com Force.com swf ユーザ B ユーザ B (Flash) SalesForceアプリ Salesforceへの (VisualForce) ログイン SalesForceアプリ (静的リソース) ユーザ C ユーザ C Force.com DB 組織情報 ・・ ・ FlexUserGroup
  5. 5. iii. ILog Elixir  データ可視化画面の開発に役立つ製品ライブラリ  主にチャート系  スケジュール/マップ/ダイヤル/ゲージ/3Dチャート/レーダー・ チャート/ツリーマップ/組織図 FlexUserGroup
  6. 6. iii. ILog Elixir  分析系なら欠かせない  現在、組織チャートのプロト作成。  と、まぁ、ここまでは、仕事なので、置いといて・・・ FlexUserGroup
  7. 7. iv. Demo FlexUserGroup
  8. 8. v. Architecture  Totty framework(笑) FlexUserGroup
  9. 9. vi. Code.  View(Organizer)・・・命名センスなし  MXML上に必要なスクリプトは、すべてHelperクラスにて <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ilog="http://www.ilog.com/2007/ilog/flex" xmlns:helper="jp.totty.helper.*" backgroundColor="0xffffff" layout="absolute"> <mx:Script> <![CDATA[ import jp.totty.util.ResourceUtil; ]]> </mx:Script> <mx:Style source="/assets/css/common.css"/> <helper:OrganizerViewHelper id="helper" /> ~~~略~~~ FlexUserGroup
  10. 10. vi. Code..  Helper(BaseViewHelper)  MXMLに、クラス内から参照できるようにIMXMLObjectを実装 public class BaseViewHelper implements IMXMLObject { private var _document:UIComponent; // MXMLファイル参照クラス private var _id:String; // MXMLファイルID public final function get document():UIComponent { return _document; } public function initialized(document:Object, id:String):void { _document = UIComponent(document); _id = id; // 初期化ファンクションをCallする為 _document.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler, false, 0, true); } protected function creationCompleteHandler(event:FlexEvent):void { // 子クラスで処理を実装 } } FlexUserGroup
  11. 11. vi. Code...  Helper(OrganizerViewHelper)  クラス内からviewに設定できるよう、viewを保持 public class OrganizerViewHelper extends BaseViewHelper { private var _view:Organizer; private var _controller:OrganizerViewController; public function get view():Organizer { if (_view == null) _view = Organizer(super.document); return _view; } public function set view(view:Organizer):void { _view = view; } override protected function creationCompleteHandler( event:FlexEvent):void { if (_controller == null) { _controller = new OrganizerViewController(this); } } FlexUserGroup
  12. 12. vi. Code....  Controller(OrganizerViewController)  Viewに対するコントロールなので、ViewContorller public class OrganizerViewController { private var helper:OrganizerViewHelper; private var logic:PersonLogic = PersonLogic.getInstance();; public function OrganizerViewController( viewHelper:OrganizerViewHelper) { helper = viewHelper; var view:Organizer = helper.view; view.tree.addEventListener(CollectionEvent.COLLECTION_CHANGE, initTreeChangeHandler); ~~~略~~~ view.helpButton.addEventListener(MouseEvent.CLICK, helpHandler); } FlexUserGroup
  13. 13. vi. Code.....  Dao(BaseDao)  EventDispatcherを継承して、データ取得後をイベントとして設定 public class BaseDao extends EventDispatcher { protected function doneSuccess(responseDto:ResponseDto):void { dispatchEvent(new ResultEvent(ResultEvent.RESULT, false, true, responseDto)); } protected function doneFailure(responseDto:ResponseDto):void { dispatchEvent(new FaultEvent(FaultEvent.FAULT, false, true, null, null, responseDto.errors[0].message)); } protected function selectQuery(sql:String, success:Function = null, failuer:Function = null):void { try { conn.query(sql, new AsyncResponder(success, failuer)); } catch (error:Error) { throw new DataBaseError(error.message); } } FlexUserGroup
  14. 14. vi. Code......  Dao(PersonDao)  DBレスポンスの処理を実装 public class PersonDao extends BaseDao { public function selectAll(dto:RequestDto):void { var sql:String = "Select hoge from persons"; this.selectQuery(sql, selectAllResult); } private function selectAllResult(result:QueryResult):void { var responseDto:ResponseDto = new ResponseDto(); responseDto.results = dataList; ~~~略~~~ var responseDto:ResponseDto = new ResponseDto(); responseDto.results = dataList; this.doneSuccess(responseDto); } } FlexUserGroup
  15. 15. vii. おしまい  独自フレームワーク!?  軽量フレームワークを目指した(いつ捨てても良いように)  yui frameworkなど、期待の高いフレームワークのリリースを待つ  もし、一緒に成長させてみたい奇特な方がいれば、ご連絡ください(笑   以上、ありがとうございました。 ところで、なんでこんな発表だったか!? 結果的にみると、やってることが、Flex on Cloudで新しい気がした  実際の現場の声ってことがテーマだった(気がする) from totty_jp  Flexをキーワードに盛り上がれれば、なんでもよかった  とにかく、記念すべき福岡第1回だったので、参加したかった(笑 FlexUserGroup

×