ComponentOne Information

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

見て、触って! Let's play Wijmo♪

 5月23-24日に、日本マイクロソフト主催の『de:code』に出展しました。
イベント自体も大盛況でしたが、グレープシティブースにも、たくさんの方にご訪問いただきました(ありがとうございます!)

そんな中、弊社製品JavaScript UIライブラリ『Wijmo(ウィジモ)』について、
 
「よく耳にします!」
「いつも使ってます!」
「導入を提案してます!」
 
などの嬉しいお声をたくさん頂戴しました(ありがとうございます!!!)
 
しかし、一方でこんなお話も。
 
  「Wijmoを検討してトライアル版まで試したんですが、
    ちょっと難しくて…導入を諦めてしまいました。」
 
わかります。他のライブラリが登場したりJavaScriptに不慣れだったり、ハードルは高いですよね。Wijmoを紹介する場面でもそう思うことがありました。
ですが、実は最近、そういう方に持ってこいのイイモノができたんです!それは、Wijmoのサンプルコードを見て触れて学習できるコンテンツ「プレイWijmo」です!
 


「プレイWijmo」では、Wijmoコントロールの主な機能、基本的な使用方法、応用的な例などを、実装コードを確認して学習することができます。
「HTML」「JavaScript」「CSS」それぞれのコードを確認することができるうえ自由に編集してその実行結果を確認することも可能です。
WijmoはAngular、React、Vueなどのライブラリに対応していますが、この「プレイWijmo」では、ライブラリを用いずJavaScriptだけで使用する方法を紹介していますので、Wijmoの基本を学習できるコンテンツとなっています。
 
「Wijmoって難しそうだな…」と感じていた方や、これからJavaScriptでWebアプリ
を開発する予定のある方も、ぜひ一度アクセスしてみてください。
簡単にコードをいじれるので、目の前がぱっとひらけるかもしれません。
 

この記事はグレープシティが発行するメールマガジン「PowerNews」の第470号(2017/6/8発行)に掲載された記事を、加筆修正して転載したものです。  
≫グレープシティの最新情報を発信!メールマガジン「PowerNews」
製品の最新情報、プログラミングに役立つコラムのほか、プレゼント企画やセミナーのご案内など、日々の開発業務に役立つ情報をお送りしています。 
PowerNews - メールマガジン | GrapeCity Developer Tools 

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

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

Wijmo 5

Studio for WinForms

Studio for ASP.NET Web Forms

不具合登録情報(2017/5/15~5/19)

Studio for WinForms
Wijmo 5
Wijmo 3


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

Angularコンポーネントの継承:Wijmoの場合

この記事では、AngularアプリケーションでWijmo(ウィジモ)のコンポーネントを継承する方法を紹介します。

一般的に、Angularコンポーネントを継承するには、メタ情報のコードを基底(親)コンポーネントから丸ごとコピーする必要があります。これは、AngularコンポーネントはTypeScriptクラスとメタ情報(デコレーター)から構成されますが、TypeScriptクラスを継承してもメタ情報は継承されないためです。詳細についてはこちらの記事をご確認ください。

これはWijmoコンポーネントにも該当しますが、Wijmoではコンポーネントを継承する際に便利な機能を提供しています。

続きを読む

特定のセルのスタイルや内容をカスタマイズする(FlexGrid for ASP.NET MVC)

FlexGrid for ASP.NET MVC(以降、FlexGrid)では「特定のセルのスタイルや表示内容を~のように変更したい」というご要望が多く寄せられます。今回は、このようなセル単位でのカスタマイズを、FlexGridのItemFormatterプロパティを使用して実現する方法をご紹介します。

≫ ComponentOne Studioのダウンロードはこちら

ItemFormatterプロパティとは

FlexGrid のItemFormatterプロパティは、グリッドのセルをカスタマイズするための関数を設定する機能です。これを使用することにより、個々のセルに対して、その外観や動作を柔軟に変更できます。
ItemFormatterプロパティに設定する関数では、下記のように4つのパラメータが必要となります。

function 関数名(panel, r, c, cell) {
    ・・・
}

各パラメータは、それぞれ下記を表します。

panel グリッドの論理的な部分(列ヘッダ、行ヘッダ、スクロール可能なデータ部分など)
r セルの行インデックス
c セルの列インデックス
cell セルを表すHTML要素

設定方法

それでは実際にItemFormatterプロパティを使用して、特定のセルの外観や動作をカスタマイズしてみましょう。
ASP.NET MVCプロジェクトにて必要なモデルとコントローラーを追加後、ビューにFlexGridを設定し、モデルにバインドします。
次に、下記のようにFlexGridのItemFormatterプロパティを設定し、引数に任意の関数名を指定します。こちらの例では、関数名を”itemFormatter”としています。

@(Html.C1().FlexGrid<Sale>()
    .Id("fg")
    .Bind(Model)
    .ItemFormatter("itemFormatter")
)

次に、スクリプトでこの関数を実装します。引数には、前述した4つのパラメータを指定します。

<script type="text/javascript">
    function itemFormatter(panel, r, c, cell) {

    }
</script>

関数内に、カスタマイズの処理を実装します。
「r」パラメータと「c」パラメータを使用して行と列のインデックスを指定し、特定のセルを赤字で表示してみましょう。「cell」パラメータはセルを表すHTML要素ですので、JavaScriptのelement.style.colorを使用して文字色を変更できます。

<script type="text/javascript">
    function itemFormatter(panel, r, c, cell) {
        if (r == 1 && c == 2) {
            cell.style.color = "Red";
        }
    }
</script>

これを実行すると、次のような結果となります。

セルの前景色

また、「panel」パラメータからRowクラスのdataItemプロパティを使用すると、セルの値が特定の値である場合の処理を実装することができます。
下記の例では、「Product」列のセルの値が”Wijmo 5”である場合、セルの背景色を水色にするとともに、ハイパーリンクを設定しています。ハイパーリンクは、「cell」パラメータに対してJavaScriptのelement.innerHTMLを指定することで実装できます。

<script type="text/javascript">
    function itemFormatter(panel, r, c, cell) {
        if (panel.columns[c].binding === "Product") {
            if (panel.cellType === wijmo.grid.CellType.Cell) {
                var text = panel.rows[r].dataItem.Product;
                var link = "http://wijmo.c1.grapecity.com/products/wijmo-5/";
                if (text === "Wijmo 5") {
                    cell.style.backgroundColor = "LightBlue"
                    cell.innerHTML = "<a href='" + link + "' target='_blank' >" + text + "</a>";
                }
            }
        }
    }
</script>

上記を実行すると、次のような結果となります。

セルの背景色とハイパーリンク

以上のように、FlexGridのItemFormatterプロパティを使用すると、グリッドの個々のセルに対して、HTML要素に対する設定方法と同じ要領で様々なカスタマイズを加えることが可能となります。

※今回ご紹介した内容に関連するナレッジはこちら
[FlexGrid for ASP.NET MVC] 特定のセルの背景色を設定する方法
[FlexGrid for ASP.NET MVC] セルにリンクを設定する方法

技術記事「XuniのXamarin.Forms向けコントロールセットを使ってデータを可視化してみた」

開発者のための実装系Webマガジン「CodeZine」

CodeZine(コードジン) では、グレープシティの製品に関する記事を掲載しています。
現役エンジニアの方に、実際に製品を利用してサンプルアプリを作成する内容です。

弊社の製品担当は、機能には詳しいものの、製品を利用してアプリケーション開発をする立場ではないので、実用例を説明することが不得意です。
ユーザーだった経験を持って入社した社員も数多くいますが、利用する立場からは離れて久しくなります。

そのためCodeZineを通じて、プロフェッショナルの皆さんに製品を利用した評価記事を書いていただくようになりました。

f:id:ComponentOne_JP:20170606151557p:plain

Xuni(ズーニー)の技術記事を掲載

今回、掲載を開始した記事は、Xamarin.Formsで利用するXuniを対象としています。

続きを読む

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

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

Wijmo 5

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

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


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

ComponentOne