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 @ <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">


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

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.

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

Special Thanks
Icons –
Drag Files out of Browser onto Desktop –
Drag File into Browser Upload –

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

  • bijeshkrishnadas
    June 16, 2011

    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
    June 16, 2011


    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 to show / hide the div.

    Using EL to create the menus by iterating through a nav model similar to 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 🙂



  • maxime_carrier
    July 25, 2012

    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).

    • John Brunswick
      July 25, 2012

       @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
        July 26, 2012

         @John Brunswick
        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.

  • maxime_carrier
    July 25, 2012

    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).

Leave a comment