slack

テクてく Lotus 技術者 Slack に参加しよう!

2010/01/07

XPages Tutorial Part 30 : アクションバーとアクションボタンの作成

Creating An Action Bar And Buttons {Original Source}

参照するだけの電話帳アプリケーションを開発するのであれば、実質的にはこれで終了です。
もちろんもう少し見て目や見栄えをブラッシュアップすることは必要だと思いますが。

しかし、これからこの電話帳アプリケーションに自分自身の情報の編集をさせたり、特殊なロールをもつユーザーにはどの文書でも編集させることができるようにしていきたいと思います。

以降、XPages による文書の編集方法、「アクションバー」への OneUI の適用、それぞれの権限に基づいて表示させたり非表示にさせたりする「アクション」について見ていきます。

まず最初に、この機能を有効にしたり無効にしたりすることができるようアプリケーションの設定フォームに新しくフィールドを作成したいと思います。
このアプリケーションの最終形は OpenNTF にリリースされた時にこの機能があると誰に何をさせるかをコントロールできるようにしたいからです。
では下のように、フォーム上にラジオボタンのフィールドを作成し値として Yes|1 と No|0 を選べるようにしてください。そして省略値は「0」とします。

それではアクションバーから始めていきましょう。
今回はアクションバーとアクションボタンのスタイルを OneUI のルックアンドフィールにしたい思います。
「content_Person」カスタムコントロールを開き、設計タブに切り替え、ページの一番上に新しいパネルをドラッグインしてください。
ドラッグインしたらソースビューに切り替え、このパネルが「lotusContent」DIV の内部にあるかを確認してください。
このパネルに「lotusActionBar」、「lotusBtnContainer」という 2 つのスタイルクラスをスペースを一戸開けて指定します。

以上パネルが完了したら、その中に「リンク」コントロールをドラッグインします。ここでアクションボタンを作成するのでボタンコントロールを使用すると思われている方もいらっしゃるかもしれませんが、OneUI の CSS でこのリンクをアクションボタンのようにすることができるので、ここではリンクコントロールを使用します。
ではそのリンクコントロールのすべてのプロパティから「outerStyleClass」を探してください。
そして、次の 3 つのクラスをスペースをひとつ空けて続けて指定してください。
「lotusBtn lotusBtnAction lotusLeft」
この OUTER スタイルクラスは指定した値の CSS クラスでリンクの周りに SPAN タグを生成してくれます。
完成するとソースは以下のようになるはずです。


ではここでカスタムコントロールを保存して XPage を再読み込みしてみましょう。Person Details ページの上に新しくアクションボタンが追加されているのが確認できるはずです。
下のスクリーンはリンクのラベルを「Edit Document」に変更してあるものです。


次回はこの新しいボタンに実際のアクションを追加していきたいと思います。

0 件のコメント:

コメントを投稿