Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ
•
3 likes•4,281 views
俺聞け11 というイベントで、 「Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ」という発表をしてきました。 そして、15分では説明しきれませんでした。orz 説明しきれなかったところは、ブログにまとめましたので、そちらをご覧ください。 http://extjs.sunvisor.net/828
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ
Similar to Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ (20)
More from 久司 中村
Recently uploaded
Recently uploaded (10)
Sencha のフレームワーク Ext JS 5 について 15 分で説明するよ
- 1. Sencha のフレームワーク Ext JS 5 について 15分で説明するよ @martini3oz
- 2. 自己紹介 • 中村久司 • Sencha UG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー
- 3. 著書 • Sencha Touch 2 実践開発ガイド • HTML5/JavaScriptモバイル アプリケーション フレーム ワークであるSencha Touchは、 iOS、Androidを始めとす る多くのプラットフォーム上で、ネィティブに負けないアプ リをスピーディに開発できる唯一のフレームワークであるこ とで、世界中のデベロッパーの関心を集めています。 • 本書では、Sencha Touchを使ってのモバイル アプリケー ション作成を手助けする、実践的な内容を盛り込みました。
- 7. • カリフォルニア州レッドウッドシティにある企業 • HTML5について先駆者として取り組み • フレームワーク／ツール／サービスを提供 Sencha 社
- 8. どこから始める？ • sencha generate app です • このコマンドで、アプリの雛形を作ってくれますので、そこ から始めます。 • 作ってくれるのはアプリの枠組みです。必要なところを書き 加えていきます。
- 10. 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>!
- 11. index.html • これだけ • Sencha では HTML を書くことは少ない • index.html を自分で触ることは少ない • バージョンが上がるほど少なくなってきている
- 13. クラスシステム • JavaScript には「クラス」は存在しない。 • そのため、Alter JS では「クラス」が追加されている • Sencha のフレームワークでは、素の JavaScript 上にクラ スシステムを構築している • 継承、オーバーライド、スタティックメソッド、ミックスイ ンなどの一通りの機能を備える
- 14. クラスシステム 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 });!
- 15. コンポーネント
- 18. コンポーネント ToolBar
- 19. コンポーネント Chart
- 20. コンポーネント
- 21. コンポーネント 200種類以上！
- 22. 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 });
- 23. 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 });
- 26. ではアプリを作ってみます
- 27. スキャッフォルディング
- 28. サーバーからデータを取得
- 29. グリッドにバインド
- 31. テーマ設定
- 32. Sencha UG • 定期的に Sencha の勉強会とかやっています • http://www.meetup.com/Japan-Sencha-User-Group/ • https://atnd.org/users/160956
- 33. ご清聴ありがとうございました