Más contenido relacionado
Similar a Yahoo! 應用程式 (YAP) 在前端的開發 (20)
Más de Joseph Chiang (20)
Yahoo! 應用程式 (YAP) 在前端的開發
- 7. 無名小站的安全性演進
• 加入 Y! 前:任意使用 JavaScript 語法
惡意程式可隨意修改無名頁面,非常危險
• ’07/8/14:加上 Iframe 的限制
惡意程式無法危害無名、但仍可植入惡意程式碼危害使用者
• ’08/10/14:Iframe + 白名單 Only
保護了使用者與無名,但非常不方便
• 未來:是否採用 Caja ?
更好的解決方案!
- 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
- 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
- 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();
// 取得資料
- 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
- 38. 整合好的 Flex 3 SDK + Social
Flash API,歡迎下載!
http://josephj.com/lab/yap_flex_dev.zip
- 42. 若只用 mxmlc 做編譯,你會發現速度很慢。
因為 mxmlc 每次都重新編譯所有原始檔...
但 fcsh 會替已編譯過的檔案做 cache,
只編譯有變動的檔案,所以第二次以後的編譯
就會快上許多。(Flex Builder 內建)
fcsh ) mxmlc index.mxml
fcsh ) compile 1
-benchmark=true
- 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/