Question

我最近开始开发一个应用程序并决定KendoUI和phonegap将是我们项目的最佳解决方案，但是我无法正确显示KendoUI。

我正在使用mac来开发应用程序，当我运行应用程序时，它会完美地显示代码，我不确定这是因为它是将它渲染为iOS设备，这就是它正确显示的原因，但是它不适用于Android设备，你可以在这里看到：注意这不仅仅适用于平板电脑，我尝试过Galaxy SII，HTC EVO 4G和Nexus 10.所有这些都会产生相同的结果显示如下。< / p>

问题是应用程序似乎忽略了视图并将标题放在错误的位置。

如果您需要更多信息，请随时询问..我不知道还有什么要列出。

此应用程序的文件结构是：

/ <--- project root
 /assets/
  /www/
   /css/
    /kendo.mobile.all.min.css
   /js/
    /jquery.min.js
    /kendo.all.min.js
    /kendo.mobile.min.js
   cordova-2.4.0.js
   index.html

enter image description here

教程：http://docs.kendoui.com/getting-started/introduction 以下是我正在遵循的教程中的源代码：

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="cordova-2.4.0.js"></script>
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
    <script>    
    </script>
</head>
<body>
<div id="home" data-role="view" data-layout="default">
    Hello Mobile World!
</div>

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">My App</div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a href="#home">Home</a>        
        </div> 
    </footer>
</section>
<script>var app = new kendo.mobile.Application();</script>
</body>
</html>

我也使用过本教程但是我不明白他们给出的配置文件是我的：http://www.adobe.com/devnet/phonegap/articles/getting-started-kendo-ui-mobile-phonegap-build.html

    <?xml version="1.0" encoding="utf-8"?>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<cordova>
    <!--
    access elements control the Android whitelist.
    Domains are assumed blocked unless set otherwise
     -->

    <access origin="http://127.0.0.1*"/> <!-- allow local pages -->

    <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
    <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
    <access origin=".*"/>

    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
    <content src="index.html" />

    <log level="DEBUG"/>
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
    <plugin name="Echo" value="org.apache.cordova.Echo" />
    <plugin name="Globalization" value="org.apache.cordova.Globalization"/>
    <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>

最后我的MainActivity：

package com.example.project;

import android.os.Bundle;
import org.apache.cordova.DroidGap;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

编辑：我刚试过这个解决方案.. http://docs.kendoui.com/getting-started/mobile/navbar#showing-hidden-view-title但是它没有成功显示视图。我从另一个问题获得了这个：header and footer not displayed in Kendo UI Mobile PhoneGap Application For Android这是新结果：

enter image description here

Answer 1

默认情况下，Kendo UI Mobile会在Android上反转View布局，以便将TabStrip放在View的顶部。此外，隐藏了视图标题（因为它在底部没有意义）。这可以很容易地解决CSS：

.km-root .km-android .km-view {
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
}

.km-android .km-view-title
{
    visibility: visible;
}

Kendo UI不显示标题和视图

1 个答案: