O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ

3.577 visualizações

Publicada em

俺聞け11 というイベントで、

「Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ」という発表をしてきました。 そして、15分では説明しきれませんでした。orz

説明しきれなかったところは、ブログにまとめましたので、そちらをご覧ください。

http://extjs.sunvisor.net/828

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ

  1. 1. Sencha のフレームワーク
 Ext JS 5 について 15分で説明するよ @martini3oz
  2. 2. 自己紹介 • 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー
  3. 3. 著書 • Sencha Touch 2 実践開発ガイド • HTML5/JavaScriptモバイル アプリケーション フレーム ワークであるSencha Touchは、 iOS、Androidを始めとす る多くのプラットフォーム上で、ネィティブに負けないアプ リをスピーディに開発できる唯一のフレームワークであるこ とで、世界中のデベロッパーの関心を集めています。 • 本書では、Sencha Touchを使ってのモバイル アプリケー ション作成を手助けする、実践的な内容を盛り込みました。
  4. 4. • カリフォルニア州レッドウッドシティにある企業 • HTML5について先駆者として取り組み • フレームワーク/ツール/サービスを提供 Sencha 社
  5. 5. どこから始める? • sencha generate app です • このコマンドで、アプリの雛形を作ってくれますので、そこ から始めます。 • 作ってくれるのはアプリの枠組みです。必要なところを書き 加えていきます。
  6. 6. スキャッフォルディング 表示すると、 こんな感じの Webアプリが できます
  7. 7. index.html 1 <!DOCTYPE HTML>! 2 <html manifest="">! 3 <head>! 4 <meta http-equiv="X-UA-Compatible" content="IE=edge">! 5 <meta charset="UTF-8">! 6 ! 7 <title>MyList</title>! 8 ! 9 <!-- The line below must be kept intact for Sencha Cmd to build your application -->! 10 <script id="microloader" type="text/javascript" src="bootstrap.js"></script>! 11 ! 12 </head>! 13 <body></body>! 14 </html>!
  8. 8. index.html • これだけ • Sencha では HTML を書くことは少ない • index.html を自分で触ることは少ない • バージョンが上がるほど少なくなってきている
  9. 9. ディレクトリ構造 アプリケーションのルート サブディレクトリで名前空間を分ける ここから始まる デザインは SASS で
  10. 10. クラスシステム • JavaScript には「クラス」は存在しない。 • そのため、Alter JS では「クラス」が追加されている • Sencha のフレームワークでは、素の JavaScript 上にクラ スシステムを構築している • 継承、オーバーライド、スタティックメソッド、ミックスイ ンなどの一通りの機能を備える
  11. 11. クラスシステム 1 // クラスの定義! 2 Ext.define('MyApp.mypackage.MyClass', {! 3 extend: 'MyApp.SuperClass',! 4 config: {! 5 myConfig: true! 6 }! 7 });! 8 ! 9 // インスタンス化! 10 var instance = Ext.create('MyApp.mypackage.MyClass', {! 11 myConfig: false! 12 });!
  12. 12. コンポーネント
  13. 13. コンポーネント TreePanel
  14. 14. コンポーネント GridPanel
  15. 15. コンポーネント ToolBar
  16. 16. コンポーネント Chart
  17. 17. コンポーネント
  18. 18. コンポーネント 200種類以上!
  19. 19. 1 // コンポーネントを使う! 2 Ext.define('MyApp.view.MyPanel', {! 3 extend: 'Ext.form.Panel',! 4 config: {! 5 title: '俺聞け11',! 6 items: [{! 7 xtype: 'textfield',! 8 fieldLabel: 'お名前',! 9 name: 'name'! 10 },{! 11 xtype: 'datefield',! 12 fieldLabel: 'お誕生日',! 13 name: 'birthday'! 14 }]! 15 }! 16 });
  20. 20. 1 // コンポーネントを使う! 2 Ext.define('MyApp.view.MyPanel', {! 3 extend: 'Ext.form.Panel',! 4 config: {! 5 title: '俺聞け11',! 6 items: [{! 7 xtype: 'textfield',! 8 fieldLabel: 'お名前',! 9 name: 'name'! 10 },{! 11 xtype: 'datefield',! 12 fieldLabel: 'お誕生日',! 13 name: 'birthday'! 14 }]! 15 }! 16 });
  21. 21. MVC - MVVM Application View ViewModel ViewController Model Store Proxy Controller
  22. 22. MVC - MVVM Application View ViewModel ViewController Model Store Proxy Controller コンポーネント イベント処理 バインドするデータ あまり使わない スタートポイント データ構造の定義 レコードの保持 レコードの集合 サーバーなどとの通信
  23. 23. ではアプリを作ってみます
  24. 24. スキャッフォルディング
  25. 25. サーバーからデータを取得
  26. 26. グリッドにバインド
  27. 27. ViewController
 でイベントをハンドリング
  28. 28. テーマ設定
  29. 29. Sencha UG • 定期的に Sencha の勉強会とかやっています • http://www.meetup.com/Japan-Sencha-User-Group/ • https://atnd.org/users/160956
  30. 30. ご清聴ありがとうございました

×