CSS design templates - java

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/

Related

Adding image in the <title> for all pages

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

how to create a template with jsp and servlet

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

Is it advisable to use 'include' tag of jsp for setting the general structure of the website?

I am making a website with around 20 pages in it. Now almost all the pages have same general layout like the menu bar, header, footer etc. I've made a jsp page which contains this common contents and then with the help of 'include' tag I'm using it for the other pages. So is it advisable to follow this technique? Kindly inform me about the pros and cons of using this technique.
Thanks in advance.
Remember that with each #include tag,the whole jsp thing will be converted to a servlet and then it will work as required HTML format as compiled by the browser. So there is no doubt that for a large application it will create unnecessary performance issue.
Instead of doing this you may use iframe tag which is now widely used in web development.
You may modify the iframe source code as u want........
So it's totally depends on which way you want to proceed and your application context.there is no fixed rule that you must have to use this or that technoque

Wicket - <wicket:link> - How to put pages in different packages?

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.

Is there a way to change or reskin an incoming website on the fly?

I have a project where they want me to embed a website into a java application and they want the website to have a similar color scheme as the rest of the application. I know a lot about CSS and building websites but I am not aware of a way to change the look of a website as it comes in on the fly. Is there someone who can help?
Update:
I don't have access to the header because it is not my website. To give more info about the project is we have a browser embedded in a java client application. The user needs to access a website that displays the contents of a database. I have no access to the original html or css from the site.
What i need is to change the background color and font sizes of the incoming webpage to match the look and feel of the java application.
One approach would be to replace their CSS with your own.
You could also take the approach used by the Stylish plugin, which involves a lot !important decelerations to override the site's CSS. Since this is a Java app, I assume the user will not have opportunity to supply their own CSS, so using !important here doesn't precisely go against the standard.
In your particular situation, I'd look into data scraping, all you need to do is scrape the website for the data, and then re-style it to present it how you want.
Good luck
The Greasemonkey add-on for Firefox does just this. You can write a bit of Javascript code and have it run when certain web pages load. One common thing to use it for is to make changes to the DOM to move page elements around, hide or resize elements, change colors, etc. There are a bunch of examples at userscripts.org if you want to get an idea of what I am talking about.
Your code would simply need to do something similar. Load the page (including the normal style sheets) and then use the DOM to make changes to style elements as desired. Browse through the source of the page to get the names/ids of important elements, and your code can key off of those. Loading an additional CSS file containing your changes is an option, but doing it programmatically will likely give you more flexibility in the event that the target website changes.
Depends on what do you use to show the pages in Java. Most browser implementations support dynamic changes to the DOM, so you can simply add a CSS file to header as a last element, and it will be applied.
you need to know the markup of the html / css so you can make the best skin.
you could theoretically do it by styling just the basic tags: h1...h6, p, etc... but it would not be as good and would probably fail to produce the best results at times and even produce horrible things at times.
if you KNOW the site markup then you can make a skin and simply use CSS/images to skin it as you wanted it.
just include your CSS markup LAST so that it overrides the one already present on the site that you want to skin differently.
should not be a difficult thing per se. the skin itself is probably the better (more effort required) part of the job.
On the fly, should mean changing the html fetched. So parsing and replacing tokens seems to be a/the way.
You could change the locations of the style sheet files by replacing the href value in a link that points to a css file, and set the value to your style sheet (a different URI).
<link type="text/css" href="mylocalURI" rel="stylesheet />
(this should be the result of a process/replacement)
I think you understand what should happend for inline styles.
I would use JTidy to normalize the original site HTML to XHTML, then use XSLT to filter only the interesting/relevant information, obtaining XML format; and finally (since I wouln't want to convert XML to objects), XSLT again to transform the "pure" XML into the HTML look & feel I need/want.
All of this can be assembled as streams, using more or less 4 Kb of buffer per filter (12 Kb total) per thread. Also meaning that it will run fast enough. And all built on standard, open-source available components.
Cheers.

Categories

Resources