Skip to content

Instantly share code, notes, and snippets.

@brito

brito/city-of-la-wcp-template.jspx

Created September 22, 2015 19:30
Show Gist options
  • Save brito/9102c12cff03cd24b412 to your computer and use it in GitHub Desktop.
Save brito/9102c12cff03cd24b412 to your computer and use it in GitHub Desktop.
Download ZIP
Oracle WebCenter Portal Template Example
Raw
city-of-la-wcp-template.jspx
<?xml version='1.0' encoding='UTF-8'?>
<!--
City of Los Angeles Template
July 7, 2015
Oracle WebCenter Portal Template
-->
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:wcshell="http://xmlns.oracle.com/webcenter/shell"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:wcdc="http://xmlns.oracle.com/webcenter/spaces/taglib">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<af:pageTemplateDef var="attrs">
<c:set var="ucm" value="/content/conn/myUCM/path/WebCenterSpaces-Root"/>
<c:set var="shared" value="${ucm}/Web"/>
<c:set var="docs" value="${ucm}/lacity/web"/>
<af:resource type="css" source="${shared}/font-awesome/css/font-awesome.min.css"/>
<af:resource type="javascript" source="${shared}/jquery/jquery-2.0.0.min.js"/>
<af:resource type="javascript" source="${shared}/feature/jquery.keytar.js"/>
<c:set var="backgroundImage" value="url(/webcenter${docs}/griffith.jpg)"/>
<c:set var="navBackground" value="linear-gradient(to right,hsla(195,100%,45%,.5) 81%,transparent)"/>
<c:set var="logo" value="/webcenter${docs}/LA_seal.png"/>
<c:set var="footerLogo" value="/webcenter${docs}/LASanitation_logo_fin.PNG"/>
<script>
$('<meta/>', {name: 'viewport',content: 'width=device-width,initial-scale=1'})
.appendTo('head');
</script>
<c:set var="nav" value="${navigationContext.defaultNavigationModel.listModel['startNode=/, includeStartNode=false']}" scope="session"/>
<c:set var="userProfilePic" value="#{webCenterProfile[securityContext.userName].photoURI['small']}"/>
<!-- template layout and skin -->
<style>
/* debug * / * { background:rgba(255,0,0,.1); outline:1px solid } /**/
/* reset */
a, a *, a:hover * { text-decoration:none !important }
/* product overrides */
.x1bd { background-color:none !important;}
.x193, .x17t, .af_panelCustomizable, .x1ci { padding:0; margin:0 }
.x17h, .x185, .af_panelGroupLayout, .x1a { overflow:hidden !important }
.x187.p_AFMedium { border:0 }
.p_AFReadOnly { min-width:21em }
.x18f h2 { display:block !important; font-size:17px !important }
tr.xmi { background:transparent }
.x3q a, .PortletHeaderLink, .xc6, .PortletSubHeaderLink, .xce, .xfd, .xft, .xfu, .xfv, .xfw, .xfx, .xfz {
color:#3c99cd; font-family:inherit }
.sidebar .x17t { border-top:1px solid #ccc; margin-bottom:32px }
.xgd.p_AFReadOnly .xgh { font-size:inherit }
.x1bb.p_AFCore.p_AFDefault { border:0; box-shadow:none; -webkit-box-shadow:none }
.x185.p_AFCore.p_AFDefault,
.x1bd.p_AFCore.p_AFDefault { border:0; background:transparent; padding:0 } /* task flow box */
.xk3.x1ze { background:#d3dde8 } /* document search results header */
.x1bd {background-color:transparent } /* hide white background that runs over grey gradient*/
iframe.xnn{ min-height:600px !important }
.x1bf.p_AFMedium { background:transparent; border:none }
.x1bg { color:inherit }
td.x1bg.p_AFMedium { font-size:18px; padding-top:1em }
/* adaptive panelGroupLayout */
@media (max-width:960px){
.x1dn.xpj.x1a { margin:0 10px }
.x1dn.xpj.x1a td, td[width] { float:left; min-width:320px; width:50% }}
/* shrinking nav text */
@media (max-width:660px){ #nav a, #nav span { font-size:12px }}
/* scale (typography) */
body.x11w, body.af_document, body.x14j { font:400 15px/1.6 HelveticaNeue-Light, Segoe UI, sans-serif }
[class^="icon-"], [class*=" icon-"] { font-family:FontAwesome, HelveticaNeue-Light, Segoe UI, sans-serif !important; }
h1,h2,h3,h4,h5,h6,p { text-rendering: optimizeLegibility }
h1 { margin:14px 0; font:24pt/1.01 HelveticaNeue-Light, Segoe UI, sans-serif }
h2 { margin:14px 0; font:17pt/1.1 HelveticaNeue-Light, Segoe UI, sans-serif; letter-spacing:-.02em }
p { font-size:14px; line-height:1.6; margin-bottom:17px }
b { font-weight:bold }
a { color:#3c99cd }
ul { list-style:square; padding:0 0 0 17px }
ul li a { font-size:small }
br { display:none }
/* skin */
.contain { max-width:960px; margin:auto; position:relative }
@media (max-width:960px){ /* .af_panelGroupLayout td { float:left; margin:auto } */ }
html { background:${backgroundImage} no-repeat top center / cover; width:100%; height:100% }
body.x11w, body.af_document, body.x14j { background:transparent }
header ~ .contain > .x1cv { min-height:66vh; margin:0; padding:1.6em .6em;
background:hsla(208,41%,95%,.8) }
/* header */
header#header { box-shadow: 0 5px 5px rgba(0,0,0,.2) }
header#header, footer#footer { color:#fff; background:hsla(208,41%,26%,.6);
position:relative; z-index:3 }
header#header > .contain { padding:5px; min-height:43px }
header#header h1 { font-size:22px; float:left; margin:-5px 0; font-family:inherit }
header#header h1 img { max-height:53px; vertical-align:middle;
margin-right:10px }
header#header a, #nav .parent, #subnav .parent { text-transform:uppercase;
display:inline-block; cursor:pointer }
header#header h1 a { font-size:inherit; text-transform:none; color:inherit; padding-right:10px }
footer#footer { background:transparent }
footer#footer .contain {
padding:1em; font-size:.9em; box-sizing:border-box;
color:rgba(255,255,255,.85); background-origin:content-box;
background:rgba(0,0,0,.6) url(${footerLogo}) no-repeat top right / contain }
/* hovers */
header#header a:hover, #nav span:hover, header#header .selected {
background:rgba(255,255,255,.1);
background:<c:out value="${navAltBackground}"/>;
color:<c:out value="${navAltColor}"/>
}
#user [for=show_menu], [id$=searchbox] input { background:rgba(255,255,255,.1);
box-shadow:0 -1px 1px rgba(255,255,255,.3) inset !important;
background:-webkit-linear-gradient(190deg, rgba(255, 255, 255,.1) 50%, transparent);
background:linear-gradient(190deg, rgba(255, 255, 255,.1) 50%, transparent) !important }
#user [for=show_menu]:hover, [id$=searchbox] input:hover{
background:rgba(255,255,255,.2);
box-shadow:0 -1px 1px rgba(255,255,255,.4) inset !important;
background:-webkit-linear-gradient(190deg, rgba(255, 255, 255,.2) 50%, transparent);
background:linear-gradient(190deg, rgba(255, 255, 255,.2) 50%, transparent) !important }
#admin a:hover { box-shadow:0 -1px 1px #000 inset;
background:-webkit-linear-gradient(0deg, white, rgba(255,255,255,.3) 10%);
background:linear-gradient(0deg, white, rgba(255,255,255,.3) 10%) }
/* nav and subnav */
header#header nav { display:block; clear:both; font-size:.85rem; max-width:100% }
header#header nav > * { line-height:53px; padding:0 7px }
header#header nav > a { height:53px; display:inline-block; color:inherit; border-radius:3px }
header#header nav .submenu { display:block; padding:0 1em;
color:inherit; min-width:8em }
header#header nav .submenu:hover { color:<c:out value="${navAltColor}"/> }
header#header nav menu,
header#header nav > span,
header#header nav .submenu:first-child { border-radius:3px 3px 0 0 }
header#header nav menu,
header#header nav .submenu:last-child { border-radius:0 0 3px 3px }
#subnav { padding:0 3px; border-radius:0 0 2px 2px; margin:0 5px;
background:rgba(255,255,255,.8);
background:<c:out value="${navBackground}"/>;
color:<c:out value="${navColor}"/>;
position:relative; z-index:2 }
#subnav a, #subnav .parent { font-size:12px; font-weight:bold;
line-height:32px; padding:0 12px; display:inline-block; color:inherit;
text-transform:uppercase; margin:3px 1px 3px 0; height:32px }
#subnav .selected, #subnav a:hover, #subnav .parent:hover {
background:rgba(0,0,0,.03); border-radius:2px;
box-shadow:0 1px 2px rgba(0,0,0,.2) inset }
/* subnav interaction */
#nav .parent { position:relative }
#nav .parent i, #subnav .parent i { display:inline-block; margin-left:7px }
#nav menu, #subnav menu { max-height:0; overflow:hidden;
transition:all 125ms 500ms; padding:0; margin:0; position:absolute; top:53px; left:0;
background:inherit;
color:<c:out value="${navColor}"/>;
background:<c:out value="${headerBackground}"/>;
background:<c:out value="${navBackground}"/> }
#nav .parent:hover menu, #nav menu:hover,
#subnav .parent:hover + menu, #subnav menu:hover { max-height:15em }
/* search, user, admin */
[id$=searchbox], #user { float:right }
/* search */
[id$=searchbox] input { margin:0; border:0 !important; border-radius:3px;
padding:10px 24px 10px 1ex !important; line-height:20px;
height:42px !important;
-moz-box-sizing:border-box; box-sizing:border-box }
.x1xh .x25 { background-color:transparent }
[id$=searchbox] .xfc, [id$=searchbox] .af_commandImageLink {
background:transparent; border:0; cursor:pointer;
line-height:40px; height:40px; width:27px; border-radius:2px;
text-align:center; color:inherit; font-size:inherit }
[id$=searchbox] img, .af_region[id$=searchbox] img,
[id$=searchbox] button[title=Search] { background:transparent !important;
border:0 !important; text-indent:0 !important; color:inherit;
font-size:inherit; margin-left:-27px; box-shadow:none !important }
/* search interaction */
[id$=searchbox], .af_region[id*=searchbox] { position:relative }
[id$=searchbox] > *, .af_region[id*=searchbox] > * { position:absolute; right:0 }
[id$=searchbox] input, .af_region[id*=searchbox] input { width:24px !important;
transition:all 250ms; color:transparent }
[id$=searchbox] input:focus {
width:21em !important; color:#333;
background:-webkit-linear-gradient(90deg,#fff 88%,rgba(255,255,255,.2) 87%);
background:linear-gradient(90deg,#fff 88%,rgba(255,255,255,.2) 87%) !important }
[id$=searchbox] .xfc, [id$=searchbox] .af_commandImageLink {
position:absolute; right:0; top:1px }
img[id="T:searchbox:srchFrm:gSrBtn::icon"] { display:none }
/* log in "form" */
#login { font-size:1.2em; padding:1em 0 }
#login input { padding:.3em; border:1px solid #bbb; line-height:22px;
margin-right:3px }
#login button { padding:0 1em; line-height:24px }
[data-message]:before { content:attr(data-message); line-height:1;
padding:.3em 1.6em }
/* user name, mug and log out */
#user { text-align:right }
#user div { display:inline-block; height:100% }
#user a[id*="userProfileLink"] { display:inline-block;
-moz-box-sizing:border-box; box-sizing:border-box;
text-transform:none; border:double rgba(255,255,255,.3);
overflow:hidden; height:42px; margin:0 5px }
#user a[id*="userProfileLink"] img { max-width:36px }
#user [for=show_menu] { float:right; cursor:pointer; display:inline-block;
line-height:42px; width:27px; padding-left:3px; text-align:center;
border-radius:3px }
/* page edit and admin */
#admin { background:rgba(244,241,238,.9); margin:0;
box-shadow:0 -2px 3px rgba(0,0,0,.3) inset }
#admin .contain { text-align:right }
#admin .contain div { display:inline }
#admin * { line-height:4; color:#04093F; font-size:12px }
#admin .af_panelGroupLayout { display:inline-block }
#admin a { padding: 0 1em }
/* admin menu interaction */
#show_menu { display:none }
#admin { max-height:0; overflow:hidden; transition:all 125ms }
#show_menu:checked + #admin { max-height:5em }
/* content styles */
.article { padding:0 }
.article .date { color:#999; font-size:12px; text-transform:uppercase;
margin:10px 0 }
.article .featureImage { display:block; margin:0 auto 17px;
box-shadow:0 5px 6px rgba(0,0,0,.5); border-radius:2px }
/* content for fieldsets */
fieldset { border:0; padding:0; min-width:450px }
fieldset h2 { background:#eee; border-left:3px solid; padding-left:10px }
fieldset h3 { font:bold 11pt Segoe UI Light,Segoe UI,sans-serif; color:#bf3c30;
border-bottom:1px solid }
fieldset img { float:right }
fieldset table { border-collapse:collapse }
fieldset td, fieldset th { padding:0 9px; border:1px solid #ccc }
.contentModule { padding:5px; border-radius:10px; border:1px solid grey;
box-shadow:0 0 2px rgba(0,0,0,.1) }
/* embedded task flows */
iframe[src*=jspx] { border:0; width:100%; min-height:400px; transition:height 250ms }
</style>
<!-- header -->
<header id="header">
<!-- show_menu -->
<input type="checkbox" id="show_menu"/>
<menu id="admin">
<div class="contain">
<c:if test="${WCSecurityContext.currentUser['weblogic']}">
<!-- Don't scratch your head. Send me a quick email! -->
<a href="mailto:francisco.brito@oracle.com?subject=feedback&amp;body=:)"
title="Questions? Need help with this template?">Feedback</a>
</c:if>
<c:if test="${securityContext.authenticated}">
<wcdc:spacesSwitcher text="Portals"/>
<wcdc:editPage displayType="link" text="EDIT"/>
<wcdc:spacesAction type="administration" text="#{uib_o_w_w_r_WebCenter.GLOBAL_LINK_ADMINISTRATION}"/>
<wcdc:spacesAction type="logout" text="Log out"/>
</c:if>
<c:if test="${!securityContext.authenticated}">
<section id="login">
<input name="j_username" placeholder="User Name"/>
<input name="j_password" placeholder="Password" type="password"/>
<input name="j_character_encoding" type="hidden" value="UTF-8"/>
<button> Login </button>
</section>
<script>
$('#login button').click(function(){
$('#login')
.removeAttr('data-message');
$.post('j_security_check', $('#login input').serializeArray())
.done(function(){ location.reload() })
.fail(function(xhr){
$('#login')
.attr('data-message', xhr.statusText);
});
return false;
});
$('[name=j_password]').keyup(function(e){
if (e.which == 13)
$('#login button').click();
});
</script>
</c:if>
</div>
</menu>
<script>
$('#show_menu')
.keytar(27, 'click')
.change(function(){ $('[name=j_username]').focus() });
</script>
<div class="contain">
<!-- user -->
<section id="user">
<c:if test="${securityContext.authenticated}">
<label for="show_menu" title="press &lt;ESC> to show menu" class="icon-wrench"> </label>
</c:if>
<c:if test="${!securityContext.authenticated}">
<label for="show_menu" title="press &lt;ESC> to sign in" class="icon-signin"> </label>
</c:if>
<c:if test="${securityContext.authenticated and !hideProfile}">
<wcdc:userProfile shortDesc="#{security.userDisplayName}" icon="#{userProfilePic}"/>
</c:if>
</section>
<!-- search -->
<af:region value="#{bindings.localToolbarSearch.regionModel}" id="searchbox"/>
<script>
$('input[id*=searchbox]').attr('placeholder', '<c:out value="Search ${spaceContext.currentSpace.metadata.displayName}"/>');
$('a[id*=":srchFrm:gSrBtn"], button[id="T:searchbox:srchFrm:goBtn"]')
.addClass('icon-search')
.click(function(){
var input = $('input[id*=searchbox]')[0];
if (!input.value) { input.focus(); return false; }
});
</script>
<!-- logo -->
<h1>
<af:goLink destination="#{WCAppContext.applicationURL}/portal/#{spaceContext.currentSpaceName}">
<img src="${logo}" alt="${spaceContext.currentSpaceName}"/>
City of Los Angeles
</af:goLink>
</h1>
<!-- favicon -->
<script>
$('<link/>', { rel: 'icon', href: '/webcenter${logo}' }).appendTo('head');
</script>
</div>
</header>
<div class="contain">
<trh:script source="#{WCAppContext.spacesScriptsUrl}"/>
<trh:script source="#{WCAppContext.servicesScriptsUrl}"/>
<style>
#contentHeader nav { clear:both; background:${navBackground}; line-height:40px }
#contentHeader nav a { display:inline-block; color:white; padding:0 .6em }
#contentHeader a.selected { background:rgba(0,0,0,.4) }
</style>
<header id="contentHeader">
<nav id="nav">
<c:forEach var="menu" items="${nav}">
<c:set var="selected">
<c:if
test="${(menu.selected =='true') or (spaceContext.currentSpace.GSMetadata.displayName == menu.title)}">selected</c:if>
</c:set>
<c:if test="${empty menu.children}">
<a href="/webcenter${menu.goLinkPrettyUrl}" class="${selected}">
${menu.title} </a>
</c:if>
<c:if test="${not empty menu.children}">
<span href="/webcenter${menu.goLinkPrettyUrl}"
class="${selected} parent"> ${menu.title} <i
class="icon-caret-down"> </i>
<menu>
<c:forEach var="submenu" items="#{menu.children}">
<a href="/webcenter${submenu.goLinkPrettyUrl}" class="submenu">${submenu.title}</a>
</c:forEach>
</menu>
</span>
</c:if>
</c:forEach>
</nav>
</header>
<style>
/* remove old borders */
td.x1bh, td.x1bi { display:none }
/* add some horizontal space for content */
.x1bb { padding:0 .6em }
/* vertical alignment fixes */
.x19z { vertical-align:0 }
.xfg { height:auto }
/* button decency */
button.x7j { line-height:inherit; font-size:inherit; background:transparent;
border:1px solid rgba(0,0,0,.3); border-radius:3px }
/* remove odd backgrounds */
.x1bg.p_AFMedium, table.x107 { background-image:none; background-color:transparent }
.x1bd.p_AFMedium, .xpr.x1zr { background:transparent }
/* remove th borders */
.x108 { border-bottom:none; border-right:none }
/* content box */
.x1cv { margin:1em 1.6em 0; background:white; box-shadow:0 0 6px 0 rgba(0,0,0,.2); padding-top:1em; padding-bottom:2em }
@media (max-width:1080px){ .x1cv { margin:1em .6em 0 } }
</style>
<script>
/* load an ADF iframe before the placeholder and resize it */
function loadResize(url, placeholder){
var frame = $('<iframe/>')[0];
$(placeholder).before(frame);
$(function(){
frame.src = url;
$(frame).load(function(){
setTimeout(function(){
console.group("Resizing iframe", frame);
var contentSelector = 'form > .af_region > .af_panelGroupLayout > *',
height = [].reduce.call($(contentSelector, frame.contentWindow.document.body), function (i, a) {
console.debug(a.offsetHeight, a);
return i + a.offsetHeight
}, 0);
frame.style.height = height + 100 + 'px';
console.groupEnd();
}, 500);
});
});
}
</script>
<af:facetRef facetName="content"/>
</div>
<!-- -->
<c:if test="${ customAttributes['includeTemplateTarget'] }"><f:verbatim><![CDATA[
<style> [name=templateTarget]{ height:100vh; width:100%; border:0; background:transparent } </style>
<script> $('<iframe>').attr({ name: 'templateTarget' }).prependTo($('#header ~ .contain')) </script>
]]></f:verbatim></c:if>
<style>
footer#footer nav { display:table-cell; padding:0 1.6em }
footer#footer h2 { font-size:1.1em; line-height:inherit; padding:0; margin:0; text-transform:uppercase }
footer#footer a { color:currentcolor; display:block;
line-height:2.6;
border-bottom:1px solid rgba(0,0,0,.1); border-top:rgba(255,255,255,.1) }
</style>
<footer id="footer">
<div class="contain">
<nav>
<a href="#">City of Los Angeles</a>
<a href="#">Department of Public Works</a>
<a href="#">Careers at BOS</a>
<a href="#">Legal</a>
</nav>
</div>
<section id="copyright">
<c:out
value="${WCAppContext.application.applicationConfig.copyrightMessage.customValue}" />
</section>
</footer>
<!-- boilerplate -->
<trh:script text="window.print();" rendered="#{param['wc.printPreview']}"/>
<wcshell:panel name="DEFAULT" rendered="true"/>
<af:xmlContent>
<component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
<display-name>City Portal</display-name>
<facet>
<description>Content for body of page</description>
<facet-name>content</facet-name>
</facet>
</component>
</af:xmlContent>
</af:pageTemplateDef>
</jsp:root>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment