いよいよ今週ですね。ノーツコンソーシアム FESTA 2017。
ちなみに会員である弊社は、当日午前に開催されますユーザー情報交換会にも参加させて頂きます。
皆様とお会いできることが、今から楽しみでなりません!!
さて本題に戻ります。前々回で凡そのアプリケーションの形は仕上がりました。
今回は少し手を加えて、完成させたいと思います。
まずはトップページ【m_XpIndex】です。
タイムカードアプリということですが、現時点ではカレンダーや時計表示がありません。
正しくは右下に小さくクライアントの時計表示はありますが、実際にこちらを見て、打刻することはどうかと思います。
そこで、時計表示を埋め込みたいと思います。
個人的にはJSTを利用できればと思ったのですが、「大型文字表示」はiframeに対応しておらず、結局Javascriptのサンプル例を埋め込みました。
恐れ入りますが、Javascriptのサンプルについてはご自身でお好みのものをお探しください。
それでは設置手順です。
まずはm_XpIndexの先頭のラベルと出社・退社ボタンの中央あたりに、パネルコントロールを配置します。
※特パネルは必要ありませんが、手を加える際にわかりやすいよう設置しました。
続いてパネルを選択した状態で、ソースタブに切り替えます。
<xp:panel></xp:panel>というタグがハイライトされますので、その間にJavascriptのサンプルを貼り付けます。
※一部サンプルには、<head>タグ内にもスクリプトが必要なものがございます。今回は<body>タグ内にのみ記述するものとして記載しております。詳しくはサンプルの設置方法に従ってください。
設計タブに戻り、パネルを選択し、フォントサイズや色等のプロパティを設定します。
随時、m_XpIndexをプリビューしながら確認してください。
少しバランスが悪いですが、私の設定では、下記のように表示ができました。
次にアプリケーションのアイコンを変更してみましょう。
今回は下記のような画像を準備してみました。
もちろんお好きな画像をご準備いただければ構いませんが、32x32ピクセルのJPEGもしくはPNG、GIF、BMPファイルが利用可能です。
左メニューの【リソース】内の【アイコン】をダブルクリックしてください。
このような画面が開きます。
上半分は、準備した画像ファイルを読み込む方法。
下半分は、直接アイコンファイルを32x32のマスを利用し、下記のように編集するものになります。
それでは上半分を利用し、アイコンを変更します。
【参照...】ボタンをクリックし、準備した画像ファイルを呼び出してください。
以上でアイコンが切り替わりました。
もちろんノーツクライアントのアイコンも変更されています。
レイアウトやデザインはさておき、以上でアプリケーションとしては完成です。
次回はこのアプリケーションをテンプレート化する手順を紹介させて頂きます。
そのまま使っても構わないのですが、anonymousが使用できる権限を取得しているため、ファイル名を安易に推測できないものにすることで、少しでもリスクを減らそうというという意図もあります。
・・・そろそろ次のネタを探さなければ(汗
0 件のコメント:
コメントを投稿