Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Category Archives: Webcenter Portal/Spaces

Create image gallery in webcenter portal using content presenter templates


Best way to  develop Image gallery for  webcenter portal

1- Create a folder in UCM

2- Upload your Images under  this folder

3- create a content presenter template that use css & jquery .. I used fancy box component for the image gallery.


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:ui="http://java.sun.com/jsf/facelets">

<af:resource type="css" source="/../fancybox/jquery.fancybox.css"/>
<af:resource type="javascript" source="/../fancybox/jquery.fancybox.js"/>
<af:resource type="javascript" source="/../fancybox/jquery.fancybox.pack.js"/>
<af:resource type="javascript" source="/../fancybox/jquery.mousewheel-3.0.4.pack.js"/>
<af:resource type="css">
#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}

h1 {
margin: 30px 0 15px 0;
font-size: 30px;
font-weight: bold;
font-family: Arial;
}

h1 span {
font-size: 50%;
letter-spacing: -0.05em;
}

hr {
border: none;
height: 1px; line-height: 1px;
background: #E5E5E5;
margin-bottom: 20px;
padding: 0;
}

p {
margin: 0;
padding: 7px 0;
}

a {
outline: none;
}

img.gallery {
border: 1px solid #BBB;
padding: 2px;
margin: 10px 20px 10px 0;
vertical-align: top;
}

a img.last {
margin-right: 0;
}

ul {
margin-bottom: 24px;
padding-left: 30px;
}
</af:resource>
<f:verbatim/>
<dt:contentListTemplateDef var="nodes">
<af:popup id="cpPopup" eventContext="launcher" contentDelivery="lazyUncached" launcherVar="source">
<af:setPropertyListener type="popupFetch" from="#{node}" to="#{requestScope.oracleCPPopupCurrentNode}"/>
<af:noteWindow id="cpNw">
<dt:contentTemplate node="#{requestScope.oracleCPPopupCurrentNode}" view="oracle.webcenter.content.templates.default.document.details" nodesHint="#{nodes}" id="ctmv1"/>
</af:noteWindow>
</af:popup>
<af:panelGroupLayout id="images-wrapp" styleClass="images-wrapp">
<af:iterator rows="0" var="node" varStatus="iterator" value="#{nodes}" id="it0">
<af:panelGroupLayout id="imageitem" styleClass="image-item">
<af:outputText escape="false" value="&lt;a class=&quot;grouped_elements&quot; title=&quot;#{node.propertyMap['xComments'] != 'xComments: ' ? node.propertyMap['xComments'].asTextHtml : node.propertyMap['dDocTitle'].value.stringValue}&quot; rel=&quot;group&quot; href=&quot;#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&amp;dID=#{node.propertyMap['dID'].value}&amp;dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&amp;allowInterrupt=1&amp;ext=.jpg&quot;>"/>
<af:image source="#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&amp;dDocName=#{node.propertyMap['dDocTitle'].value}&amp;dID=#{node.propertyMap['dID'].value}&amp;RevisionSelectionMethod=specific&amp;Rendition=Preview&amp;allowInterrupt=1" styleClass="gallery"/>
<af:outputText escape="false" value="&lt;/a>"/>
</af:panelGroupLayout>
</af:iterator>
</af:panelGroupLayout>
</dt:contentListTemplateDef>
</jsp:root>

5- add content presenter to your page where the content is “content under folder”& template the one created in the step above.

Update web.xml in webcenter portal


Sometimes you need to update the web.xml for webcenter portal if you want to disable compression or add servelets or change the session timeout.

As you know the webcenter potal (AKA Spaces before) is already deployed application .

In order to update the web.xml you need to create extension shared library and add web.xml to it with your updates. here are simple steps to do it:

  1. download webcenter extensions for jdevloper from here
  2. add these extensions to your jdevloper follow this blog
  3. create new application “webcenter portal server extension”
  4. you will find 2 projects “PortalExtension” & “PortalSharedLibrary”
  5. expand PortalSharedLibrary and find the web.xml under WEB-INF
  6. update web.xml as you want
  7. right click on project > project properties > deployment> edit
  8. under web files mark the web.xml to be included in the deployment.
  9. ok then ok
  10. locate the MANIFEST.MF under the project
  11. change the version Implementation-Version & Specification-Version
  12. save
  13. deploy to the server
  14. restart the managed server

Change the webcenter portal language selector task flow to be links instead of popup


The current portal language selector is a popup that shows the available languages to select from .

what if you need to create links or drop down with 2 languages only?!

you can use this code and pass the locale to the parameters

 <af:commandLink styleClass="topNavLinks frlink" rendered="#{facesContext.externalContext.requestLocale eq 'en'}" partialSubmit="false" id="frlink" actionListener="#{o_w_wa_chooseLanguage.changeLanguage}" text="French">
<f:attribute name="wcLangId" value="fr"/>
</af:commandLink>
<af:commandLink styleClass="topNavLinks enlink" rendered="#{facesContext.externalContext.requestLocale eq 'fr'}" partialSubmit="false" id="enlink" actionListener="#{o_w_wa_chooseLanguage.changeLanguage}" text="English">
<f:attribute name="wcLangId" value="en"/>
</af:commandLink>

Webcenter portal & ADF Responsive


After implementing ADF & portal responsive I have concluded many hints to follow while implementing
The main problem of the responsive it that adf components render as table
1- Limit the use of the components that render tables in the html dom and use html code if needed in verbatim tag
2- Limit the use of layout component that has tables or horizontal layout as it render in tables
Hints
• Preferably use bootstrap templates.
• Create templates with panelgrouplayout vertical & default and create a custom style class to make it to horizontal example ;

.VTOH{
width:100%;
float:left;
margin:0;
padding:0;
} 

• In portal use panel customizable under each other don’t implement it horizontal preferably add it in panelgrouplautout and use the above class & css to draw your page.
• Do the responsive in one CSS file and import it in your template and use media queries inside it.
• All width should in percentage. You may use with for small components on the page but that would be difficult in responsive.
• If you are obliged or have to use component that have fixed width use java script to change the width in responsive.

Webcenter Sites Vs. Webcenter Portal


After Oracle acquired FatWire Software , Oracle completed its suite with a powerful web content management solution for business users.

Webcenter Sites we used to develop websites that is connected with the Webcenter content using WCM, by creating templates and data files and store them at the Webcenter content server which enables direct editing and contribution.

Webcenter Sites is a powerful web content management solution where has the capablilty of  creating,  and publishing business-user websites focused on  targeted audiences.

on the other hand Webcenter portal framework designed for intranet and extranet which has the capabilities of interaction and sharing , which integrate with SOA / Webcenter content  to provide services as document services , workflows and business processes.

%d bloggers like this: