我已经使用 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>
当我通过工作灯控制台尝试时,它只显示“view0”并且所有其他视图都被隐藏。登录按钮也可以正常工作。
但是当我尝试通过 android 模拟器运行时,它一次显示所有视图。即:“view0”、“statusView”、“DetailView”。
在将应用程序移植到 Android/iOS 之前,我需要在代码中做些什么吗?
任何帮助表示赞赏。