6 Replies Latest reply on Aug 28, 2009 2:36 PM by cash1981

    HTML <button> from SEAM

    egore911

      I've been trying to generate something like the following code from using hcommandButton or by s:button.


      button name="mybutton" type="button" value="Click">
      <p>
        <img src="someimg.png"><br>
        <b>Sometext</b>
      </p>
      </button>


      But all these generate are


      <input type="button" .../>


      or


      <input type="image" .../>


      and not a <button ...>. Do I miss something? I'd hate to write my own taglib (again) to do the job. Any suggestions?

        • 1. Re: HTML <button> from SEAM
          cash1981

          You want an image as a button?
          I have only done that using s:link




          <s:link>
              <h:graphicImage alt="#{messages['admin.process']}" value="/img/myPicture.png"/>                         
          </s:link>



          In the link you can define a view or action depending on what you want to do.

          • 2. Re: HTML <button> from SEAM
            egore911

            That's not exactly what I want. I want a button with a text and an image on it.

            • 3. Re: HTML <button> from SEAM
              cash1981

              I dont think you can have a button with image on it.
              However, you could use span and some css to have an image with text and so that they act as a link.




              <s:link>
                  <h:graphicImage alt="#{messages['admin.process']}" value="/img/myPicture.png"/>
              <span>My image</span>                         
              </s:link>



              • 4. Re: HTML <button> from SEAM

                I don't think the HTML BUTTON component is truly supported in JSF 1.2.  Here is what I do to create a button with an image (this can be an s:link, h:commandLink, h:commandButton, etc.).



                In the example below, some of the styling for the button is provided via styleClass="edit".


                <h:commandLink styleClass="edit"
                          id="cmdEditProfile"
                          action="#{actionCodeHere}">
                <h:graphicImage value="#{theme.imgdir}/buttons/edit.png"/>
                <h:outputText value="#{messages['form.button.edit']}"/>
                </h:commandLink>



                • 5. Re: HTML <button> from SEAM
                  egore911

                  Having an image is not really an option. Well, I guess I have to extend s:button in this case :-) Thanks anyway

                  • 6. Re: HTML <button> from SEAM
                    cash1981

                    Sorry for a giving a little misinformation. s:button has image attribute that you can use. You just have to remember to give the servlet path as uri also.
                    ie:


                    /myproject/img/button.png instead of the /img/button.png