アプリケーションの作成
では、さっそくアプリケーションを作成していきます。このアプリケーションでは、テキストとWebサイトのURLを入力してQRコードを持った簡単なチラシを作成します。フォームにはC1QRCode、C1Splitter、TextBox、Labelコントロールを配置します。
Webページの作成
最初に、C1SplitterコントロールとTextBox、Labelコントロールを作成します。
(1)ASP.NET Webアプリケーション用のプロジェクトを用意します。
(2)Site.Masterページでページ全体の設定を行います。
(3)Default.aspxページに戻り、ツールボックスからC1Splitterコントロールをページにドラッグ&ドロップします。自動的に2つのペインを持ったC1Splitterコントロールが作成されます。
(4)C1Splitterコントロールの次のプロパティを設定します。
プロパティ | 設定値 |
---|---|
Height | 300px |
SplitterDistance | 500 |
Width | 900px |
Height、WidthはC1Splitterコントロールのサイズを、SplitterDistanceはスライダーの位置を設定するプロパティです。
(5)C1Splitterコントロールのテーマを設定し配色を施します。
C1Splitterコントロールのスマートタグから「新しいテーマの作成」をクリックします。
(6)新しいテーマの一覧が表示されるので、ここから「Start」を選び「次へ」ボタンをクリックします。
(7)ThemeRollerが表示されるので、「プロジェクトに追加」ボタンをクリックします。
(8)テーマがC1Splitterコントロールに適用されます。しかし、ペインの背景色が少し薄いですね。これをカスタマイズします。もう一度C1Splitterコントロールのスマートタグを表示し、今度は「テーマのカスタマイズ」をクリックします。
(9)再びThemeRollerが表示されるので、「コンテンツ」をクリックして展開し、背景色のボタンをクリックして薄い黄緑色(#9dfb9b)を選びます。このThemeRollerでは、かなり細かい配色の設定が行えます。
(10)もう一度「プロジェクトに追加」ボタンをクリックします。上書き保存もメッセージが表示されるので、「はい」をクリックします。ThemeRollerを閉じてデザイン画面に戻ると、ペインの背景色が変更されています。
(11)あとはLabelコントロールとTextBoxコントロール、Buttonコントロールをそれぞれのペインに配置していきます。
(12)あとはC1QRCodeコントロールを左ペインに配置します。C1QRCodeコントロールは特に設定せず、すべてデフォルトのまま使用します。
ビハインドコードの作成
入力したURLをQRコード化する処理を作成します。これは、ButtonコントロールのClickイベントハンドラで行います。
これらは、TextBoxコントロールに入力された内容をLabelコントロールとC1QRCodeコントロールのTextプロパティに代入するだけです。C1QRCodeコントロールは、VisibleプロパティをTrueに設定すると、コントロールにQRコードを表示します。
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click C1QRCode1.Text = TextBox3.Text Label1.Text = TextBox1.Text Label2.Text = TextBox2.Text Label3.Text = TextBox3.Text End Sub
protected void Button1_Click(object sender, EventArgs e) { C1QRCode1.Text = TextBox3.Text; Label1.Text = TextBox1.Text; Label2.Text = TextBox2.Text; Label3.Text = TextBox3.Text; }
コードを入力したら実際に実行し、QRコードが作成できることを確認します。
まとめ
今回はとても簡単なアプリケーションで使いましたが、QRコードは、さまざまな用途に使えるとても便利なバーコードです。また、C1SplitterコントロールはWebページを有効に使える便利なコントロールです。1ページに多くの情報を整理して格納したい時などに威力を発揮するコントロールだと思います。