ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

ナレッジベース更新情報(2017/10/10~10/13)

以下の9文書を追加・更新しました。

不具合登録情報(2017/10/10~10/13)

Studio for WinForms
Studio for ASP.NET MVC
Studio for ASP.NET Web Forms
Wijmo 5



ComponentOne製品のナレッジベースは随時更新中です。
≫ ナレッジベースはこちら

Xamarin.FormsでFlexGridの条件付き書式を設定する

前回に引き続き「条件付き書式」をテーマにお届けします。今回はComponentOne Studio for Xamarin(以下、C1 Xamarin)のFlexGridで条件付き書式を設定する方法について説明します。

WPFやUWPと同じくXamarin.FormsもXAMLでUIを実装しているので。条件付き書式を利用するには同じくバインディング(Binding)とコンバーター(Converter)を使って設定することが一般的になります。これは個人的に「なかなか面倒くさいなぁ...(´Д`)」と思っているのですが、C1 XamarinのFlexGridではGridCellFactoryを利用してコードビハインドだけで簡潔に条件付き書式を設定することができます。(もちろん前述のバインディングとコンバーターも使えます。)

今回は表示するデータとして簡易的に弊社がある仙台市の2017年6月~8月の最高気温と最低気温をCSV形式で準備しました。こちらをFlexGridで表示します。

f:id:ComponentOne_JP:20171011103043p:plain

設定する書式の条件としては、最高気温を夏日(25度以上)、真夏日(30度以上)、猛暑日(35度以上)でフォントの色とスタイルを変更するようにします。更に最低気温も熱帯夜(25度以上)でフォントの色とスタイルを変更するようにします。

f:id:ComponentOne_JP:20171010172032p:plainf:id:ComponentOne_JP:20171010172131p:plainf:id:ComponentOne_JP:20171010172311p:plain

コードビハインドで条件付き書式を設定するには、GridCellFactoryを拡張する独自のクラスを定義します。次に、クラスのインスタンスをFlexGrid.CellFactoryに割り当てます。

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        
        grid.ItemsSource = TemperatureModel.GetTemperatureList();
        grid.IsReadOnly = true;

        // 列のヘッダーを指定
        grid.Columns[0].Header = "年月日";
        grid.Columns[1].Header = "最高気温(℃)";
        grid.Columns[2].Header = "最低気温(℃)";

        grid.CellFactory = new CustomCellFactory();

    }
}

class CustomCellFactory : GridCellFactory
{
    public override void BindCellContent(GridCellType cellType, GridCellRange range, View cellContent)
    {
        base.BindCellContent(cellType, range, cellContent);

        if (cellType == GridCellType.Cell && range.Column == 1)
        {
            var cellValue = Grid[range.Row, range.Column] as float?;
            if (cellValue.HasValue)
            {
                Label lbl = cellContent as Label;
                    
                //夏日
                if (cellValue >= 25.0) { 
                    lbl.TextColor = Color.Orange;
                }

                //真夏日
                if (cellValue >= 30.0) { 
                    lbl.TextColor = Color.OrangeRed;
                    lbl.FontAttributes = FontAttributes.Bold;
                }

                //猛暑日
                if (cellValue >= 35.0) { 
                    lbl.TextColor = Color.Red;
                    lbl.FontAttributes = FontAttributes.Bold;
                }
            }
        }

        if (cellType == GridCellType.Cell && range.Column == 2)
        {
            var cellValue = Grid[range.Row, range.Column] as float?;
            if (cellValue.HasValue)
            {
                Label lbl = cellContent as Label;

                //熱帯夜
                if (cellValue >= 25.0)
                {
                    lbl.TextColor = Color.DeepPink;
                    lbl.FontAttributes = FontAttributes.Bold;
                }
            }
        }
    }
}

上記のコードでは、GridCellFactoryを拡張したCustomCellFactoryBindCellContentをオーバーライドしています。2列目に表示する最高気温と3列目に表示する最低気温のテキストの色TextColorとスタイルFontAttributesを設定しています。

XAMLでバインディングを使う場合は?

このGridCellFactoryを使うメリットは、すべての条件付き書式の設定をコードビハインドで実装できることかと思います。バインディングとコンバーターを使う場合は、XAMLでCellTemplateを使ってデータテンプレートを設定し、そこで各プロパティに対してバインディングを実装し、コンバーターもプロパティごとにそれぞれ用意しなければなりません。

今回説明したGridCellFactoryを使用したサンプルと、比較用にバインディングとコンバーターを使用したサンプルも用意しました。是非比べてみてください。


作成したサンプルはこちらで公開しています。C1 Xamarinのライセンスも含まれていますので、NuGetパッケージを復元すれば実行可能です *1

ダウンロード(zipファイル:516KB)


*1:NuGetパッケージを利用するには、GrapeCityのNuGetフィードソース( http://nuget.c1.grapecity.com/nuget/ )を、Visual Studioの環境に追加する必要があります。

【10/18セッション資料公開】10月6日 に技術カンファレンス「ECHO Tokyo 2017」を開催しました

日本での開催は3回目となる技術カンファレンス「ECHO Tokyo」

2017年10月6日に、日本マイクロソフト様のセミナールームをお借りして無事開催しました。 当日のプログラムをXAML風に表すとこのような感じです。

<ECHO>
    <ECHO.Program>
        <session order="1" >
            <Theme>XAML Keynote</Theme>
            <Content speaker = "高橋 忍さま" 
                     title   = "XAML&Application Platform ~これまでとこれから~" />
        </session>
        <session order="2" >
            <Theme>Changing BizApps</Theme>
            <Content speaker = "秋葉 卓也さま" 
                     title   = "XAMLで業務アプリがこんなに変わる!WPFやUWPのエンタープライズ事例" />
        </session>
        <session order="3" >
            <Theme>Add value to legacy Apps</Theme>
            <Content speaker = "須藤 隆一郎さま" 
                     title   = "Migration to WPF" />
        </session>
        <session order="4" >
            <Theme>New style devs</Theme>
            <Content speaker = "伊藤 伸裕さま、太田川 洋さま" 
                     title   = "「クロスプラットフォーム開発×XAML」というパワーワードを真剣に考える" />
        </session>
    </ECHO.Program>
</ECHO>

満員の会場でXAMLを共通基盤にした各セッションが展開されました。当日の様子がTwitterに投稿されています。

(2017/10/18追記)各セッション資料を公開しました!

続きを読む

ナレッジベース更新情報(2017/10/2~10/6)

以下の3文書を追加・更新しました。

不具合登録情報(2017/10/2~10/6)

Wijmo 5
Studio for WinForms



ComponentOne製品のナレッジベースは随時更新中です。
≫ ナレッジベースはこちら

WPFアプリの「条件付き書式」をBindingでより簡潔に実現する

業務アプリケーションにおいて、とくにグリッドによるデータの表示・編集処理にて、「入力値がマイナスのときは赤色で表示したい」「ある一定量を超えるデータを太字で目立たせたい」といったように、ある特定の条件によってデータの表示書式を変えたいという要件は珍しくありません。

C1FlexGridコントロールを例に挙げると、WinForms版では、オーナー描画機能を使用して実現する必要がありました。これは、コントロールによる既定の描画処理の代わりに、OwnerDrawCellイベントを介して独自の描画処理を実行することによってセルの内容をレンダリングする機能で、描画内容をかなり自由にカスタマイズできる半面、描画位置の調整や既定のテーマ配色との統合などを考慮しなければならず、高度なコーディングが要求されるため、決して簡単に実装できるとは言えませんでした。

また一般的に、WPFプラットフォームにおいて条件付き書式を実現するにあたっては、IValueConverterを継承したカスタムコンバーターを作成し、Bindingと併用することで実装することが多いかと思います。WPF版のC1FlexGridコントロールでも、同様の実装方法にてセルに対する条件付き書式を実現することができます。製品に付属する「ConditionalFormatting」サンプルにて、条件付き書式の実装例を示しておりますので、詳しくはご参照ください。

WinForms版の頃に比べれば、これでも十分簡単に実装できるようになりましたが、カスタムコンバーターを定義しなければならないなど、まだ一手間かかる印象があります。カスタムコンバーターを別途用意することなく、バインディングの定義のみで実現できるような、もっと簡単な実装方法はないでしょうか?

続きを読む

ナレッジベース更新情報(2017/9/25~9/29)

以下の17文書を追加・更新しました。

Studio for ASP.NET MVC

Studio for WinForms

不具合登録情報(2017/9/25~9/29)

Wijmo 5
Studio for WPF
Studio for WinForms
Studio for ASP.NET Web Forms
Studio for ASP.NET MVC

Wijmoクイックスタート − webpackでモジュールをバンドルする

JavaScriptアプリケーションにおいて、モジュールは非常に重要な要素です。一連の機能をモジュールとして分離することで、保守性の向上、名前空間や変数名の競合防止、機能の再利用、依存関係の管理などのメリットがあります。

また、webpackはモジュールバンドラと呼ばれるツール/ライブラリで、複数のモジュールを1つのファイルにバンドル(結合)して、リクエスト数を減らすことによりWebアプリの読み込み速度を向上させることができます。

webpack.js.org

ここでは、webpackを使用してWijmoモジュールをバンドルする方法を紹介します。

プロジェクトの作成

コマンドプロンプト/ターミナルでプロジェクトのフォルダを作成して、フォルダに移動します。

mkdir sample
cd sample

npm initコマンドを実行して、package.jsonファイルを作成します。

npm init

webpackのインストールと設定

webpackをインストールします。また、Wijmoではモジュールの他にcss/jsファイルをバンドルする必要があるため、他に3つのローダーパッケージもインストールします。

npm install --save-dev webpack style-loader css-loader script-loader

webpackの設定ファイル(webpack.config.js)を作成して、下記のコードを追加します。

module.exports = {
  entry: "./app.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.exec\.js$/,
        use: [ 'script-loader' ]
      }
    ]
  }
};

package.jsonファイルに、webpackのバンドル処理を実行するための設定を追加します。

  "scripts": {
    "build": "webpack"
  },

Wijmoのインストール

Wijmoパッケージをプロジェクトにインストールします。Wijmo製品版を使用する場合は、製品版のNpmImagesフォルダを参照します。

# 製品版の場合
npm install --save xxx/NpmImages/wijmo-amd-min/

# トライアル版の場合
npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20172.334.tgz

wijmoフォルダを作成して、下記の2つのファイルを製品版またはトライアル版からコピーします。

  • wijmo.min.css
  • wijmo.culture.ja.min.js

アプリケーション処理の実装

index.htmlファイルを作成して、Wijmoコントロールを表示するためのdiv要素と、webpackバンドルファイルの参照を追加します。

<body>
  <div id="inputDate"></div>
  <script src="bundle.js"></script>
</body>

app.jsファイルを作成して、下記のコードを追加します。

// CSSを読み込みます。
import './wijmo/wijmo.min.css';
// 日本語カルチャーを読み込みます。
import 'script-loader!./wijmo/wijmo.culture.ja.min.js';
// wijmo.inputモジュールを読み込みます。
import * as wijmoInput from 'wijmo/wijmo.input';

// InputDateコントロールを作成します。
var inputDate = new wijmoInput.InputDate('#inputDate');

バンドルと実行

下記のコマンドを実行して、webpackのバンドル処理を実行します。

npm run build

index.htmlファイルを開くと、Wijmoコントロールを表示できることと、ファイルがindex.htmlbundle.jsの2つだけ読み込まれていることが確認できます。

f:id:ComponentOne_JP:20170928115104p:plain

まとめ

webpackでバンドルしたファイルは、webpackを使用せず個別にモジュールファイルを読み込む場合と比べて、読み込む合計データサイズはほぼ同じです。しかし、この例では読み込むファイル数は5から2に減少するため、リクエスト数の削減により読み込み速度を向上させることができます。

webpackはAngularやReactなどのライブラリで広く利用されており、Webフロントエンド開発において必須のツールになりつつあります。Wijmoモジュールのバンドル処理は非常に簡単に行うことができますので、ぜひwebpackと一緒にWijmoをご利用ください。

GrapeCity Angular Dayを開催

10月26日にAngularにスポットを当てたイベントを開催します。ご興味のある方はぜひご参加ください。

ComponentOne