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

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

[NucliOS] バーコード表示アプリを作ってみる

先月 Xamarin の勉強会(すまべん特別編「Xamarin 2.0であそぼう!」@関東)に参加させていただきました。Xamarin開発におけるポイントや、MVVMフレームワークの活用事例などを聞くことができましたが、個人的には Xamarin Studio が予想以上にIDEとしての使い勝手がよさそうだった事と、思っていたよりも既に実業務で利用されていた事が印象に残りました。

さて、弊社 Infragistics でも iOS 向けの NucliOS というコントロールを出しており、これがなんと Xamarin 対応しております。そこで今回は、Xamarin Studio 上で NucliOSコントロールをどのように利用するのか簡単なサンプルを交えてご紹介します。また、Xamrin.iOSの基本的な開発方法についても少し書いているので、Xamarin や iOS 開発に興味のある方は是非チェックしてください。

igBarcodeView を使う

今回は、先日リリースされた NucliOS Volume2014.1 の新コントロール igBarcodeView を使って、入力した文字列をバーコード表示する簡単なサンプルアプリを作成します。※Xamarin Studio for Macを利用しています。

NucliOSの30日間無償トライアル:
http://jp.infragistics.com/products/NUCLiOS.aspx#Overview

igBarcodeView オンラインヘルプ:

https://jp.infragistics.com/help/ios/igbarcodeview

それでは早速 Xamarin Studio for Mac を使ってサンプルを作成していきます。今回は、 iPhone の Single View Application でサンプルを作成します。

image

参照の追加

プロジェクトが作成できたら、コントロールを追加する前に igBarcodeView に必要な Infragistics アセンブリの参照設定を行う必要があります。
XCodeで NucriOS を利用するときは、”IG.framework” か “IGChart.framework” のフレームワークを追加する必要がありますが、Xamarinでは “IG.dll” か “IGChart.dll” のDLLファイルを参照に追加する必要があります。
今回使うの igBarcodeView コントロールはチャートではないため “IG.dll” のみを参照追加します。

image
参照の追加

image 
IG.dll の追加

image
“全て”タブに表示されていない場合

これで、Infragistics クラスを利用できるようになりました。実際にコードを記述する ViewController ファイルに名前空間をインポートしておきます。

image

 

 

コントロールの追加

標準コントロールであれば、XCodeのインタフェースビルダー等利用することでデザイナ上でコントロールの配置を行うことができますが、NucliOSではコード上でコントロールの配置を動的に行う必要があります。

こちら に従い以下コードを ViewDidLoad の中に埋め込みます。
igBarcodeView コントロールをサイズ指定しつつインスタンス化し、バーコードとして表示する文字を設定した後に、Viewに追加しています。

this.View.BackgroundColor = UIColor.White;
RectangleF barcodeRect = new RectangleF(0, 0, 300, 200);
IGBarcodeView barcode = IGBarcodeView.CreateBarcodeFrame(IGBarcodeType.IGBarcodeTypeCode128, barcodeRect);
barcode.AutoresizingMask = UIViewAutoresizing.FlexibleWidth|UIViewAutoresizing.FlexibleHeight|
                                      UIViewAutoresizing.FlexibleLeftMargin|UIViewAutoresizing.FlexibleBottomMargin|
                                      UIViewAutoresizing.FlexibleRightMargin|UIViewAutoresizing.FlexibleTopMargin;
barcode.SetValue ("Getting Started");
barcode.Center = this.View.Center;
this.View.Add (barcode);

 

image

この時点で一度実行してみます。

image

しっかりバーコードが表示されました!

iOSネイティブコントロールとの連携

続いては、ここにテキストボックスとボタンを追加し、ボタンを押した時にテキストボックスに入力されている値をバーコードとして表示させるように変更してみます。ここからは弊社コントロール云々というより Xamarin の基本的な扱い方になります。

まずはテキストボックスとボタンを配置します。(Xamarin 4.3.4以降で iOS Designer が追加されていますが、ここではXCodeの InterfaceBuilder というデザイナを使用しています。iOS Desinerの有効化方法は こちら で紹介されています。)
Xamarin上でxibファイルをダブルクリックするとXCodeのデザイナが立ち上がるので、そこで Button と TextField コントロールを追加します。

 image
***ViewController.xibをダブルクリック

image 
XCodeの InterfaceBuilder 上でコントロールを追加

image 
ボタンの表示を変更

コントロールを配置したら、ヘッダファイル(*.h)との紐づけを行います。

image Ctrlキーを押しながらヘッダファイルへ紐づけ

 

image 
テキスト は Outlet を選択し code と名前を付ける

image 
ボタンは Action を選択し、showBarcode と名前を付ける

このあたりの手順は、XCodeでの開発手法と同じですがコードビハインド側で配置したコントロールにアクセスしたり(outlet)、イベントをハンドルしたり(Action)するためのものです。

ここでXamarinに戻ってデザイナファイル(*.designer.cs)を確認してみると、先ほど追加した outlet と Action が自動的に反映されています。

image

この時点で一度 Xamarin 側で実行して表示を確認してみます。

image

デザイナ上で追加したテキストとボタンがしっかり表示されていますね。
ここに、ボタンが押された時にテキストの値をバーコードに表示する処理を加えます。

image 
igBarcodeSampleViewController.designer.cs

image
igBarcodeSampleViewController.cs

igBarcodeView の定義をデザイナファイルへ移動し、追加した Action(showBarcode) の中でTextFieldの値を igBarcodeView に設定しています。

実行してみます。

image     image

左がテキスト入力後、右がボタン押下後です。確かにバーコードが変わったように見えますがキーボードが邪魔でよくわかりません。ボタンを押した時にキーボードを閉じるように処理を加えましょう。
Objective-c では”[self.textView resignFirstResponder]”でキーボードをしまう事ができますが、これをC#で書いてみると、、、

image

ありました。これで再度実行してみます。

image     image

できました!このあたりは Objective-C と同じ要領でできるようです。

今回はXamarin Studio for Mac と XCode の InterfaceBuilder を使ってサンプルを作成しましたが、デザイン部分とコード部分の連携はスムーズに開発できるという印象でした。現時点では、Visual Studio のアドイン(Xamarin for Visual Studio)の方で開発を進めると少し勝手は違うようですが、今後 iOS 向けのデザイナが搭載されてVS上で画面デザインが行えるようになるそうで、今後に期待が持てます!

NucliOS はここで紹介したバーコードコントロール以外にも、チャートやゲージ、グリッドなどニーズの多いコントロールが用意されています。iOSのネイティブアプリ開発をされている方、興味のある方は是非一度トライしていただければと思います。

NucliOS チャート:

https://jp.infragistics.com/products/ios/charts

NucliOS グリッド:

https://jp.infragistics.com/products/ios/grids-and-lists

その他の弊社製品でも機能制限なしのトライアル版もご用意しています。ダウンロードはこちらから。

jp.infragistics.com