WebWorks App根本不起作用，但在Ripple和Chrome以及BB浏览器中工作

时间：2012-01-19 03:30:39

标签： javascript html5 blackberry css3 blackberry-webworks

我有一个使用JSONP和Zepto.js的简单BlackBerry应用程序。大多数代码是快速编写的，我没有使用Zepto，因为我应该拥有并且只需要测试它，我相信它的所有代码到目前为止都是有效的（JS新手 - 只是学习）。

index.html

的示例 
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link  rel="stylesheet" type="text/css" href="css/bbsonic.css"><link />
        <link  rel="stylesheet" type="text/css" href="css/ocssui.css"><link />
        <title>Login</title>
        <script type="text/javascript" src="js/zepto.js"></script>
    </head>
    <body>
        <div data-role="page" class="page">

            <div data-role="header" class="header">
                <div id="header-logo">
                    <table>
                        <td valign="middle" class="museo">
                            <h1>BerrySonic</h1>
                        </td>
                    </table>
                </div>
            </div><!-- /header -->

            <div data-role="content" class="content" id="list-wrapper">
                <ul data-role="listview" id="servers" class="listview">
                       <li class="title-divider">Select a Subsonic Server</li>
                </ul>
            </div><!-- /content -->

        </div><!-- /page -->   
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Index.js：

var db = window.openDatabase("bbsonic", "0.1", "SubSonic Server", 1024*1000);
$(document).ready = prepareDatabase();

function prepareDatabase() {                        
    db.transaction(function(tx) {
        var starterSQL = 'CREATE TABLE IF NOT EXISTS servers (id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(255) NOT NULL, url VARCHAR(255) NOT NULL, port VARCHAR(255) NOT NULL, user VARCHAR(255) NOT NULL, pass VARCHAR(255) NOT NULL)';
        tx.executeSql(starterSQL, []);
    });
    showServerList();
}

function showServerList() {                     
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM servers', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 0; i < len; i++) {
                var id = results.rows.item(i).id;
                var name = results.rows.item(i).name;

                var parent = document.getElementById('servers');
                var listItem = document.createElement('a');
                listItem.setAttribute('href', 'main.html');
                listItem.setAttribute('onclick', 'setServerID(' + id + ')');
                if (i == 0) {
                    listItem.innerHTML = '<li class="first-item">' + name + '</li>';
                } else {
                    listItem.innerHTML = '<li>' + name + '</li>';
                }

                parent.appendChild(listItem);
            }

            var parent = document.getElementById('servers');
            var listItem = document.createElement('a');
            listItem.setAttribute('href','addnewserver.html');
            listItem.innerHTML = "<li>Add New Server</li>";
            parent.appendChild(listItem);
        });
    });
}

function setServerID(id) {
    sessionStorage.serverID = id;
}

config.xml（从github复制一个）：

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" 
   xmlns:rim="http://www.blackberry.com/ns/widgets" 
   version="1.0.0.0" rim:header="WebWorks Sample">

   <name>BerrySonic</name>
   <description>This is a sample application.</description>
   <content src="index.html"/>

<rim:category name="Media"/>
<rim:category name="Media"/>

    <rim:permissions>
        <rim:permit>access_shared</rim:permit>
        <rim:permit>record_audio</rim:permit>
        <rim:permit>read_geolocation</rim:permit>
        <rim:permit>use_camera</rim:permit>
        <rim:permit>read_device_identifying_information</rim:permit>
    </rim:permissions>

    <!-- 
        Universal APIs: 
            The following features are available on both Smartphone and Tablet OS
    -->
    <feature id="blackberry.app" required="true" version="1.0.0.0"/>
    <feature id="blackberry.app.event" required="true" version="1.0.0.0"/>
    <feature id="blackberry.system" required="true" version="1.0.0.0"/>
    <feature id="blackberry.system.event" required="true" version="1.0.0.0"/>
    <feature id="blackberry.ui.dialog" required="true" version="1.0.0.0"/>
    <feature id="blackberry.utils" required="true" version="1.0.0.0"/>

    <feature id="blackberry.media.camera" required="true" version="1.0.0.0"/>
    <feature id="blackberry.media.microphone" required="true" version="1.0.0.0"/>
    <feature id="blackberry.identity" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke" required="true" version="1.0.0.0"/>
    <feature id="blackberry.io.file" required="true" version="1.0.0.0"/>
    <feature id="blackberry.io.dir" required="true" version="1.0.0.0"/>

    <!-- 
        Smartphone APIs: 
            The following features are available ONLY on Smartphone
    --> 
    <feature id="blackberry.ui.menu" required="true" version="1.0.0.0"/>
    <feature id="blackberry.identity.phone" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.AddressBookArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.BrowserArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.CalendarArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.CameraArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.JavaArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.MapsArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.MemoArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.MessageArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.PhoneArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.SearchArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke.TaskArguments" required="true" version="1.0.0.0"/>
    <feature id="blackberry.message" required="true" version="1.0.0.0"/>
    <feature id="blackberry.message.sms" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Address" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Attendee" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Appointment" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.category" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Contact" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Memo" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Recurrence" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Reminder" required="true" version="1.0.0.0"/>
    <feature id="blackberry.pim.Task" required="true" version="1.0.0.0"/>

    <feature id="blackberry.audio" required="true" version="1.0.0.0"/>
    <feature id="blackberry.audio.Player" required="true" version="1.0.0.0"/>

    <feature id="blackberry.find" required="true" version="1.0.0.0"/>
    <feature id="blackberry.phone.Phone" required="true" version="1.0.0.0"/>
    <feature id="blackberry.phone.PhoneLogs" required="true" version="1.0.0.0"/>

    <feature id="blackberry.push" required="true" version="1.0.0.0"/>
    <feature id="blackberry.find" required="true" version="1.0.0.0"/>

    <access subdomains="true" uri="*"/>

</widget>

在chrome和ripple中它可以很好地工作但是在黑莓上它只加载标题但是甚至没有未标记的列表！不知道如何调试它... 非常感谢帮助。

1 个答案:

答案 0 :(得分：2)

我不确定，但我认为您没有错误地使用某些HTML标记。通常，如果您创建<table>，则会嵌套<tr>标记，然后将<td>标记嵌套在那里。示例

<table>
  <tr>
    <td><h1>BerrySonic</h1></td>
  </tr>
</table>

我建议完全删除表格，只使用<h1>下的<div id="header-logo">。 （除非Zepto出于某种非常奇怪的原因需要它。我不熟悉它）

此外，您的java脚本正在为列表创建不正确的HTML。就像表一样，<ul>元素应该嵌套<li>个元素。 showServerList()中的代码将创建如下所示的HTML：

<a href="main.html"><li class="first-item">Server 1</li></a>
<a href="main.html"><li>Server 2</li></a>

当你真的需要时：

<li class="first-item"><a href="main.html">Server 1</a></li>
<li><a href="main.html">Server 2</a></li>

尝试进行这些更改，看看它是否修复了渲染问题。

相关问题
最新问题