Upload
joseph-chiang
View
2.563
Download
11
Embed Size (px)
DESCRIPTION
Caja 的限制、JavaScript 的使用、Flex 的入門與結合 YAP
Citation preview
YAP 的前端開發Using HTML and Adobe Flex
speaker : [email protected]
Sanitizing JavaScript!幫 JavaScript 消毒!
photo credit : http://www.flickr.com/photos/pinkmoose/2162958361/
Virtual Iframe!跟 Iframe 一樣、保護網頁不被惡意程式修改
photo credit: http://www.flickr.com/photos/markybon/861751906/
無名小站的安全性演進
• 加入 Y! 前:任意使用 JavaScript 語法惡意程式可隨意修改無名頁面,非常危險
• ’07/8/14:加上 Iframe 的限制惡意程式無法危害無名、但仍可植入惡意程式碼危害使用者
• ’08/10/14:Iframe + 白名單 Only保護了使用者與無名,但非常不方便
• 未來:是否採用 Caja ?更好的解決方案!
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 5px\n}' ].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
Caja Resources• Google-caja
http://code.google.com/p/google-caja/
• Caja 測試 http://cajadores.com/demos/testbed/
• 如何安裝 Cajahttp://code.google.com/p/google-caja/wiki/GettingStarted
Caja in YAPhttp://developer.yahoo.com/yap/guide/what-are-cajas-limitations.html
HTML 注意事項• <html/>,<head/>,<body/> 都不需要,僅需撰寫 <body/> 裡面的內容。
• 外部 JavaScript 與 CSS 皆不支援。
• <object/> 與 <embed/> 皆不支援,Flash 請用 <yml:swf/>。
• <input type=”radio”/> 在 IE 無法使用。
• 不支援 <iframe/>
CSS 注意事項
• 常用的 CSS Hack 像是 * 或 _ 皆無法使用。• 無法使用 Attribute Selector。
input[type=text]• 背景圖檔需使用有 http:// 的絕對路徑(IE 目前仍看不到)。
JavaScript 注意事項• 無法使用 eval() • 無法使用 document.write()• alert() 會顯示在 Firebug Console• 永遠用 var 宣告變數• 無法使用 .prototype = • 支援 setTimeout 與 setInterval• 有插入圖檔需斷掉 src,例 s’ + ‘rc
在瀏覽器上建立使用者 UI(控制項)
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
• opensocial 提供下列 RequestType : • FetchPerson:單一 User Profile 資料• FetchPeople:多個 User Profile 資料• FetchPersonAppData:取得 Persist 資料 • RemovePersonAppdata:移除 Persist 資料• UpdatePersonAppData:更新 Persist 資料• FetchActivities:取得 Updates
opensocial.new%RequestType%Request
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();// 取得資料
http://apps.yahoo.com/-ArKraz7e
YAP JavaScript 快速上手
★ 效果測試
★ 效能 Benchmark
★ 範例程式碼
Why uses Flex?• Caja 限制太多
• 瀏覽器 Issue• 只有基礎 JavaScript 函式庫可用
• Flash 完全無 Caja 的限制• 相較於 Flash,Flex 的框架對開發者容易上手許多
What is Flex?• 可以將 Flex 視為另一套 HTML/
CSS/JavaScript:Flex 由 MXML/CSS/ActionScript 組成。
• 需要編譯成 Flash 的 SWF 檔。
• 完全是前端 UI 的製作,但提供數種與後端資料互動的工具。
• 超級豐富的 UI 與優良的 Usability
整合好的 Flex 3 SDK + Social Flash API,歡迎下載!
http://josephj.com/lab/yap_flex_dev.zip
Hello World!了解基本的 Flex 語法
http://josephj.com/training/flex/hello/index_sample.mxml
Basic Layout如何處理基本 Layout
http://josephj.com/training/flex/layout/index_sample.mxml
若只用 mxmlc 做編譯,你會發現速度很慢。因為 mxmlc 每次都重新編譯所有原始檔...
但 fcsh 會替已編譯過的檔案做 cache,只編譯有變動的檔案,所以第二次以後的編譯
就會快上許多。(Flex Builder 內建)
fcsh ) mxmlc index.mxmlfcsh ) compile 1
-benchmark=true
使用 HTTPService 取得遠端資料http://josephj.com/training/flex/http-service/index_sample.mxml
http://josephj.com/training/flex/amfphp/services/yap/demo.php
定義了 demo 類別與公開的 getData 方法
yap 為服務名稱
demo 為類別名稱
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/
samples!有一大堆 sample 值得你參考喔!
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html