Recent Posts
Archives
Categories
Blog Stats
- 20,633 hits
Featured Blogs
Advertisements
Into the charm of Oracle Webcenter and ADF
We all faced this problem where we have a view object with bind variables that appears automatically in the query for this view object.
here is a small till how to hide it.
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="<a class="grouped_elements" title="#{node.propertyMap['xComments'] != 'xComments: ' ? node.propertyMap['xComments'].asTextHtml : node.propertyMap['dDocTitle'].value.stringValue}" rel="group" href="#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&dID=#{node.propertyMap['dID'].value}&dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&allowInterrupt=1&ext=.jpg">"/> <af:image source="#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&dDocName=#{node.propertyMap['dDocTitle'].value}&dID=#{node.propertyMap['dID'].value}&RevisionSelectionMethod=specific&Rendition=Preview&allowInterrupt=1" styleClass="gallery"/> <af:outputText escape="false" value="</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.
Many requirements asks to call external service using ajax or do some javascript like using js calendars and on user click send the response to the bean to save it in database or to do some business validation.
The way to do that is using serverListener & clientListener .
The serverListener tag is a declarative way to register a server-side listener that should be executed when a custom client event is fired.
while The clientListener tag is a declarative way to register a client-side listener script to be executed when a specific event type is fired.
I have created a small demo application that calls ajax call & jquery to get location & ip and then we will send it to back bean which will be printed in the console.
Lets see the steps
1.create a jspx page and add a button like this
<af:panelGroupLayout id="pgl1" layout="vertical"> <af:commandButton text="Get My Location" id="cb1"> <af:clientListener type="action" method="callAjaxAndNotifyServer"/> <af:serverListener type="servListener" method="#{backingBeanScope.DemoBB.getAjaxCallbackValue}"/> </af:commandButton> </af:panelGroupLayout>
2. add af:resource with the code below
var actionbtn; var response_Json function callAjaxAndNotifyServer(actionEvent) { actionEvent.cancel(); actionbtn = actionEvent.getSource();// alert(actionbtn); $.ajax( { url : "http://ip-api.com/json/", data : '', type : "GET", error : function (XMLHttpRequest, textStatus, errorThrown) { alert('error'); ajaxError(XMLHttpRequest, textStatus, errorThrown); }, success : function (data) { response_Json = JSON.stringify(data); console.log(response_Json); AdfCustomEvent.queue(actionEvent.getSource(), "servListener", { fvalue : response_Json },true); return false; }, error : function (xhr, status, err) { console.log('error'); var err = eval("(" + xhr.responseText + ")"); alert('' + err.Message); console.log('Error in Ajax call:' + err.Message); } }); }
where
actionEvent.cancel(); is needed if you are using commandbutton without partialsubmit=”true”
and
AdfCustomEvent.queue(actionEvent.getSource(), “servListener”,
{
fvalue : response_Json
},true);
return false;
registers the custom event and set parameter “fvalue” with the json string value
3.create a bean for example backbean demoBB with method name getAjaxCallbackValue
that you already referenced in your serverListner in step 1 & add the code to this method as follows to print the value
public void getAjaxCallbackValue(ClientEvent clientEvent) { System.out.println("-----------------------------------------"); System.out.println(clientEvent.getParameters().get("fvalue")); System.out.println("-----------------------------------------"); }
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:
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>