jQuery 対応ライブラリと TypeScript
2 likes5,063 views
2014 年 6 月 14 日に弊社 @Neri78 が VS ハッカソンで発表させていただいた内容です。
jQuery 対応ライブラリと TypeScript
- 1. jQuery 対応ライブラリと TypeScript 池原 大然 デベロッパー エバンジェリスト インフラジスティックス・ジャパン株式会社 [email protected]
- 2. 自己紹介 池原 大然（いけはら だいぜん） インフラジスティックス・ジャパン株式会社 デベロッパー エバンジェリスト Microsoft MVP for Development Platforms Client App Dev 2010/04 – 2015/03 @Neri78 Blog
- 3. アジェンダ TypeScript と JavaScript ライブラリのカンケイ 商用コンポーネントを TypeScript で使ってみよう まとめ
- 5. 外部のライブラリを使うには • TypeScript で利用するための 定義ファイル(declaration file)が必要 /// <reference path="typings/jquery/jquery.d.ts" /> class Greeter { //... } js ファイルの参照
- 6. How to Create / Get ? • 解説（英語） – http://www.typescriptlang.org/Handbook#writing-dts-files • 言語仕様(英語) – http://www.typescriptlang.org/Content/TypeScript%20Language% 20Specification.pdf • DefinitelyTyped で探す https://github.com/borisyankov/DefinitelyTyped たぶん今日の後のセッションでやるんじゃないかな？ • NuGet で探してみる
- 9. 本日の題材
- 10. 開発ツール製品
- 12. Ignite UI コンポーネント jQuery jQuery UI jQuery Mobile jQuery Mobile ベース コントロール jQuery ベース データ コンポーネント jQuery UI ベース コントロール
- 13. // ダイアログの生成 $("#dialog").igDialog({ state: "opened", height: 460, width: 440 }); @*ダイアログの生成*@ @(Html.Infragistics() .Dialog("dialog") .State(DialogState.Opened) .Height("460") .Width("440") .Render() ) MVC も OK! スタンダードな jQuery ASP.NET MVC を利用 Razor 構文 jQuery 構文が生成、 実行される
- 14. 収録コンポーネント:一覧 • データ グリッド – Grid – Hierarchical Grid • OLAP ピボット – Pivot Data Selector – Pivot View – Pivot Grid • データ ビジュアリゼーション – Data Chart – Bullet Graph – Pie Chart – Linear Gauge – Doughnut Chart – Map – Funnel Chart – Barcode – Radial Gauge – Zoombar – Sparkline • レイアウト – Layout Manager – Tile Manager – Splitter • エディター – Combo Box – Editors – Date Picker – HTML Editor • フレームワーク – Infragistics Loader – Data Source – Templating Engine – Infragistics Excel* – Infragistics Word* – Infragistics Document* • 操作 – Tree – Popover – Dialog Window – Rating – File Upload – Video Player • モバイル – List View – Rating – Button – Check Box – Check Box Group – Collapsible – Collapsible Set – RadioButton Group – SelectMenu – Slider – Toggle Switch – TextBox – Page – PageContent – PageFooter – PageHeader – Popup – Link – NavBar *ASP.NET 用サーバー側コンポーネント • jQuery ベース • jQuery UI ベース • jQuery Mobile ベース
- 16. サンプルからの…
- 18. Demo Let’s try!
- 19. Ignite UI でのサポート状況 • 2012 年ごろからひっそりとサポート – http://www.infragistics.com/community/blogs/angel_todorov/archive/2012/10/27/introd ucing-typescript-support-for-ignite-ui.aspx • 型定義ファイルを自動生成する仕組みを構築 • 注意 – 実案件で Ignite UI + TypeScript を利用って 聞かないので、日本での実績はナシ? 2014/06/14現在
- 20. まとめ
- 21. まとめ • 型定義ファイル必要 • たぶん詳細は後のセッション • Ignite UI で定義ファイルを提供
- 22. リソース Writing .d.ts files http://www.typescriptlang.org/Handbook#writing-dts-files TypeScript Language Specs http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf Ignite UI Sample http://jp.igniteui.com jQuery, XAML 対応製品を中心に紹介しているブログ http://blogs.jp.infragistics.com/blogs/dikehara/