2013 ignite ui 最新情報 in 岡山

HTML & JavaScript フレームワーク : IgniteUI先取り情報! ~ ここだけの話 ~

Daizen Ikehara : Marketing & Developer Evangelistdikehara@infragistics.comTwitter @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 グリッド、無償提供中!

http://bit.ly/IgniteUIGrid

まとめ

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

リソース