YAP 的前端開發Using HTML and Adobe Flex

speaker : josephj6802@gmail.com

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

YAP 採用 HTML+YMLOpensocial 採用 Gadget XML

Facebook 採用 FBML

Caja (pronounced "KA-ha")

卡哈

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 ?更好的解決方案！

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

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

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

限制 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

Browser Support

大部分的瀏覽器都能正常運作

Google Chrome Firefox Opera Safari

However...

IE 6,7 的仍有問題

• background-image 無法使用

• JavaScript 錯誤

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

使用 JavaScript 函式庫

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

在瀏覽器上建立使用者 UI（控制項）

Def. But.Button

Label Menu

Label Text Field

Label

Label

Text Area

click me

傳統內建 UI 使用 YUI 所建立的 UI

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

OpenSocial & Gadget Saves!

• opensocial.* 存取使用者（VIEWER）的 Social 資料

• gadget.io.makeRequest存取遠端資料（可跨網域）

YAP 支援

取得 OpenSocial 的資料

• 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();// 取得資料

使用 gadget.io.makeRequest

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

http://apps.yahoo.com/-ArKraz7e

YAP JavaScript 快速上手

★ 效果測試

★ 效能 Benchmark

★ 範例程式碼

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

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

fcsh讓編譯速度暴走

若只用 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

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

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