I am trying to create a simple project layout with logo and horizontal tabs on top of the page. Some menus on the left hand side. Both the top tabs and menu of left hand side should refresh the content in center. I tried this with ui:composition template / rich tabbedpanel. No luck yet. This may be a common structure followed in lot of projects. May be this can be easily done in CSS without richfaces. Would appreciate if somebody can post the code for this.
This is generic project layout which should fits your needs (topmenu, left menu, content in center and footer) with facelets.
MainLayout.xhtml (remeber to add doctype at the beginning)
<?xml version="1.0" encoding="UTF-8" ?>
<html 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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view contentType="text/html" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<ui:insert name="headStyles" />
<title>
<ui:insert name="pageTitle" />
</title>
<ui:insert name="htmlHeader" />
</head>
<body>
<div id="pageContainer" >
<div id="headerContainer" class="topMenu">
<ui:insert name="header" />
</div>
<div id="mainContainer" >
<ui:insert name="main"/>
</div>
<div id="footerContainer" >
<ui:insert name="footer" />
</div>
</div>
</body>
</html>
Two ColummnsLayout.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition
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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="mainLayout.xhtml">
<ui:define name="headStyles">
<!-- define your styles HERE -->
</ui:define>
<ui:define name="pageTitle">
<!-- define your title HERE -->
</ui:define>
<ui:define name="htmlHeader">
<!-- define your header HERE -->
</ui:define>
<ui:define name="menu">
<!-- define your richfaces top Menu HERE -->
<ui:define>
<ui:define name="main">
<div id="menuContainer" class="leftColumn">
<ui:insert name="leftMenu"/>
</div>
<div id="contentContainer" class="contentColumn">
<ui:insert name="contentMain"/>
</div>
</ui:define>
</ui:composition>
Then if you want menus with simple html and css have a look at ListaMatic It's good starting point, with a simple list and using cascading style sheets you can create horizontal/vertical Toolbars.
However if you want to use richfaces menu toolbar you have examples here.
Finally for refreshing parts of you page then you need a ajax component (e.g a4j:support) and use de attribute reRender (defining id(s) of JSF component(s) that should be rerendered after an Ajax request)
Related
I'm trying to override some components libraries' css (PrimeFaces, BootsFaces), but can't manage to import my custom css last. I've tried various things that I found so far, but nothing worked.
Below is the master template, where I import the css. Like that it is imported, but before all other resources. After that I list the other tries that I had.
I can imagine, that that the problem is, that I use templates.
master.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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">Project Documents Tutorial</ui:insert></title>
<h:outputStylesheet name="css/projdocstut.css" />
</h:head>
<h:body>
<b:container>
<div id="header" class="header">
<b:row>
<b:column span="12">
<ui:insert name="header">
<ui:include src="top-menu.xhtml" />
<ui:include src="main-menu.xhtml" />
</ui:insert>
</b:column>
</b:row>
</div>
<div id="content" class="content">
<b:row>
<b:column span="12">
<ui:insert name="content">Standard Content</ui:insert>
</b:column>
</b:row>
</div>
<div id="footer" class="footer">
<b:row>
<b:column span="12">
<ui:insert name="footer">Standard Bottom</ui:insert>
</b:column>
</b:row>
</div>
</b:container>
</h:body>
</html>
I also tried the following.
1) Adding the following in the head / body --> result: no import at all
<f:facet name="last">
<h:outputStylesheet library="default" name="css/projdocstut.css" />
</f:facet>
2) Adding the following in the head / body: result--> resource is imported before all other resources
<f:facet name="last">
<h:outputStylesheet name="css/projdocstut.css" />
</f:facet>
3) Adding following to the body: result --> resource is imported before all other resources
<h:outputStylesheet name="css/projdocstut.css" />
The index.xhtml which uses the template:
<?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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="WEB-INF/templates/master.xhtml">
<ui:define name="content">
Custom Content
</ui:define>
</ui:composition>
</html>
Bootsfaces handles this issue by allowing you to define a "position" attribute in the <h:outputStylesheet> tag.
<h:head>
...
<h:outputStylesheet name="css/style.css" position="last"/>
</h:head>
I am having some issues getting Thymeleaf to behave the way I want regarding templates. I was previously using Apache Tiles which worked but I thought it was heavy weight with the configuration / XML. I had an elegant solution where I was even defining my JavaScripts and Sytlesheets in Tiles XML configuration. However I want to move away from JSPs entirely. I have seen references for both Thymeleaf and Facelets. I decided to give Thymeleaf a try but I'm having issues getting a default layout for all my other pages.
Just for some background this was my default layout file I was using with Apache Tiles.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="XXXXXXXXXXX">
<meta name="description" content="Something">
<title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
<!-- stylesheets -->
<c:forEach var="css" items="${stylesheets}">
<link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
</c:forEach>
<!-- end stylesheets -->
</head>
<body>
<!--[if lt IE 10]>
<p class="alert alert-warning">
Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
Opera, or Safari.
</p>
<![endif]-->
<!-- header -->
<div id="header">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</div>
<!-- end header -->
<!-- content -->
<div id="content">
<tiles:insertAttribute name="content"></tiles:insertAttribute>
</div>
<!-- end content -->
<!-- footer -->
<div id="footer">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</div>
<!-- end footer -->
<!-- scripts -->
<c:forEach var="script" items="${javascripts}">
<script src="<c:url value="${script}"/>"></script>
</c:forEach>
<!-- end scripts -->
</body>
</html>
I want to replicate similar behavior with Thymeleaf where the view would be rendered inside the template, hopefully that makes since.
As far as I understand it right now Thymeleaf does not work that way. Instead you define fragments and include them on each page. It works the opposite direction.
I found this example of GitHub https://github.com/michaelisvy/mvc-layout-samples/tree/master/src/main/webapp/WEB-INF/view/thymeleaf
I don't understand the following file.
!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="#{/style/app.css}" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div th:fragment="menuFragment">
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
</body>
</html>
This line is pointless as its not part of the fragment as when it gets included in the users.html the html structure is lost.
<div class="container" style="padding-top: 50px;">
Essentially I want something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div>
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
<div id="content">
<!-- PAGES SHOULD RENDER HERE, example User.html -->
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas or best practices?
You want the Thymeleaf Layout Dialect.
I'm trying develop my first aplication with richfaces, to do this I'm using samples from rf site.
In this moment I try develop dropdown menu as link below
http://showcase.richfaces.org/richfaces/component-...nu&sample=topMenu&skin=classic
But I can't change color of bar menu.
I want this:
But I have this:
I'm working in netbeans and have added richfaces to a JSF (with facelets) project. I just added the jar and css files of richfaces, nothing more.
Bellow my facelet template and my menu file:
<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" >
<ui:insert name="top">Top</ui:insert>
<ui:include src="topo.xhtml" />
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
topo.xhtml
<!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"
xmlns:rich="http://richfaces.org/rich">
<ui:composition>
<h:outputStylesheet name="estilo">
.pic {
margin-bottom: -4px;
margin-right: 2px;
}
.search .rf-ddm-itm-sel {
background-color: transparent;
background-image:none;
border-color: transparent;
cursor: default;
}
</h:outputStylesheet>
<h:form>
<rich:toolbar height="26px">
<rich:dropDownMenu mode="ajax">
<f:facet name="label">
<h:panelGroup>
<h:graphicImage value="../resources/images/icon_client.jpg" styleClass="pic" alt="cliente" />
<h:outputText value=" Clientes" />
</h:panelGroup>
</f:facet>
<rich:menuItem label="Novo Cliente" ></rich:menuItem>
<rich:menuItem label="Consultar"></rich:menuItem>
</rich:dropDownMenu>
</rich:toolbar>
</h:form>
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="Current Selection: "></h:outputText>
<h:outputText style="font-weight:bold" value="#{dropDownMenuBean.current}"></h:outputText>
</a4j:outputPanel>
<br />
</ui:composition>
</html>
What is wrong?
1) If you want to use RichFaces skin, then add in web.xml
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>#{lookAndFeel.skin}</param-value>
<!-- blueSky, classic, DEFAULT, deepMarine, ruby, emeraldTown -->
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinningClasses</param-name>
<param-value>true</param-value>
</context-param>
2) If you want to use your css, then move your links from h:header into h:body in template file like this
<h:body>
<link rel="stylesheet" type="text/css"
href="#{request.contextPath}/css/basic.css" media="all" />
</h:body>
I have a problem when checking/unchecking a checkbox under internet explorer 8.
When I check a checkbox, it "moves" vertically, then it returns in the original position when I uncheck it.
I tried to figure it out playing with margin and vertical-align, but with no luck.
The code work flawlessly in Firefox and Chrome.
Page:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="../templates/ui-test.xhtml"
xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:nttdata="http://nttdata.com/facelets" lang="it-IT">
<ui:define name="title">Test Checkbox</ui:define>
<ui:define name="head"></ui:define>
<ui:define name="navbar"></ui:define>
<ui:define name="content">
<div id="contentCc">
<h:outputText value="Selection: " />
<p:selectBooleanCheckbox value="#{testViewBean.selectedValue}" />
</div>
</ui:define>
</ui:composition>
Template:
<?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:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
lang="it-IT">
<f:view contentType="text/html" locale="it_IT">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv='Cache-control' content='no-cache, no-store, must-revalidate' />
<meta http-equiv='Expires' content='0' />
<meta http-equiv='Pragma' content='no-cache' />
<title>
<ui:insert name="title">Default title</ui:insert>
</title>
</f:facet>
<ui:insert name="head"></ui:insert>
</h:head>
<h:body>
<div id="outer">
<div id="header" class="ui-widget ui-widget-header ui-corner-all">
<ui:insert name="navbar">
<ui:include
src="#{pageContext.request.contextPath}/components/navbar/navbar.xhtml" />
</ui:insert>
</div> <!-- header -->
<div id="content">
<ui:insert name="content">Default Content</ui:insert>
</div>
<div id="footer">
<!--ui:insert name="footer"></ui:insert-->
</div>
</div> <!-- outer -->
</h:body>
</f:view>
</html>
The resulting XHTML code is valid (validated with validator.w3.org), but under ie8 the input element "dance" when clicked. Here are the images of checked and unchecked checkbox under ie8:
https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_unchecked.png
https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_checked.png
Using h:selectBooleanCheckbox instead of p:selectBooleanCheckbox works under ie8, but I lose all the (framework default) css styles applied.
I have the same problem, but with all the browser (primefaces 5.1)
I fixed it with css on checkbox elements
display: block;
float: left;
I am using 960 grid system with container_12. The issue is I am using 2 grid_6 col and text is overlapping. When I try setting the overflow property to auto I get a scrolling panel but the text does not shift on the next line after the width.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<head runat="server">
<title></title>
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="body" class="container_12">
<div id="header" class ="grid_12">This is header</div>
<div id="nav" class="grid_3">
Navigation
<ul>
<li>Google</li>
<li>yahoo</li>
<li>bing</li>
</ul>
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
</div>
<div class="grid_9" >
<div id="content">
<h1>Content</h1>
<p>The premise of the system is ideally suited to rapid prototyping,
but it would work equally well when integrated into a production environment.
There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.</p></div></div>
</div>
</form>
</body>
</html>
Problem here-:
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
Make sure you have only one level of grids inside containers, eg:
<div class="container_12">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
If you want to add padding to your content areas, add an extra div inside the grids, don't add padding to the grids themselves, ie.
<div class="container_12">
<div class="grid_6"><div class="space"></div></div>
<div class="grid_6"><div class="space"></div></div>
</div>
I had the same problem. I had a "grid_3" and i put dummy content in there, but it kept spilling out of the div. I also just copied and pasted a word end to end to see what it looked like. I went back and added spaces between the words and it works perfectly. Doesn't expand outside of the div, it stops and expands vertically. What kind of bug or glitch is that in 960?