Like in the title, is there any lib like PrimeFaces or RichFaces that is template-oriented?
I'm building my own including some fixed/liquid/elastic base layouts but I wonder if someone out there has already done this boring work.
UPDATE
i'm sorry, i haven't explained myself.
i'm talking about a sort of framework on framework made by a tree of templates (and optionally beans).
i'm currently using this root template, that is bundled in a jar file with some bean and , entity, for all my applications:
<!DOCTYPE html>
<html lang="#{localeBean.locale.language}"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:s="http://shapeitalia.com/jsf2"
xmlns:sc="http://java.sun.com/jsf/composite/shape">
<f:view locale="#{localeBean.locale}">
<h:head>
<title><ui:insert name="module"/> - <ui:insert name="title"/></title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['shape/favicon/shape.ico']}" />
<h:outputStylesheet library="shape" name="css/core.css" />
<h:outputStylesheet library="shape" name="css/fileicons.css" />
<h:outputScript library="shape" name="js/jquery.jsPlumb-1.3.15-all.js" />
<h:outputScript library="shape" name="js/core.js" />
</h:head>
<h:body>
<ui:debug hotkey="x" />
<p:growl id="messages" globalOnly="false" autoUpdate="true" showDetail="true" showSummary="true" />
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="loading..." resizable="false" closable="false">
<h:graphicImage library="shape" name="images/ajaxloadingbar.gif" />
</p:dialog>
<div>
<ui:insert name="header">
<h:form>
<s:panelGrid cellStyle="border: 0;">
<s:column style="text-align: left;">
<p:commandLink action="index" >
<h:graphicImage library="shape" name="images/shape.png" height="30px" style="vertical-align: middle; float: left; border: 0"/>
</p:commandLink>
</s:column>
<s:column style="text-align: right;">
<p:menuButton rendered="#{not empty request.userPrincipal}" value="#{request.userPrincipal.name}" style="float: right">
<p:menuitem actionListener="#{sessionBean.logout}" action="index" ajax="false" icon="ui-icon-power" value="#{bundle.logout}"/>
</p:menuButton>
</s:column>
</s:panelGrid>
</h:form>
</ui:insert>
</div>
<h:panelGroup rendered="#{not empty request.userPrincipal}">
<ui:insert name="content">insert content here</ui:insert>
</h:panelGroup>
<h:panelGroup rendered="#{empty request.userPrincipal}">
<h:form>
<p:panel header="login">
<h:panelGrid columns="3">
<h:outputLabel for="login_email" value="Email:" />
<h:outputLabel for="login_password" value="Password:" />
<h:panelGroup />
<p:inputText id="login_email" value="#{requestScope.email}" label="email" size="32"/>
<p:password id="login_password" value="#{requestScope.password}" label="password" feedback="false" size="32"/>
<p:commandButton value="Login" action="#{sessionBean.login}" icon="ui-icon ui-icon-check" ajax="false"/>
<p:message for="login_email" />
<p:message for="login_password" />
<h:panelGroup />
</h:panelGrid>
</p:panel>
</h:form>
</h:panelGroup>
<ui:insert name="external" />
</h:body>
</f:view>
</html>
and this is only the root one.
i'd like to know if is there someone who has already done a work like this and have bundled it
ok there is no such a thing.
the best out there are components like p:layout.
Related
I am new to Apache tiles, trying to configure it in spring 4. But the templates, i am extending is not visible in my jsp page.For ex: If i am hitting url "/admin", then content of admin.jsp is visible, nothing else.
blow is the code snippet.
application-context.xml
<beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" />
<beans:bean id="tilesConfigurer"
class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<beans:property name="definitions">
<beans:list>
<beans:value>/WEB-INF/layouts/views.xml</beans:value>
</beans:list>
</beans:property>
</beans:bean>
views.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="DefaultTemplate"
template="/WEB-INF/views/template/SiteTemplate.jsp">
<put-attribute name="title" value="Home" />
<put-attribute name="header" value="/WEB-INF/views/template/header.jsp" />
<put-attribute name="body" value="This is body" />
<put-attribute name="footer" value="/WEB-INF/views/template/footer.jsp" />
</definition>
<definition name="admin" extends="DefaultTemplate">
<put-attribute name="body"
value="/WEB-INF/views/admin.jsp" />
</definition>
</tiles-definitions>
SiteTemplate.jsp
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>DCAT</title>
</head>
<body>
<div>
<!-- Header -->
<tiles:insertAttribute name="header" />
<!-- Body Page -->
<div>
<tiles:insertAttribute name="body" />
</div>
<!-- Footer Page -->
<tiles:insertAttribute name="footer" />
</div>
</body>
</html>
Footer.jsp
<div>
<h2>Footer</h2>
</div>
Header.jsp
<div>
<h2>Header</h2>
</div>
admin.jsp
<div style="margin:10px;">
<h3>SpringMVC - Tiles3 Integration</h3>
<p>By:- Thita Nayak</p>
</div>
Admin controller
#Controller
public class AdminController {
private static final Logger logger = LoggerFactory.getLogger(AdminController.class);
#RequestMapping(value = "/admin", method = RequestMethod.GET)
public String admin(){
return "admin";
}
}
I cannot see anything wrong with your code
The problem might be in the namespace declaration
Try to change beans:bean to beans if your namespace is as follow
<beans xmlns="http://www.springframework.org/schema/beans" ...
I am trying to include an xhtml which is on another domain (on the same server) inside my .xhtml.
The sample code is the following
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="css" name="style.css" target="body" />
</h:head>
<h:body>
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="10%"
style="border: none !important">
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" size="5%" collapsible="true" gutter="0">
<h:outputText value="South unit Content." />
</p:layoutUnit>
<!-- West -->
<p:layoutUnit position="west" size="200" header="Menu"
collapsible="true" effect="slide" styleClass="menuBar">
<h:form id="form1">
<p:panelMenu>
<p:submenu label="Students">
<p:menuitem value="page1" update=":centerpanel"
actionListener="#{layoutController.setNavigation('page2.xhtml')}" />
<p:menuitem value="page2" update=":centerpanel"
actionListener="#{layoutController.setNavigation('http://localhost:8080/externalsite/newpage.xhtml')}" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit id="center" position="center">
<h:panelGroup id="centerpanel" layout="block">
<ui:include id="include" src="#{layoutController.navigation}" />
</h:panelGroup>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
So basically in the center layout unit I am trying to include the external .xhtml (which is on the same domain however).
JSF templates can be included only, if they are available within the same classloader.
If you want to embed an external page into your page, you need to user iframe.
For example:
<iframe src="http://www.primefaces.org/showcase/ui/home.jsf"/>
allows you to embed PrimeFaces showcase withing your page.
This is not possible. With the ui:include Tag you can only include Code Snippets from other xhtml files. What you are trying to do is accessing Code from another domain, but what you see in the final web app is only the generated HTML and Javascript Code. You cannot work with that in your application, as you have no access to the sourcecode.
I have two jQuery Cycles Version 2. http://jquery.malsup.com/cycle2/
I want to have one navigation (#nav) to control both of the cycles. I know it is still BETA, so maybe it isn't possible yet..
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.scrollVert.js"></script>
<div class="cycle-slideshow"
data-cycle-fx="scrollVert"
data-cycle-pause-on-hover="true"
data-cycle-timeout="0"
data-cycle-pager="#nav">
<img src="http://i46.tinypic.com/29oocgm.jpg" data-cycle-pager-template="<a href=#>1</a>" />
<img src="http://i48.tinypic.com/o602sz.jpg" data-cycle-pager-template="<a href=#>2</a>" />
<img src="http://i50.tinypic.com/qntoxc.jpg" data-cycle-pager-template="<a href=#>3</a>" />
</div>
<br />
<br />
<div class="cycle-slideshow"
data-cycle-fx="scrollVert"
data-cycle-pause-on-hover="true"
data-cycle-timeout="0"
data-cycle-pager="#nav">
<img src="http://i46.tinypic.com/29oocgm.jpg" data-cycle-pager-template="<a href=#>1</a>" />
<img src="http://i48.tinypic.com/o602sz.jpg" data-cycle-pager-template="<a href=#>2</a>" />
<img src="http://i50.tinypic.com/qntoxc.jpg" data-cycle-pager-template="<a href=#>3</a>" />
</div>
<div id="nav"></div>
Example: http://jsfiddle.net/hfjXd/
Iøm not sure I understand exctly what you mean but if you just use:
data-cycle-prev=".prev"
data-cycle-next=".next"
on both of the Cycles it should just do it.
check this example: view-source:http://jquery.malsup.com/cycle2/demo/caro-pager.php
and this one: http://jquery.malsup.com/cycle2/demo/prevnext.php
I need to create a layout like this but with all the containers on separated files, like:
top.xhtml
<p:layout fullPage="true">
<p:layoutUnit position="north" header="#{support.applicationTitle}">
<h:form>
<p:menubar>
<p:menuitem value="Quit" icon="ui-icon-close" action="#{userController.logOut()}" />
</p:menubar>
</h:form>
</p:layoutUnit>
Without the </p:layout> because it will be close on my footer.xhtml like:
<p:layoutUnit position="south" header="© 2012 - 2012 PORTAL DE IDEIAS">
</p:layoutUnit></p:layout>
I have tried with both files but I get a error telling me that I need to close the layout tag, what is correct, but how can I solve my problem? Is this the best approach for a template? And another problem is that the layout tag require a center layoutUnit
This is indeed not the right approach. Your template has to be XML well formed. I suggest to create a master template file instead if all you want is to only specify the center unit.
Taking the example on the showcase site, that should look like this:
/WEB-INF/templates/layout.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Top unit content." />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
<h:outputText value="South unit content." />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
<h:form>
<ui:include src="../templates/themeMenu.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
<h:outputText value="Right unit content." />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">Put default content here, if any.</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Note the <ui:insert> in the center unit.
The template client can then just look like this:
/page.xhtml
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<ui:define name="content">
<p>Here goes your view-specific content.</p>
</ui:define>
</ui:composition>
which you open by http://example.com/contextname/page.xhtml.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
If you're looking for live open source examples of advanced Facelets templating, you may find OmniFaces showcase app useful.
I'm using RichFaces 4.1 and I found out for my template as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="body">Default content</ui:insert>
</h:body>
</html>
It always add extra head info for me:
<link type="text/css" rel="stylesheet" href="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/DEFAULT/skinning.css" /><script type="text/javascript" src="/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script><script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/packed/packed.js"></script>
If I take out this portion from template, those extra info will be disappear:
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
With that extra info, the page renders better however if this page navigate to next page base on value return from form action (as defined in faces-config.xml), the component (e.g. a4j:commandButton ) will not work, need click twice to function.
Is that a bug? If you go to richfaces showcase and open the source, the meta info for head are diff. Any ideal why I get those extra meta info that seem buggy...
---- Some extra info ---
Hi Brendan
Thanks for the suggestion but not help...
[Template]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j">
<f:view contentType="text/html">
<h:head>
<ui:insert name="head"></ui:insert>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
<title><ui:insert name="title">CEA</ui:insert></title>
</h:head>
<h:body>
<div id="page">
<div id="header">
<div class="right-controls">
<ul class="top-links layout">
<li>Project Site
</li>
</ul>
</div>
</div>
<div id="page-content">
<ui:include src="/templates/includes/navigation.xhtml" />
<ui:insert name="body">
Body content missed
</ui:insert>
<div class="clear"></div>
</div>
<div id="footer">
<ui:insert name="footer"></ui:insert>
</div>
</div>
</h:body>
</f:view>
</html>
[p.xhtml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="/templates/template.xhtml">
<h:outputStylesheet>
.red {
color: red;
}
.green {
color: green;
}
</h:outputStylesheet>
<ui:define name="body">
<h:form>
<a4j:commandButton value="Store changes"
action="#{profileCreation.goNext}" />
</h:form>
</ui:define>
</ui:composition>
profileCreation.goNext only do one thing, return the success value:
public String goNext() {
return IdmConst.IDM_CREATE_PROFILES_SUCCESS;
}
[faces-config.xml]
<navigation-rule>
<display-name>p.jsf</display-name>
<from-view-id>/public/idm/p.xhtml</from-view-id>
<navigation-case>
<from-outcome>IDM_CREATE_PROFILES_SUCCESS</from-outcome>
<to-view-id>/jsf/idm/resetpwd.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
[resetpwd.xhtm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition template="/templates/template.xhtml">
<ui:define name="head">
<style type="text/css">
.leftColumn {
width: 40%;
vertical-align: top;
text-align: left;
padding: 15px;
background: #00FFFF;
}
.rightColumn {
width: 60%;
vertical-align: top;
text-align: left;
padding: 15px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</ui:define>
<ui:define name="title">Change / Rest Password</ui:define>
<ui:define name="body">
<h:form id="resetPwdForm">
<rich:graphValidator value="#{passwordValidationBean}" id="gv">
<rich:panel header="Change password" style="width:500px">
<rich:messages for="gv"/>
<rich:messages globalOnly="true"/>
<h:panelGrid columns="3">
<h:outputText value="Enter new password:" />
<h:inputSecret value="#{passwordValidationBean.password}" id="pass" />
<rich:message for="pass" />
<h:outputText value="Confirm the new password:" />
<h:inputSecret value="#{passwordValidationBean.confirm}" id="conf" />
<rich:message for="conf" />
</h:panelGrid>
<a4j:commandButton value="Store changes"
action="#{passwordValidationBean.storeNewPassword}" />
</rich:panel>
</rich:graphValidator>
</h:form>
</ui:define>
</ui:composition>
</html>
[passwordValidationBean]
I use the sample from richfaces showcase (http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=graphValidator&skin=blueSky)
As you can see as defined in faces-config, after user click the button on p.xhtml it will go to resetpwd.xhtml, if I have .. defined in template, then the button on resetpwd.xhtml will not work properly, I need click twice then will process the request. Well, if I directly go to resetpwd.xhtml wthout go throgh p.xhtml, everything is working fine.
So I suspect the problem cause by the .. defined in template., with this xml element, page source willd isplay extra header info:
Must be some bug in richfaces state management or the extra meta info included in head. As mention if I directly go to resetpwd.xhtml, everything work fine (i.e. button on that page no need click twice to respond). If navigate from p.xhtml to resetpwd.xhtml will work fine if take out the ... from tempalte file, but if I do so then the page will not render with skin.