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.
Related
My favicon is in my web root folder, and most of my jsp views work just fine with it. All I have done is add:
<link href="favicon.ico" rel="icon" type="image/x-icon" />
to my and it seemed to work fine.
That was until I realized it wasn't showing up in some of my views. I read through the whole code, to see any differences, but I found none. After a while, I decided to copy and paste the code from the view that I had my favicon working to the one that didn't. And here's the weird thing: it still just shows up in one of the views. I have tried several browsers and it still doesn't show up in a view that literally has the same code (and gives no console errors) as the other one. Both views are in the same folder. How on earth is this even possible?
If any of your JSPs show in the browser with a different path (other than root), then the relative path you've specified for the favicon will look in the same path for it and not find it. If you use an absolute path for your favicon, they should all be able to see it.
I am able to add an image as part of my web application title but what I need to know is that, if there is a way in CSS or any other way to set this image for all the pages at once instead of adding it in the head tag for each and every page.
<link rel="shortcut icon" href="../images/favicon.ico" />
Thanks
You can have that link tag inside another .jsp file and include it anywhere you like writing <%#include file="includes/header.jsp" %>.
header.jsp will contain the favicon and maybe css that you want to use everywhere:
<link rel="shortcut icon" href="../images/favicon.ico" />
Using this include pattern you avoid repeated code and having to edit lots of files if your favicon url changes. A great example to illustrate this is to have a .jsp file for the navigation and include it everywhere in your website. This way if you want to add another page to the navigation you just have to edit one file.
You'll need to use php include, cause you can call it in every page and you only need to code it one time...
For example, you write your head with php extension(head.php) and then you use on your pages
include 'sourcefile/head.php';
then everything that you coded will be post there.
hope it helps
let's say I have a site with 10 pages. Every page is called by a servlet. For example, I have the servlet "index" that makes a forward() to "index.jsp".
In my index.jsp i have 2 includes for the header and the footer
...
<jsp:include page="header.jsp" >
home page text
<jsp:include page="footer.jsp" >
...
Now I have 10 pages similar to the index page, I mean I have 10 pages that include a header and a footer.
Let's say I decide to delete the footer: I should edit 10 pages.
What im wondering is if there's something that allow me to use just one page, and show, dinamically, just the "content" of the page (home page, contacts, ecc), keeping in mind that i use a servlet to get every page content (with a forward()).
what you need is Apache Tiles Framework,
Tiles allows authors to define page fragments which can be assembled into a complete pages at runtime. These fragments, or tiles, can be used as simple includes in order to reduce the duplication of common page elements or embedded within other tiles to develop a series of reusable templates. These templates streamline the development of a consistent look and feel across an entire application.
It includes configuration file so you can edit in one file alone , so that the changes will be reflected in common for all jsp files
A nice Startup tutorial here
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/
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/