Ext JS & HTML5

2010年2月25日木曜日

自己紹介

氏名 : 徳冨 優一

所属 : デジノ株式会社

技術 : Ext JS & Google App Engine (Python)

URL : www.degino.com

Twitter : Tommy1969

2010年2月25日木曜日

HTML5 概要

Media: video, audio, canvas

Structure: header, footer, section, nav, article, etc...

Form & Grid: form , dataview (*)

Local Database : Web Database

JavaScript : Web Sockets, Web Workers

CSS3 : Effect, Animation

Misc : File API, 加速度センサー

2010年2月25日木曜日

HTML 5 Demo

2010年2月25日木曜日

Ext JS と HTML5 の対比

Ext JS HTML5Media ○

Structure ○Form&Grid 重複 ○

LocalDB ○Background ○

Other ○

2010年2月25日木曜日

Form Example

2010年2月25日木曜日

Ext JS Roadmap

Ext JS 3.2 (2010/3)

携帯端末用コンポーネント

Ext JS 4.0

HTML5 オフライン機能サポート

HTML5 WebSocket サポート

Canvas サポート

公式サイトより

2010年2月25日木曜日

Ext JS で HTML5 を活用

Web Database を使うには?

Ext.data.DataProxy を継承 (?)

Canvas, SVG, Video などを使うには

Ext.Panel を継承してパネルを作成

2010年2月25日木曜日

Canvas Panel 1

MyCanvas = Ext.extend(Ext.Panel, { initComponent:function() { MyCanvas.superclass.initComponent.call(this); this.on({ render: this._render, bodyresize: function(panel, width, height) { if (this.canvas) this.canvas.setSize(width, height); } }); }};

2010年2月25日木曜日

Canvas Panel 2

MyCanvas._render = function() { var size = this.getSize(); var cfg = Ext.copyTo({ tag : 'canvas', width: size.width, height:size.height }, this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');

this.canvas = this.body.createChild(cfg);};

2010年2月25日木曜日

おわり

2010年2月25日木曜日