Page 1 of 1

Onboard with PF Extensions; using pe:timePicker!!!

Posted: 09 Oct 2012, 04:29
by smithh032772
PrimeFaces Extensions team and community,

I'm finally onboard with PrimeFaces Extensions, and I wanted to share a few things here.

OLD/PREVIOUS code prior to migration to PrimeFaces Extensions: p:calendar timeOnly="true" and "Save" p:commandLink (yuck!)

Code: Select all

<p:calendar id="reportTime" value="#{pf_ordersController.reportTime[0]}"
	    timeOnly="true" pattern="hh:mm a"
	    size="10" label="Report Time">
    <f:convertDateTime pattern="hh:mm a" />
</p:calendar>
<h:outputText escape="false" value="&nbsp;"/>
<h:outputText escape="false" value="&nbsp;"/>
<p:commandLink id="saveReportTime" value="Save"
	       update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
	       actionListener="#{pf_ordersController.reportTimeChangedOnAddEdit()}"/>
NEW code using PrimeFaces Extensions: pe:timePicker mode="spinner" with p:ajax close event!

Code: Select all

<pe:timePicker id="reportTime" value="#{pf_ordersController.reportTime[0]}"
               label="Report Time" mode="popup" showPeriod="true" style="width: 100px;">
    <p:ajax event="close" listener="#{pf_ordersController.reportTimeChangedOnAddEditClose}"
            update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
</pe:timePicker>
Showcase shows mode="spinner" on before/close event example. mode="spinner" requires a Submit button to submit the changes. I used the showcase code, first, and then realized since my use-case/requirement is auto-save (per my brothers/family), I had to go with mode="popup", since I don't want any "Save" commandbutton/link!

Small recommendation (or friendly suggestion): to be consistent in showcase example for before/close event, you may want to use mode="popup" instead of default (mode="spinner").

FYI, I had to go with the OLD/PREVIOUS PrimeFaces code and provide a commandButton/Link, because I've seen some nasty bugs related to p:calendar, and p:calendar timeOnly="true" just did not meet my need/requirement at all, because if you want to use p:ajax with p:calendar timeOnly="true", then the slider would issue p:ajax after the 'first' small change via slider, and then no other AJAX requests are issued. Also, I split up the date and time, since the legacy app required the endusers to enter date and time, separately. Even worse than that, the time had to be 24-hour time for data integrity reasons since legacy app was dBase IV (MS-DOS) app they have been using since 1994/1995. :)

Question, suggestion, and statement:

Is it possible for pe:timePicker to have an HTML5 variant? I have endusers (including myself) that are accessing HTML_BASIC render kit xhtml pages via Android mobile, and if app detected that user is on mobile device (via user agent), I have code that uses p:inputText type="date|number|..." since p:inputText supports HTML5, and HTML5 is working great in/on mobile browsers with appropriate keyboards per p:inputText type="...". I know this is old news for you all, so I thought I might ask the question and/or make suggestion. Of course, I don't ever 'push' my needs; I don't mind spending time and developing my own solution to meet my own needs. :)

Oh, here is code that I have on the page I just edited (added pe:timePicker); it also has p:inputText HTML5 variant for mobile endusers/devices.

Code: Select all

<h:panelGrid columns="2" cellpadding="1" cellspacing="1"
             rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}">
    <h:outputText value="Trip Date:" />
    <p:inputText id="tripDateOnMobile"
                 value="#{pf_ordersController.tripDate[0]}"
                 label="Trip Date" type="date">
        <f:convertDateTime pattern="yyyy-MM-dd" />
        <p:ajax partialSubmit="false"
                update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
                listener="#{pf_ordersController.tripDateChangedOnAddEdit}"/>
    </p:inputText>
    <h:outputText value="Trip Time:" />
    <p:inputText id="tripTimeOnMobile"
                 value="#{pf_ordersController.tripTime[0]}"
                 label="Trip Time" type="time">
        <f:convertDateTime pattern="HH:mm" />
        <p:ajax partialSubmit="false"
                update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
                listener="#{pf_ordersController.tripTimeChangedOnAddEdit()}"/>
    </p:inputText>
</h:panelGrid>

<h:panelGrid columns="3" cellpadding="1" cellspacing="1"
             rendered="#{pf_usersController.loggedInViaAndroid == 'N'}">
    <h:outputText value="Trip Date/Time:" />
    <p:calendar id="tripDate" value="#{pf_ordersController.tripDate[0]}"
                pattern="MM/dd/yyyy" navigator="true"
                size="12" label="Trip Date">
        <f:convertDateTime pattern="MM/dd/yyyy" />
        <p:ajax partialSubmit="false" event="dateSelect"
                listener="#{pf_ordersController.tripDateSelectedOnAddEdit}"
                update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
        <p:ajax partialSubmit="false"
                update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"
                listener="#{pf_ordersController.tripDateChangedOnAddEdit}"/>
    </p:calendar>
    <pe:timePicker id="tripTime" value="#{pf_ordersController.tripTime[0]}"
                   label="Trip Time" mode="popup" showPeriod="true" style="width: 100px;">
        <p:ajax event="close" listener="#{pf_ordersController.tripTimeChangedOnAddEditClose}"
                update=":orderEditNorthForm :orderEditForm:formMessages :orderEditForm:_ajax_status"/>
    </pe:timePicker>
</h:panelGrid>
so far, so good, i'm loving PrimeFaces Extensions, and thank you PrimeFaces Extensions team for the product! :)

Re: Onboard with PF Extensions; using pe:timePicker!!!

Posted: 09 Oct 2012, 08:12
by Oleg
Hello Howard,

And welcome on board! We didn't think about HTML5 yet. Maybe you can consider using of HTML5 renderer from OmniFaces. Do you know that?

Many thanks.

Re: Onboard with PF Extensions; using pe:timePicker!!!

Posted: 09 Oct 2012, 08:19
by smithh032772
Thanks Oleg. I did take a peek/look at OmniFaces HTML5 renderer. I'll take a look and see how much change I'd have to make in xhtml.