Inside my <ui:composition..> code block, everything that I try to render with <h:outputText ..> tag, does not obey the classes definied in <h:outputStylesheet library="css" name="imagens/index.css">:
Here's my code:
<ui:composition ...>
<ui:define name="conteudoRodape">
<h:outputStylesheet library="css" name="imagens/index.css">
<h:outputText styleClass="centro" value="Acessando como: Filial:" />
</h:outputStylesheet>
...
</ui:define>
</ui:composition>
How is this caused and how can I solve it?
I think your problem is that you're nesting an h:outputText tag inside h:outputStylesheet, as well as using the library name in the name attribute. Try changing:
<h:outputStylesheet library="css" name="imagens/index.css">
<h:outputText styleClass="centro" value="Acessando como: Filial:" />
</h:outputStylesheet>
to:
<h:outputStylesheet library="css/imagens" name="index.css" />
Related
I'm trying to run simple Seam PageFlow example NumberGuss. I have deployed it on Jboss Server. When I access the URL it lands on the first page but if I hit any of the button provided on that page it says "The page isn't redirecting properly".On server log I found
SEVERE [javax.enterprise.resource.webcontainer.jsf.application] (default task-16) Error Rendering View[/debug.xhtml]: org.jboss.weld.context.NonexistentConversationException: WELD-000321: No conversation found to restore for id 1.
I'm using wildfly-8.1.0 and jboss-seam-2.3.1
Attaching pageflow.jpdl.xml and numberGuess.xhtml for reference. Please help me resolve the issue I'm facing.
<!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:s="http://jboss.org/schema/seam/taglib">
<h:head>
<title>Guess a number...</title>
<link href="niceforms.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="niceforms.js"><!-- --></script>
</h:head>
<body>
<h1>Guess a number...</h1>
<h:form id="NumberGuessMain" styleClass="niceform">
<div>
<h:messages id="messages" globalOnly="true"/>
<h:outputText id="Higher"
value="Higher!"
rendered="#{numberGuess.randomNumber gt numberGuess.currentGuess}"/>
<h:outputText id="Lower"
value="Lower!"
rendered="#{numberGuess.randomNumber lt numberGuess.currentGuess}"/>
</div>
<div>
I'm thinking of a number between <h:outputText id="Smallest" value="#{numberGuess.smallest}"/> and
<h:outputText id="Biggest" value="#{numberGuess.biggest}"/>. You have
<h:outputText id="RemainingGuesses" value="#{numberGuess.remainingGuesses}"/> guesses.
</div>
<div>
Your guess:
<h:inputText id="inputGuess" value="#{numberGuess.currentGuess}" required="true" size="3"
rendered="#{(numberGuess.biggest-numberGuess.smallest) gt 20}">
<f:validateLongRange maximum="#{numberGuess.biggest}"
minimum="#{numberGuess.smallest}"/>
</h:inputText>
<h:selectOneMenu id="selectGuessMenu" value="#{numberGuess.currentGuess}" required="true" rendered="#{numberGuess.selectMenuRendered}">
<s:selectItems id="PossibilitiesMenuItems" value="#{numberGuess.possibilities}" var="i" label="#{i}"/>
</h:selectOneMenu>
<h:selectOneRadio id="selectGuessRadio" value="#{numberGuess.currentGuess}" required="true" rendered="#{numberGuess.radioButtonRendered}">
<s:selectItems id="PossibilitiesRadioItems" value="#{numberGuess.possibilities}" var="i" label="#{i}"/>
</h:selectOneRadio>
<h:commandButton id="GuessButton" value="Guess" action="guess"/>
<s:button id="CheatButton" value="Cheat" action="cheat"/>
<s:button id="GiveUpButton" value="Give up" action="giveup"/>
</div>
<div>
<h:message id="message" for="inputGuess" style="color: red"/>
</div>
</h:form>
</body>
</html>
<!--
An example of pageflow in jPDL. This exemplifies the
approach where action handlers are attached transitions
and decision nodes, instead of view components.
An alternative approach would be to attach all action
handlers to view components, and let the jPDL define
only the navigation rules.
-->
<pageflow-definition
xmlns="http://jboss.org/schema/seam/pageflow"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation=
"http://jboss.org/schema/seam/pageflow http://jboss.org/schema/seam/pageflow-2.3.xsd"
name="numberGuess">
<start-page name="displayGuess" view-id="/numberGuess.xhtml">
<redirect/>
<transition name="guess" to="evaluateGuess">
<action expression="#{numberGuess.guess}"/>
</transition>
<transition name="giveup" to="giveup"/>
<transition name="cheat" to="cheat"/>
</start-page>
<decision name="evaluateGuess" expression="#{numberGuess.correctGuess}">
<transition name="true" to="win"/>
<transition name="false" to="evaluateRemainingGuesses"/>
</decision>
<decision name="evaluateRemainingGuesses" expression="#{numberGuess.lastGuess}">
<transition name="true" to="lose"/>
<transition name="false" to="displayGuess"/>
</decision>
<page name="giveup" view-id="/giveup.xhtml">
<redirect/>
<transition name="yes" to="lose"/>
<transition name="no" to="displayGuess"/>
</page>
<process-state name="cheat">
<sub-process name="cheat"/>
<transition to="displayGuess"/>
</process-state>
<page name="win" view-id="/win.xhtml">
<redirect/>
<end-conversation/>
</page>
<page name="lose" view-id="/lose.xhtml">
<redirect/>
<end-conversation/>
</page>
</pageflow-definition>
Resolved the issue.Weld is scanning the archive, which seems to cause the problem.The Weld Docs says:
You can either set this up for your deployment only by adding the following content to the META-INF/jboss-all.xml file of your application.
jboss-all.xml file goes to your META-INF for ear archive and likely to WEB-INF for war archive
<jboss xmlns="urn:jboss:1.0">
<weld xmlns="urn:jboss:weld:1.0" require-bean-descriptor="true"/>
</jboss>
It worked for me.
I wanted to create the seperate css files and wanted to use it, Instead of duplicating the css file again.
Using this method i can reuse the cssfilecommon.html by calling it and also if i want some other css required i can add it in the seperate page and call only for that page
<tiles:insertAttribute name="cssfilecommon" /> - common css file
<tiles:insertAttribute name="pagespecific" /> - some other css file
--
can we do this, please let me know if any one tried..
layout file
<!DOCTYPE html>
<html xmlns:tiles="http://www.thymeleaf.org">
<head>
**<tiles:insertAttribute name="cssfile" />**
</head>
<body>
<div tiles:include="header">Header Block</div>
<div tiles:substituteby="body">Body Block</div>
<div tiles:substituteby="footer">Footer Block</div>
</body>
</html>
titles-def.xml file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://struts.apache.org/dtds/tiles-config_2_0.dtd">
<tiles-definitions>
<definition name="home" template="basiclayout/layout" >
<put-attribute name="cssfilecommon" value="bout/cssfilecommon"/>
<put-attribute name="header" value="bout/header"/>
<put-attribute name="menu" value="bout/Menu"/>
<put-attribute name="footer" value="bout/footer"/>
</definition>
--
cssfilecommon.html
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="css/jquery-ui-1.10.3.custom.css" th:href="#{css/jquery-ui-1.10.3.custom.css}" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" th:href="#{css/ui.jsd.css}" rel="stylesheet" type="text/css"/>
Yes, with plain tiles you could do this:
Layout file:
<head>
<tiles:insertAttribute name="cssfilecommon" />
<tiles:insertAttribute name="pagespecific" ignore="true" />
</head>
titles-def.xml file:
<definition name="home" template="basiclayout/layout" >
<put-attribute name="cssfilecommon" value="bout/cssfilecommon"/>
<put-attribute name="pagespecific" value="bout/pagespecific"/>
...
</definition>
Note the usage of ignore attribute:
If this attribute is set to true, and the attribute specified by the
name does not exist, simply return without writing anything. The
default value is false, which will cause a runtime exception to be
thrown.
But, as I see you are using Thymeleaf, which probably doesn't support it yet: #17
A other smart suggestion, you can declare in your tiles-def.xml an list and in this list you can simple push all your css files you need in your site, just like this:
<put-list-attribute name="jsList" cascade="true">
<add-attribute value="/Project/basic/css/basic.css" />
<add-attribute value="/Project/case2/css/example2.js" />
<add-attribute value="/Project/special/css/example3.css" />
</put-list-attribute>
after this in your jsp file you can easily iterate over your list with the following (You need the jstl taglib):
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
...
<tiles:importAttribute name="cssList"/>
...
<c:forEach items="${cssList}" var="cs">
<link href="${cs}" rel="stylesheet" type="text/css" media="screen">
</c:forEach>
i know it's like the same what #Slava Semushin say but i would that you know you can work with lists.
For example if you work with jqxwidgets you need to bind special javascripts for the elements and if you don't need all the javascript for each site, you can handle this case, with this suggestion.
Let's say I have a data table, I can put the CSS class in each column using the columnClasses, is there a similar way to set CSS class on every single column in the header? headerClass puts CSS class at all columns in the header and it's not what I want to do. I want to put unique CSS class of each column in the header.
An example of a datatable:
<h:dataTable columnClasses="column1,column2,column3">
<h:column>
<f:facet name="header" >
</f:facet>
</h:column>
<h:column>
<f:facet name="header" >
</f:facet>
</h:column>
<h:column>
<f:facet name="header" >
</f:facet>
</h:column>
</h:dataTable>
You can put your style class for the component which your are using is
For eg:-
<f:facet name="header" >
<h:outputText value="Some Value" styleClass="myStyleClass"/>
</f:facet>
In our web project we use JSF Myfaces, Primefaces 3.5. We have created our own primefaces theme for the project.
I find the following odd problems, which I suspect are due the css/library etc,
Multiple selection checkbox on p:dataTable works on odd tries. I.e on the first load of the page the selection works. If I visit one other page and comeback, the select check box doesn't work. If I visit one more page and comeback it works again. When it doesn't work, if I do a page reload from browser it works again. (the problem is the same in all browsers)
p:ajaxStatus onstart js function fires only for the first ajax call. For all subsequent calls this event is not fired. If I reload the page it again fires for the first ajax call and stops. We have not set any global setting on any ajax calls, I presume all calls default to global = true (the problem is the same in all browsers)
for a p:barChart on chrome, the x and y-axis labels fall in to the axis, but when I reload the page the display is adjusted and correct (as it appears in firefox), and no further reload is need during the session, even when navigate back and forth from other pages.
Our application has a menu area on the top and ouputPanel that is updated using ui:include based on the ajax menu selection.
I am not sure what could be causing these issues, and why things seem to work fine on reload. Where could the problem be?
The view code for the first issue related to the multiple selection checkbox is below.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<h:form id="dataForm">
<p:messages id="tableMsgs" />
<h:panelGroup>
<p:dataTable value="#{usersBean.userDataModel}" var="user"
id="userDataModel" rows="20" paginator="true"
paginatorAlwaysVisible="false" editable="true"
selection="#{usersBean.selectedUsers}"
resizableColumns="false">
<f:facet name="header">
<p:commandButton value="Flag User" process="#form"
action="#{usersBean.flagUser}"
icon="ui-icon-custom-arrow" iconPos="right"
update=":dataForm:tableMsgs"></p:commandButton>
<p:spacer width="10"></p:spacer>
<p:commandButton value="Delete User" process="#form"
icon="ui-icon-custom-arrow" iconPos="right" update="#form"
action="#{usersBean.deleteUser}">
</p:commandButton>
</f:facet>
<p:ajax event="rowEdit" listener="#{usersBean.onEdit}"
oncomplete="resetCSS()"
update=":dataForm:tableMsgs />
<p:ajax event="rowEditCancel" oncomplete="resetCSS()" />
<p:column selectionMode="multiple" style="width:15px;" />
<p:column headerText="Department" sortBy="#{user.dept.name}"
style="white-space:pre-line;width:100px">
<h:outputText value="#{user.dept.name}"
style="white-space:pre-line;width:100px;display:block;">
</h:outputText>
</p:column>
<p:column headerText="UserName" sortBy="#{user.userLoginName}"
style="width:100px;">
<h:outputText value="#{user.userLoginName}"
style="width:100px;display:block;"></h:outputText>
</p:column>
<p:column headerText="Role" sortBy="#{user.role}"
style="width:100px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.role}"
style="width:100px;display:block;"></h:outputText>
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{user.role}" style="width:95px" rendered="#{user.enabled eq true}" >
<f:selectItems
value="#{usersBean.rolesMap[user.dept.deptId]}"
var="role" itemLabel="#{role}" itemValue="#{role}"></f:selectItems>
</p:selectOneMenu>
<h:outputText value="#{user.role}" rendered="#{user.enabled eq false}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Manager" style="width:100px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText
value="#{user.usermanagerByUserId.userByManagerId.userLoginName}"
style="width:100px;display:block;"></h:outputText>
</f:facet>
<f:facet name="input">
<p:selectOneMenu rendered="#{user.enabled eq true}"
value="#{usersBean.managerIdMap[user.userId]}"
style="width:95px;">
<f:selectItems
value="#{usersBean.managerMap[user.dept.deptId]}"
var="manager" itemLabel="#{manager.userLoginName}"
itemValue="#{manager.userId}"></f:selectItems>
</p:selectOneMenu>
<h:outputText
value="#{user.usermanagerByUserId.userByManagerId.userLoginName}" rendered="#{user.enabled eq false}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Email" style="width:100px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.email}"
style="width:100px;display:block;"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{user.email}" style="width:95px;"
validatorMessage="Enter Valid Email" maxlength="100">
<f:validateRegex
pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Last Login" style="width:60px;">
<h:outputText value="#{user.lastLogin}"
style="width:60px;display:block;">
<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
</h:outputText>
</p:column>
<p:column headerText="Status" style="width:40px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="Enable" rendered="#{user.enabled eq true}"></h:outputText>
<h:outputText value="Disable"
rendered="#{user.enabled eq false}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:selectBooleanCheckbox value="#{user.enabled}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Locked" style="width:40px;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="Locked" rendered="#{user.locked eq true}"
style="width:40px;display:block;" />
<h:outputText value="UnLocked" style="width:40px;display:block;"
rendered="#{user.locked eq false}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:selectBooleanCheckbox value="#{user.locked}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="width:30px;">
<p:rowEditor>
</p:rowEditor>
</p:column>
</p:dataTable>
</h:panelGroup>
</h:form>
</div>
I am using spring mvc 3 and tiles 2 with wildcard definitions. I want to load additional css and javascript files inside some of my tiles. Is there way to do this? Preferably in tile jsp file, not in tiles-definitions.xml.
This is a good question because one of the main benefits of tiles is the central view it provides with regards to composition. It would be really nice if this centralization could also include CSS & JS files as well.
It happens that this is possible, here is an example. This example uses tiles3 however it should be pretty simple to adapt to tiles-2 (tiles three lets you use multiple types of expressions) you can side step this.
Also note that I use Struts2 as my action framework, this is not an issue but as I'm going to use a working example you'll know the "OGNL:" prefixed expression means that the EL Struts2 uses will be used. You should also know that if you upgrade to Tiles-3 you can also use Spring EL by prefixing your expressions with "MVEL:".
tiles.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="default" template="/WEB-INF/template/template.jsp">
<put-list-attribute name="cssList" cascade="true">
<add-attribute value="/style/cssreset-min.css" />
<add-attribute value="/style/cssfonts-min.css" />
<add-attribute value="/style/cssbase-min.css" />
<add-attribute value="/style/grids-min.css" />
<add-attribute value="/script/jquery-ui-1.8.24.custom/css/ui-lightness/jquery-ui-1.8.24.custom.css" />
<add-attribute value="/style/style.css" />
</put-list-attribute>
<put-list-attribute name="jsList" cascade="true">
<add-attribute value="/script/jquery/1.8.1/jquery.min.js" />
<add-attribute value="/script/jquery-ui-1.8.24.custom/js/jquery-ui-1.8.24.custom.min.js" />
<add-attribute value="/script/jquery.sort.js" />
<add-attribute value="/script/custom/jquery-serialize.js" />
</put-list-attribute>
<put-attribute name="title" value="defaults-name" cascade="true" type="string"/>
<put-attribute name="head" value="/WEB-INF/template/head.jsp"/>
<put-attribute name="header" value="/WEB-INF/template/header.jsp"/>
<put-attribute name="body" value="/WEB-INF/template/body.jsp"/>
<put-attribute name="footer" value="/WEB-INF/template/footer.jsp"/>
</definition>
<definition name="REGEXP:\/recruiter#candidate-input\.(.*)" extends="default">
<put-list-attribute name="cssList" cascade="true" inherit="true">
<add-attribute value="/style/recruiter/candidate-input.css" />
</put-list-attribute>
<put-list-attribute name="jsList" cascade="true" inherit="true">
<add-attribute value="/script/widgets/resume/resume.js" />
</put-list-attribute>
<put-attribute name="body" value="/WEB-INF/content/recruiter/candidate-input.jsp"/>
</definition>
<definition name="REGEXP:(.*)#(.*)" extends="default">
<put-attribute name="title" cascade="true" expression="OGNL:#com.opensymphony.xwork2.ActionContext#getContext().name"/>
<put-attribute name="body" value="/WEB-INF/content{1}/{2}"/>
</definition>
</tiles-definitions>
/WEB-INF/template/template.jsp
<%#taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%#taglib prefix="s" uri="/struts-tags"%>
<%#page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<tiles:insertAttribute name="head"/>
<body>
<%-- website header --%>
<div id="wrapper">
<div id="content">
<tiles:insertAttribute name="header"/>
<tiles:insertAttribute name="body"/>
<div class ="outer content">
<tiles:insertAttribute name="footer"/>
</div>
</div>
</div>
</body>
</html>
This is the important part getting the lists of CSS files and JS files into the head tile:
/WEB-INF/template/head.jsp
<%#taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%#taglib prefix="s" uri="/struts-tags"%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<tiles:importAttribute name="cssList"/><tiles:importAttribute name="jsList"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<s:iterator value="#attr.cssList" var="cssValue">
<link href="<s:url value="%{cssValue}"/>" rel="stylesheet" type="text/css">
</s:iterator>
<s:iterator value="#attr.jsList" var="jsValue">
<script src="<s:url value="%{jsValue}"/>"></script>
</s:iterator>
<title><tiles:insertAttribute name="title" defaultValue="no title"/></title>
</head>
I think you can figure out the rest. Sorry about the <s:iterator> tags in the last block, I'm not sure of the Spring equivalent nor would I be inclined to test it. But should you translate this to Spring, it would be great for you to self answer here. I'd happily up vote it.
In dispatcher-servlet.xml provide mvc static resource mapping as following :
<!-- static resource mapping for style sheets, etc. -->
<mvc:resources mapping="/styles/**" location="/WEB-INF/skins/" />
<mvc:resources mapping="/scripts/**" location="/WEB-INF/scripts/" />
And on your tiles-layout.jsp file you can access them all by writing
<script type="text/javascript" src="${context}/scripts/jquery-1.7.js></script>
<link rel="stylesheet" type="text/css" href="${context}/styles/css/superfish.css">
See: mvc:resources
That is how I did with Spring, the rest is just like Quaternion posted.
/WEB-INF/template/head.jsp
<tiles:importAttribute name="cssList"/>
<tiles:importAttribute name="jsList"/>
<head>
<c:forEach var="cssValue" items="${cssList}">
<link type="text/css" rel="stylesheet" href="<c:url value="${cssValue}"/>" />
</c:forEach>
<c:forEach var="jsValue" items="${jsList}">
<script src="<c:url value="${jsValue}"/>"></script>
</c:forEach>
</head>
And don't forget to point on each page the right definition from tiles.xml
<tiles:insertDefinition name="definitionName">
<tiles:putAttribute name="body">
//content
</tiles:putAttribute>
</tiles:insertDefinition>