How to apply different style for single output text field?

[eswaramoorthy1985]

Hi, everyone,

I want to apply different style for output text value.

Here i get the outputtext value from bean class during form initialization.

The outputText value is :  Name ?

I want hightlight the symbol like apply Red color (Ex:    Name ?   here inputBox )

Is possible css  apply to that symbol?

Style.jsp   
          

<h:form id="styleForm" binding="#{Style.initForm}">                
   <h:panelGrid columns="2">

      <h:outputText  value="#{Style.name}  #{Style.specialSymbol}"/>                                                 

      <h:inputText value=""/>
  </h:panelGrid>                                  
</h:form>

Style.java

package style;

import javax.faces.component.html.HtmlForm;

public class Style
{

    private HtmlForm initForm;
    private String name;
    private String specialSymbol;
    
    public HtmlForm getInitForm()
    {
        name = "Name ";
        specialSymbol = " ? ";
        return initForm;
    }
    
    public void setInitForm(HtmlForm initForm)
    {
        this.initForm = initForm;
    }   
    public String getName()
    {
        return name;
    }    
    public void setName(String Name)
    {
        this.name = Name;
    }    
    public String getSpecialSymbol()
    {
        return specialSymbol;
    }    
    public void setSpecialSymbol(String specialSymbol)
    {
        this.specialSymbol = specialSymbol;
    }
}

faces-config.xml

<managed-bean>
        <managed-bean-name>Style</managed-bean-name>
        <managed-bean-class>style.Style</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>

Help me about this.

Thanks in advance.

[ma.aqcon]

Use style or styleClass attributes of h:outputText!

If you want to highlight only the specialSymbol, split your output text into two texts...

{code}

<h:form id="styleForm" binding="#{Style.initForm}">
   <h:panelGrid columns="2">
      <h:panelGroup>
          <h:outputText value="#{Style.name}"/>
          <h:outputText value=" #{Style.specialSymbol}" style="color: red;"/>
      </h:panelGroup>
    <h:inputText value=""/>
  </h:panelGrid>
</h:form>

{code}

Hope that helps!

Regards

Michael

[eswaramoorthy1985]

Hi Michael Abele, Thanks for your reply.

  Here i don't use two outputtext component.

I want to acheive this (Name ?) using single h:outputText

<h:panelGrid columns="2">
       <h:outputText value="#{Style.name} #{Style.specialSymbol}"/>                                               
       <h:inputText value=""/>                      
</h:panelGrid>

Is possible to acheive that?

[ma.aqcon]

This works ...

<h:outputText value="#{Style.name} &lt;font style='color: red;'&gt;#{Style.specialSymbol}&lt;/font&gt;" escape="false"/>

But I don't think it's a nice solution!