0

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

我正在使用 mac 开发应用程序，当我运行应用程序时，它会完美显示代码，我不确定这是否是因为它将它呈现为 iOS 设备，这就是它正确显示的原因，但它没有如您在此处看到的，使用 android 设备：请注意，这不仅适用于平板电脑，我已经在 Galaxy SII、HTC EVO 4G 和 Nexus 10 上进行了尝试。所有这些都产生了下面显示的相同结果。

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

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

我的这个应用程序的文件结构是：

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

在此处输入图像描述

教程：http ://docs.kendoui.c​​om/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.c​​om/getting-started/mobile/navbar#showing-hidden-view-title但是它没有成功显示视图。我从另一个问题中得到了这个：header and footer not displayed in Kendo UI Mobile PhoneGap Application For Android这是新的结果：

在此处输入图像描述

4

1 回答 1

4

默认情况下，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;
}
于 2013-03-21T13:15:41.113 回答