こんにちは爆  笑

 

気が付けば今日は5月だったんですね・・・

GWだ!!照れって浮かれていたら4月の終わりに気づいていませんでしたガーン

 

さて、今回は久しぶりにXPagesネタを書きたいと思います!!

 

HTMLタグとCSSを使ったタブメニューの開発がありました。

こんな感じです(ちょっと簡単すぎますけど)

「Google」とか「Yahoo!」とか「コンソーシアム」とか「掲示板A」とか「システム」の場所を

タブっぽくしており、クリックするとタブ下のエリアのページが切り替わるよくあるパーツですね。

ページが切り替わる箇所はとても簡単でiFrameを使用しています。

 

ということで、今回はiFrameカスタムコントロールを作成してみましょう!

iFrameカスタムコントロールを使うと以下のメリットがあります。

 

・プロパティ定義が利用できるので設定が簡単

・XPageとバインディングした文書の値も指定できる

・使いまわしが簡単

 

 

では早速、作成していきましょうニコニコ

 

1)まずはこちらでネタを仕入れます。

https://www.w3schools.com/tags/tag_iframe.asp

 

iFrameの書き方

 

設定する属性がたくさんありますね・・・

 

 

2)カスタムコントロールを作りましょう。

名前は何でも構いません。

筆者は「cciFrame」としました。

 

出来上がったカスタムコントロールをソース表示にして

サンプルのタグを

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"></xp:view>の間に

貼り付けます。

 

このようなイメージです。

 

3)属性を設定します。

compositeDataで定義していきます。

 

<iframe
align="#{compositeData.align}"
frameborder="#{compositeData.frameborder}"
height="#{compositeData.height}"
longdesc="#{compositeData.longdesc}"
marginheight="#{compositeData.marginheight}"
marginwidth="#{compositeData.marginwidth}"
name="#{compositeData.name}"
sandbox="#{compositeData.sandbox}"
scrolling="#{compositeData.scrolling}"
src="#{compositeData.src}"
srcdoc="#{compositeData.srcdoc}"
width="#{compositeData.width}"
>

 

4)プロパティ定義を設定します。

 

設定一覧を表にしましたおねがい

名前 表示名 種類 エディタ パラメータ デフォルト値
align align String コンボボックス left|left
right|right
top|top
middle|middle
bottom|bottom
 
frameborder frameborder String コンボボックス 1|1
0|0
 
height height String      
longdesc longdesc String      
marginheight marginheight String      
marginwidth marginwidth String      
name name String      
sandbox sandbox String コンボボックス allow-forms|allow-forms
allow-pointer-lock|allow-pointer-lock
allow-popups|allow-popups
allow-same-origin|allow-same-origin
allow-scripts|allow-scripts
allow-top-navigation|allow-top-navigation
 
scrolling scrolling String コンボボックス yes|yes
no|no
auto|auto
 
src src String      
srcdoc srcdoc String      
width width String      
noiFrameMsg noiFrameMsg String     iFrame対応ブラウザで開いてください

※説明には1)で添付している表の Description の値を記載しています。

 

5)設定定義を開いて、カスタムXSPマークアップを入力します。

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
iFrameカスタムコントロール
</xp:view>

 

 

 

出来ましたでしょうか??

 

次回は、XPageに組み込みキチンと表示されるか確認したいと思います。

 

今日はこの辺でキラキラ

 

 

あでゅーパー

 

AD