slack

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

2009/12/18

XPages Tutorial Part 6: バナーにユーザー名を表示させる

Showing The Username In The Banner {Original Source}

前回はバナーに関する下地作りとしてバナーの左端にグラフィックを追加しました。
今回はログインやログアウトのリンクを表示しサーバーサイドJavaScriptにも触れていきます。

サンプルの XPage アプリケーションをよく見てみると、OneUI を利用することでバナーの右端にスタイルクラスを伴ったリストが作成されているのに気付きます。簡単にドラッグアンドドロップでここのコントロールが作成できればいいのですが、これを実現するためには基本的な HTML のスキルが多少必要となってきます。まず初めに「layout_Banner」カスタムコントロールを開きソースタブに切り替えてください。前回で作成した以下のコードはこのようになっていると思います。
<xp:image url="/OpenNTF.jpg" id="lotusLogo" alt="OpenNTF" styleClass="lotusLogo"></xp:image>
この下に今回追加するリストを追加していきますので、次の HTML をコピーして貼り付けてください。
<ul class="lotusInlinelist"> 
<li class="lotusFirst"> 
First List Item 
</li> 
<li> 
Second List Item 
</li> 
</ul> 
この'lotusInlineList' という ul クラス名は、OneUI CSS で定義されているもので水平のリストを定義するものです。このクラスを使用するとリストアイテムは 1 ピクセルの左側の境界線がついた形で表示されるため、最初のアイテムだけは 'lotusFirst' というクラス名を定義することで CSS の全体の定義からその部分だけ優先的に上書きしてくれます。
設計タブでデザインを確認してから保存しこの XPage がどのように表示されるかを確認しましょう。














では、このリスト表示の場所に実際に即した内容を埋めていきたいと思います。最初のアイテムに簡単な計算結果のテキストを作りログインの状態に合わせて 'Anonymous' であったり実際のユーザーの共通名を表示させたいと思います。最初のリストアイテムのテキストを削除して、そこに計算結果フィールドのコアコントロールをドラッグアンドドロップしてください。正しい場所に配置できたかどうかはアウトラインやソースで確認してください。確認ができたらプロパティを見ます。コントロール名は気にする必要はありません。表示のオプションがオンになっていることを確認してください。そして「値」タブに切り替えます。使用するバインドデータでは JavaScript を記述していきます。






右の編集ボタンを押すと JavaScript エディターが表示されるので以下のコードを記述してください。
var userName:NotesName = session.createName(@UserName());
return(userName.getCommon());

以前に JavaScript の経験がある方なら、NotesName クラスから userName という名前のオブジェクトを新しく作成し、現在このセッションにログインしているユーザーのノーツ名をセットしているのがお分かりだと思います。ロータススクリプトでは NotesSession.Username() になるのでしょうが、ここでは式言語の @UserName() を使用します。お分かりのようにこれまでのロータススクリプトや式言語のスキルが無駄になるということはなく、このように継承できることがお分かりいただけたと思います。
さて、最後にこの XPage を保存しブラウザでどのように表示されるか確認してみましょう。


0 件のコメント:

コメントを投稿