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

Ibm mobilefirst Worklight应用程序中的对齐问题?,ibm-mobilefirst,dojo,Ibm Mobilefirst,Dojo,我使用Dojo在Worklight中开发了一个应用程序。因为我是Worklight的新手,所以它只是一个带有登录屏幕和一些其他可滚动视图的示例应用程序 默认情况下,我的应用程序看起来像iOS应用程序。将环境更改为Android后,我的应用程序在Android/iOS模拟器中无法正常显示(对齐问题和登录按钮不工作)。但当我在worklight console中测试应用程序时,它工作正常 主Html文件 <!DOCTYPE HTML> <html> <head>

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

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

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

询价
window.$=window.jQuery=WLJQ;

登录

用户名:

密码:

项目详细信息 项目 数量
当我尝试通过worklight控制台时,它只显示“view0”,所有其他视图都被隐藏。登录按钮也可以正常工作

但当我尝试运行android模拟器时,它一次显示所有视图。ie:“视图0”、“状态视图”、“详细视图”

在将应用程序移植到Android/iOS之前,我需要在代码中做些什么


非常感谢您的帮助。

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

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

我还认为(特别是对于Android),在这之后您需要执行自定义构建,因为加载以下划线开头的文件(例如_base.js)有一个简单的方法。这对于iOS来说应该不是必需的

尽管如此,我强烈推荐以下内容:


编辑:此官方文档页面应使您能够更深入地了解需要执行的操作:以及

Worklight版本?描述问题的屏幕截图?您不仅提到对齐问题(如主题所示,还提到非功能按钮…然后添加更多信息?代码片段?需要处理的内容…)请参阅更新的帖子。。