Alignment Issues in Worklight Application?

Question

I have developed an application in Worklight using Dojo.Since i am a newbie in Worklight its just a sample application with login screen and some other scrollable views.

By default my application looks like iOS application.After changing the environment to Android my application is not displaying properly in Android/iOS Simulator(Alignment Issues and Login button not working) .But when i test the application in worklight console it works fine.

Main Html File

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

When i tried through worklight console it only shows "view0" and all other views are hidden.Also login button is also working fine.

But when i tried to run through android simulator it shows all views at a time. ie: "view0" , "statusView" , "DetailView".

Is there any thing i need to do in my code before porting the application to Android/iOS.

Any Help is appreciated.

Worklight version? screen shots depicting the problem? You also mention not only alignment issues (as the topic suggets, but also non-functional buttons... then add more information? code snippet? something to work with...) — Idan Adar, Aug 14 '13 at 06:02

Orlando Rincón · Accepted Answer · 2013-08-14T15:21:35.597

There are a few steps you need to do before trying to run your app in an emulator or a real device.

As of Worklight 6.0, the Dojo resources are provided from an additional project (usually called dojoLib) and it provides the Dojo resources for development time, but it does not for final runtime (you need to copy the files manually into the www folder in the Worklight project). There is a bundled tool in Worklight (Dojo Library Requests in the console view), that helps you identifying what resources you will need to copy into your project's www folder.

I also think (specially for Android) you will need to perform a custom build after that, because there is a known limitation on Android to load files that start with an underscore (_base.js for example). This should not be necessary for iOS.

For all this, I highly recommend this reading: The Dojo Library in Worklight Studio 6.0

EDIT: This official documentation pages should give you more insight on what needs to be done: Worklight Dojo library project setup and Removing Dojo library instrumentation

Alignment Issues in Worklight Application?

1 Answers1