Dojo

XPagesDay 2013 【C-3】予約システムをXPagesで構築した提案事例のスライドとコードの公開

XPagesDay 2013が無事に終わりましたね。

参加された皆様、講師の皆様、そして運営の皆様、本当にお疲れ様でした。

やはり、自分のプレゼンはかなり緊張していたようです。
自宅で行ったリハでは「え～っと」の回数を30回以下まで減らすことができたんですが、本番はゆうに50回は超えていたようです。

お聞き苦しく感じてしまった方すいません、次プレゼンをする機会があればその時はがんばります (^_^;)

XPagesDayでの自分のプレゼンテーションのスライドをアップしました。

リンク先はこちら：http://www.slideshare.net/KazunoriTatsuki/c3-xpages

また、スライドの中で利用したDojo GridViewのXPagesコードを以下に貼り付けておきます。

[toggle title="Dojo GridViewのXPagesコードを表示するにはここをクリック"]

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
 xmlns:xe="http://www.ibm.com/xsp/coreex"
 xmlns:xc="http://www.ibm.com/xsp/custom">


<xp:div id="div_Schedule_depart"
 styleClass="gridbox">
 <xe:restService
 id="restServiceDepartSche">
 <xe:this.service>
 <xe:viewJsonService
 viewName="[YOUR_VIEW_HERE]" defaultColumns="true"
 contentType="application/json" var="entry"
 formName="[YOUR_FORM_HERE]">
 <xe:this.columns>
 <xe:restViewColumn
 name="DSResvStat">
 <xp:this.value><![CDATA[#{javascript:""; /*予約状況の計算プログラムが入ります*/ }]]></xp:this.value>
 </xe:restViewColumn>
 </xe:this.columns>
 <xe:this.keys><![CDATA[#{javascript:""; /*Viewの絞込のキーワードを返すようにします*/ }]]></xe:this.keys>
 </xe:viewJsonService>
 </xe:this.service>
 </xe:restService>
 <xe:djxDataGrid id="djxDataGridDepart"
 style="width: 100%;height: auto; padding: 1px"
 storeComponentId="restServiceDepartSche" selectionMode="single"
 selectable="false" loadingMessage="検索しています" autoHeight="5"
 jsId="jsDataGridDepart">


<xe:djxDataGridColumn
 id="djxDataGridColumn1" label="ラベル１" field="DSName">
 </xe:djxDataGridColumn>
 <xe:djxDataGridColumn
 id="djxDataGridColumn2" label="ラベル２" field="DSDepartCity"
 width="50px">
 </xe:djxDataGridColumn>
 <xe:djxDataGridColumn
 id="djxDataGridColumn3" label="ラベル３" field="DSDepartTimeStr">
 </xe:djxDataGridColumn>
 <xe:djxDataGridColumn
 id="djxDataGridColumn4" label="ラベル４" field="DSArriveCity"
 width="50px">
 </xe:djxDataGridColumn>
 <xe:djxDataGridColumn
 id="djxDataGridColumn5" label="ラベル５" field="DSArriveTimeStr"
 width="50px">
 </xe:djxDataGridColumn>
 <xe:djxDataGridColumn
 id="djxDataGridColumn11" label="ラベル６" field="DSResvStat" width="auto">
 </xe:djxDataGridColumn>
 </xe:djxDataGrid>
 <xp:scriptBlock id="scriptBlock1">
 <xp:this.value><![CDATA[XSP.addOnLoad(function(){ 
dojo.connect(dijit.byId("#{id:djxDataGridDepart}"), "_onFetchComplete",function()
{
 // 画面遷移先から戻ってきた時に以前に選択された値を選択状態にしておくためのCSJS
 var selUnid = dojo.byId('#{id:scheDepartDSUnid}');
 var grid = dijit.byId("#{id:djxDataGridDepart}");
 if( selUnid && selUnid.value != ""){
 for (var i = 0; i < grid.rowCount; i++){
 theitem = grid.getItem(i);
 dojo.forEach(grid.store.getAttributes(theitem), function(attr){
 if(attr == '@unid'){
 var value = grid.store.getValues(theitem, attr);
 if( value == selUnid.value){
 grid.selection.setSelected(i,true);
 }
 }
 });
 }
 }
 grid.canSort = function(){return false};
});


});]]></xp:this.value>
 </xp:scriptBlock>
 </xp:div>


<!-- GridViewで選択された行のUNIDを格納する隠しフィールド -->
 <xp:inputText id="scheDepartDSUnid" style="display:none;"
 value="#{sessionScope.scheDepartDSUnid}">
 </xp:inputText>
 
 <!-- 次へ進むボタンを押下時にGridViewで選択された行のUNIDを取得して隠しフィールドに保存 -->
 <xp:div styleClass="enter">
 <xp:link escape="true" id="link2">
 <xp:image id="image15" url="/button-next.gif"
 alt="次へ進む">
 </xp:image>
 <xp:eventHandler event="onclick" submit="true"
 immediate="false" save="true">
 <xp:this.script><![CDATA[var grid = dijit.byId('#{id:djxDataGridDepart}');
 var bSelDept = false;
 var bSelDeptOF = false;
 var items = grid.selection.getSelected();
 if(items.length) {
 dojo.forEach(items, function(selectedItem) {
 if(selectedItem!==null) {
 dojo.forEach(grid.store.getAttributes(selectedItem), function(attribute){
 var value = grid.store.getValues(selectedItem, attribute);
 // alert('attribute: ' + attribute + ', value: ' + value);
 if(attribute == '@unid'){
 dojo.byId('#{id:scheDepartDSUnid}').value = value;
 bSelDept = true;
 }
 if(attribute == 'DSResvStat' && value == 'X'){
 bSelDeptOF = true;
 }
 });
 }
 });
 }
 
 ]]></xp:this.script>
 </xp:eventHandler>
 
 </xp:link>
 </xp:div>
 
</xp:view>

[/toggle]

by ktatsuki