Döcu Content

User Homepage Before

Xpages

Xpages Drag and Drop Design


Introduction:

In this tutorial, we want to show the bare minimum of a Design meant for User Homepage, with the possibility of including specific preferences. For the time being, the page will be desgined using the Drag and Drop feature within Domino Desginer Environement (DDE).


While this design expects to look different when completed, the current hopes to give you an idea how the page might look in your browser. We will be writing BackingBean classes to work with controls on the page, in next tutorial.


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

Create a new Xpages form, drag and drop image, link, inputText, and other controls to page. Add iframes to reference other App items into the User Hompage.


Take a look at the sections involved through screenshots; bare in mind, some items will be rendered as custom controls, using the includePage feature in DDE.


Copy and paste XML code below... we recommend watching the following Youtube video for addtional information about the current homepage design:

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


Döcu Content Design Excerpts


Upper portion of page design: the following will house the logo, banner/top navigation area, breadcrumbs, user data, and some controls...




Copy and Paste Page Design code


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

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

<xp:tr>

<xp:td>

<xp:panel style="width:243.0px;height:75.0px">

<xp:image url="/Images%2FBoyHomeSchools.jpg"

id="image1" style="height:72.0px;width:244.0px">

</xp:image></xp:panel></xp:td>

<xp:td>

<xp:panel style="width:763.0px;height:78.0px">

<xp:tabbedPanel id="tabbedPanel4">

<xp:tabPanel label="Home" id="tabPanel4"></xp:tabPanel>

<xp:tabPanel label="About" id="tabPanel5"></xp:tabPanel>

<xp:tabPanel label="Contact" id="tabPanel6"></xp:tabPanel>

<xp:tabPanel label="Support" id="tabPanel7"></xp:tabPanel>

</xp:tabbedPanel>

</xp:panel></xp:td>

<xp:td>

<xp:panel style="width:145.0px;height:73.0px;background-color:rgb(192,192,192)">

<xp:link escape="true" text="SiteMap" id="link1"></xp:link> |&#160;

<xp:link escape="true" text="FAQs" id="link2"></xp:link>

<xp:br></xp:br>LoggedIn As</xp:panel></xp:td>

</xp:tr>

<xp:tr>

<xp:td colspan="3">

<xp:panel style="background-color:rgb(192,192,192)">

<xp:button id="button1" style="width:244.0px"

value="-------------------------------------------">

</xp:button>

|&#160;

<xp:link escape="true" text="Link" id="link42"></xp:link>

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;|&#160;

<xp:link escape="true" text="Link" id="link43"></xp:link>

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;|

<xp:link escape="true" text="Link" id="link44"></xp:link>

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;|&#160;

<xp:link escape="true" text="Link" id="link45"></xp:link>

&#160;

<xp:br></xp:br>

<hr></hr>

</xp:panel></xp:td>

</xp:tr>

<xp:tr>

<xp:td rowspan="5">

<xp:panel

style="height:211.0px;background-color:rgb(192,192,192);font-weight:bold">

<xp:tabbedPanel id="tabbedPanel1"

style="color:rgb(255,255,255)">

<xp:tabPanel label="Page Dashboards"

id="tabPanel1" style="color:rgb(255,255,128)">

<xp:link escape="true" text="Link"

id="link11">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link12">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link13">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link14">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link37">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link38">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link39">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link40">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link41">

</xp:link></xp:tabPanel>


</xp:tabbedPanel>

</xp:panel><xp:panel style="height:146.0px;background-color:rgb(192,192,192);font-weight:bold"><xp:tabbedPanel id="tabbedPanel2">

<xp:tabPanel label="Page Resources" id="tabPanel2">

<xp:link escape="true" text="Link" id="link3">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link4">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link5">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link6">

</xp:link></xp:tabPanel>

</xp:tabbedPanel></xp:panel>

<xp:panel

style="height:253.0px;background-color:rgb(192,192,192);font-weight:bold">

<xp:tabbedPanel id="tabbedPanel3">

<xp:tabPanel label="Page Miscellaneous"

id="tabPanel3">

<xp:link escape="true" text="Link"

id="link7">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link8">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link9">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link10">

</xp:link>

</xp:tabPanel>


</xp:tabbedPanel>

</xp:panel></xp:td>

<xp:td>

<xp:table style="width:764.0px">

<xp:tr>

<xp:td style="font-weight:bold;font-size:12pt">FirstName</xp:td>

<xp:td><xp:span style="font-weight:bold;font-size:12pt">LastName</xp:span></xp:td>

<xp:td><xp:span style="font-weight:bold;font-size:13pt">Role</xp:span></xp:td>

<xp:td><xp:span style="font-weight:bold;font-size:12pt">UserName</xp:span></xp:td>

</xp:tr>

<xp:tr>

<xp:td>

<xp:inputText id="inputText1"></xp:inputText></xp:td>

<xp:td>

<xp:inputText id="inputText2"></xp:inputText></xp:td>

<xp:td>

<xp:inputText id="inputText3"></xp:inputText></xp:td>

<xp:td>

<xp:inputText id="inputText4"></xp:inputText></xp:td>

</xp:tr>

</xp:table>

</xp:td>

<xp:td>

<xp:tabbedPanel id="tabbedPanel5" style="background-color:rgb(192,192,192)">

<xp:tabPanel label="Ads" id="tabPanel8">

<xp:link escape="true" text="Link"

id="link15">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link16">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link17">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link18">

</xp:link></xp:tabPanel>

</xp:tabbedPanel></xp:td>

</xp:tr>

<xp:tr>

<xp:td rowspan="3"><iframe src="./xpbycategory.xsp" width="750" height="370"></iframe></xp:td>

<xp:td><xp:tabbedPanel id="tabbedPanel6">

<xp:tabPanel label="Social Media" id="tabPanel9">

<xp:link escape="true" text="Link" id="link19">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link20">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link21">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link22">

</xp:link></xp:tabPanel>

</xp:tabbedPanel></xp:td>

</xp:tr>

<xp:tr>

<xp:td><xp:tabbedPanel id="tabbedPanel7">

<xp:tabPanel label="Tutorials" id="tabPanel10">

<xp:link escape="true" text="Link" id="link23">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link24">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link25">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link26">

</xp:link></xp:tabPanel>

</xp:tabbedPanel></xp:td>

</xp:tr>

<xp:tr>

<xp:td><xp:tabbedPanel id="tabbedPanel8">

<xp:tabPanel label="Quick Links" id="tabPanel11">

<xp:link escape="true" text="Link" id="link27">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link28">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link29">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link30">

</xp:link></xp:tabPanel>

</xp:tabbedPanel></xp:td>

</xp:tr>

<xp:tr>

<xp:td><iframe src="./xpshowimages.xsp" width="750" height="150"></iframe></xp:td>

<xp:td><xp:tabbedPanel id="tabbedPanel9">

<xp:tabPanel label="Wiz-Kids" id="tabPanel12">

<xp:link escape="true" text="Link" id="link31">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link32">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link33">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link" id="link34">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link35">

</xp:link>

<xp:br></xp:br>

<xp:link escape="true" text="Link"

id="link36">

</xp:link></xp:tabPanel>

</xp:tabbedPanel></xp:td>

</xp:tr>

</xp:table></xp:view>


Döcu Content Design View (Browser)


Full page design: Here is what the page might look like when rendered in the user's browser. Again, Java classes will be ewirtten to pull in user preferences and feed the page, either by link, inputText, or custom controls...





Conclusion:

User will be able to view own, personal items, preferences previously submitted either by self or an Admin in the App. We hope to include ability to manipulate certain controls if user needs to make a change in the own homepage look and feel.


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


Thank you for coming...


Version:2014.03.04.5.41.AM