Screencast 3 – HTML5, UCM and WebCenter "QuickBox"

Screencast 3 – HTML5, UCM and WebCenter "QuickBox"

Though HTML5 formalization is still underway, a number of powerful features are already seeing use on the Web. In the following example we will create a WebCenter page that alllows files to be drag and dropped from the desktop into a browser, checking the content into Universal Content Management (UCM) and dragged out of the browser and onto the desktop from UCM. This is done by using new File APIs, along with capabilities in UCM for storage and WebCenter for presentation, to create a browser-based file storage solution inspired by DropBox.

Getting Started
In order to get started, we will need a series of code snippits and libraries. The majority of our client side source has been developed by Weeby and can be found on Google Code. We will make some UI enhancements, as well as leverage a servlet that is going to use RIDC to push files into UCM in place of the PHP server side processing included in the example.  This source is included at the bottom of this page.

To round out the client side code snippits, we also leverage FancyBox for asthetics, as well as JQuery hosted on Google’s CDN for ajax call handling.

Additionally, 2 Java libraries will be needed within our Oracle.ucm.ridc-11.1.1.jar (found within JDeveloper 11.1.1.4 @ <your development machine>/jdeveloper/ucm/Distribution/RIDC/oracle.ucm.ridc-11.1.1.jar and Commons-fileupload-1.2.2.jar.

WebCenter QuickBox Navigation
For Page Templates exposing navigation models through Unordered List markup it is possible to easily add a static node for authenticated users (please note that the underlying pages being linked to must have some form of security applied) based on EL markup added to the Page Template.

[sourcecode language=”java” gutter=”false” wraplines=”true”]
<div id="navbox">
<c:set var="navNodes" value="${navigationContext.defaultNavigationModel.listModel[‘startNode=/, includeStartNode=false’]}" scope="session"/>
<ul id="nav">
<c:forEach var="menu" varStatus="vs" items="${navNodes}">
<li class="parentnode">

</li>
</c:forEach>

<c:if test="${securityContext.authenticated}">
<li><a id="quickbox" href="http://192.168.1.109:7101/HTML5UCMSample/upload.html"><img src="http://QuickBoxHost/HTML5UCMSample/images/quickbox24.png" border="0" style="vertical-align: middle; margin: -6px; padding-right: 10px;" /> QuickBox</a></li>
</c:if>
</div>
[/sourcecode]

Toward the top of the page resources are being called via the Resrouce markup tag for inclusion. In our case components required for Fancybox, beyond an already included JQuery library, are added.

Additional Technical Notes
Disperssion – As you are working with the Web URLs generated by UCM, it is helpful to be aware of some changes based on Disperssion rules in UCM. Details are available at Changes to File Store Provider in UCM PS3.

HTML Web Sockets
Due to UCM needing processing time to create renditions and release copies of a submitted document, we are going to poll a servlet that renders the files from UCM. In an ideal world – and with more time – it would be ideal to leverage the HTML5 Web Socket capability. The WebSocket API “enables Web pages to use the WebSocket protocol for two-way communication with a remote host” and drastically reduces a ton of bandwidth soaked up with polling requests or that had to have been managed via a Java Applet previously.

HTML5 File API
In the example that we have highlighted, much of the funtionality is due to the HTMl5 File API

Special Thanks
Icons – http://wefunction.com/2008/07/function-free-icon-set/
Drag Files out of Browser onto Desktop – http://www.thecssninja.com/javascript/gmail-dragout
Drag File into Browser Upload – http://code.google.com/p/dnd-file-upload/source/browse/trunk/example.html?r=4

Download the Project Source Code
E2 Workbench HTML5 UCM WebCenter QuickBox Source

5 comments
maxime_carrier
maxime_carrier

Hi, I know it is a little off subject, but where can we find the source code of the Avitek portal you have in background of your video (if it is available).   Thanks!

John Brunswick
John Brunswick

@bijeshkrishnadas bijeshkrishnadas For the dropdown login I ended up using login markup consisting of EL that uses some WebCenter tags. The actual dropdown itself is CSS and JQuery based. You could use the following tags to provide the items to wrap in a div that you can apply the JQuery to User <af:inputText id="pt_it1" value="#{o_w_s_l_LoginBackingBean.userName}"/> Password <af:inputText id="pt_it2" secret="true" value="#{o_w_s_l_LoginBackingBean.password}"/> <af:commandLink id="pt_logincb" text="Login" action="#{o_w_s_l_LoginBackingBean.doLogin}"/> Pretty sure that I just ended up using the Toggle JQuery method on an extra nav link http://api.jquery.com/toggle/ to show / hide the div. Using EL to create the menus by iterating through a nav model similar to http://www.johnbrunswick.com/2011/01/webcenter-ps3-navigation-models-and-css-menus/ would give you the ability to add an extra node for unauthenticated users that could call the JQuery trigger method on the div wrapping your login components. Keep in mind that this is rough, but should hopefully provide the gist :-) Cheers, John

bijeshkrishnadas
bijeshkrishnadas

That's neat, John. Slightly off-topic but I was wondering how you got the popup login-thingie working. I tried using a simple html form submitting to "http://<host>/webcenter/wc_authentication". Using this authenticates the user but also attempts a redirect to some page that is not found.

John Brunswick
John Brunswick

 @maxime_carrier Not a problem - it is an internal instance we leverage at Oracle to demonstrate various portions of the product set.  If you are looking for a specific portion of the demo I could try to help point you in the right direction.  Hope that helps!

maxime_carrier
maxime_carrier

 @John Brunswick  Hi,   thanks for the quick reply! It is the section with facebook / twitter / rss (the headlines) that I wanted to know how it worked. I watched your video on exposing twitter data, but I'm stucked on the data controls because it asks me a password (twitter doesn't show rss thread anymore, we have to use a workaround) and I was also interested of adding facebook share option on a WebCenter website.