第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料

1,834 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,834
On SlideShare
0
From Embeds
0
Number of Embeds
448
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料

  1. 1. Ext JSアプリケーション 開発の基本 アプリケーション設計:初級編
  2. 2. 自己紹介 小堤 一弘(こつつみ かずひろ) 株式会社ゼノフィ http://www.xenophy.com/ code:x http://code.xenophy.com/ xFrameworkPX http://px.xFramework.net/ xFrameworkEX http://ex.xFramework.net/
  3. 3. アプリケーション設計 • Ext JSの使い方は、サンプルとかで学べ るけど、アプリケーションの作り方は どこにあるの?
  4. 4. アプリケーション設計 どこにもありません。
  5. 5. 自分で考えるしかないアプリケーション設計 • サンプルのまねをしてアプリケーショ ンを作っていったけど、実際につくり こんでいくとぐちゃぐちゃになる。 • ベストプラクティスがあれば助かるの になぁ。
  6. 6. アプリケーションの形態を考える • Ext.Viewportを使ったフルスクリーンア プリケーションを作る • 既存のHTMLにコンポーネントを埋め込 んで作る
  7. 7. アプリケーションクラスを考える • どのような形のアプリケーションでも 1つのアプリケーションクラスを作っ て、そいつがすべてを管理する仕組み はどうだろうか?
  8. 8. アプリケーションクラスで求められるもの • アプリケーション内で起こるイベント を管理しなくてはならない。 • アプリケーションのブートストラップ (起動ポイント)にならなくてはなら い。 • とか・・が考えられる。
  9. 9. アプリケーションクラスの親クラス • Ext.Viewportを使った場合 は、Ext.Viewportクラスを親にしたほう がいい? • いろんな形を考えて・・・ Ext.util.Observableクラスがよさそう。 • やってみる・・。
  10. 10. アプリケーションクラスの定義 Ext.ns( 'Ext.app' ); Ext.app.App = Ext.extend( Ext.util.Observable, { constructor : function() { // todo }
  11. 11. アプリケーションクラスの実行 Ext.onReady(function(){ new Ext.app.App(); });
  12. 12. アプリケーションの初期化 • アプリケーションの初期化 は、Ext.app.Appクラスのコンストラクタ で行う。
  13. 13. Ext.Viewportを作ってみる Ext.app.App = Ext.extend( Ext.util.Observable, { constructor : function() { this.vp = new Ext.Viewport({ layout: 'fit', items: [{
  14. 14. 自作コンポーネントを作る? • さっきの例だとサンプルの書き方を onReadyからアプリケーションのコンス トラクタに移動しただけじゃん。 • やっぱり、itemsのコンフィグオプショ ンを指定してパネルを作っている部分 をコンポーネント化して作っていきた
  15. 15. 自作コンポーネントを作る! • 必要なので、作ろう。 • だけど、どうやって作るの?
  16. 16. Ext.Panelを継承したクラスを作る Ext.MyPanel = Ext.extend( Ext.Panel, { initComponent : function() { Ext.apply( this, { title: 'MyPanel版:テストアプリケーション', html: 'MyPanel版:テストアプリケーションパネルの内容' }); Ext.MyPanel.superclass.initComponent.call( this ); } }); Ext.reg( 'mypanel', Ext.MyPanel );
  17. 17. Ext.Panelを継承したクラスを作る Ext.ns( 'Ext.app' ); Ext.app.App = Ext.extend( Ext.util.Observable, { constructor : function() { this.vp = new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'mypanel' }] }); } });
  18. 18. まだまだ続く複雑なアプリケーション • パネル1個じゃアプリじゃない。 • サンプルみたく複雑なレイアウトをし てみる。 • 複数のコンポーネント間でイベントを 使って処理を行う。
  19. 19. 次回予告 • もうちょっと、アプリケーションらし い形を作って、イベント制御を行って みよう!
  20. 20. ご静聴、ありがとうございました m(_ _)m

×