Döcu Content

User Image List

JavaBean/BackingBean

Xpages Drag and Drop URL


Introduction:

Submit Image URL to back-end to be picked up via BackingBean class and shown to user as page preferennces. Let user interact with own Logo document(s) or allow new submissions based on permissions.


Disclaimer:

Information contained in the following is presented as is. This tutorial assumes you have basic Lotus Notes Configuration and Programming knowledge.


Döcu Content Xpages

Design Xpages forms that serves the purpose of retrieving available image documents, using a Drag and Drop to facilitate user Logo preferences. If no image available for that user, a default Logo should load. We recommend watching the following Youtube video for additional information:

http://www.youtube.com/watch?v=enCL77lwGLQ&list=UUSImDTpK0oe7QrPsYOE4nww&feature=c4-overview


Screenshots, Back-end excerpts, Xpages and View elements

Xpages Form seen here contains a list and a submit form








Copy and Paste Search Page code


<?xml version="1.0" encoding="UTF-8"?>


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


<xp:span style="font-weight:bold;font-size:21pt">


Image</xp:span>

<xp:span style="font-weight:bold;font-size:21pt"> Logo Shop&#160;Submit</xp:span>

<xp:br style="font-weight:bold;font-size:21pt"></xp:br>


<xp:this.resources>

<xp:script src="/docucontentGACodeTest.js" clientSide="true" />

</xp:this.resources>


<xp:tabbedPanel id="tabbedPanel1">

<xp:tabPanel label="" id="tabPanel1">

<xp:dataTable id="dataTable1" var="categoryTable"

value="#{javascript:RetrieveNewNoticeBackingBean.getKeywords()}"

style="width:80.0%;background-color:rgb(192,192,192)" rows="2">

<xp:this.facets>


<xp:pager partialRefresh="true"

layout="FirstImage PreviousImage SeparatorPage Group NextImage LastImage"

xp:key="header" id="pager1" for="dataTable1"

style="color:rgb(0,64,64);font-weight:bold;background-position:top center" />

<xp:pager partialRefresh="true"

layout="FirstImage PreviousImage SeparatorPage Group NextImage LastImage"

xp:key="footer" id="pager2" for="dataTable1" title="By Category"

style="color:rgb(0,64,64);font-weight:bold;background-position:top center" />

</xp:this.facets>



<xp:column id="column5">


<xp:link escape="true" id="link3"

style="text-align:center;background-position:center center;width:88.0px">


<xp:this.value>


<![CDATA[#{javascript:categoryTable.browserURL}]]>


</xp:this.value>

<xp:image id="image2" url="/xpSearch_oneUI.gif" alt="View File"

style="align:center;height:18.0px;width:35.0px" />

</xp:link>

<xp:this.facets>


<xp:label id="label4" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:90.0px"

for="image1" value="File" />

</xp:this.facets>

</xp:column>

<xp:column id="column4">

<xp:this.facets>

<xp:label value="Type" id="label3" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:76.0px" />

</xp:this.facets>


<xp:link escape="true" text="#{categoryTable.topic}" id="link2"

value="#{javascript:categoryTable.browserURL}" title="Type"

style="color:rgb(0,0,64);font-weight:bold" />


</xp:column>

<xp:column id="column2">


<xp:this.facets>


<xp:label value="Category" id="category1" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0)" />

</xp:this.facets>


<xp:text escape="true" id="computedField2" value="#{categoryTable.category}"

style="color:rgb(64,0,0)" />

</xp:column>



<xp:column id="column1">

<xp:this.facets>

<xp:label value="Image" id="label2" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:93.0px" />

</xp:this.facets>


<xp:link escape="true" id="link4"

style="text-align:center;background-position:center center;width:88.0px">


<xp:this.value>


<![CDATA[#{javascript:categoryTable.fileName}]]>


</xp:this.value>


<xp:image id="image3" url="#{javascript:categoryTable.fileName}"

alt="View File" style="align:center;height:38.0px;width:38.0px" />

</xp:link>


</xp:column>


</xp:dataTable>

</xp:tabPanel>


</xp:tabbedPanel>


<xp:tabbedPanel id="tabbedPanel2">

<xp:tabPanel label="Drag and Drop" id="tabPanel2">

<xp:table>

<xp:tr>

<xp:td>

<xp:label id="label6" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:144.0px"

for="image1" value="User Data" />

</xp:td>

<xp:td>

<xp:label id="label5" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:387.0px"

for="image1" value="Image URL" />

</xp:td>

</xp:tr>

<xp:tr>

<xp:td>

<xp:inputText id="inputText1" value="#{SendImageBulletinBean.userID}"

defaultValue="#{SendImageBulletinBean.userNameValue}">

</xp:inputText>

<xp:br></xp:br>

<xp:br></xp:br>

<xp:inputText id="inputText2" value="#{SendImageBulletinBean.roleID}"

defaultValue="#{SendImageBulletinBean.roleNameValue}">

</xp:inputText>

</xp:td>

<xp:td>

<xp:inputTextarea id="inputTextarea2"

style="width:387.0px;height:75.0px" value="#{SendImageBulletinBean.imageBody}">

</xp:inputTextarea>

</xp:td>

</xp:tr>

</xp:table>

</xp:tabPanel>


</xp:tabbedPanel>






<xp:br></xp:br>

<xp:button value="Submit" id="button1">

<xp:eventHandler event="onclick" submit="true"

refreshMode="complete" immediate="false" save="true" id="eventHandler1">


<xp:this.action><![CDATA[#{javascript:SendImageBulletinBean.submitUserImg()}]]></xp:this.action>

</xp:eventHandler>

</xp:button>

&#160;

<xp:button value="Reset" id="button2">

<xp:eventHandler event="onclick" submit="true"

refreshMode="complete" immediate="false" save="true" id="eventHandler2">


<xp:this.action><![CDATA[#{javascript:context.redirectToPage("xpimglogoshopcategory");}]]></xp:this.action>

</xp:eventHandler>

</xp:button>

<xp:this.navigationRules>

<xp:navigationRule outcome="xsp-success"

viewId="/xpimglogoshopcategorylist.xsp"></xp:navigationRule>

</xp:this.navigationRules>

</xp:view>




Copy and Paste Results Page code


<?xml version="1.0" encoding="UTF-8"?>


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


<xp:span style="font-weight:bold;font-size:21pt">


Image</xp:span>

<xp:span style="font-weight:bold;font-size:21pt"> Logo Shop&#160;List</xp:span>

<xp:br style="font-weight:bold;font-size:21pt"></xp:br>


<xp:this.resources>

<xp:script src="/docucontentGACodeTest.js" clientSide="true" />

</xp:this.resources>


<xp:tabbedPanel id="tabbedPanel1">

<xp:tabPanel label="" id="tabPanel1">

<xp:dataTable id="dataTable1" var="categoryTable"

value="#{javascript:RetrieveNewUserImagesBackingBean.getImageKeywords()}"

style="width:80.0%;background-color:rgb(128,128,128)" rows="2">

<xp:this.facets>


<xp:pager partialRefresh="true"

layout="FirstImage PreviousImage SeparatorPage Group NextImage LastImage"

xp:key="header" id="pager1" for="dataTable1"

style="color:rgb(0,64,64);font-weight:bold;background-position:top center" />

<xp:pager partialRefresh="true"

layout="FirstImage PreviousImage SeparatorPage Group NextImage LastImage"

xp:key="footer" id="pager2" for="dataTable1" title="By Category"

style="color:rgb(0,64,64);font-weight:bold;background-position:top center" />

</xp:this.facets>

<xp:column id="column5">


<xp:link escape="true" id="link3"

style="text-align:center;background-position:center center;width:88.0px">


<xp:this.value>


<![CDATA[#{javascript:categoryTable.imageBody}]]>


</xp:this.value>

<xp:image id="image2" url="/xpSearch_oneUI.gif" alt="View File"

style="align:center;height:18.0px;width:35.0px" />

</xp:link>

<xp:this.facets>


<xp:label id="label4" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:90.0px"

for="image1" value="File" />

</xp:this.facets>

</xp:column>

<xp:column id="column4">

<xp:this.facets>

<xp:label value="UserName" id="label3" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:107.0px" />

</xp:this.facets>


<xp:link escape="true" text="#{categoryTable.userID}" id="link2"

value="#{javascript:categoryTable.browserURL}" title="Type"

style="color:rgb(0,0,64);font-weight:bold" />


</xp:column>

<xp:column id="column2">


<xp:this.facets>


<xp:label value="RoleID" id="category1" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0)" />

</xp:this.facets>


<xp:text escape="true" id="computedField2" value="#{categoryTable.roleID}"

style="color:rgb(64,0,0)" />

</xp:column>

<xp:column id="column1">

<xp:this.facets>

<xp:label value="Image" id="label2" xp:key="header"

style="font-weight:bold;font-family:Arial Black;font-size:14pt;background-color:rgb(220,237,237);color:rgb(0,64,0);width:145.0px" />

</xp:this.facets>


<xp:link escape="true" id="link4"

style="text-align:center;background-position:center center;width:88.0px">


<xp:this.value>


<![CDATA[#{javascript:categoryTable.imageBody}]]>


</xp:this.value>

<xp:image id="image3" url="#{javascript:categoryTable.imageBody}"

alt="View File" style="align:center;height:38.0px;width:38.0px" />

</xp:link>

</xp:column>



</xp:dataTable>

</xp:tabPanel>

</xp:tabbedPanel>

</xp:view>


JavaBean File Instructions,

Create a New JavaBean in Project Explorer, Copy and paste code over generated code into own package


ImageKeyword.java;


/**


* Copyright 2014 Dököll Solutions, Inc.

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at


http://www.apache.org/licenses/LICENSE-2.0


Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.


* Program: ImageKeyword.java

* Created: 2014.03.02.5.20.PM

* New Retrieval JavaBean for Image Submissions via Xpages

*/

package com.dokoll.solutions.inc.developement.Utils;


/**

* @author Dököll Solutions, Inc.

* @version 2014.03.02.5.20.PM

*

*/

public class ImageKeyword {


private String UserID;

private String RoleID;

private String ImageBody;

private String UserIP;

private String PageID;

private String DocDate;

private String BrowserURL;


/**

* @return the userID

*/

public String getUserID() {

return UserID;

}


/**

* @param userID

* the userID to set

*/

public void setUserID(String userID) {

UserID = userID;

}


/**

* @return the roleID

*/

public String getRoleID() {

return RoleID;

}


/**

* @param roleID

* the roleID to set

*/

public void setRoleID(String roleID) {

RoleID = roleID;

}


/**

* @return the imageBody

*/

public String getImageBody() {

return ImageBody;

}


/**

* @param imageBody

* the imageBody to set

*/

public void setImageBody(String imageBody) {

ImageBody = imageBody;

}


/**

* @return the userIP

*/

public String getUserIP() {

return UserIP;

}


/**

* @param userIP

* the userIP to set

*/

public void setUserIP(String userIP) {

UserIP = userIP;

}


/**

* @return the pageID

*/

public String getPageID() {

return PageID;

}


/**

* @param pageID

* the pageID to set

*/

public void setPageID(String pageID) {

PageID = pageID;

}


/**

* @return the docDate

*/

public String getDocDate() {

return DocDate;

}


/**

* @param docDate

* the docDate to set

*/

public void setDocDate(String docDate) {

DocDate = docDate;

}


/**

* @return the browserURL

*/

public String getBrowserURL() {

return BrowserURL;

}


/**

* @param browserURL

* the browserURL to set

*/

public void setBrowserURL(String browserURL) {

BrowserURL = browserURL;

}


public ImageKeyword(String UserID, String RoleID, String ImageBody,

String UserIP, String PageID, String DocDate, String BrowserURL) {

this.UserID = UserID;

this.RoleID = RoleID;

this.ImageBody = ImageBody;

this.UserIP = UserIP;

this.UserIP = PageID;

this.DocDate = DocDate;

this.BrowserURL = BrowserURL;


}


}


Döcu Content View Documents (Xpages Style)

Get a copy of RetrieveNewUserImagesBackingBean.java BackingBean below. Follow instructions to start viewing your document as a list in an Xpage or Form.


BackingBean File Instructions, see screenshots for areas of interest

  1. Declare a variable GotoPage = "xpuserimageedit.xsp"; for view page

  2. Open DDE and fire Xpages Form called xpnewnoteslogsbycategory.xsp

  3. Click any row/link under UserName | Image

  4. xpuserimageedit.xsp should load to Browser with specific document accessed

  5. Likewise the image will load to frame respectively



Screenshots, JavaBean, BackingBean, Xpages excerpts...


RetrieveNewUserImagesBackingBean.java;


/**


* Copyright 2014 Dököll Solutions, Inc.

Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at


http://www.apache.org/licenses/LICENSE-2.0


Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.


* Program: RetrieveNewUserImagesBackingBean.java

* Created from Copy: 2014.03.02.5.31.PM

* New Retrieval BackingBean for Image Submissions via Xpages

*/


package com.dokoll.solutions.inc.developement.Utils;


//...

//java imports

import javax.faces.context.FacesContext;

import javax.servlet.http.HttpServletRequest;

import lotus.domino.View;

import lotus.domino.local.Database;

import lotus.domino.local.Document;

/**

* @author Dököll Solutions, Inc.

* @version 2014.03.02.5.31.PM

*

*/

public class RetrieveNewUserImagesBackingBean {

// Declare variable, load view name

final String ViewName = "UserImageBulletinView";

final String GotoPage = "xpuserimageedit.xsp";


HttpServletRequest req = (HttpServletRequest) FacesContext

.getCurrentInstance().getExternalContext().getRequest();

// ...

// Declare and variable to grab full URL

String baseURL = req.getRequestURL().toString().replace(

req.getRequestURI(), req.getContextPath());

// Get ImageKeyword collection

@SuppressWarnings( { })

public ImageKeyword[] getImageKeywords() {

// Declare Keyword Array

ImageKeyword[] imageKeywords = null;

try {

// get the current database being used

Database database = (Database) FacesContext.getCurrentInstance()

.getApplication().getVariableResolver().resolveVariable(

FacesContext.getCurrentInstance(), "database");

// Find the view in question

View view = database.getView(ViewName);

// load to console for debugging purposes

System.out.println("View Obtained..." + view);

// ...

Document sDoc;

// ...

Document ndoc;

// grab our first doc

sDoc = (Document) view.getFirstDocument();

// load to console for debugging purposes

System.out.println("RetrieveNewUserImagesBackingBean | Document Obtained..." + sDoc);

// load documents count

imageKeywords = new ImageKeyword[view.getEntryCount()];

// Run through ImageKeyword document collection

int docount = 0;

while (sDoc != null) {

// call ImageKeyword...

ImageKeyword imgKeyword = new ImageKeyword(null, null, null, null,null,null,null);

// render document(s) to variables of ImageKeyword object

imgKeyword.setUserID(sDoc.getItemValueString("userID"));

imgKeyword.setRoleID(sDoc.getItemValueString("roleID"));

imgKeyword.setPageID(sDoc.getItemValueString("PageID"));

imgKeyword.setUserIP(sDoc.getItemValueString("UserIP"));

imgKeyword.setImageBody(sDoc.getItemValueString("ImageBody"));

imgKeyword.setBrowserURL(baseURL + "/" + GotoPage + "?" + "documentId="


+ sDoc.getUniversalID()+ "&action="+"EditDocument" );

// Send ImageKeyword object into imageKeywords Array

imageKeywords[docount] = imgKeyword;

// increment counts

docount += 1;

// load next doc

ndoc = (Document) view.getNextDocument(sDoc);

sDoc = ndoc;

}

// return the Array

return imageKeywords;

// catch accordingly

} catch (Exception e) {

e.printStackTrace();

}

// return nothing

return null;

}


}



(1) Declaring variable to hold viewName, external database, Xpages Form name






(2) Viewing Documents via Form element




    (3) Xpages Form to Load List of Documents





(4) Viewing specific Doc





Conclusion:

You can now view documents containing images into new image URL submissions via Xpages using. This should facilitate setting page logo preferences that only certain users need to have in their hompage.


Questions, comments, please post a brief message on our Contact form on the main site.


Thank you for coming...


Version:2014.03.03.12.23.AM