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