How to create templates in primefaces mobile, since the root tag is f:view, and not the html.
The XML root element doesn't matter. It merely holds the XML name space declarations. The key is that you should have a <f:view renderKitId="PRIMEFACES_MOBILE"> in the master template. So the following kickoff example of the master template should work as good:
<f:view
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:pm="http://primefaces.org/mobile"
renderKitId="PRIMEFACES_MOBILE"
>
<ui:insert name="some" />
</f:view>
Template client looks just the same as usual:
<ui:composition template="/WEB-INF/template.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:pm="http://primefaces.org/mobile"
>
<ui:define name="some">
...
</ui:define>
</ui:composition>
Related
I am programming an application (not a website) with a north panel that stays the same, a west panel for the menus and a center panel. The west panel and the center panel can change.
In terms of conception, is it better to work on a single view and switch panels or should I create several pages ?
For example :
Solution 1 : Center panel shows a car image, I select a car brand on the west panel, as a result I switch the west panel with another menu (car models of the brand) and switch the center panel with an image of the brand logo.
Solution 2 : Center panel shows a car image, I select a car brand on the west panel, as a result I redirect to another page with on the left menu the car models of the brand and in center panel an image of the brand logo.
Thank you.
I suggest you to use solution 2 with apply JSF Templating. By applying this approach, your pages are easy to extend and reuse.
This is my example which use p:layout, ui:composition and etc.
layout.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!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: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>
<title>Layout-menu</title>
</h:head>
<h:body>
<p:layout>
<p:layoutUnit position="west"
resizable="true"
size="250"
minSize="40"
maxSize="400">
<h:form>
<p:menu>
<p:submenu label="Navigations">
<p:menuitem value="input"
outcome="inputText"
icon="ui-icon-star"/>
<p:menuitem value="dropdown"
outcome="selectOneMenu"
icon="ui-icon-star"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="source" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
inputText.xhtml
<ui:composition 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"
template="layout.xhtml">
<ui:define name="source">
<h:form>
inputText
</h:form>
</ui:define>
</ui:composition>
selectOneMenu.xhtml
<ui:composition 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"
template="layout.xhtml">
<ui:define name="source">
<h:form>
selectOneMenu
</h:form>
</ui:define>
</ui:composition>
You can run test at the layout.xhtml page like this http://host:port/project/layout.xhtml
You can see more information about Templating from another site such as JSF 2 Templating With Facelets Example, Using Facelets Templates and etc.
Need help here. I'm trying to make my current project bookmarkable. My current design can basically be summed up in this code snippet:
<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<f:metadata>
<f:viewParam name="contentUrl" value="#{navigationBean.contentUrl}"/>
</f:metadata>
<h:body>
<ui:composition template="/views/template/template.xhtml">
<ui:define name="leftpane">
<ui:include src="/views/admin/menu_administrator.xhtml"/>
</ui:define>
<ui:define name="rightpane">
<p:growl showDetail="true" sticky="false" />
<ui:decorate template="/views/admin/content/#{navigationBean.contentUrl}.xhtml"/>
</ui:define>
</ui:composition>
</h:body>
</html>
So I have this template to make the site 30/70 look having the "leftpane" contain the menu and the "rightpane" to display the output content. What I want is to be able to change the output in the "rightpane" depending on the URL sent:
www.mysite.com/projectitle/views/admin/Administrator.xhtml?faces-redirect=true&contentUrl=cont_admin_rapptmnttype
Whatever will be constructed in this url: /views/admin/content/#{navigationBean.contentUrl}.xhtml on the "rightpane" also has a corresponding backing bean to generate the needed output
I'm using Primefaces3.5, MyFaces2.0, WAS8.5
Hope someone could help me out on this. Thanks.
UPDATE:
I am using a p:menuitem to set the contentUrl like
<p:menuitem value="Appointment Type" id="cont_admin_rapptmnttype"
ajax="false" outcome="#{navigationBean.currentMode}" >
<f:param name="contentUrl" value="cont_admin_rapptmnttype"/>
</p:menuitem>
But when I click on the menuitem I get a Stackoverflow exception which, as it turns, is caused by:
<ui:decorate template="/views/admin/content/#{navigationBean.contentUrl}.xhtml"/>
Which is the one I'm trying to update.
Here is the recurring exception in the stacktrace:
at org.apache.myfaces.view.facelets.tag.ui.DecorateHandler.apply(DecorateHandler.java:137)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:51)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:59)
at org.apache.myfaces.view.facelets.tag.jsf.ComponentTagHandlerDelegate.apply(ComponentTagHandlerDelegate.java:324)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:54)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:51)
at javax.faces.view.facelets.DelegatingMetaTagHandler.applyNextHandler(DelegatingMetaTagHandler.java:59)
at org.apache.myfaces.view.facelets.tag.jsf.ComponentTagHandlerDelegate.apply(ComponentTagHandlerDelegate.java:324)
at javax.faces.view.facelets.DelegatingMetaTagHandler.apply(DelegatingMetaTagHandler.java:54)
at javax.faces.view.facelets.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:51)
at org.apache.myfaces.view.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:150)
at org.apache.myfaces.view.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:57)
at org.apache.myfaces.view.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:45)
at org.apache.myfaces.view.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:322)
at org.apache.myfaces.view.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:369)
at org.apache.myfaces.view.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:347)
at org.apache.myfaces.view.facelets.impl.DefaultFaceletContext.includeFacelet(DefaultFaceletContext.java:215)
i am trying to apply the basic sample for rendering a page inside a dialog as in the showcase
http://www.primefaces.org/showcase/ui/dialogFrameworkBasic.jsf
my web pages are under webapp/pages/general
i am running PrimeFaces-4.0-SNAPSHOT on Mojarra-2.1.20
i have two pages:
1- home.xhtml
2- viewreport.xhtml
1- home.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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:ice="http://www.icesoft.com/icefaces/component"
xmlns:p="http://primefaces.org/ui"
xmlns:pretty="http://ocpsoft.com/prettyfaces"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Welcome</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body dir="rtl">
<h:form>
<p:commandButton value="View" icon="ui-icon-extlink"
action="dialog:viewreport" />
</h:form>
</h:body>
</html>
2- viewreport.xhtml:
<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:panelGroup id="report_details_new" layout="block" style="width:500px;height:500px;">
HELLO WORLD
</h:panelGroup>
</h:body>
</html>
when clicking on the button, nothing happens, i don't get any errors in eclipse console or in browser console.
please advise why the dialog framework is not working.
Solved by adding the following configuration to the faces-config.xml:
<action-listener>org.primefaces.application.DialogActionListener</action-listener>
<navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
<view-handler>org.primefaces.application.DialogViewHandler</view-handler>
tested on IE9,Chrome,Firefox for primefaces 4.0-SNAPSHOT
I have this issue, i think is a bug, i have a composite component with a simple inputtext, then i try to use my composite component in a modal dialog, at first look all it's ok, you can type inside the inputtext, but when the inputtext lost the focus and try to type again you cant, even you can't erase what you typed before.
In the issue tracker, there are a similiar problem reported:
LINK!!!!!
But this is with autocomplete not with input (maybe can be the same), but is marked as fixed, and i tried with PrimeFaces 3.3.1 and 3.4-SNAPSHOT but the problem persist.
Im using 3.4-SNAPSHOT
Here is a "reproducible test cases", i add an other input to my composite component for lost the focus more easily from first input.
Composite component:
<!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:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui">
<body>
<cc:implementation>
<p:commandButton value="Open dialog composite component" onclick="dialog.show()"/>
<p:dialog widgetVar="dialog">
<p:inputText/>
<p:inputText value="Click here for lost focus of the first input"/>
</p:dialog>
</cc:implementation>
</body>
</ui:composition>
test.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:mycomp="http://java.sun.com/jsf/composite/components"
xmlns:p="http://primefaces.org/ui"
xml:lang="es">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<h:form id="myform">
<p:commandButton value="Open first dialog" onclick="firstDialog.show()"/>
</h:form>
<h:form id="myform2">
<p:dialog widgetVar="firstDialog" modal="true">
<mycomp:test />
</p:dialog>
</h:form>
</h:body>
</f:view>
</html>
I tried to replace p:inputText with h:inputText and the problem persist.
Im using:
MyFaces 2.1.8, Primefaces 3.4-SNAPSHOT
I'm trying to incorporate primefaces into my JSF 2.0 web project.
I've recently updated from facelets 1.x to 2.0 and Added primefaces jar to my library folder. Everything is fine except, the way I have my templates structured has a conflict with the primefaces.
my template.xhtml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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">
<h:head>
<title><ui:insert name="title">MILO</ui:insert></title>
//Css
//js
</h:head>
<h:body class="milo">
<h:form styleClass="miloForm" enctype="multipart/form-data">
<div id="container">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
<ui:insert name="content">
<!-- include your content file or uncomment the include below and create content.xhtml in this directory -->
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert> </div>
</h:form>
</h:body>
And my index.xhtml looked like this:
<!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: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">
<ui:composition template="/WEB-INF/templates/base.xhtml">
<ui:define name="content">
<p:editor/>
</ui:define>
Once I have this, the p:editor won't show up. any ideas why? the console won't show me any warnings/errors.
EDIT>>> Found JS Error
In your template.xhtml, you need to replace <head> by <h:head> and <body> by <h:body>. You shouldn't add another ones, that would only result in invalid HTML.
Particularly the <h:head> is mandatory as it allows component libraries like PrimeFaces to auto-include the necessary CSS/JS files by resource dependency injection. The <h:body> is only mandatory whenever you have <h:outputScript> elements with a target="body" so that they will be auto-relocated to the very bottom of the generated HTML <body> element.
Update your concrete problem is caused by a conflict in the manually loaded jQuery library and the one which is auto-included by PrimeFaces. PrimeFaces uses jQuery and jQuery UI under the covers. If you stick to using PrimeFaces, I'd recommend to drop the manually loaded jQuery and use the PrimeFaces-bundled one instead. To cover pages where you don't use PrimeFaces components as well, you can explicitly load PrimeFaces-bundled jQuery for every page by adding the following line to the <h:head>:
<h:outputScript library="primefaces" name="jquery/jquery.js" />