My problem is about stylesheets and javascript that aren't loading when I'm using a second / in my URL.
When I use <link rel="stylesheet" href="stylesheets/theme.css" /> it works for my base route but stops working when I go deeper, such as /home/webpage.
These are the errors I am getting in my Chrome console:
Refer to this stack overflow question
Essentially you need an assets manager. You can then load this assets manager in your main layout (if you have one) and have your other views extend your main layout.
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
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 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/