2013 ignite ui 最新情報 in 岡山
Post on 20-Aug-2015
1.216 views
TRANSCRIPT
HTML & JavaScript フレームワーク : IgniteUI先取り情報! ~ ここだけの話 ~
Daizen Ikehara : Marketing & Developer [email protected] @Neri78
Neri (池原 大然)インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパーエバンジェリスト
Windows PC
SurfaceRT
Windows Phone をつかう割と普通の市民
だったんですが…
自己紹介
Blog
最近、マカーに！
CM
500 $ チャレンジ!
今日は面白い写真を撮らせてください!
http://bit.ly/IGJPUGC2013
IG User Group Contest 2013
NETADVANTAGE
Cross Platform Modern User Experience
XAML styles to match published Microsoft themes.
9
１開発者様につき１ライセンス
複数のPCにインストールして利用可能
配布ライセンス、サーバーライセンス等は一切不要！ 不要
不要
ライセンス形態
Ignite UI とは?
日本初公開 次期バージョン先出し情報
まとめ
Ignite UIとは?
Ignite UI
JavaScript & HTML UI フレームワーク
jQuery UI, jQuery Mobile ベース
高機能、高パフォーマンス
開発生産性の向上
スタイリング サポート
高機能高パフォーマンス
igGrid
• 軽量化・仮想化された高パフォーマンスグリッド
• 階層表示機能
• フィルタリング
• グループ化
• 集計
LOB (業務用）アプリケーションに対応
igChart
• パフォーマンスHTML5 チャート
• 多様なチャートタイプ
• モーションフレームワークによる動的変更
MobileList View• 高機能モバイルリスト• データバインディング
• 階層ナビゲーション
• テンプレート• 並べ替え• フィルタリング• グループ化• ロードオンデマンド
MobileRating• レーティング
• ReadOnly• 編集モード• 動的変更
Demo
高機能、高パフォーマンス
開発生産性の向上
リソース ローダー
• 必要リソースを自動的に読み込む仕組みを提供
– リソース管理の手間を省くことができる。
• 個々のファイルをインポートする必要がなくなる
<script type="text/javascript">// igLoader の読み込み$.ig.loader({
scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igDialog',ready: function () {// 読み込みが完了した段階で初期化を開始する}
});</script>
読み込みリソース
コンポーネント呼び出しなどの処理
使用するリソースを指定
Control Tuner (Beta)
• http://labs.infragistics.com/jquery/configure/
• プロパティウィンドウを設定しコントロールのデザインが可能
• 生成されたコードをコピー & ペースト
Demo
Infragistics Loader
Control Tuner を利用した
ラピッド UI 設定
スタイリングサポート
Theme rollerサポート
• http://jqueryui.com でテーマ作成
• フォルダーごとコピーしてファイル名変更
• Theme 指定するだけ!
超簡単
@(Html.Infragistics().Loader().ScriptPath(Url.Content("~/Infragistics/js/")).CssPath(Url.Content("~/Infragistics/css/")).Theme("metro").Render()
)
Demo
Theme Roller
2 通りの記述方法
プラットフォーム非依存
JavaScript (jQuery)
Visual Studio 2010/2012
ASP.NET MVC Razor
Mobile Button Mobile CheckBox Mobile CheckBoxGroup
Mobile Collapsible Mobile CollapsibleSet Mobile Link
Mobile NavBar Mobile Page,PageContent,PageFooter,PageHeader
Mobile Popup
Mobile RadioButtonGroup Mobile SelectMenu Mobile Slider
Mobile TextBox Mobile ToggleSwitch
jQuery Mobile コントロールを利用
ASP.NET MVC Razor 構文を用いた UI 記述をサポート
日本初公開次期バージョン先出し情報
新コントロール
• RTM
– スパークライン
– ファンネルチャート
– ピボット テーブル
– ページスプリッター
• CTP (Community Technology Preview）
– ドーナツチャート
– レイアウトマネージャー
– ゲージ
– タイルマネージャー
機能拡張
• Knockout.js サポート - http://knockoutjs.com/
– コンボボックス
– エディター
– グリッド、階層グリッド
– ツリー
• レスポンシブ デザイン機能
– RTM: グリッド
– CTP: レイアウトマネージャー、タイルマネージャー
• 各コントロールの機能拡張
– グリッド : セル結合、固定列機能 (CTP)
– チャート : チャートの種類の追加
Demo
新コントロール総ざらい
まとめ
まとめ
Ignite UI ってなんぞや？
•開発生産性を高めるフレームワーク
• JavaScript, ASP.NET MVC どちらでも利用できます!
•次期バージョンは来月リリース予定
Call To Action!
•無償 Ignite UI Grid をダウンロードしてください!
•実際の開発に利用してください!
•買ってもらえるとまた岡山に来れます!
jQuery jQuery
http://jquery.com/ jQuery UI
http://jqueryui.com/ Visual Studio 2012 の jQuery インテリセンスとコード スニペット (MS 井上 章さんの Blog)http://bit.ly/jQSnipetChack
Ignite UIホワイトペーパー http://wp.techtarget.itmedia.co.jp/contents/?
cid=12323関連 Webinar
http://bit.ly/IGJPWebinars Control Configuration
http://labs.infragistics.com/jquery/configure
オンライン ヘルプ/APIhttp://bit.ly/Ignite2012Help
Bloghttp://bit.ly/IGDaizen
リソース
