データセットの内容を簡単に表示する
SPREAD for .NETは多機能であると同時に、簡単に使えるモードも完備しています。例えば、DataSetの内容を一覧表示するのであれば、サンプルソースの「CZ0910FollowerType1」（リスト1）のようなコードだけで、【図3】の実行結果が得られます。
Partial Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not Me.IsPostBack Then FpSpread1.ActiveSheetView.OperationMode = _ FarPoint.Web.Spread.OperationMode.ReadOnly Me.FpSpread1.Width = Unit.Percentage(90) End If End Sub Protected Sub Get_Command_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Get_Command.Click Call SetData(Me.UserID_TextBox.Text, Me.Password_TextBox.Text) End Sub Private Sub SetData(ByVal userID As String, ByVal password As String) Using _proc As New Twitter Me.FpSpread1.ActiveSheetView.DataSource = _proc.GetFollowers(userID, password) End Using End Sub End Class
- LoadイベントでPostback以外のときにOperationModeをReadOnlyにし、読み取り専用にして、Widthを90％に設定する
- ［Get］ボタンをクリックしたらDataTableを取得してDataSourceに設定し、その内容を表示する
このサンプルソースのDataSetの内容は、前回のSPREAD for .NET Windows Forms Ed.のサンプルと同様、コミュニケーションサービス「Twitter」上で、自分の発言を購読してくれている人の一覧になっています。
表示内容を修飾する
「CZ0910FollowerType1」は、必要最小限のプロパティ設定とコード記述でSPREADを使うことを第一目的としているため、見た目の美しさは考慮していません。また、byte配列に格納している画像ファイルも表示されていません。
サンプルソースに同梱してある「CZ0910FollowerType2」では、画面の修飾と画像ファイルの表示に対応したいと思います。
「CZ0910FollowerType2」では、ページのLoadイベントとOnPreRenderメソッドの2カ所で修飾を行っています。大半の処理はLoadイベントに記載していますが、OnPreRenderメソッドでは数式の設定と画像表示を行っています。
Loadイベントでの処理
Loadイベントでは、次の処理を行っています。
- スキンを適用
- スタイル設定用CSSを自動生成
- 文字の折り返しを禁止
- 列数設定
- 数式指定モードの指定
- シート全体の調整
- 列ヘッダの連結
- 高さや幅変更の抑止
- 各列の定義
スキンを適用
SPREAD for .NETには、罫線や色調を組み合わせた「スキン」と呼ばれるテンプレート機能があります。独自にスキンを作成して指定する事もできますが、標準で定義されているデフォルトスキンにも使いやすいものが揃っています。
Me.FpSpread1.ActiveSheetView.ActiveSkin = FarPoint.Web.Spread.DefaultSkins.Colorful4
スタイル設定用CSSを自動生成
BackColor、ForeColor、FontなどのスタイルをHTML化（レンダリング）するときに、CSSを自動生成して使うように指定すると、同じスタイルをCSS定義にまとめることができるためページサイズが小さくなりページロード時間が短くなります。
Me.FpSpread1.RenderCSSClass = True
文字の折り返しを禁止
テキスト型セルでは、セル内での文字折り返しを禁止するように設定します。そのための指定は、列やセルに直接行うのではなく、テキスト型セルのオブジェクトを生成し、AllowWrapプロパティにFalseを設定してからセルや列に割り当てます。
Dim textCellType As New FarPoint.Web.Spread.TextCellType ： textCellType.AllowWrap = False ： Me.FpSpread1.ActiveSheetView.Columns(3).CellType = textCellType
列数の設定
シート全体の調整などを行った場合、不要な列があると処理量が多くなるため、なるべく早いタイミングで列数を設定します。
Me.FpSpread1.ActiveSheetView.Columns.Count = 9
数式指定モードを指定
セルに数式を埋め込む場合、他のセルを値として指定する書式には「A1形式」と「R1C1形式」の2つがあります。R1C1形式の方が、列や行の位置を絶対位置でも相対位置でも指定しやすいので、サンプルではR1C1形式を指定しています。
Me.FpSpread1.ActiveSheetView.ReferenceStyle = FarPoint.Web.Spread.Model.ReferenceStyle.R1C1
シート全体の調整
サンプル「CZ0910FollowerType1」ではDataSetの内容に応じてセル型や列幅が自動的に決まりましたが、明示的に修飾を行うときにはこの自動機能をオフにしないと、設定した内容が実行時に有効になりません。
Me.FpSpread1.ActiveSheetView.DataAutoCellTypes = False Me.FpSpread1.ActiveSheetView.AutoGenerateColumns = False Me.FpSpread1.ActiveSheetView.DefaultStyle.VerticalAlign = VerticalAlign.Middle Me.FpSpread1.ActiveSheetView.AllowUserFormulas = False
- DataAutoCellTypesプロパティをFalseにして、セル型自動設定を無効化
- AutoGenerateColumnsプロパティをFalseにして、DataSetの列から自動的に列を生成しないように設定
- VerticalAlignプロパティをMiddleにして、セル高の真ん中に配置
- AllowUserFormulasプロパティをFalseにして、実行時に画面から数式の入力ができないように設定
列ヘッダの連結
サンプル「CZ0909FollowerType2」では、左から2つ目の列ヘッダ（列指定は「0」から始まるので指定値は「1」）から3列を1つのヘッダに連結するデザインになっています。
列ヘッダの連結には、AddColumnHeaderSpanCellメソッドを使用します。
Me.FpSpread1.ActiveSheetView.ColumnHeaderSpanModel.Add(0, 1, 1, 3)
高さや幅変更の抑止
Webアプリケーションにおいて、行の高さや列の幅を利用者が好みに応じて変更できるようにすることは難しい場合もありますが、SPREADではデフォルトで高さや幅の変更が可能な状態になっています。しかし、業務アプリケーションでは固定化して設計時の状態から変更しないことで、使い勝手の相違が生じないようにする場合があります。そのような場合は、ResizableプロパティをFalseにするとよいでしょう。
Me.FpSpread1.ActiveSheetView.RowHeader.Rows.Default.Resizable = False Me.FpSpread1.ActiveSheetView.ColumnHeader.Columns.Default.Resizable = False
各列の定義
ここまで設定できたら、後は各列を順次定義していくだけになります。
'ID列は非表示にする Me.FpSpread1.ActiveSheetView.Columns(0).DataField = "ID" Me.FpSpread1.ActiveSheetView.Columns(0).Visible = False 'アイコン列の設定を行う Me.FpSpread1.ActiveSheetView.ColumnHeader.Cells(0, 1).Text = "ユーザ名" Me.FpSpread1.ActiveSheetView.Columns(1).CellType = imageCellType '名前列の設定を行う Me.FpSpread1.ActiveSheetView.Columns(2).DataField = "Name" Me.FpSpread1.ActiveSheetView.Columns(2).CellType = textCellType Me.FpSpread1.ActiveSheetView.Columns(2).Locked = True 'ID名列の設定を行う Me.FpSpread1.ActiveSheetView.Columns(3).DataField = "ScreenName" Me.FpSpread1.ActiveSheetView.Columns(3).CellType = textCellType Me.FpSpread1.ActiveSheetView.Columns(3).Locked = True 'プロテクション列は非表示にする Me.FpSpread1.ActiveSheetView.Columns(4).DataField = "IsProtected" Me.FpSpread1.ActiveSheetView.Columns(4).Visible = False 'プロテクションだったら○表示する列に計算式を設定する Me.FpSpread1.ActiveSheetView.ColumnHeader.Cells(0, 5).Text = "プロテクト" Me.FpSpread1.ActiveSheetView.Columns(5).CellType = textCellType Me.FpSpread1.ActiveSheetView.Columns(5).Locked = True Me.FpSpread1.ActiveSheetView.Columns(5).HorizontalAlign = HorizontalAlign.Center Me.FpSpread1.ActiveSheetView.Columns(5).Formula = "IF(RC5=""True"",""○"","""")" 'フォロー列は非表示にする Me.FpSpread1.ActiveSheetView.Columns(6).DataField = "IsFollowing" Me.FpSpread1.ActiveSheetView.Columns(6).Visible = False 'フォローしてたら○表示する列に計算式を設定する Me.FpSpread1.ActiveSheetView.ColumnHeader.Cells(0, 7).Text = "フォロー済" Me.FpSpread1.ActiveSheetView.Columns(7).CellType = textCellType Me.FpSpread1.ActiveSheetView.Columns(7).Locked = True Me.FpSpread1.ActiveSheetView.Columns(7).HorizontalAlign = HorizontalAlign.Center Me.FpSpread1.ActiveSheetView.Columns(7).Formula = "IF(RC[-1]=""True"",""○"","""")" '最新の発言列の設定を行う Me.FpSpread1.ActiveSheetView.Columns(8).DataField = "StatusText" Me.FpSpread1.ActiveSheetView.ColumnHeader.Cells(0, 8).Text = "最新の発言" Me.FpSpread1.ActiveSheetView.Columns(8).CellType = textCellType Me.FpSpread1.ActiveSheetView.Columns(8).Locked = True
- データを特定するためのID列は、ユーザーインターフェイスとしては不要なので、VisibleプロパティにFalseを指定
- DataSetのIsProtected項目はそのまま表示しないので、VisibleプロパティにFalseを指定
- （3）の列を参照して、内容がTrueの時には「○」を表示するようにFomulaプロパティに指定。Fomulaプロパティに記述されている「RC5」指定は、同一行の5カラム目（指定値は「0」から始まるのでColumns.Get（4）列のこと）を表しています
- IsFollowing項目の内容がTrueの時には「○」を表示するようにFomulaプロパティを設定では、今までと異なる指定方法「RC[-1]」を採用。これは該当列の1つ前の列を表しています
OnPreRenderメソッドでの処理
OnPreRenderメソッドは、イベントの処理がすべて終わってから呼び出されるサブプロシージャで、ここに図形の描画を設定することで、一覧作成後に常に画像処理が行えます。
Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs) '数式の再計算を行います。 Me.FpSpread1.ActiveSheetView.Recalculate() '画像を表示します Call SetImage() MyBase.OnPreRender(e) End Sub Private Sub SetImage() Dim ds As DataSet = CType(Me.FpSpread1.ActiveSheetView.DataSource, DataSet) With Me.FpSpread1.ActiveSheetView If ds IsNot Nothing Then For rowIndex As Integer = .TopRow To .TopRow + .PageSize - 1 If rowIndex > .RowCount - 1 Then Exit For End If .Cells(rowIndex, 1).CellType = CreateImageFile(ds.Tables(0).Rows(rowIndex)) Next End If End With End Sub Private Function CreateImageFile(ByVal row As DataRow) As FarPoint.Web.Spread.ImageCellType Dim img As Byte() = CType(row.Item("ProfileImage"), Byte()) Dim fileName As String = row.Item("ID").ToString Dim imgfileLogPath As String = "image\" & fileName & ".jpg" Dim imgFilePhyPath As String = System.IO.Path.Combine(Server.MapPath("."), imgfileLogPath) Using imgfile As New System.IO.FileStream(imgFilePhyPath, IO.FileMode.Create) imgfile.Write(img, 0, img.Length) imgfile.Close() End Using Return New FarPoint.Web.Spread.ImageCellType(imgfileLogPath) End Function
- OnPreRenderメソッドからSetImageプロシージャを呼び出し、継承元のOnPreRenderメソッドを呼び出して、本来のPreRender処理を継続します。
- SetImageプロシージャでは、TopRowプロパティとPageSizeプロパティを使って、現在表示している行に対してbyte配列に格納されている画像ファイルを表示します。
- byte配列から直接画像を表示する機能はないので、CreateImageFile関数でbyte配列の内容をサーバ側のimageフォルダに出力し、そのファイル名をセルに渡します。
今回のサンプルはbyte配列からの出力例としたかったため、Twitterから取得した画像ファイルのURLから画像データを取り出し、それをbyte配列に格納して利用しています。しかし、画像ファイルのURLが分かっているのであれば、CreateImageFile関数は次のようなコードで十分です。
Private Function CreateImageFile(ByVal row As DataRow) As FarPoint.Web.Spread.ImageCellType Return New FarPoint.Web.Spread.ImageCellType(row.Item("ProfileImageUrl").ToString) End Function
