• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Rob Spoor
  • Bear Bibeault
Saloon Keepers:
  • Jesse Silverman
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Al Hobbs
  • salvin francis

CSS in JSF

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello there =)

Really need some help.

I'm newbie in JSF. I am facing problems in using css to customize my web and also involved the used of FancySliding(Jquery). The problem is I want to create something like this

Form SLider

But, I messed up my code because of the tag. I noticed there are too many different tag used by html and jsf and now I'm confused in using some tag such as div and panelGroup etc....

This is my code



I'm using netbean right now because I need to make connection between my page and oracle database. I hope you can showed what are wrong here.
I have included my full source code incase you want to run it in netbean and also the code for Fancy Sliding.

My web code: http://www.2shared.com/file/OddRlLSs/Bookstore.html

FancySLiding code: http://www.2shared.com/file/BgAM9AlV/FancySlidingForm.html

Thank in advance.
 
Saloon Keeper
Posts: 24560
168
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to the JavaRanch, Oda! Please correct your display name as soon as possible.

As a rule, I don't recommend using raw HTML in JSF View definitions. Although it's not as likely to actually scramble the display these days, HTML does limit your ability to cross-render to other display media and in most cases there's a JSF equivalent.

For "div" or "p", a simple h:panelGrid can be used to create a 1x1 grid.

For "span", usually you can use h:outputText

For "list", a panelGrid or dataTable usually suffices (some say that the "ul" and "ol" constructs are obsolete even in straight HTML).

For "table", use a panelGrid or dataTable.

Avoid ui:repeat unless there is no alternative. Most of the things that people use ui:repeat on work better in dataTable.

It's good practice to provide an "id=" attribute on the container tags such as h:form, h:panelGrid, h:dataTable.

The header tags (h1, h2, ...) can often be eliminated when using a grid or table, since they support header and footer elements (facets).

I can't tell from your sample why there might be a problem with the jQuery slider, but in cases where you put jQuery directly on a JSF View definition, it's recommended to use the long-form ("jQuery.") syntax, not the shortcut "$", since the JSF EL processor may mis-interpret it.

I've also found it cleaner to place my CSS definitions in external files and not in the view definition. The "f:verbatim" tag can be used to wrap the CSS style tag if that's not convenient. Use f:verbatim + XML "CDATA" for JavaScript on the View definition (or move the JavaScript to an external file). JavaScript has syntax that can confuse the XML processor that parses the JSF View definition.
 
reply
    Bookmark Topic Watch Topic
  • New Topic