ComponentOne Information

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

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

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

Studio for ASP.NET MVC

Wijmo 5

Studio for WinForms

Studio for Xamarin

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

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

AngularのカスタムPipeで和暦や年度を表示する

Angularでは、Pipeという機能を用いて、日付や数値などの値を見やすい書式に変換して表示することができます。

しかし、次のような複雑な書式はAngular標準のPipeでは表現できません。

  • 和暦(「平成」、「平」、「H」など)
  • 年度と四半期(2017/1/1→「2016年度 第4四半期」)
  • 百万単位の数値(1,234,567→「1.235(百万)」)

Wijmoを使用してカスタムPipeを作成すると、Angular Pipeの文法に従って、簡単に上記のような複雑な書式で値を表示することができるようになります。

f:id:ComponentOne_JP:20171025101538p:plain

続きを読む

今週末は仙台で、ITのお祭りに参加しませんか?

今週末10月28日(土)~29日(日)の2日間、グレープシティ本社のある宮城県仙台市で、日本最大級のテクニカルなお祭りが開催されます。

 

その名も"仙台IT文化祭"!

 

仙台のIT企業が企画の主体となり、全国のIT系著名人を仙台に集め、東北大学を会場にして行われます。

f:id:ComponentOne_JP:20171025143708p:plain

≫公式サイトはこちら≪

 

公式サイトを見ていただくとわかりますが、大人や学生はもちろん、子どもも楽しめる多種多様なプログラムが組まれています。

 

セッションの楽しみ方は公式動画で確認してみてください。

続きを読む

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

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

Studio for Xamarin

Studio for WinForms

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

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

ナレッジベース更新情報(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/30開催レポート公開】10月6日 に技術カンファレンス「ECHO Tokyo 2017」を開催しました

(2017/10/30追記)CodeZineで開催レポートが公開されました!

日本での開催は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追記)各セッション資料を公開しました!

続きを読む
ComponentOne