i log on saa s

FlexUserGroup

FlexUserGroup＠福岡

ILog on SaaS

とくながたかひさ［id : totty_jp］

FlexUserGroup

i. PaaS／SaaSの上

PaaS（Platforme as a Service）インターネット上で、基盤となるプラットフォームを提供するサービス

SaaS（Software as a Service）インターネット上で、ソフトウェアを提供するサービス

Flexでクライアント（Flash）を作り、SaaS上に乗っける

つまり・・・

on

FlexUserGroup

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

ii. 構成

Salesforce上のコンテンツとして、Flexを作成静的リソースとして、swfをアップロード

直接も参照できるが、Visualforce（画面）を参照

セールスフォース社Force.com

セールスフォース社Force.com

ユーザ Aユーザ A

SalesForceアプリ（VisualForce）

swf（Flash）

SalesForceアプリ（静的リソース）

Force.com DB

組織情報

ユーザ Bユーザ B

Salesforceへのログイン

・・・

ユーザ Cユーザ C

FlexUserGroup

iii. ILog Elixir

データ可視化画面の開発に役立つ製品ライブラリ主にチャート系

スケジュール／マップ／ダイヤル／ゲージ／3Dチャート／レーダー・

チャート／ツリーマップ／組織図

FlexUserGroup

iii. ILog Elixir

分析系なら欠かせない現在、組織チャートのプロト作成。

と、まぁ、ここまでは、仕事なので、置いといて・・・

FlexUserGroup

iv. Demo

FlexUserGroup

v. Architecture

Totty framework（笑）

FlexUserGroup

vi. Code.

View（Organizer）・・・命名センスなし MXML上に必要なスクリプトは、すべてHelperクラスにて

<mx:Applicationxmlns: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

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

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

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

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

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

vii. おしまい

独自フレームワーク！？軽量フレームワークを目指した（いつ捨てても良いように）

yui frameworkなど、期待の高いフレームワークのリリースを待つ

もし、一緒に成長させてみたい奇特な方がいれば、ご連絡ください（笑

ところで、なんでこんな発表だったか！？結果的にみると、やってることが、Flex on Cloudで新しい気がした

実際の現場の声ってことがテーマだった（気がする）

Flexをキーワードに盛り上がれれば、なんでもよかった

とにかく、記念すべき福岡第1回だったので、参加したかった（笑

以上、ありがとうございました。

from totty_jp

i log on saa s

Technology