It doesn't make much of a difference, I know, but in JSF 2 I can output a resource (for instance css), in 1 of two ways:
a) Using the standard html <link> component and an absolute path to the component. This is treated as text and is therefore not built into a component.
b) Using the jsf <h:stylesheet> and setting its name and library.
Now, if I am writing the main template site, something that won't change (fixed), am I better off using plain text and giving absolute paths to the resources? Is there any change in performance, even if insignificant, between using that and the jsf component?
Does JSF optimize the access to this so that it doesn't have to locate the resource every time the page is rendered?
The same goes for all types of resources, images and javascript.
The optimization is actually dependent on the JSF implementation used but yes, both Mojarra and MyFaces have highly optimized the performance of resource handling. Every single possibility of server side and client side caching is been accounted. The most accessed resources are cached in server's memory, the I/O transfer goes through channels, the proper ETag and Last-Modified response headers are been set, etc. In case of Mojarra, a good starting point to check how it's all handled is the com.sun.faces.application.resource.ResourceHandlerImpl#handleResourceRequest() method.
its not <h:stylesheet> but <h:outputStylesheet>
JSF components are converted to plain html at the time of render hence when you see the source code of your page you will not find any jsf component all jsf components are automatically converted to according html components.
this tag will be converted to html as follow
<h:outputStylesheet library="css" name="style.css" />
HTML output…
<link type="text/css" rel="stylesheet"
href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />
Warning
When render CSS file via <h:outputStylesheet /> tag, remember put the <h:head />
tag as well; Otherwise the css file will not render successful.
refer http://www.mkyong.com/jsf2/how-to-include-cascading-style-sheets-css-in-jsf/
Related
So there seems to be a few ways to include jsp files in jsp files, being:
<%# include file="header.jsp" %>
<jsp:include page="header.jsp" />
<c:import url="header.jsp" />
<tagfiles:tagfile />
So which one should I use and why? What advantages / disadvantages do they come with?
The include directive, makes a copy of the included page and copies it into a JSP page (the "including page") during translation. This is known as a static include (or translate-time include) and uses the following syntax:
<%# include file="/jsp/userinfopage.jsp" %>
Two alternatives exist for the dynamic include
The jsp:include tag, described in "Standard Actions: JSP Tags", dynamically includes output from the included page within the output of the including page during execution. This is known as a dynamic include (or runtime include) and uses the following syntax:
<jsp:include page="/jsp/userinfopage.jsp" flush="true" />
<c:import url="header.jsp" />
Unlike jsp:include, the c:import action provides a mechanism to access resources that can be specified through a URL, thus allowing page authors to get access to resources that reside outside the Web application. On the other hand, it lacks the ability to flush the response. Finally, c:import is comparatively more heavyweight and is therefore not appropriate when a lightweight solution is sought.
tagfiles are basically templates, which are like generic and can render some common views, but internally they will themselves use html tags itself.but not much of use while including jsp pages.
In my Project, I have used following approach
<jsp:include page="header.jsp" />
I have used this for loading specific div element instead of refreshing whole page.
This can be done by using JQuery's load method.
Including JSP file allows us to reuse the template in many places. Just write template code in JSP file and use it wherever required.
JSP page directives works at translation time while standerd actions works at run time.
You can tagfiles for calling functions on server side. You can also use tagfiles for creation of templates.
Q1: Does Spring or any opensource java UI framework support partial views like that in asp.net mvc?
For example in my main index.html (or _layout.cshtm per asp.net mvc3 spec)
I would have the folllowing code:
<span id="logindisplay">#Html.Partial("_LogOnPartial")</span>
where #Html is a helper to display a partial view for _LogonPartial.cshtml which just injected it's html view contents into the page?
Q2: If this is supposed If I want to display a bunch of partial views it would be helpful to display them concurrently in parallel to improve performance. Very similar to what linkedin is doing using dust and fizzy? http://engineering.linkedin.com/profile/engineering-new-linkedin-profile
Q3: Is fizzy available as open source like that of dust?
If you want to include content of a page into another page, by adding some code on the page itself, you should compare asp with jsp, not ASP.NET MVC* with JEE - Spring MVC
So, an equivalent to <span id="logindisplay">#Html.Partial("_LogOnPartial")</span> on a jsp would be one / all of the following
On your jsp, include content from another jsp using <%# include file="../includes/inner-content.jsp" %>. This is what is called a static include. The source of the included jsp is included and made part of the parent jsp, before the jsp is compiled. If you use an IDE, it will check to ensure the included jsp does infact exist at the path specified, relative to the location of the jsp in which you are adding the include. Technically this is a JSP Directive. The jsp being included could just be a fragment, and not addressable from the outside world (could be hidden inside WEB-INF)
You can also use what's called a Dynamic include <jsp:include page="someJSP.jsp" />. In this case, the included JSP should be addressable from the browser and should be capable of being rendered independently. When the server is executing the servlet to render the parent JSP, it stops when this tag is seen, and starts executing the servlet for the included jsp, the output obtained from the inner jsp execution is then merged to the output of the parent jsp, and processing of the parent jsp is resumed.
A third option would be to use Core JSTL taglib's <c:import url=""/>. This works just like option 2 above, except it also allows you to import a page / content from a url that lives outside your application. Basically you can mention a path to a jsp, or relative URI to a servlet mapping in your application, or a URL to an external page.
Now, I suspect this is not really what you want to do, if you are comparing with what Linkedin is doing. You want to mashup content from sources in your own application, and compose your page. You also want to do this in an asynch manner so as to keep load times in check. In this case, you HAVE to use JavaScript and Ajax. All the mechanisms described above are for server rendered pages (All HTML is created before the page is rendered in the browser). Just like #HTML. You need to create a simple framework / use an existing one, where once a page loads, it fires asynch ajax calls to the server to get content for specific areas on the page and renders the returned HTML in those specific areas.
Hope this helps.
Do let me know if I've misunderstood your question.
I have a web app, and it has a directory structure like:
/com/myproject/MyPage.java
/com/myproject/MyPage.html
/com/myproject/resources/styles.css
/com/myproject/resources/bg.png
In MyPage.html I have code like:
<wicket:link>
<link rel="stylesheet" type="text/css" href="resources/styles.css"/>
</wicket:link>
The CSS file has references like url(bg.png). And all is good.
However, my app is now getting so big (I have about 15 pages so far), I don't want to put all the pages and HTML in one directory. However things like "styles.css" are referenced from all pages. So I would like to create various packages for various groups of pages, but still have "styles.css", and the images etc. that it references, existing only once in my source tree.
I would like to do something like:
Create e.g. /com/myproject/usermanagement/UserManagementStartPage.java
but still have /com/myproject/resources/styles.css (with the intention of sharing that between all pages)
The HTML still references the CSS with a <wicket:link>, e.g. href="../resources/styles.css"
Or even better, have an absolute link to the css e.g. href="/com/myproject/resources/styles.css (that way when I move a page from one package to a deeper/shallower package, I don't have to change the number of ...)
Am I thinking along the right lines? How would you approach this problem?
You need something like:
<wicket:link>
<link rel="stylesheet" type="text/css" href="$up$/resources/styles.css"/>
</wicket:link>
org.apache.wicket.settings.IResourceSettings.setParentFolderPlaceholder("$up$")
This way the url will look like /com/myproject/usermanagement/$up$/resources/styles.css and Wicket will resolve the parent folder for you.
Wicket handles CSS file links that are relative to the root of the web app. That way, it doesn't matter if you move a markup file one level higher or deeper. It is also possible to include style sheets from Java code, as explained
in this article . Using markup inheritance, you can just add your style sheet to your base page and let your real pages inherit from it.
I'm about to develop a j2ee web application . I need to know , how can I have the different designs (layout of CSS) for jsp pages . Say If I send the same data always but I want to present that data in different web designs ( web page designs) .
So that I can navigate through the designs more flexibly and choose the best one for my applications.
My need is , with out changing the content related to design in jsp page , (like classname's , id 's related to CSS for different textboxes and lables.. etc) , instead I'll change only one attribute in my application so that whole design would change.
Can any one suggest where can I find these sets of web layouts (CSS layouts).
What you're looking for then is the 960.gs grid system. :)
It provides.. "..a streamlined web development workflow by providing commonly used dimensions..". which is what you have asked for in your question.
I agree with another poster about having separate CSS Style Sheets (external style sheets).
Have you checked out CSS Zen Garden? There's probably more than a hundred different web pages that all use the same HTML, but changed the CSS & image files only. That's what opened my eyes to what CSS can do.
If i understand your question correctly, one way to accomplish changing layout without changing classes and ids is to have separate stylesheets for each layout.
You can then select the desired stylesheet in the header of the html file being served.
i.e
layout 1:
<link rel="stylesheet" type="text/css" href="layoutOne.css" />
layout 2:
<link rel="stylesheet" type="text/css" href="layoutTwo.css" />
Finally I reached below link . It sounds great
http://www.oswd.org - You can download from this site many number of designs.
I agree the answer on zengarden , here is the URL http://www.mezzoblue.com/zengarden/alldesigns/
What would be the Master Pages equivalent in the Java web development world? I've heard of Tiles, Tapestry and Velocity but don't know anything about them. Are they as easy to use as Master Pages?
I want something as easy as set up one template and subsequent pages derive from the template and override content regions, similar to Master Pages.
Any examples would be great!!
You should also check out Facelets; there is a good introductory article on DeveloperWorks.
The Facelets <ui:insert/> tag is comparable to the ASP.NET <asp:ContentPlaceHolder/> tag used in master pages; it lets you provide default content for that area of the page, but this can be overridden.
To fill the Facelets template in another page, you start with a <ui:composition/> element that points to the template file. This is roughly equivalent to declaring the MasterPageFile attribute in an ASP.NET page.
Inside the <ui:composition/> element, you use <ui:define/> elements to override the template defaults, similar to the way an <asp:Content/> tag is used. These elements can contain any kind of content - from simple strings to JSF elements.
So, to bring it all together...
In master.xhtml:
<!-- HTML header content here -->
<ui:insert name="AreaOne">Default content for AreaOne</ui:insert>
<ui:insert name="AreaTwo">Default content for AreaTwo</ui:insert>
<!-- HTML footer content here -->
In page.xhtml:
<ui:composition template="/WEB-INF/templates/master.xhtml">
<ui:define name="AreaOne">Here is some new content</ui:define>
<ui:define name="AreaTwo">
<p>Some new content here too</p>
</ui:define>
</ui:composition>
And this will render as:
<!-- HTML header content here -->
Here is some new content
<p>Some new content here too</p>
<!-- HTML footer content here -->
You also get some other benefits with Facelets, such as the ability to reuse page components with different data.
(Edited to provide more information.)
First, the equivalent of ASP.Net in Java is going to be a web framework, such as the ones you mention (Tiles, Tapestry and Velocity).
Master pages give the ability to define pages in terms of content slotted into a master template.
Master pages are a feature of ASP.Net (the .Net web framework), so you are looking for a feature similar to master pages in a Java web framework.
http://tiles.apache.org/framework/tutorial/basic/pages.html gives some basic examples using Tiles and JSP to implement something similar with Struts, a Java web framework. In this case, the Master Pages functionality is a plugin on top of Struts.
Velocity is a generic templating engine, not specialized for web pages and definitely more complicated than you need. (I've seen it used for code generation.)
Tapestry is more of a full featured web stack than Tile, and is probably good for your purposes. Its templating functionality involves creating a component and putting all common markup in that. An example is at http://www.infoq.com/articles/tapestry5-intro.
The specifics of this differ based on which Java web framework you choose.
I've used sitemesh in previous projects and it's pretty easy to set up. Essentially, you create decorators which are equivalents of master pages. You then define which child pages use which decorators. See introduction to sitemesh for more information.