1. FlexUserGroup＠福岡
ILog on SaaS
とくなが たかひさ ［id : totty_jp］
FlexUserGroup

2. i. PaaS／SaaSの上
 PaaS（Platforme as a Service）
 インターネット上で、基盤となるプラットフォームを提供するサービス
 SaaS（Software as a Service）
 インターネット上で、ソフトウェアを提供するサービス
 Flexでクライアント（Flash）を作り、SaaS上に乗っける
 つまり・・・
on
FlexUserGroup

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. 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. iii. ILog Elixir
 データ可視化画面の開発に役立つ製品ライブラリ
 主にチャート系
 スケジュール／マップ／ダイヤル／ゲージ／3Dチャート／レーダー・
チャート／ツリーマップ／組織図
FlexUserGroup

6. iii. ILog Elixir
 分析系なら欠かせない
 現在、組織チャートのプロト作成。
 と、まぁ、ここまでは、仕事なので、置いといて・・・
FlexUserGroup

7. iv. Demo
FlexUserGroup

8. v. Architecture
 Totty framework（笑）
FlexUserGroup

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. 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. 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. 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. 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. 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. vii. おしまい
 独自フレームワーク！？
 軽量フレームワークを目指した（いつ捨てても良いように）
 yui frameworkなど、期待の高いフレームワークのリリースを待つ
 もし、一緒に成長させてみたい奇特な方がいれば、ご連絡ください（笑


以上、ありがとうございました。
ところで、なんでこんな発表だったか！？
結果的にみると、やってることが、Flex on Cloudで新しい気がした
 実際の現場の声ってことがテーマだった（気がする）
from totty_jp
 Flexをキーワードに盛り上がれれば、なんでもよかった
 とにかく、記念すべき福岡第1回だったので、参加したかった（笑
FlexUserGroup