Worklight应用程序中的对齐问题?

时间:2013-08-14 05:52:12

标签: ibm-mobilefirst dojo

我使用Dojo在Worklight中开发了一个应用程序。因为我是Worklight中的新手,它只是一个带有登录屏幕和其他一些可滚动视图的示例应用程序。

默认情况下,我的应用程序看起来像iOS应用程序。在将环境更改为Android后,我的应用程序无法在Android / iOS模拟器中正常显示(对齐问题和登录按钮无法正常工作)。但是当我在worklight控制台中测试应用程序时,它可以工作细

主要Html文件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>RFQ</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/RFQ.css">
<script>
    window.$ = window.jQuery = WLJQ;
</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js" ></script>
<script type="text/javascript"
    data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false"
    src="dojo/dojo.js"></script>
</head>
<body id="content" >
        <div data-dojo-type="dojox.mobile.ScrollableView" id="view0"
            data-dojo-props="selected:true" style="background-color: white;">
            <div data-dojo-type="dojox.mobile.Heading"
                data-dojo-props="label:'Login View'"></div>
            <br>
            <div
                style="text-align: center; font-size: x-large; font-weight: bold">Login</div>
            <br> <br> <span style="margin-left: 15%">Username :
            </span><input data-dojo-type="dojox.mobile.TextBox" id="uname"
                placeholder="Username" value="abcd"> <br> <br> <span
                style="margin-left: 15%">Password : </span><input
                data-dojo-type="dojox.mobile.TextBox" id="pass"
                placeholder="Password" type="password" value="cdef" > <br>
            <button data-dojo-type="dojox.mobile.Button" id="loginBtn"
                style="margin-left: 50%; margin-top: 3%"
                data-dojo-props="label:'Login', onClick:function(e){loginCheck();}"></button>

                <div id="prgInd"></div>

        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="fixed:'bottom'"></div>
    </div>
        <div data-dojo-type="dojox.mobile.ScrollableView" id="statusView"
            data-dojo-props="selected:false,scrollDir:'v'">
        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="label:'Status'"></div>
        <div data-dojo-type="dojox.mobile.EdgeToEdgeList" id="DataList">

        </div>
        <div id="bsyIndDiv"></div>
        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="fixed:'bottom'"></div>
    </div>

    <div data-dojo-type="dojox.mobile.ScrollableView" id="DetailView"
        data-dojo-props="selected:false,scrollDir:'v'">
        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="label:'Details',back:'RFQ', moveTo:'statusView',fixed:'top'"></div>
        <div id="grid"></div>
        <textarea data-dojo-type="dojox.mobile.ExpandingTextArea" id="DispArea" style="width: 100%">
        </textarea>

        <TABLE class="mytable" BORDER="2"  id="tableData"  WIDTH="100%"   CELLPADDING="1" CELLSPACING="1" bgcolor="#FFFFFF">
   <TR>
      <TH COLSPAN="2"><BR><H3>Item Details</H3>
      </TH>
   </TR>
   <TR>
      <TH>Item</TH>
      <TH>Qty</TH>
   </TR>

</TABLE>



        <div data-dojo-type="dojox.mobile.Heading"
            data-dojo-props="fixed:'bottom'"></div>
    </div>



    <script src="js/initOptions.js"></script>
    <script src="js/RFQ.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>

当我尝试通过worklight控制台时,它只显示“view0”,所有其他视图都被隐藏。此外,登录按钮也正常工作。

但是当我试图通过Android模拟器运行时,它一次显示所有视图。即:“view0”,“statusView”,“DetailView”。

在将应用程序移植到Android / iOS之前,我的代码中是否需要执行任何操作。

感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

在尝试在模拟器或真实设备中运行应用程序之前,您需要执行几个步骤。

从Worklight 6.0开始,Dojo资源是从另一个项目(通常称为dojoLib)提供的,它为开发时提供了Dojo资源,但它不适用于最终运行时(您需要手动将文件复制到www中) Worklight项目中的文件夹)。 Worklight中有一个捆绑工具(控制台视图中的Dojo库请求),可帮助您确定将哪些资源复制到项目的www文件夹中。

我也认为(特别是Android)你需要在那之后执行自定义构建,因为有一个known limitation on Android来加载以下划线开头的文件(例如_base.js)。对于iOS来说,这不是必需的。

对于这一切,我强烈推荐这个阅读:The Dojo Library in Worklight Studio 6.0

编辑:这个官方文档页面可以让您更深入地了解需要完成的工作:Worklight Dojo library project setupRemoving Dojo library instrumentation