投稿

6月, 2014の投稿を表示しています

XPagesでコントロールに複数のスタイルシートを設定するには?

イメージ
こんにちは。週末は晴れたので、外出された方も多いのではないでしょうか。
私も夏へ向けて、散髪してきました。すっきりして気持ちいいです。

さて、今月はなんか記事を書かないといけないような気がしてならないので、今日もひねり出します。
と言っても、大したことは書いてないですし、書けませんが・・・

さぁ、まずはこちらのボタンをクリックして先へと進みましょう。



今日もXPagesについてです。

XPagesでは各コントロールに修飾をすることができます。
ラベルコントロールに対して、フォントサイズを大きくしたり、色を変えたり。
表コントロールに対して、幅や高さを変えたり。

それには、いくつか設定方法があります。
直接、コントロールのプロパティに設定する方法やスタイルシートを定義して、それを当てはめる方法等です。

直接、コントロールのプロパティを設定する場合、各コントロールで自由に設定できる反面、同じ設定を何か所もしないといけないことがあります。

コントロールの数が増えてくると、これはとても面倒ですよね。

そんな時は、スタイルシートを活用しましょう。
スタイルシートを作成しておけば、コントロール用に作成したスタイルをプロパティビューの「スタイル」タブで設定するだけで済みます(下図参照)。

では、別々のコントロールにスタイルを設定する場合を考えてみましょう。
それぞれのコントロール用にスタイルを設定してしまうと、同じスタイルが乱雑してしまうことが考えられます(たとえば、width:100%やfont-size:10ptなど)。
これでは、直接コントロールにスタイルを設定しているのと何ら変わりはありません。


そこで、スタイルシートで良く使うものは、独立して定義をしておきます。
そして、その独立したスタイルとそのコントロール用のスタイルをまとめて設定すると良いです。

これのやり方は、下図のようにスタイルのクラスを" "(空白)で区切って入力します。
一覧から選択する場合は、Ctrlキーを押しながら、マウスでクリックします。

簡単にできますね。
これで、同じスタイル定義をいくつも書かずに済みますね。



スタイルシートの設定もこのようにまとめていけば、可読性が少しは高くなるのではないでしょうか?
色々と試して、自分なりのまとめ方を模索してみてください。

では、今日はこの…

XPagesでグラフを描いてみよう

イメージ
おはようございます。気が付いたら、関東地方も梅雨入りしたようです。
でも、気分までじめじめしないようにしたいですね。



では、今日の話題へと。
今までいくつかXPagesについて書いてきましたが、グラフ描画について触れていないことに気が付きました。
理由はいくつかあるのですが・・・

理由はさておき、今日はXPagesでグラフ描画をする方法についてのご紹介です。
グラフ描画の方法はいくらでもあるのですが、XPagesでということなので、
標準搭載されているDojoでの実現方法についてです。


内容に入る前に、今日も、こちらのボタンをクリックしてから読みましょう。



実は、XPagesそのものにはグラフ描画をするコントロールは用意されていません。
ですので、dojo toolkitを使って描画するということになります。
私の環境はIBM Notes/Domino 9.0.1ですので、dojoのバージョンは1.5.21.8(2014/06/20訂正)になります。
最新バージョンは1.9になっていますので、動きの違いや設定方法の違いがあるかもしれませんが、そこはご了承ください。


XPagesでDojo Toolkitを使ってグラフを描画するには、次の作業が必要です。

グラフを描画するためのDojoモジュールを組み込むグラフを描画するための領域を作成するグラフを描画するためのデータを用意する  グラフを描画するためのJavaScriptを記述する
一つ一つ説明していきましょう。
まずは、1.のグラフ描画用Dojoモジュールの組み込みです。
こちらはXPage(もしくはカスタムコントロール)のリソースとして設定します。
下図は「カスタムコントロール」に円グラフの描画に必要なDojoモジュールを組み込んだところです。
手順は次の通りです。
XPage(もしくはカスタムコントロール)を開いて、「プロパティ」ビューの「リソース」タブを開きます。
[追加][Dojoモジュール]ボタンをクリックします。

すると、「Dojoモジュールをページへ追加」というダイアログが表示されるので、Dojoモジュール名を入力して[OK]をクリックします。

この時、何を記述すればよいか、わからないですよね。
Dojoモジュールは、下記のディレクトリ配下にありますので(Notesクライアントの場合も同じ場所にありま…

XPagesでEnterキーを押したときに実行するようにしたい

イメージ
今回で450本目の記事です。
ブログを始めて、6年と2か月なので、1か月あたり6本の執筆?です。
最近の頻度からすると、多めですね。始めた当初は、ほぼ毎日更新していたので、そのためにこんな数字になっているのでしょう。

閑話休題。今日も始まる前にボタンをクリックしましょう。



では、今日の話題です。
Webサイトで、入力ボックスだけあって、そこに値を入力して、Enterキーを押すと、内容に従って処理が実行されるものがあります。
検索なんかがそうですね。

あれをXPagesでも実装できたら格好いいですよね。
ということで、それをやってみましょう。


用意するコントロールは、編集ボックスとボタンです。

まずはボタンの説明をしましょう。
ボタンの名前は後で必要になるので、覚えておきます。
ここでは、btnSearch としておきます。
ボタンには、普通に処理させたい内容を記述します(onClick イベントに記述)。
そのボタンのスタイルを
display:none
とします。
これはUIでは設定することができないので、プロパティビューの「すべてのプロパティ」を開いて、
そこの「style」という項目に直接記述します。
非表示にするというスタイル指定ですが、「可視」のチェックを外すのとは意味が違い、「可視」のチェックを外してしまうと、動かなくなってしまうので、要注意です。

次に編集ボックスの説明です。
こちらのクライアントサイドJavaScriptを記述することで実行できるようになります。
 イベントビューを開いて、イベント種類は「onkeypress」を選択して、クライアントサイドを選択します。
以下の内容を記述します。
if ( thisEvent.keyCode == 13 ) { var element = document.getElementById( "#{id:btnSearch}" ); element.click(); } ここで、重要なのは#{id:btnSearch}です。
このbtnSearchは最初に作成したボタンの名前です。

ちなみに、
thisEvent.keyCode == 13
というのがブラウザでのEnterキー を表します。

つまり、Enterキーが押されたら、btnSearch ボタンをクリッ…

XPagesで検索を行った結果をハイライト表示する

イメージ
みなさん、こんにちは。

今日も頑張って更新しましょう。

相変わらず暑いので体調管理だけは気を付けて行うようにしましょう。
では、このボタンをクリックして先に進みましょう。





さて、今日はXPagesでの検索です。
某Q&Aサイトで質問が出ていたのですが、回答が付かないようなので気になって調べてみました。

DominoのWebアプリケーション(従来のWeb対応のノーツDB)は、全文索引を付けておけば、検索結果を強調表示してくれます。
ではXPagesでは、どうなんでしょうか?

XPagesでの全文検索の実装方法は、8. XPagesで全文検索機能を利用するには?に詳しく出ていますのでそちらを参照願います。

しかし、こちらのページを見ても、結果は強調表示されていませんね。
どうやら、XPagesでは検索結果の強調表示は標準では実装されていないようです。

となると、自分で作りこむしかないようです。

Webブラウザ上で強調表示を行うということなので、HTMLのタグを使うとよさそうです。
ということで調べてみると、<mark></mark>というタグがあるようです。
説明にも「検索結果の画面で文字をハイライトさせるのに利用します」といったことが書かれていますので、確かにこれで間違いなさそうです。

使い方は、<mark></mark>の「~」の部分がハイライト表示させたい文字列です。
今回の場合、検索文字列になります。
検索文字列をスコープ変数(ページを移動する場合は、sessionScope変数にしておく必要があります)に格納しておきます。

後は、検索結果を表示するページ内のデータの値を
検索文字列 → <mark>検索文字列</mark>
といった形で置換すれば良いのです。

この時、気を付ける点がいくつかあります。
コントロールの「escape」プロパティはfalseにするescapeプロパティを持たないコントロール(複数行編集ボックス等)の場合、表示用の計算結果コントロールを作成して、そこでハイライト表示させるようにするビューコントロールのビュー列の場合、コンテンツタイプをHTMLにする検索結果ページから別のページに移動するときには、検索文字列のスコープ変数をクリアする また、3.のビュ…

XPagesで文書保存時に添付ファイルの数を限定させるには

イメージ
皆さん、こんばんは。ついに6月です。いやぁ、5月は1日に記事を書いて、「まぁ、余裕だろ。今月は記事は5個くらいは出せるかな?」とか思ってました。
ホント、すみません。先に謝っておきます(謎)。

さて、昨日、私の住んでいる地域の気温が30度を超えました。今日も、30度を超えていたので、まさに「お外あつかーまん」でした。
おかげで、ゆっくりと記事の構想を練ることができませんでした。無理です。こんな暑い中、詳しい調べもんなんかできません。


ということで、簡単な記事を書いて逃げておきます。では、こちらをクリック!




今日は、XPagesでの添付ファイルの取り扱いについてです。
添付ファイルのアップロード方法自体については、以前(XPagesで添付ファイルの処理をする(アップロード) )に取り上げていますので、そちらを参照してください。

今日は、文書に添付するファイルの数を限定する方法についてです。
基本的には従来のノーツアプリケーションでの方法がそのまま使えます。それをXPagesのSSJSで実装するだけです。

1.文書を保存するフォームに「リッチテキスト」フィールドを作成しておきます。

2.1.で作成したフォームに計算結果のフィールドを作成します。
その値には「@AttachmentNames」という式を記述しておきます。

3.次に文書を編集するXPageを作成します。添付ファイルのアップロードコントロールを追加しておきましょう。2.で作成した計算結果のフィールドはコントロールとして配置する必要はありません。

4.文書を保存するアクションに次のように記述します。
これはサンプルで、添付ファイルは1つだけOKとしています。

こんな感じです。
var doc = document1.getDocument( true ); if ( doc.computeWithForm( true, true ) ) { var afile:java.util.Vector = doc.getItemValue( "計算結果のフィールド名" ); if ( afile.size() > 1 ) { view.postScript( "alert('添付ファイルは1つしか添付できません。')"…