Caja 的限制、JavaScript 的使用、Flex 的入門與結合 YAP

1. YAP 的前端開發
Using HTML and Adobe Flex
speaker : josephj6802@gmail.com

2. 與傳統網頁開發有何不同？

3. YAP 採用 HTML+YML
Opensocial 採用 Gadget XML
Facebook 採用 FBML

4. Caja
(pronounced "KA-ha")
卡哈

5. Sanitizing JavaScript!
幫 JavaScript 消毒！
photo credit : http://www.flickr.com/photos/pinkmoose/2162958361/

6. Virtual Iframe!
跟 Iframe 一樣、保護網頁不被惡意程式修改
photo credit: http://www.flickr.com/photos/markybon/861751906/

7. 無名小站的安全性演進
• 加入 Y! 前：任意使用 JavaScript 語法
惡意程式可隨意修改無名頁面，非常危險
• ’07/8/14：加上 Iframe 的限制
惡意程式無法危害無名、但仍可植入惡意程式碼危害使用者
• ’08/10/14：Iframe + 白名單 Only
保護了使用者與無名，但非常不方便
• 未來：是否採用 Caja ?
更好的解決方案！

8. Caja 允許在頁面上放置 Inline、Untrusted
的 HTML/CSS/JavaScript、但仍保證安
全！

9. 解除 Iframe、白名單、JavaScript 的
限制，才能製作出有趣的應用程式！

10. IMPORTS___.emitCss___([ '.', ' #show-', ' ol li {n float: left;n list-style-type:
none;n margin: 0;n width: 48px;n height: 48px;n overflow: hidden;n
margin: 0 5px 5pxn}' ].join(IMPORTS___.getIdClass___()));
#show ol li {
float:left;
list-style-type:none;
margin:0;
width:48px;
height:48px;
overflow:hidden;
margin:0 5px 5px;
}
IMPORTS___.htmlEmitter___.b('h1').f(false).ih('People').e('h1').pc('n').b('div').
a('id', 'form-' + IMPORTS___.getIdClass___()).f(false).pc('n
').b('form').a('action', 'people.html')
<h1>People</h1>
<div id="form">
<form action="people.html">
$v.so('showEl', $v.cm($v.ro('document'), 'getElementById', [ 'show' ]));
$v.so('formEl', $v.r($v.cm($v.cm($v.ro('document'), 'getElementById', [ 'form' ]), 'getElementsByTagName', [ 'form' ]), 0));
$v.so('listEl', $v.r($v.cm($v.r($v.cf($v.ro('getElementsByClassName'), [ 'bd', 'div', $v.ro('showEl') ]), 0), 'getElementsByTagName', [ 'ol' ]), 0));
$v.so('errorEl', $v.r($v.cm($v.r($v.cf($v.ro('getElementsByClassName'), [ 'bd', 'div', $v.cm($v.ro('document'), 'getElementById', [ 'error' ]) ]),
0), 'getElementsByTagName', [ 'ol' ]), 0));
$v.so('statEl', $v.cm($v.ro('document'), 'getElementById', [ 'benchmark' ]));
$v.initOuter('tStart'), $v.initOuter('tEnd');
var showEl = document.getElementById('show');
var formEl = document.getElementById('form').getElementsByTagName('form')[0];
var listEl = getElementsByClassName('bd', 'div', showEl)[0].getElementsByTagName('ol')[0];
var errorEl = getElementsByClassName('bd', 'div', document.getElementById('error'))[0].getElementsByTagName('ol')[0];
var statEl = document.getElementById('benchmark');
var tStart, tEnd;
Original CSS
Original HTML
Original JavaScript
Cajoled HTML
Cajoled CSS
Cajoled JavaScript

11. 限制 JavaScript 無法存取全域變數

12. Caja Resources
• Google-caja
http://code.google.com/p/google-caja/
• Caja 測試
http://cajadores.com/demos/testbed/
• 如何安裝 Caja
http://code.google.com/p/google-caja/
wiki/GettingStarted

13. Caja in YAP
http://developer.yahoo.com/yap/guide/what-are-cajas-limitations.html

14. HTML 注意事項
• <html/>,<head/>,<body/> 都不需
要，僅需撰寫 <body/> 裡面的內容。
• 外部 JavaScript 與 CSS 皆不支援。
• <object/> 與 <embed/> 皆不支
援，Flash 請用 <yml:swf/>。
• <input type=”radio”/> 在 IE 無法使
用。
• 不支援 <iframe/>

15. CSS 注意事項
• 常用的 CSS Hack 像是 * 或 _ 皆無法使用。
• 無法使用 Attribute Selector。
input[type=text]
• 背景圖檔需使用有 http:// 的絕對路徑（IE 目
前仍看不到）。

16. JavaScript 注意事項
• 無法使用 eval()
• 無法使用 document.write()
• alert() 會顯示在 Firebug Console
• 永遠用 var 宣告變數
• 無法使用 .prototype =
• 支援 setTimeout 與 setInterval
• 有插入圖檔需斷掉 src，例 s’ + ‘rc

17. Browser Support
大部分的瀏覽器都能正常運作
Google Chrome Firefox Opera Safari

18. However...

19. IE 6,7 的仍有問題
• background-
image 無法使用
• JavaScript 錯誤

20. 目前仍無解，期待 YOS Team 早日修正

21. 使用 JavaScript 函式庫

22. 從蠻荒時代，到有了像 jQuery、YUI 等函式庫
這就是開發者的進化！

23. 在瀏覽器上建立使用者 UI（控制項）
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI

24. 但因為 Caja 的限制，這些函式庫都不支援了
只能回到蠻荒時代

25. OpenSocial & Gadget Saves!

26. • opensocial.*
存取使用者（VIEWER）的 Social 資料
• gadget.io.makeRequest
存取遠端資料（可跨網域）
YAP 支援

27. 取得 OpenSocial 的資料

28. • opensocial 提供下列 RequestType :
• FetchPerson：單一 User Profile 資料
• FetchPeople：多個 User Profile 資料
• FetchPersonAppData：取得 Persist 資料
• RemovePersonAppdata：移除 Persist 資料
• UpdatePersonAppData：更新 Persist 資料
• FetchActivities：取得 Updates
opensocial.new%RequestType%Request

29. var req = opensocial.newDataRequest();
req.add(opensocial.newFetchPersonRequest(idSpec), ‘person’);
var idSpec = opensocial.IdSpec.PersonId.VIEWER;
req.add(opensocial.newFetchActivityRequest(idSpec), ‘activity’);
req.send(callback);
// 送出 request 並指定 callback function
// 可一次索取多種資料，但必須註明 label以便 callback 時區隔
// 指定索取的 user，以目前檢視者為例
// 新增一個 DataRequest 物件
function callback (resp) {
}
var personData = resp.get(‘person’).getData();
var activityData = resp.get(‘activity’).getData();
// callback
// 需指定先前定義的 label
var nickname = personData.getDisplayName();
// 取得資料

30. 使用 gadget.io.makeRequest

31. 可存取遠端資料、支援 OAuth
最棒的是可使用 YQL！

33. http://apps.yahoo.com/-ArKraz7e
YAP JavaScript
快速上手
★ 效果測試
★ 效能 Benchmark
★ 範例程式碼

34. 使用 Adobe Flex
跳脫 Caja 的限制與不順

35. Why uses Flex?
• Caja 限制太多
• 瀏覽器 Issue
• 只有基礎 JavaScript 函式庫可用
• Flash 完全無 Caja 的限制
• 相較於 Flash，Flex 的框架對開發者容
易上手許多

36. What is Flex?
• 可以將 Flex 視為另一套 HTML/
CSS/JavaScript：Flex 由 MXML/
CSS/ActionScript 組成。
• 需要編譯成 Flash 的 SWF 檔。
• 完全是前端 UI 的製作，但提供數種
與後端資料互動的工具。
• 超級豐富的 UI 與優良的 Usability

37. 超豐富的內建控制項、版面、導覽列、圖表

38. 整合好的 Flex 3 SDK ＋ Social
Flash API，歡迎下載！
http://josephj.com/lab/yap_flex_dev.zip

39. Hello World!
了解基本的 Flex 語法
http://josephj.com/training/flex/hello/index_sample.mxml

40. Basic Layout
如何處理基本 Layout
http://josephj.com/training/flex/layout/index_sample.mxml

41. fcsh
讓編譯速度暴走

42. 若只用 mxmlc 做編譯，你會發現速度很慢。
因為 mxmlc 每次都重新編譯所有原始檔...
但 fcsh 會替已編譯過的檔案做 cache，
只編譯有變動的檔案，所以第二次以後的編譯
就會快上許多。（Flex Builder 內建）
fcsh ) mxmlc index.mxml
fcsh ) compile 1
-benchmark=true

43. 使用 HTTPService 取得遠端資料
http://josephj.com/training/flex/http-service/index_sample.mxml

44. amfphp
與後端資料庫的讀寫，只要整理一個 PHP Class 即可

45. http://josephj.com/training/flex/amfphp/services/yap/demo.php
定義了 demo 類別與公開的 getData 方法
yap 為服務名稱
demo 為類別名稱

46. 不需做任何事，就會直接顯示在列表介面上供取用

47. Interact with YAP
如何讓 Flex/Flash 取得YAP 的資料？
Flash : http://josephj.com/training/flex/profile/index_sample.mxml
HTML : http://josephj.com/training/flex/profile/index.php.txt
API Reference : http://developer.yahoo.com/flash/yos/classreference/

48. samples!
有一大堆 sample 值得你參考喔！
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html