The Stripes web framework includes a layout engine which provides the following feature:
Layout Definition File - layout.jsp
<s:layout-definition>
Header
<div><s:layout-component name="body"/></div>
Footer
</s:layout-definition>
Page Using layout.jsp
<s:layout-render name="/layout.jsp">
<s:layout-component name="body">
Hello, reusable layout
</s:layout-component>
</s:layout-render>
Generated Content
Header
<div>Hello, reusable layout</div>
Footer
In the layout definition I specify the position of a component and the page defines the content of this component. I'm looking for an equivalent feature in Sitemesh, which I'm using in a Grails application.
It seems that Sitemesh will only only allow one to posititon (or decorate) the entire page body. Is there any way I can position more fine-grained content elements as above?
If you need more fine-grained content elements, take a look at Sitemesh Content Blocks
Related
I'm using PrimeFaces 2.2.1. I have JSF forms with a combination of regular widgetss (like h:inputText, h:selectOneMenu, h:selectBooleanCheckbox, and so on) and PrimeFaces widgets (like p:calendar, and so on).
The PrimeFaces widgets have a nice skin/theme, the regular widgets render as normal HTML widgets.
Is there an easy way to get the non-PrimeFaces widget render with the PrimeFaces skin/theme?
Thanks!
rob
[PS. I notice PrimeFaces 3.0 will have p:inputText and so on, but it's not out yet. :( ]
p:inputText is in PrimeFaces 2.2+
http://www.primefaces.org/showcase/ui/inputText.jsf
You have to have CSS designed for your non jsf widgets and apply it conditionally.
Update
Suppose there is non jsf calendar control (i.e. component which primefaces skin change won't effect)
Now you can have some bean in session to store current skin. for example say natural_orange now you can design css for your component say natural_orange_calendar.css and apply it like
<your component css="#{skinManager.currentSkin}_calendar.css">
Look into the html output of your jsf page. Find how the primefaces widgets get rendered and which css style classes they use.
Primefaces uses JQuery UI so the class names usually start with ui-.... Use the same classes for your non-primefaces widgets.
Example from one of my projects. This h:dataTable header looks like a p:dataTable:
<h:column headerClass="ui-widget-header ui-widget-content ui-state-default">
I'm working on a spring mvc project. I need to change the style of my menu items when I'm on a particular page. The css is done. But i still need a way to check on which page I am.
What is the easiest way to do this. All solutions are appreciated.
,
thank you
You can integrate Apache Tiles into your Spring MVC project (exmple here) and pass path to css needed in tiles.xml.
Alternatively you can send this path to your JSP page in JavaBean, but it is less declarative and requires accurate manipulating of beans.
Try this short cut.
Set the style's class name in the ModelAndView as a variable. In the JSP files directly use the variable as the style's class name.
In the controller
modelAndView.add("styleVariableName","styleToBeApplied")
In the JSP
<div class="${styleVariableName}">
styleToBeApplied should be a css class and you can repeat this for every controller action.
I have page which consists of couple fragments and in the "header" fragment I have this tag <webuijsf:script id="script_logo" url="/resources/logo.js"/>. This is rendered in HTML as <script src="/app/resources/logo.js" type="text/javascript" id="Header:script_logo"></script>. This is fine and it is working as expected. Now I need to force JSF somehow to return URL to the javascript with current version of app. This is known technique for forcing the reload of resource (javascript, css and images) in case they are cashed on client's side. I need to render something like <script src="/app/resources/logo.js?ver=1.0.405" type="text/javascript" id="Header:script_logo"></script>. Please note the ver parameter in the URL.
Thanks.
Tomas
Well, you can simply add it to the page:
<script src="/app/resources/logo.js?ver=#{commonBean.version}" ...>
I've assumed you want to version to be configurable and sent by the server, so commonBean is some jsf bean that returns the proper version.
Update: also take a look at <rich:loadScritp>. (from RichFaces)
The final option is to create your own component and include the version automatically. Look for tutorial for how to make that, it's not easy for JSF 1.2
Well thats pretty easy. JSF 2 uses a configuration to Bind a renderer to a component.
Therefor you need a component-family and a renderer-type. Now you can define in your
faces-config.xml a renderer for that family and renderer-type.
In Mojorra the following configuration is set for a outputScript-Component:
<renderer>
<component-family>javax.faces.Output</component-family>
<renderer-type>javax.faces.resource.Script</renderer-type>
<renderer-class>com.sun.faces.renderkit.html_basic.ScriptRenderer</renderer-class>
</renderer>
I must admit, that this info is coming from my debugging. I debugged the ScriptRenderer
and was able to get the component-family and renderer-type from the UIComponent.
Now if you use an other Renderer for that Component, just change the configuration
and the original will be overwritten:
<renderer>
<component-family>javax.faces.Output</component-family>
<renderer-type>javax.faces.resource.Script</renderer-type>
<renderer-class>your.own.renderer.class</renderer-class>
</renderer>
Do not forget, all h:outputScript components will render now with the new Renderer.
Same goes with stylesheets, but those will have an other render-type.
My website has a consistant header and footer that I want on all pages.
What is the best way to do this?
The header will have some dynamic data also, based on the current view.
P.S Does freemarker have any sort of master page functionality? Where I can create a base template, then have other templates build upon the base?
Basically I want to design a template that has header and footer + a place holder for the main content area.
THEN, all other pages will inherit the main template (with header + footer), and then inject the action's render output into the templates main content area.
Define a macro like this in an import library:
<#macro page title>
<html><head><title>${title?html}</title></head>
<body>
<!-- header section -->
<#nested/>
<!-- footer section -->
</body></html>
</#macro>
and use the following template for all your pages:
<#import "common.ftl" as c/>
<#c.page title="custom page title">
<!-- custom page content -->
</#c.page>
You can find the spring-specific part in the spring reference and the freemarker part in the freemarker online docs
(It doesn't seem like Freemarker supports master pages, but through recursive use of include you can achieve a high level of code reuse)
Have a look at SiteMesh. I believe you will find it useful.
I have an include page which is a navigation menu. When i click on those menu i want to refresh the content area of layout with a certain page. How can i pass the page name into a JSF page using include tag
I dont want to switch to facelets and also i tried using $ and calling the backing bean method. It works but no css or richfaces components renders properly.
Thanks
Raj
I am not sure about the RichFaces part, but you can just use EL in <jsp:include> as well.
<jsp:include page="/WEB-INF/#{bean.pagename}.jsp" />
If bean.getPagename() returns for example home, then this will include /WEB-INF/home.jsp. You also need to ensure that the JSF/HTML contents of home.jsp is wrapped by a <f:subview> with an unique ID.
As to the CSS trouble, just ensure that the generated HTML validates and that the CSS imports in the <link> tags are all valid.