How apply CSS on a h:inputText?
The output <h:inputText ...> should not have any class attribute by default. You can add a the class attribute by defining a styleClass attribute in the JSF tag
<h:inputText id="name" styleClass="text-input" value="#{contact.client.name}" >
</h:inputText>
See the reference for details
How to change css class for the inputfield and label when validation fails?
Bind the input component to the view via binding attribute. It'll become available as an UIInput component reference in EL, so that you can use UIInput#isValid() in styleClass attribute.
<h:outputLabel for="emailInput" value="Email"
styleClass="#{emailInput.valid ? '' : 'error'}" />
<h:inputText id="emailInput" binding="#{emailInput}" ...
styleClass="#{emailInput.valid ? '' : 'error'}" />
(note that I fixed your label to be a real label; also note that you don't need to create some bean property at all as suggested by the answer of cubbuk)
Yes, this may produce quite some non-DRY boilerplate code in the view. You can abstract this away with a phase listener or a system event listener. You can also use OmniFaces <o:highlight> component which does all the job transparently. See also the live demo.
how to properly use css in jsf?
Just to elaborate on BalusC's comment: After you add the form, JSF will prepend the id of the form to its children's id's, so the first inputText will now have id="loginForm:usernameInput" (as you can see with "show source" or similar in the browser).
Since this breaks the styling I expect you currently use the id for styling. Much better practice is to use the styleClass attribute instead. Also you would probably want to bind the inputText's to bean properties in the value attribute. Further suggestions are to use a p:panelGrid and a p:password for the password:
.usernameInput {
...
}
.passwordInput {
...
}
and
<p:panelGrid columns="2">
<p:outputLabel id="usernameLabel" for="usernameInput" value="User name: " />
<p:inputText id="usernameInput" styleClass="usernameInput" value="#{bean.username}"/>
<p:outputLabel id="passwordLabel" for="passwordInput" value="Password: " />
<p:password id="passwordInput" styleClass="passwordInput" value="#{bean.password}"/>
</p:panelGrid>
Alignment Issues with rendering a Input Text Field
Since is missing almost everythig and most code is just wrong, i make a simple example that work for me, i addedd two buttons to switch between mode:
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.codenotfound</groupId>
<artifactId>jsf-primefaces-hello-world</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>jsf-primefaces-hello-world</name>
<description>JSF PrimeFaces Hello World Example</description>
<url>https://codenotfound.com/jsf-primefaces-example.html</url>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.0.RELEASE</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<joinfaces.version>3.3.0-rc2</joinfaces.version>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.joinfaces</groupId>
<artifactId>joinfaces-dependencies</artifactId>
<version>${joinfaces.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>org.joinfaces</groupId>
<artifactId>primefaces-spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>javax.enterprise</groupId>
<artifactId>cdi-api</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
helloworld.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:form>
<p:panel id="form" styleClass="panelNoBorder">
<p:fieldset toggleable="true" toggleSpeed="500" legend="Form">
<p:panelGrid styleClass="panelNoBorder" style="width:100%">
<p:row>
<p:column style="width: 10%;">
<p:outputLabel value="First Name" />
</p:column>
<p:column style="width: 40%;">
<p:inputText id="FirstName" value="#{javaMB.firstName}"
maxlength="10">
</p:inputText>
</p:column>
<p:column style="width: 10%;">
<p:outputLabel value="Last Name" />
</p:column>
<p:column style="width: 40%;">
<p:inputText id="LastName" value="#{javaMB.lastName}"
maxlength="10">
</p:inputText>
</p:column>
</p:row>
<p:row rendered="#{javaMB.tabId eq 1}">
<p:column style="width: 10%;">
<p:outputLabel value="Initial Pricing" />
</p:column>
<p:column style="width: 40%;">
<p:inputText id="InitialPricing" value="#{javaMB.initialPricing}"
maxlength="10">
</p:inputText>
</p:column>
</p:row>
<p:row rendered="#{javaMB.tabId eq 2}">
<p:column style="width: 10%;">
<p:outputLabel value="Selling Price" />
</p:column>
<p:column style="width: 40%;">
<p:inputText id="SellingPrice" value="#{javaMB.sellingPrice}"
maxlength="10">
</p:inputText>
</p:column>
</p:row>
<p:row rendered="#{javaMB.tabId eq 3}">
<p:column style="width: 10%;">
<p:outputLabel value="Cost Price" />
</p:column>
<p:column style="width: 40%;">
<p:inputText id="CostPrice" value="#{javaMB.costPrice}"
maxlength="10">
</p:inputText>
</p:column>
</p:row>
<p:row rendered="#{javaMB.tabId eq 4}">
<p:column style="width: 10%;">
<p:outputLabel value="Survey Comments" />
</p:column>
<p:column style="width: 40%;">
<p:inputTextarea id="SurveyComments"
value="#{javaMB.surveyComments}" rows="10" cols="50">
</p:inputTextarea>
</p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
<p:commandButton value="Next" update="form">
<f:setPropertyActionListener value="#{javaMB.tabId+1}"
target="#{javaMB.tabId}"></f:setPropertyActionListener>
</p:commandButton>
<p:commandButton value="Reset" update="form">
<f:setPropertyActionListener value="1" target="#{javaMB.tabId}"></f:setPropertyActionListener>
</p:commandButton>
</p:panel>
</h:form>
</ui:composition>
JavaMB
package blizzard.games.sec.managedbeans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@ManagedBean(name = "javaMB")
@ViewScoped
public class JavaMB {
private static final long serialVersionUID = 1L;
private static final Logger logger = LoggerFactory.getLogger(JavaMB.class);
private String firstName;
private String lastName;
private String initialPricing;
private String sellingPrice;
private String costPrice;
private String surveyComments;
private int tabId = 1;
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getInitialPricing() {
return initialPricing;
}
public void setInitialPricing(String initialPricing) {
this.initialPricing = initialPricing;
}
public String getSellingPrice() {
return sellingPrice;
}
public void setSellingPrice(String sellingPrice) {
this.sellingPrice = sellingPrice;
}
public String getCostPrice() {
return costPrice;
}
public void setCostPrice(String costPrice) {
this.costPrice = costPrice;
}
public String getSurveyComments() {
return surveyComments;
}
public void setSurveyComments(String surveyComments) {
this.surveyComments = surveyComments;
}
public int getTabId() {
return tabId;
}
public void setTabId(int tabId) {
this.tabId = tabId;
}
}
h:inputText enabled/disabled - change background color
reason, why I'm trying to change the background is, that since I've installed richfaces, disabled and enabled has the same color, both are white
RichFaces ships with its own basic skinning. On RichFaces 4.0 you can disable it altogether by the following context parameters in web.xml.
This disables the standard skin stylesheets (see chapter 6.6.1 of the linked developer guide)
<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>
This disables the component specific skin stylesheets (see chapter 6.6.2)
<context-param>
<param-name>org.richfaces.enableControlSkinningClasses</param-name>
<param-value>false</param-value>
</context-param>
If you however don't want to disable the basic skinning for some reason, but rather want to override specific CSS property/properties, then you need to specify exactly those property/properties in your own CSS. Using Firebug, you can rightclick the element of interest and choose Inspect Element to get all definied CSS properties in the right hand side of the bottom console.
In this particular case, the input has a background-image property pointing to a particular URL. You need to override it like as follows:
input {
background-image: none;
}
Related Topics
How to Use an Arraylist as a Prepared Statement Parameter
Intellij Fat One Jar Artifact Does Not Generate a Working Output
JPA Native Query Select and Cast Object
Android: Pass Data(Extras) to a Fragment
Hosting an Executable Within Android Application
Dateformat Parse - Not Return Date in Utc
Passing a JavaScript Object Using Addjavascriptinterface() on Android
How to Execute JavaScript on Android
Android Audiorecord Class - Process Live Mic Audio Quickly, Set Up Callback Function
Android Fragmentmanager Backstackrecord.Run Throwing Nullpointerexception
How to Set Seekbar Min and Max Value
How to Navigate from One Screen to Another Screen
Android - How to Replace Part of a String by Another String
How to Get Difference Between Two Dates in Android, Tried Every Thing and Post
How to Change Package Name of an Android Application