MoSync JavaScript app problems

331 views
Skip to first unread message

Joao Barbosa

unread,
Apr 4, 2013, 12:11:20 PM4/4/13
to mosyn...@googlegroups.com
Hi,

i'm trying to make an app using HTML5 and JS, but i read that the elements of HTML5 have some problems in the Windows Phone.

So the solution is create the visual elements with a JavaScript file.

I tried to do something that but nothing appears in the Windows Phone native emulator.

Here's the code:

var nativeUI = document.getNativeElementById("NativeUI");
alert("HERE");
var mainScreen = mosync.nativeui.create("Screen", "mainScreen", {});

var buttonHi = mosync.nativeui.create("Button", "helloButton", {
"text" : "Hi"
});

buttonHi.addTo(mainScreen);
mainScreen.addTo(nativeUI);

mosync.nativeui.UIReady = function() {
// Register event listeners.
// The "deviceready" event is sent when the system
// has finished loading. Here we initialise the UI.
document.addEventListener("deviceready", function() {
// Will call mosync.nativeui.UIReady when
// all Native UI widgets have been created.
alert("Nativeui" + nativeUI.getProperty(id));
mosync.nativeui.initUI();
// mainScreen.show();
}, true);

// Close the application when the back key is pressed.
document.addEventListener("backbutton", function() {
mosync.app.exit();
}, true);
}


Anyone can help? Thank You

Michael Oki

unread,
Apr 6, 2013, 1:58:23 AM4/6/13
to mosyn...@googlegroups.com
Check the log for more debugging details



--
You received this message because you are subscribed to the Google Groups "mosync-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mosync-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Joao Barbosa

unread,
Apr 8, 2013, 6:24:25 PM4/8/13
to mosyn...@googlegroups.com
Well the debug console tells me what it is in the attached file.

I can't see nothing wrong =/
Log.txt

Joao Barbosa

unread,
Apr 13, 2013, 9:29:51 AM4/13/13
to mosyn...@googlegroups.com
The thing is can i put a Screen widget inside the nativeUI div or i have to put the Screen inside a TabScreen or another Screen?

Do i need a layout also?

Alex Jonsson

unread,
Apr 13, 2013, 11:36:37 AM4/13/13
to mosyn...@googlegroups.com
Hi Joao,

The father element is always the  <did="NativeUI"> it contains one or more screens, e.g.

   <div data-widgetType="Screen" id="mainScreen" data-title="Widgets">


I

Inside a screen element, there can be tabs is you like.
The layouts can be in the sceen directly or under each tab (if you need tabs).

If you want a nice background image inside a screen, you need to surround everything with a relative layout element, or the image will cover everthing which might be a spoiler :-)
So here a start below, using some basic elements, and a background image of your chose (local to your html, not as a URL yet):

<body>

 <div id="NativeUI">

   <div data-widgetType="Screen" id="mainScreen" data-title="Widgets">

     <div data-widgetType="RelativeLayout"

       data-width="FILL_AVAILABLE_SPACE"

       data-height="FILL_AVAILABLE_SPACE">


       <div data-widgetType="Image"

         image="img/cat.jpeg"

         scaleMode="IMAGE_SCALE_XY"

         width="-1" height="-1">

       </div>

       

       <div data-widgetType="VerticalLayout"

         id="mainLayout"

         data-width="FILL_AVAILABLE_SPACE"

         data-height="FILL_AVAILABLE_SPACE">


         <div widgetType="EditBox"

           id="box"

           data-width="FILL_AVAILABLE_SPACE"

           data-fontSize="26"

           enabled="false">

         </div>

         

         <div widgetType="Label"

           id="resultLabel"

           data-width="FILL_AVAILABLE_SPACE"

           data-height="FILL_AVAILABLE_SPACE"

           data-text="Result: "

           data-fontSize="26">

         </div>


         <div data-widgetType="Button"

           data-width="FILL_AVAILABLE_SPACE"

           data-text="7"

           data-fontSize="20"

           data-onevent="digitClicked(7)">

         </div>


       </div> <!-- VerticalLayout -->

     </div> <!-- relative layout -->

   </div> <!-- mainScreen -->

 </div> <!-- NativeUI -->

</body>

best

Alex

--
<><><><><>< O ><><><><><>
Docent, Tech Dr Alex Jonsson
Founder & Chief Technical Officer
MoSync AB
Saltmatargatan 8
S-113 59  STOCKHOLM
SWEDEN
+46 8 207745 (office)
+46 704 331312 (cell)

MoSync in Singapore (Mobile Sorcery)
291A South Bridge Road, Singapore 058836
tel. +65 6327 13 30 | mobile. +65 9746 90 82 (Singapore) | +46 8503 211 01 (Sweden) | fax. +65 6327 20 51

Joao Barbosa

unread,
Apr 13, 2013, 1:02:07 PM4/13/13
to mosyn...@googlegroups.com
Thank you but the example doesn't work..other examples work fine but if try to put something else nothing appears..

It is something wrong with this part?

mosync.nativeui.UIReady = function() {

// The "deviceready" event is sent when the system
// has finished loading. Here we initialise the UI.
document.addEventListener("deviceready", function() {
// Will call mosync.nativeui.UIReady when
// all Native UI widgets have been created.
mosync.nativeui.initUI();
// mainScreen.show();
}, true);

// Close the application when the back key is pressed.
document.addEventListener("backbutton", function() {
mosync.app.exit();
}, true);

// First get the screen we want to show.
var mainScreen = document.getNativeElementById("mainScreen");

// Show the screen.
mainScreen.show();
// Register event listeners.

Michael Oki

unread,
Apr 13, 2013, 3:24:30 PM4/13/13
to mosyn...@googlegroups.com
Please state your problem in one line

Joao Barbosa

unread,
Apr 13, 2013, 3:58:36 PM4/13/13
to mosyn...@googlegroups.com
I modify the HTML5 Hybrid Project code, by trying to show only one screen and a button and nothing is shown. Not in Android native emulator nor in Windows Phone native emulator.

Joao Barbosa

unread,
Apr 19, 2013, 5:39:26 AM4/19/13
to mosyn...@googlegroups.com
I have found that if i make a change in the code and when i run the project that change isn't reflect in the emulator. What can be causing this?
Reply all
Reply to author
Forward
0 new messages