2

I am trying primefaces mobile Calendar.jsf example using JSF 2.1, PrimeFaces 3.5 and PrimeFaces Mobile 0.9.4.Do I have to provide stylesheet for Calendar by myself or can it be pulled from primefaces. Below is the code I'm using now.

segment.xhtml

<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"        
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE">

<f:facet name="postinit">            
          <link rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
            <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />            

            <script type="text/javascript">
                (function($) {
                    $.mobiscroll.i18n['pt_BR'] = $.extend($.mobiscroll.i18n['pt_BR'], {
                        dateFormat: 'dd/mm/yy',
                        dateOrder: 'ddMMyy',
                        dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
                        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                        dayText: 'Dia',
                        hourText: 'Hora',
                        minuteText: 'Minutos',
                        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                        monthText: 'Mês',
                        secText: 'Segundo',
                        timeFormat: 'HH:ii',
                        timeWheels: 'HHii',
                        yearText: 'Ano',
                        setText: 'Selecionar',
                        cancelText: 'Cancelar',
                        nowText: 'Agora'
                    });
                })(jQuery);
            </script>
        </f:facet>   

<pm:page id="page" title="Calendar">  
<pm:view id="menu">
<pm:content>
 <p:calendar value="#{calendarBean.date1}" pattern="MM/dd/yyyy HH:mm" /> 
</pm:content>
        </pm:view>
    </pm:page>     
</f:view>

I get following errors on loading segment.xhtml page

GET http://localhost:8080/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile 404 (Not Found) segments.xhtml:3
GET http://localhost:8080/RES_NOT_FOUND 404 (Not Found) segments.xhtml:3
Uncaught TypeError: Cannot read property 'i18n' of undefined segments.xhtml:7
Uncaught TypeError: Cannot call method 'replace' of undefined primefaces-mobile.js.xhtml:1
FiendFyre
  • 157
  • 3
  • 17

1 Answers1

0
<f:facet name="postinit">
<link rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />  
 <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" /> 
</f:facet>
  1. download PrimeFaces Mobile 0.9.5.jar add it to your Library in project.
  2. edit segment.xhtml with the code above
Sashkoz
  • 11
  • 2