Icon for primefaces commandButton

I found placing my own icon in <p:commandButton> a little confusing. When I try to do this I got no icon at all, or strange mark looked like this:

When I've done a little research I found this:

I can have an icon in a three way:

#1. Button as a picture. There is no value/description visible. Only an icon/picture.
         <p:commandLink action="#{someBean.someAction()}">
            <h:graphicImage name="images/new_create.png" />
         </p:commandLink>

#2. Button with an icon/picture as a background. So one see a description like "New" and the picture of icon in background. 
<p:commandButton value="New!" styleClass="ui-back-but-new"/>
and respectively in css: 
.ui-back-but-new{
   background: url("#{resource['images/new_create.png']}") no-repeat top left !important;
}

#3. Button with an icon placed left to its description (value attrib).
<p:commandButton value="New" icon="ui-but-new-icon"/>
and respectively in css:
.ui-but-new-icon{
   background-image: url("#{resource['images/new_create.png']}") !important;
}

The problem was...:

All my problems came from wrong path to the icon image. It is probably the most frequent mistake. I have coded it as images/new_create.png in css statements. Structure of folders was /resources/images/new_create.png.

The proper path could be given in a three ways:

• url("#{resource['images/new_create.png']}")
• url(../resources/images/new_create.png) 
• url(/MyAppName/resources/images/new_create.png) 

The first way is the best. It uses JSF resource identifier so it is most flexible. 

The effect #1, #2, #3:

The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within

When you see

The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form>

in your NetBeans web application, change web.xml from:
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>


To:
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Production</param-value>
    </context-param>

Przekazywanie wartości z primefaces dataTable

Aby przekazać wartości wybranego z tabeli wiersza, do na przykład formularza edycji wartości tego wiersza, wystarczy w przypadku dataTable primefaces skorzystać z zaleconego mechanizmu, np:

<p:dataTable var="car" value="#{carBean.cars}" selectionMode="single" selection="#{carBean.selectedCar}">
   
...columns
</p:dataTable>

carBean to oczywiście managed bean z właściwością/polem selectedCar, posiadającym właściwy get i set.

Wystarczy teraz umieścić przycisk wywołujący formularz, który odwoła się do pól/pola beanu carBean. np:

<p:commandButton value="Edit" action="/car/editCar"/>

Jednakże odwołanie na stronie editCar do pól beana carBean, zwrócić może niechybnie null, mimo, że dopiero co były ustawione na właściwe wartości.

Rozwiązanie tkwi w deklaracji zakresu beana, a ściślej w użytej do tej deklaracji bibliotece. Jeśli bean jest @SessionScoped, to należy użyć

import javax.enterprise.context.SessionScoped;

Natomiast użycie:

import javax.faces.bean.SessionScoped;

sprawi, że nie zobaczymy wcześniej ustawionych wartości.

NetBeans, facelets, jsf i znikający css.

Gdy w projekcie opartym o JSF, umieścimy klientów template, w innych katalogach niźli sam template, to szybko może się okazać, że całe opisanie strony w przywołanych w template plikach css, nie pokazuje się wcale w stronach "klienckich".

Objaw: na stronach będących klientami template, brak formatowania css.

Dzieje się tak z powodu sposobu zapisu odwołania do arkuszy stylów css, jaki stosuje wizard NetBeans przy tworzeniu template. Ten sposób to:

<link href="./resources/css/default.css" rel="stylesheet" type="text/css"/>

Zapis powyższy wskazuje, iż arkusz stylów (styli) (ze stylami) znajduje się w podkatalogu "/resources/css" katalogu aktualnie wyświetlanej strony.

Gdy strona znajduje się w innym katalogu niż template, którego jest klientem, nie ma mowy aby zostały na niej zobaczone style css, włączone w templacie.

Rozwiązaniem jest zmiana wskazania arkuszy css w template, na następujące:

<h:outputStylesheet name="default.css" library="css"/>

Wówczas jeśli "default.css znajduje się w podkatalogu /resources/css stron www, style css będą widoczne w stronach klienckich.