インフラジスティックスおよび Xamarin.forms コントロールのご紹介

インフラジスティックスおよび
Xamarin.Forms
コントロールのご紹介
インフラジスティックス・ジャパン株式会社
製品担当
池原大然

自己紹介
• 池原大然
• インフラジスティックス・ジャパン株式会社
製品担当
• Microsoft MVP for Windows Platform Development
• UI 全般の技術についてウォッチしています。
• Twitter: @Neri78
• Blog: http://blogs.jp.infragistics.com/blogs/dikehara

本日のアジェンダ
•インフラジスティックス開発ツール概要
•Infragistics Xamarin.Forms 概要
•Infragistics Xamarin.Forms を利用した
モバイルアプリケーション開発
•まとめ
•リソース
Copyright 2015 Infragistics Japan Co., Ltd. 3

4
インフラジスティックス
開発ツール概要
 開発方針
 製品リリースサイクル
 製品メンテナンス
 提供製品・プラットフォーム
Copyright 2015 Infragistics Japan Co., Ltd.

開発コンポーネントスイート
Infragistics Ultimate
• 生産性
• ユーザビリティ
• 信頼性
生産性ユーザビリティ信頼性

Windows Forms ASP.NET WPF Silverlight
Ignite UI
(HTML5/jQuery/ASP.
NET MVC)
NucliOS
(iOS/Xamarin.i
OS)
Windows UI
(Windows Store
Application)
Windows Phone
Icon Indigo Studio Android (CTP)
Xamarin.Forms
(RTM)
Infragistics Ultimate 2015 Vol.1 に含まれる製品

9
Windows Phone
Windows Phone 対応コントロール
WPF/Silverlight/Windows UI で提供しているデータ視覚化パターンを
実装
• チャート
• エディター
• バーコード
• ゲージ
• インタラクション
• レイアウト
• メニュー & リスト

10
NucliOS (iOS)
iOS 対応コントロール
Objective-C、Xamarin.iOS をサポート
• チャート
• グリッド
• ゲージ
• ウィジェット
• Xamarin.iOS

11
Android
Android 対応コントロール
Java で開発できる Android 専用ネイティブコントロール
• グリッド
• ゲージ
• バーコード
• チャート
• Xamarin.Android

「コード共有」と「翻訳」
• コア API を各プラット
フォームに「翻訳」
• 個々のプラットフォームに合
わせて API を
チューニング
• クロスプラットフォームかつ
パフォーマンス重視
• 類似の機能セット
Core
API
Xamarin
Forms
WPF
HTML5
iOS
Android
Windows
Universal
Windows
Phone

13
Infragistics Xamarin.Forms 概要
 概要
 提供コントロール一覧

iOS
Objective-C/Swift
Xcode
Android
Java
Eclipse
Windows
C#
Visual Studio
Xamarin (C#)
Xamarin Studio / Visual Studio
Xamarin.Forms
Xamarin.Forms (共有 UI コード)

15
概要
Xamarin.Forms 対応コントロール
NucliOS/Windows Phone/Android それぞれで提供している
共通コントロールを提供
• チャート
• グリッド
• バーコード
• ゲージ

サポート環境
• 2015 Vol.1 でのサポート環境
• 詳細については http://jp.infragistics.com/support/supported-
environments または弊社サポートにお問い合わせください。
Xamarin.Forms 1.3.5.6335
開発環境 Visual Studio 2012、2013、Xamarin Studio
開発言語 C#
対応端末 Windows Phone 8.0 以降、Android 4.3 以降、
iOS 8.0 以降

「コード共有」と「翻訳」
• コア API を各プラット
フォームに「翻訳」
• 個々のプラットフォームに
合わせて API を
チューニング
• クロスプラットフォームか
つパフォーマンス重視
• 類似の機能セット Copyright 2015 Infragistics Japan Co., Ltd. 17
Core
API
Xamarin
Forms
WPF
HTML5
iOS
Android
Windows
Universal
Windows
Phone
Xamarin.Forms では
この仕組みをフル活用

データチャート
• XFDataChart
• RTM
• 柱状、棒、ライン、スプライン
• 箱ひげなど基本的なチャート
• CTP機能
 ラジアル,ポーラー
 日付軸
 注釈レイヤー
 アニメーショントランジション

円チャート
•XFPieChart
• 「その他」の表示
• 要素の選択
• 強調表示

ゲージ・ブレットグラフ
• XFLinearGauge/XFRadialGauge/XFBulletGraph
• ラジアル/リニア
• 針
• 範囲
• スケール
• アニメーション
トランジション

データグリッド – CTP
• XFDataGrid
• 列の自動生成
• 自動、固定サイズ列
• テンプレート列
• グループ化
• データアダプター
• テキスト列

バーコード - CTP
•XFBarcode128
•128 ASCII

アプリケーションサンプル
• Xamarin.Forms のサンプルは製品と共にインストールされる
• パブリックのドキュメント¥Infragistics¥2015.1¥Xamarin¥Apps
• もしくは HP からソースコードをダウンロード
http://jp.infragistics.com/sample-applications

24
Demo
 Xamarin.Forms を利用したアプリケーションサンプル

25
Infragistics Xamarin.Forms を利用した
モバイルアプリケーション開発
 コントロールサンプル
 ページへのコントロールの追加と設定

Visual Studio を利用して作成
• Visual C# -
Mobile Apps から
テンプレートを
選択

Xamarin.Forms の典型的なソリューション
•4 つのプロジェクト
• プラットフォーム共通部
• 共通 UI 部もこちらで構築
• Android
• iOS
• Windows Phone

28
Android プロジェクトのヒープ設定
• インフラジスティックスコントロール
を利用する場合はヒープサイズを
1G に設定
• [Advanced Options] – [Advanced]

ページへのコントロールの追加
• 全ての関連プロジェクトに個々のコントロールに対応した
アセンブリ参照を追加
• ローカル NuGet パッケージを利用することで簡易に参照を追加できる。

Visual Studio で NuGet パッケージを指定
• [ツール] – [オプション] – [NuGet パッケージマネージャー]

必要パッケージの読み込み

32
Demo
 アセンブリの参照と各種プロジェクト設定

名前空間の追加
• XAML で利用する場合、インフラジスティックス
コントロールの名前空間を宣言する必要がある
• 全てを宣言する必要はない
xmlns:igCodes="clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Barcodes"
xmlns:igCharts="clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Charts"
xmlns:igGauges="clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Gauges"
xmlns:igGrids="clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Grids"

XAML の設定
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
xmlns:local="clr-namespace:XFDemo1;assembly=XFDemo1“
xmlns:igCharts=“clr-namespace:Infragistics.XF.Controls;assembly=InfragisticsXF.Controls.Charts“
x:Class=“XFDemo1.Page1”>
<ContentPage.BindingContext>

<igCharts:AreaSeries ItemsSource="{Binding}“ ValueMemberPath="Value“
XAxis="{x:Reference xAxis}” YAxis="{x:Reference yAxis}">
</igCharts:AreaSeries>
</igCharts:XFDataChart.Series>
</igCharts:XFDataChart >
</ContentPage>

アセンブリの初期化
• 各プラットフォーム用のプロジェクトで利用しているアセンブリの
初期化を呼び出す必要がある
• こちらも利用しているコントロールのみ
Infragistics.XF.Initializers.Barcodes.Init();
Infragistics.XF.Initializers.Charts.Init();
Infragistics.XF.Initializers.Gauges.Init();
Infragistics.XF.Initializers.Grids.Init();

36
Demo
 Infragistics Xamarin.Forms の使用

ドキュメンテーション
• http://jp.infragistics.com/support/online-documentation
• 既存コントロール同様にチュートリアル、API 情報を記載
• ツリーを「展開」
日本語ドキュメントを準備中

38
Demo
 他プラットフォームとの類似性
Core
API
Xamarin
Forms
WPF
HTML5
iOS
Android
Windows
Universal
Windows
Phone

39
まとめ

Xamarin.Forms 対応コントロール
• 基本的な利用方法は Xamarin.Forms に準拠
• コード「共有」、「翻訳」コントロールを利用しているため、
「何」が提供されているかを把握しやすい
• 今後拡充予定

41
リソース

リソース
• 製品ページ
http://jp.infragistics.com/products/xamarin-forms
• サンプルページ
http://jp.infragistics.com/sample-applications
• ドキュメント
http://jp.infragistics.com/support/online-documentation
• Blog
http://blogs.jp.infragistics.com/tags/XAML/default.aspx

ぜひお試しください!
• http://jp.infragistics.com/xamarin-forms

インフラジスティックスおよび Xamarin.forms コントロールのご紹介

Recommandé

Recommandé

Contenu connexe

Plus de インフラジスティックス・ジャパン株式会社

Plus de インフラジスティックス・ジャパン株式会社 (20)

インフラジスティックスおよび Xamarin.forms コントロールのご紹介