Your SlideShare is downloading. ×
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,648

Published on

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

No Downloads
Views
Total Views
1,648
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×