Primefaces移动日历看起来像primefaces日历组件

时间:2013-07-31 10:48:25

标签: primefaces-mobile

我是关于移动设备的新手。我做了一个简单的页面,并对p:calendar有一些问题。我的日历看起来像primefaces日历,而不是像primefaces mobile。 这是我的代码:

<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">



<pm:page title="EDMS">   
     <f:facet name="postinit">                         
      <link rel="stylesheet"
            href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
     <h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css"  />
     <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />               
    <style>
            .th-groups th {
                    text-align: center;
                    background-color: rgba(0,0,0,.1);
                    border-right: 1px solid #fff;
            }
            .ui-li-custom .ui-li-count {
                    right: 10px !important;
            }                

    </style>   

  </f:facet>   

    <!-- Main View -->
    <pm:view id="main">  

        <pm:header title="eDMS Mobile" swatch="b"/>

        <pm:content>                
             <p:outputPanel layout="block" style="padding-right: 15px">
                    <h:form>
                        <p:dataList type="inset" styleClass="ui-li-custom">
                            <f:facet name="header">Ana Menü</f:facet>
                            <f:attribute name="icon" value="false" />
                            <h:outputLink value="#dateView">Date</h:outputLink>
                        </p:dataList>
                    </h:form>
                </p:outputPanel>


        </pm:content>

    </pm:view>

     <pm:view id="dateView">
        <pm:header title="Randevu Alma" swatch="b">
             <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
        </pm:header>
        <pm:content>

           <p:calendar value="#{myBean.date}"/>


       </pm:content>
     </pm:view>


</pm:page>

它看起来像: http://imgur.com/4t68wlL

(由于我的声誉,我无法粘贴图片)

此外,我查看了primefaces移动论坛并看到了一些建议,并尝试了这个:

<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">

<h:head>
   <f:facet name="postinit">                         
      <link rel="stylesheet"
            href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
     <h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css"  />
     <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />               
    <style>
            .th-groups th {
                    text-align: center;
                    background-color: rgba(0,0,0,.1);
                    border-right: 1px solid #fff;
            }
            .ui-li-custom .ui-li-count {
                    right: 10px !important;
            }                

    </style>   

  </f:facet>   
</h:head>


<pm:page title="EDMS">   

    <!-- Main View -->
    <pm:view id="main">  

但它也没有用。我使用primefaces 3.5和primefaces mobile 1.0 snapshot。我用maven添加库。在这里我的依赖:

<dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>${org.primefaces-version}</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces.extensions</groupId>
        <artifactId>primefaces-extensions</artifactId>
        <version>${org.primefaces.extensions-version}</version>
    </dependency>

    <dependency>
        <groupId>org.primefaces.themes</groupId>
        <artifactId>bluesky</artifactId>
        <version>${org.primefaces.themes-version}</version>
    </dependency>

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces-mobile</artifactId>
        <version>1.0.0-SNAPSHOT</version>
    </dependency>

我的意见是,这个问题是关于css文件,但我不知道如何修复它所以我需要你的帮助。顺便说一句,抱歉我的英语不好:D。

0 个答案:

没有答案