I am trying to integrate parts of a JSF app I've been making with standard HTML and CSS markup, but I'm running into serious issues. Are there a few things I need to know about how to do this properly? Few pages on the internet address the best way to go about this, though I've already read a lot of complaints about how difficult this is.
This is a simplified version of my HTML showing one button:
<%@ page contentType="text/html; charset=MacRoman" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.button {background-color: white; width: 100%; height: 25px; cursor: pointer; font: 22px sans-serif; font-weight: bold; color: #333300;}
.button:hover {background-color: #999966; width: 100%; height: 25px; cursor: pointer; font: 22px sans-serif; font-weight: bold; color: #666633;}
.buttonText {position: relative; left: 30px; background-color: white; width: 300px; line-height: 25px;}
</style>
</head>
<body>
<div class="button">
<div class="buttonText">
Create New
</div>
</div>
</body>
</html>
I would like to have the above page in JSF and have the Create New button act as a commandlink, but with the appropriate style applied.
So far I haven't been able to achieve this.
My first question is what to do with the doctype declarations and the other elements that make this page XHTML valid. I tried removing them, but the page did not display correctly in all browsers, and so I put them back in. Is this going to cause any problems at all, or is it something I should be doing anyway? I just felt funny with a JSP page with XHTML declarations, but then again if the JSP is just going to produce markup it should have it.
My HTML page has a fair bit of markup and a small amount of JSF components.
Should I…
-start the <f:view><h:form> tags at the top and end at the bottom while enclosing all the html in <f:verbatim> tags?
-start the <f:view><h:form> at the latest possible times, enclose the HTML within that with <f:verbatim> and leave the rest of the HTML alone?
any other solutions??
Can I apply a style to an h:outputText or h:commandlink ?
thanks