XPages.JP はこう作られた! - テクテク Lotus 技術者夜会 -(2016 年 6 月 17 日 ) 株式会社エフ御代政彦ケートリック株式会社田付和慶
AGENDA テーマの選定 サイトマップ機能 サンプルAPP ギャラリー機能 管理機能 おまけ
テーマの選定 < 選定基準 > 1. XPAGES だなってバレないクールなデザイン 2. フリーのデザインテンプレートから探す 3. Bootstrapを標準で搭載 4. FontAwesomeを標準で搭載 そして見つけたのがこちら
MODERNA License: freeware Version: Bootstrap 3.1.0 http://www.bootstrapzero.c om/bootstraptemplate/moderna
NSF へのデザインテンプレート流し込み作業 (1) 1 ナビゲーター を表示させます 2CSS 以外のテンプレートの全てのファイルを WebContent フォルダ内にコピー
NSF へのデザインテンプレート流し込み作業 (2) 3CSS フォルダ内のファイルは スタイルシート 内にインポート スタイルシートはカスタマイズで編集が頻繁に発生するため スタイルシート 内のほうが便利と判断
NSF へのデザインテンプレート流し込み作業 (3) 4 ブランクのテーマを作成 XPAGES 標準の OneUI のテーマを無効にするため 5 作成したブランクのテーマを選択
NSF へのデザインテンプレート流し込み作業 (4) 6 カスタムコントロールを作り 必要なリソースを読み込ませておくと便利
NSF へのデザインテンプレート流し込み作業 (5) 7 XPAGE にサンプルの HTML コードを張り付け実行 修正 テスト 修正 テスト
サイトマップ機能 環境設定文書 からリンク構造を取得し動的に生成するサイトマップ
サイトマップのソースコード (1) <div class="sitemapcontainer tree"> <xp:repeat id="repeat1" rows="5" var="menu" disableoutputtag="true"> <xp:this.value><![cdata[#{javascript:var menulist = []; for(var i=1; i<=5; i++){ menulist.push(docconfig.getitemvaluearray("menus_" + i)); return menulist;]]></xp:this.value> <xp:text escape="false" id="computedfield1 tagname="div" styleclass="sitemapcategory"> <xp:this.value><![cdata[#{javascript:var html = []; var topmenu = menu[0].split(","); html.push("<div class='sitemapitem top'"); if(topmenu[1] && topmenu[1].trim()){ html.push(" data-url='", topmenu[1].trim(), "'"); html.push(">"); html.push("<span>", topmenu[0].trim(), "</a>"); html.push("</div>"); for(var i=1; i<menu.length; i++){ var childmenu = menu[i].split(","); html.push("<div class='sitemapitem child1'"); if(childmenu[1] && childmenu[1].trim()){ html.push(" data-url='", childmenu[1].trim(), "'"); html.push(">"); html.push("<span>", childmenu[0].trim(), "</a>"); html.push("</div>"); return html.join(""); ]]></xp:this.value> </xp:text> </xp:repeat> </div> HTML で生成されるとこんな感じ
サイトマップのソースコード (2) function openurl(url){ if(url.match(/^https?: / //)){ window.open(url); else{ window.location.href = url; function setcategoryheight(){ if($('.sitemapcontainer').hasclass('tree')){ $('.sitemapcategory').css('height', function(){ return (this.children.length * 50 + 60) + "px"; ); else{ $('.sitemapcategory').css('height', ''); $(function(){ $('.sitemapitem').on('click', function(e){ var url = this.getattribute("data-url"); if(url){ openurl(url); e.preventdefault(); e.stoppropagation(); ); $('.sitemapsection').on('click', function(){ $('.sitemapcontainer').toggleclass('tree'); $('.sitemapcontainer').toggleclass('circle'); setcategoryheight(); ); Javascript ファイル http://xpages.jp/xpagesjp.nsf/sitemap.js CSS ファイル http://xpages.jp/xpagesjp.nsf/css/sitemap.css setcategoryheight(); );
サンプル APP ギャラリー機能 ギャラリー文書 からデータを取得して自動生成
サンプル APP ギャラリーのソースコード <div class="row"> <div class="col-lg-12"> <ul class="portfolio-categ filter"> <li class="all active"> <a href="#"> 全て </a> </li> <xp:repeat id="repeat2" rows="999" indexvar="idx" var="entrycat" disableoutputtag="true"> <xp:this.value><![cdata[#{javascript:@unique(@dbcolumn("","vportfoliocat ", 1));]]></xp:this.value> <xp:text id="listbox1" tagname="li" styleclass="#{javascript:entrycat" escape="false"> <xp:this.value><![cdata[#{javascript:"<a href= "# ">"+entrycat+"</a>"]]></xp:this.value> </xp:text> </xp:repeat> </ul> <div class="clearfix"> </div> <div class="row"> <section id="projects"> <ul id="thumbs" class="portfolio"> <xp:repeat id="repeat1" rows="#{javascript:return compositedata.maxnum 999;" value="#{vportfolios" indexvar="idx" var="entry" disableoutputtag="true"> <xp:text tagname="li" escape="false" styleclass="item-thumbs col-lg-3 design"> <xp:this.attrs> <xp:attr name="data-id"> <xp:this.value><![cdata[#{javascript:"id- "+@Text(idx)]]></xp:this.value> </xp:attr> <xp:attr name="data-type"> <xp:this.value><![cdata[#{javascript:entry.getcolumnvalues().get(5) ]]></xp:this.value> </xp:attr> </xp:this.attrs> <xp:this.value><![cdata[#{javascript:var imgurl = getattachmentimageurl(entry.getdocument(),"thumbnail"); var retval = '<a class="hover-wrap fancybox" data-fancyboxgroup="gallery" title="<a target= '_blank ' href= ''+entry.getdocument().getitemvaluestring("url")+' '>'+entr y.getcolumnvalues().get(1)+'</a>" href="'+imgurl+'">'+ '<span class="overlay-img"></span><span class="overlay-img-thumb font-icon-plus"></span></a>'; retval += '<img class="" style="width:260px; height:195px;" title="" src="'+imgurl+'" alt="'+entry.getdocument().getitemvaluestring("description")+'" />'; return retval; ]]></xp:this.value> </xp:text> </xp:repeat> </ul> </section> </div>
管理機能 デモをお見せします
おまけ 1. XPages.JP ドメインは誰が管理しているの? 2. ヘッダーイメージ下の Slack 機能はどうやって実装しているの?