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

Community Driven Extensions Project
Post Reply
smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Oct 2012, 04:29

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! :)
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

09 Oct 2012, 08:12

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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Oct 2012, 08:19

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.
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest