Screencast 6 – WebCenter Portal Mobile Templates using Adaptive Styles

Sep 16, 2011

5 Flares 5 Flares ×

It is difficult to have a discussion around web experience today without talking about mobile. Mobile has rapidly evolved from something that only a technically inclined group of users participated in (hey – look I can view the weather forecast on my phone!), to an omnipresent extension of our navigation, knowledge and interaction with the world. It is not surprising then that organizations need to embrace technical capabilities to engage customers, partners and prospects within this medium.

WebCenter Portal offers a variety of capabilities around mobile, some running on device, while others offering development platforms to cater to a wide range of devices – both off and on device. The pace of device capability is hurdling forward at a tremendous pace, as table and other form factors have grown rapidly in adoption. Depending on the project needs with a WebCenter Portal it may make sense to look at using CSS3 and Adaptive Design techniques to provide both a desktop browser, tablet and mobile experience from a single code base*

Only a few short years ago it was important to cater to a very wide range of devices web capabilities. Thankfully those days are coming to a close, as consumers of the “Facebook” generation frequently want the best access to news, events and services related to them and their social interactions.

Ok – enough around the introduction. How do we take WebCenter Portal onto a mobile? What do we want to achieve with the mobile version?

What we will Achieve
Technical Approach
WebCenter Portal Adaptive Page Template
Media Query CSS for Page Template
Project Source Code
Excellent Supporting Resources

What we will Achieve

The mobile experience will optimize the browsing experience for an iPhone style viewport, removing the login box and dropping the Offerings to below the page body. This simple example shows how with basic CSS we can easily change the visibility and positioning of the elements. Keep in mind that because this is client side, some items still remain within the document object model, but are removed in the user’s view. With EL these could be removed when the sever processes the user request, so that they would not show in the page markup behind the scenes, but in our case we are just going to use this as an example to illustrate Adaptive Design.
We will also change the navigation for easier use on a small form factor device. In our case – and this is just an example – we are going to disable the dropdown functionality available on the desktop, assuming that child pages would have their own respective detail navigation. In an actual deployment it may be more likely to use other techniques to handle this, but we do it here to show the difference that various CSS modification based on viewport size can have.

The figure below roughly depicts what happens when our “viewport” drops below 600px. The site is bare-bones, but setup to convey key points that you can work into your own designs.

How will we do it?

CC3 Media Queries – CSS3 affords us the ability to understand the size of a user’s viewport and respond accordingly with styles tailored to a given user’s device. This means that we can adjust our user interface on the basis of desktop, tablet, mobile and even the big display in Times Square as needed
Portal Skin Family – WebCenter offers some nice skins around the Fusion UI, but for our example we need to set our skin to “simple” in the trinidad-config.xml file to give us the most control over the page style.
Viewport Meta Tag – We need to add a meta tag to let the browser know how to behave with our page (see more detail related to mobile meta tags) to keep our work abstracted from the core of WebCenter I used JQuery to append the meta tag within the header as follows$(‘head’).append(”);
WebCenter Page Template – For the purposes of this demonstration I created a slimmed down template with IDs and classes that make it very CSS edit friendly for this example.
IE – what would a post about the web be like without some caveats around IE? IE9 embraces the latest around media queries, but prior versions need a little extra love. We won’t showcase it in our example, but this great post over at Web Designer Wall – Adaptive & Responsive Design with CSS Media Queries dives right in to the gritty details of legacy support and how with a few extra files it is actually not too bad.

pageTemplate_adaptive.jspx – Adaptive Template ADF Code

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable"
          xmlns:c="http://java.sun.com/jsp/jstl/core">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <af:pageTemplateDef var="attrs">

<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></af:resource>

<af:panelGroupLayout id="webcenterroot" layout="scroll" styleClass="webcenterroot">

<f:verbatim>
<!-- disable iPhone inital scale -->
&lt;script>
&#36;(&#39;head&#39;).append(&#39;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, minimum-scale=1.0, maximum-scale=1.0&quot; /&gt;&#39;);
&lt;/script>

<af:resource type="css" source="http://127.0.0.1:7101/AdaptiveTemplatePortal-Portal-context-root/css/mediaquery.css"></af:resource>

</f:verbatim>

    <!-- This will dictate overall width -->
     <af:panelGroupLayout id="contentbody" layout="vertical" styleClass="contentbody" >

        <div id="mobileloginlink">
          <a href="../pages/login.jspx">Account Login</a>
        </div>

        <af:panelBorderLayout id="header" styleClass="header">

          <div id="sitelogo"></div>

          <f:facet name="end">
            <af:panelGroupLayout layout="vertical" id="headerloginbox" styleClass="headerloginbox" halign="end">

                <af:outputText id="ot_username"
                               value="Welcome #{securityContext.userName}"
                               rendered="#{attrs.showGreetings}"/>

                <af:goLink id="gl_adminlink" text="Administration"
                           destination="/admin"
                           rendered="#{attrs.showAdmin and !attrs.isAdminPage}" />

                <af:commandLink id="cl_logoutlink" text="Logout"
                                action="#{o_w_s_l_LoginBackingBean.doLogout}"
                                rendered="#{securityContext.authenticated}" />

              <af:subform id="sf_loginbox" defaultCommand="pt_logincb">

                <af:panelFormLayout id="pf_userloginform">

                  <af:panelLabelAndMessage id="pl_username" label="User Name">
                    <af:inputText id="pt_it1" simple="true" value="#{o_w_s_l_LoginBackingBean.userName}"/>
                  </af:panelLabelAndMessage>

                  <af:panelLabelAndMessage id="pl_password" label="Password">
                    <af:inputText id="pt_it2" simple="true" value="#{o_w_s_l_LoginBackingBean.password}" secret="true"/>
                  </af:panelLabelAndMessage>
                </af:panelFormLayout>

                <af:panelGroupLayout id="pl_loginbutton" layout="horizontal" >
                  <af:commandLink id="pt_logincb" text="Login" action="#{o_w_s_l_LoginBackingBean.doLogin}"/>
                </af:panelGroupLayout>

              </af:subform>

            </af:panelGroupLayout>
          </f:facet>
        </af:panelBorderLayout>

        <af:panelGroupLayout id="topnavigation" layout="horizontal" styleClass="topnavigation">

        <!-- UL / CSS based nav -->
        <ul id="nav">
        <c:set var="node" value="${navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}" scope="session"/>
        <af:forEach var="node" varStatus="vs" items="#{navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}">
        <li class="parentnode"><a href="/webcenter${menu.goLinkPrettyUrl}">${node.title}</a>
            <c:if test="${not empty node.children}">
              <ul>
                <c:forEach var="child" items="#{node.children}">
                  <li class="childnode">
                  <a href="/webcenter${child.goLinkPrettyUrl}">${child.title}</a>
                  </li>
                </c:forEach>
              </ul>
            </c:if>
        </li>
        </af:forEach>
        </ul>

        </af:panelGroupLayout>

        <af:facetRef facetName="content"></af:facetRef>

        <div class="clear"></div>

<br/>
        <af:panelGroupLayout id="footer" styleClass="footer" >
          <af:outputText id="ot_copyright" value="Some Copyright Info Here..."/>
        </af:panelGroupLayout>

      </af:panelGroupLayout>
    </af:panelGroupLayout>

    <af:xmlContent>
      <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
        <display-name>pageTemplate_adaptive</display-name>
        <facet>
          <description>content</description>
          <facet-name>content</facet-name>
        </facet>
      </component>
    </af:xmlContent>
  </af:pageTemplateDef>
</jsp:root>

mediaquery.css – CSS3 using Media Queries
Source code included in download package below code block

.contentbody
{
  width: 960px;
  margin: 0 auto;
}

.header
{
  height: 50px;
}

#maincontent {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}


#sitelogo
{
  background: url("../images/webcenter.png") ;
  height: 61px;
  width: 126px;
}

#mobileloginlink
{
  display: none;
}

.footer
{
}

.clear
{
  clear: both;
}


#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	float:left;
	width:100%;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#888;
	text-decoration:none;
}
#nav a:hover{
	color:#fff;
	background:#6b0c36;
}
#nav ul{
	background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:absolute;
	left:-9999px;
  margin-left: -40px;
}
#nav ul li{
	float:none;
}
#nav ul a{
	white-space:nowrap;
}
#nav li:hover ul{
	left:0;
}
#nav li:hover a{
	background:#000;
}
#nav li:hover ul a{
	text-decoration:none;
  font-weight: normal;
}
#nav li:hover ul li a:hover{
	background:#333;
}

/* CSS that will be used for screens <= 600px */
@media all and (max-width: 600px)
{

.headerloginbox
{
  display: none;
}

#mobileloginlink
{
  display: block;
}

.contentbody
{
  width: 300px;
  margin: 0 auto;
}  

  #maincontent
  {
    width: 100%;
  }

  #sidebar
  {
    clear: both;
    float: left;
    background: #efefef;
  }

  #nav li:hover ul a{
    display:none;
  }
}

Sample Code Download

Download the sample portal project code – please note that it is not 100% identical to the video code, but has all key elements (in the video the mediaquery.css file was located in “styles” vs “css” as in the download version.

Great Resources

Many other great techniques are possible through Adaptive Design. I suggest that you check out the following posts for more information.

Web Designer Wall – Adaptive & Responsive Design with CSS3 Media Queries
HTML5Rocks – “Mobifying” Your HTML5 Site
Yannick Ongena - WebCenter 11g PS3 Tutorial: Building a WebCenter Template

Happy mobiling!

* Please note that this blog represents my own views and not those of Oracle. The techniques illustrated here are an implementation approach and sample.

31 comments 9 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

rajasree 5 pts

Hi John,

I have a created a webcenter portal application. I have a requirement that it should be mobile friendly. I am trying to implement that using bootstrap. In desktop it looks fine. But bootstrap-responsive.css is not working with portal application. When I test my application only with html then it works fine. But in webcenter portal, its not taking. Can you provide me suggestions.

Thanks,

Rajasree

What we will Achieve

How will we do it?

Sample Code Download

Great Resources

Related Articles

Trackbacks