2017年10月20日
HTML5/JavaScript
イベント

住友電工情報システム様と共催セミナー開催決定

先日ニュースリリースの通り、ExcelライクなUIを実現する弊社のJavaScriptコントロール「SpreadJS(スプレッドJS)」は、住友電工情報システム様の開発ツール「楽々Framework3」にご採用いただき、製品のオプション機能に組み込まれています。

そのご縁もあり、この度、住友電工情報システム様と共催セミナーを開催させていただくことが決まりました。セミナーでは、カネ美食品様の事例を交えて、Excel業務を簡単にWeb化する方法、モバイルにも対応しメンテナンス性に優れたWebアプリケーションを開発する手法についてご紹介します。

以下、概要です。

「Excelでやっている業務を超高速開発でWebアプリケーションにしませんか」
~カネ美食品様 経理部門 決算業務電子化の事例を交えて~

イベント詳細、お申込みはこちら

会期 2017年11月1日(水)14:30~17:00 (受付開始 14:00)
共催 住友電工情報システム株式会社
会場 住友電工情報システム株式会社 東京支社
費用 無料(事前登録制)
定員 30名

「SpreadJS」を組み込み、ますますパワーアップした超高速開発ツール「楽々Framework」について、この機会に是非知っていただければ幸いです。ご参加、心よりお待ちしています!

2017年10月20日
WPF
技術情報

SPREAD for WPF 2.0J 新機能紹介(5)- 新しいイベント

WPFの開発で推奨されるMVVMパターンについて、SPREAD for WPF 2.0Jで対応が強化された点を以前の記事で紹介させていただきました。
ただ、実際のところ、MVVMパターンと、コードビハインドでUIイベントを実装したイベントドリブン型の実装との間で悩む開発者の方も少なくないのではないでしょうか。

MVVMのViewとViewModel間のやり取りに、バインディングやコマンドを用いてそれぞれの独立性を維持するよう試みるものの、時にはコードビハインドの簡潔な記述で実現する方法が有効に思える、そういうこともあるようです。開発における多くの課題と同じく、MVVMパターンもケースバイケースで、絶対的な適用方法は存在しないように感じています。

SPREAD for WPF 2.0Jでは、お客様からいただいた多くのご要望を取り入れましたが、UIイベントのリクエストも多くいただきました。2.0Jでは、以下のイベントが追加されています:

イベント 説明
Filteredイベント フィルタリングで発生する
CellValueChangingイベント セル値の変更直前に発生する
CellValueChangedイベント セル値の変更後に発生する

今日はこの中でも、CellValueChangingおよびCellValueChangedイベントをご紹介したいと思います。
~Changingと~Changedイベントの違いは、~Changingが変更直前に発生し、イベント引数のCancelプロパティで変更をキャンセルできる点です。

セル値の変更には、ユーザーがセルを編集する以外に、以下のような方法があります:

  • コーディングでセル値を変更する
  • ユーザーがセル範囲を選択し[Delete]キーで値をクリア、または[Ctrl]+[X]キーで値をカットする
  • クリップボードから値を貼り付ける
  • 数式が設定されたセルで計算結果が変更される

ユーザーがセルを編集した場合は、編集直前と編集後でCellEditEndingおよびCellEditEndedイベントが発生します。しかし、選択したセル範囲の値が[Delete]キーでクリアされた場合など、セルの編集以外で値が変更された場合、CellEdit~イベントは発生しません。そこで、セルの編集以外でも値が変更されたときに発生するイベントとして、CellValueChangingおよびCellValueChangedイベントが追加されました。

以下、CellValueChangingイベントのサンプルコードです。
このサンプルコードでは、セルの編集以外で値が変更された場合、変更をキャンセルします。

XAML
<sg:GcSpreadGrid x:Name="gcSpreadGrid1" CellValueChanging="gcSpreadGrid1_CellValueChanging"/>
Visual Basic
Private Sub gcSpreadGrid1_CellValueChanging(sender As Object, e As GrapeCity.Windows.SpreadGrid.CellValueChangingEventArgs)
    Dim row As Integer = e.Row, col As Integer = e.Column
    Console.WriteLine(String.Format("セル[{0},{1}]を変更します。", row, col))

    If Not gcSpreadGrid1(e.Row, e.Column).IsEditing Then
        Console.WriteLine(String.Format("「{0}」から「{1}」は編集による変更ではありません、値変更をキャンセルします。", e.OldValue, e.NewValue))
        '値変更をキャンセルします
        e.Cancel = True
    End If
End Sub
C#
private void gcSpreadGrid1_CellValueChanging(object sender, GrapeCity.Windows.SpreadGrid.CellValueChangingEventArgs e)
{
    int row = e.Row, col = e.Column;
    Console.WriteLine(string.Format("セル[{0},{1}]を変更します。", row, col));
            
    if(!gcSpreadGrid1[e.Row, e.Column].IsEditing)
    {
        Console.WriteLine(string.Format("「{0}」から「{1}」は編集による変更ではありません、値変更をキャンセルします。", e.OldValue, e.NewValue));
        //値変更をキャンセルします
        e.Cancel = true;
    }
}

CellValueChangingおよびCellValueChangedイベントについて、詳しくは製品ヘルプ「編集とイベント」もご参考いただければと思います。

2017年10月2日
WPF
技術情報

SPREAD for WPF 2.0J 新機能紹介(4)- より便利に – プロパティによるスタイル設定

前回は、「よりWPFらしく」なったセルのバインディングをご紹介しましたが、今回は「より便利に」なった、プロパティによるスタイル設定のご紹介です。

WPFの特徴の一つでもあるXAMLによるスタイルやテンプレートの編集は、大胆なUIのカスタマイズを実現する強力な機能です。一方、些細な外観の変更のはずが、気が付くと結構な分量のXAMLを記述することになったという経験はありませんか。
SPREADのようなUIコントロールの場合、アクティブセルの背景色など、製品の初期設定を変更したいケースは少なくありません。こうした「ちょっとした」変更に、XAMLによるスタイルやテンプレートの大掛かりな編集を要することは、WPF開発とはいえ億劫なものです。

こうした視点に立ち、新バージョンでは、お客様からご要望の多い項目について、プロパティで外観が変更できるようになりました。以下の設定が可能です。

アクティブセルの外観

アクティブセルに、初期設定と異なる文字色や背景色を設定したいというご要望を多くいただきます。

初期設定 アクティブセルの文字色と背景色を変更
 ozu170915_0  ozu170915_1

1.0Jでは、次のようにスタイルを編集することで実現できました。

<!--1.0Jでの設定方法-->
<sg:GcSpreadGrid>
    <sg:GcSpreadGrid.CellStyle>
        <Style TargetType="{x:Type sg:CellPresenter}">
            <Style.Triggers>
                <Trigger Property="IsActiveCell" Value="True">
                    <Setter Property="Foreground" Value="Blue"/>
                    <Setter Property="Background" Value="AliceBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </sg:GcSpreadGrid.CellStyle>
</sg:GcSpreadGrid>

一方、2.0Jでは、以下のプロパティが追加されました。

コントロールにフォーカスがある場合の設定:

コントロールにフォーカスが無い場合の設定:

2.0Jでは、上記1.0Jと同じことが、次の記述で実現できます。

<!--2.0Jでの設定方法-->
<sg:GcSpreadGrid ActiveCellForeground="Blue" ActiveCellBackground="AliceBlue"/>

プロパティを使用して、簡潔なXAMLの記述で設定できるようになりました。

ヘッダのマウスオーバー時の外観

ヘッダのマウスオーバー時の色を変更したい、というご要望も多くいただきます。
2.0Jで以下のプロパティが追加されました。

初期設定 マウスオーバー時の文字色と背景色を変更
 ozu170915_3_2  ozu170915_4_20

また、SPREADではアクティブセルのヘッダがハイライトされますが、2.0Jでは、このハイライトにマウスオーバーした時の色を変更するプロパティも追加されました。

初期設定 ハイライトにマウスオーバー時の背景色を変更
 ozu170915_3_1  ozu170915_4_1

これらのプロパティは、列ヘッダの設定を変更する場合は列ヘッダの、行ヘッダのハイライトを変更する場合は行ヘッダのスタイルに設定します。

以下、列ヘッダの設定を変更する例です。

<sg:GcSpreadGrid>
    <sg:GcSpreadGrid.ColumnHeaderStyle>
        <Style TargetType="sg:ColumnHeaderCellPresenter">
            <Setter Property="HighlightMouseOverBackground" Value="Navy"/>
            <Setter Property="MouseOverForeground" Value="WhiteSmoke"/>
            <Setter Property="MouseOverBackground" Value="SeaGreen"/>
        </Style>
    </sg:GcSpreadGrid.ColumnHeaderStyle>
</sg:GcSpreadGrid>

セル選択時の外観

最後にご紹介するのはセル選択時の外観です。セル範囲を選択すると、アクティブセルを除く選択範囲に半透明の背景色が設定されます。
この選択範囲の外観を、初期設定と異なるものに変更したいというご要望も多いです。

初期設定 選択範囲の文字色/背景色/罫線を変更(1.0Jから可能)
 ozu170915_5_0  ozu170915_5_11

1.0Jでは、選択範囲の文字色/背景色/罫線を変更するプロパティは提供されましたが、背景色の透け具合を変更する設定が提供されておらず、この点、お客様からご要望いただくことが少なくありませんでした。
2.0Jでは、不透明度を変更できる以下のプロパティが追加されました。

不透明度を設定(2.0J新機能)
初期値(0.1) 0に変更(つまり透明)
 ozu170915_5_0  ozu170915_5_10
0.5に変更 1.0に変更(つまり不透明)
 ozu170915_5_2  ozu170915_5_3

詳しくは、製品ヘルプ「選択範囲の外観」も併せてご参考いただければと思います。

機会があれば、ぜひご活用ください!

2017年9月27日
HTML5/JavaScript
製品リリース

新しいSpreadJSを発売!

本日9月27日より、新しくなったSpreadJSを発売します。
新しいSpreadJSは、Microsoft ExcelライクなUIを実現する「Spread.Sheets(スプレッド シート)」と、グリッド表示の枠を超え多彩なデータレイアウトを可能にする「Spread.Views(スプレッド ビュー)」の2つのUIコントロールを収録します。

製品デモや無償のトライアル版も本日公開しています。新機能を実際に触ってお試しください。

SpreadJSのオンラインデモはこちら
SpreadJSのトライアル版はこちら

2017年9月25日
HTML5/JavaScript
イベント

「GrapeCity Angular Day」を開催します!

企業でのJavaScriptによる開発が進むにつれ、一定の規模以上の開発におけるフレームワークの導入が課題となっています。この度、私どもでは、エンタープライズ領域で注目されるJavaScriptフレームワークの1つ「Angular」にスポットをあて、イベントを開催することになりました。

以下、概要です。

GrapeCity Angular Day

イベント詳細、お申込みはこちら

会期 2017年10月26日(木) 13:30~17:30(受付開始:13:00~)
主催 グレープシティ ツール事業部
協力 野村総合研究所、日本マイクロソフト、アシラス、Google
会場 秋葉原UDX
費用 無料(事前登録制)
定員 100名

業務システムのWeb化や、大規模開発におけるAngular事例にご興味をお持ちの皆さまにお勧めのイベントです。
ぜひご参加ご検討いただければと思います!

次のページ