ComponentOne Information

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

ナレッジベース更新情報(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 + "/dist",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /wijmo\.culture/,
        use: [ 'script-loader' ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
    ]
  }
};

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

"scripts": {
  "build": "webpack && cp index.html dist/index.html"
},

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.359.tgz

CDNまたはWijmo製品版から下記の2つのファイルを取得して、プロジェクトに追加します。

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

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

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

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

import './wijmo/wijmo.min.css';
import './wijmo/wijmo.culture.ja.min.js';
import * as wijmoInput from 'wijmo/wijmo.input';

var inputDate = new wijmoInput.InputDate('#inputDate');

バンドルと実行

下記のコマンドを実行してwebpackのバンドル処理を実行すると、distフォルダにファイルが生成されます。

npm run build

dist/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にスポットを当てたイベントを開催します。ご興味のある方はぜひご参加ください。

エンタープライズシステム開発におけるAngularの有効性を探るイベントを初開催!

近年、JavaScriptでのアプリケーション開発は急速な進化を遂げ、新たなフレームワークやライブラリが次々と生み出されています。

Wijmoでは、これまでブログを通して、『エンタープライズWebシステムに適したフレームワークとは何か?』という議題の答えの1つとして、「それはAngularである」ということをお伝えしてきました。


また、過去には技術カンファレンス「GrapeCity ECHO」で、Angularをはじめとする最新のWeb技術情報や開発ノウハウについてご紹介してきました。


この取組みを通して、お客様からのWijmoのAngularサポートについてのお問い合わせが増加傾向にあります。Angularはスケーラビリティの視点からも大規模開発に適しているため、「企業全体としてAngularでの開発に取り組んでいきたい」というようなお話も耳にします。

今や大注目のAngular。
グレープシティでは、そんなAngularにスポットを当てたセミナーイベントを10月26日(木)に開催いたします!


GrapeCity Angular Day 開催!

f:id:ComponentOne_JP:20170926151134p:plain

日時 2017年10月26日(木)13:30~(13:00~受付開始)
会場 秋葉原UDX 4F Next-2
費用 無償(事前登録制)
定員 100名

≫≫お申込みはこちら≪≪


イベント当日は他のフレームワークとの比較を交えながら、導入工数、開発工数、保守性、関連周辺技術などを取り上げます。

野村総合研究所様の事例紹介をはじめ、Angular導入でのコンサルティングも手掛けるアシラスの佐川様のセッション日本マイクロソフトの井上様からはTypeScriptとVisual Studio Codeの基礎と活用法など、多彩なプログラムを用意しています。

お時間にご都合がつきましたら、ぜひ会場までお越しいただき、今後の開発にお役立てください!

“GrapeCity Angular Day”はこんな方にオススメです

  • エンタープライズシステム開発におけるWeb技術の知見を得たい
  • 大規模開発におけるAngular事例に興味がある
  • 業務アプリのWeb化を推進中
  • JavaScriptフレームワークの選定基準に迷っている
  • グレープシティのJavaScriptライブラリに興味がある

※ セッションプログラムの内容は、予告なく変更になる場合がございます。あらかじめご了承ください。

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

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

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

Wijmo 5

Studio for WinForms

不具合登録情報(2017/9/19~9/22)

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

他人が書いたコードへの依存率を高めて作成するUWPアプリ

2匹目のどじょう

ComponentOne Studio for Xamarin」のサンプルにWPFのコードを転用したことを紹介する記事がありました。

今回も、同じ趣旨で「SPREAD (スプレッド)」用に作成されたMVVMのサンプルコードを転用して、「ComponentOne Studio」のデータグリッドコンポーネント「FlexGrid for UWP」にデータを表示します。
転用元サンプルコードはこちらで公開している内容です。

結論から書きますと、2匹目のどじょうにも関わらず無事に表示されました。

f:id:ComponentOne_JP:20170921181721p:plain

以下にその手順を解説します。

続きを読む
ComponentOne