Cross-platform SDK and HTML5 tools for mobile app development
X
 
8 posts / 0 new
Last post
pima.developer
pima.developer's picture
Offline
Mobile Conjurer
Joined: 8 Oct 2012
Posts:
custom div - href

Hi, I wonder if someone could let me know the following questions:

  1. how I can use a custome div tag like this one in a html file in MoSync project. Imagine the following code in which div tag with id example is supposed to draw a chart.
  2. When the user click the setting link in the main page it goes to the setting tab, but no messages is sent to C++ side based on the onClick event for running sendMsgToCPP() function.

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }<body>
<div id="jqt">
<!-- The main application menu -->
<div id="mainPage">
<div class="toolbar">
<h1>Welcome</h1>
</div>
<ul class="rounded" style="text-align: center">
<li>
<label style="font-size: 50px;">Welcome</label>
</li>
</ul>
<ul class="rounded">
<li class="arrow" style="text-align: center;">
<a onClick="sendMsgToCPP()" href="#settingg">Setting</a>
</li>
</ul>
</div>
<div id="settingg">
<div class="toolbar">
<h1>Chart</h1>
<a class="button back" onclick="jQT.goBack()" id="backButton">Back</a>
</div>
<h2>Custome Tag</h2>
<ul class="rounded">
<li><div align="center" id="example"></div></li>
</ul>
</div>
</div>
</body>
</html>{/syntaxhighlighter}

Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
Hi, I could make the example

Hi,

I could make the example at http://humblesoftware.com/flotr2/documentation to run as a MoSync app. It worked out of the box, the only change I did was replacing "/static/js/flotr2.min.js" with "https://raw.github.com/HumbleSoftware/Flotr2/master/flotr2.min.js" in their example.

The problem might be that the way jQTouch does layout and handles style sheets conflicts with the display of the graph div somehow.

Regarding the problem with sendMsgToCPP, you could try to do logging in JS and in CPP to see where the problem is. If you use HybridMoblet, you can log messages sent to CPP by overriding the handleWebViewMessage method with this version:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }void handleWebViewMessage(MAHandle webViewHandle, MAHandle data)
{
printWebViewMessage(data);
HybridMoblet::handleWebViewMessage(webViewHandle, data);
}{/syntaxhighlighter}

Let me know how it goes. Post more code if you don't find the problem.

Best regards, Micke

pima.developer
pima.developer's picture
Offline
Mobile Conjurer
Joined: 8 Oct 2012
Posts:
Hi Mikael, Thanks for the

Hi Mikael,

Thanks for the reply. Unfortunately, I could not run the chart by changing the path of its API. First, I wonder if you could provide me a piece of code; second, I think internet connection is required for this solution, so it's not possible to use the mobile app offline.

About the second problem for passing JS messages to C++ side, I had already logged and monitored both JS and C++ messages by running my app in debug mode. It seems that onClick attribute of href tags does not called while chaing the screen by clicking on <a> tags defined as below:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }<a onclick="sendMsgToCPP()" href="#setting">Setting Tab</a>{/syntaxhighlighter}

Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
Hi, attaching a project with

Hi, attaching a project with the Flotr2 test. It has a local copy of the Flotr library. The project is also available on GitHub: https://github.com/divineprog/MoSyncApps/tree/master/Flotr2Test

pima.developer wrote:

Thanks for the reply. Unfortunately, I could not run the chart by changing the path of its API. First, I wonder if you could provide me a piece of code; second, I think internet connection is required for this solution, so it's not possible to use the mobile app offline.

AttachmentSize
Flotr2Test.zip 215.24 KB
pima.developer
pima.developer's picture
Offline
Mobile Conjurer
Joined: 8 Oct 2012
Posts:
Hi Micke, thanks for your

Hi Micke, thanks for your replies.

The first solution seems perfect and I guess that I was searching for such thing. Unfortunately, the second solution for the chart API does not work when using jQTouch since container div tag for chart cannot be processed by jQTouch.

Best regards.

Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
Hi again, made an example

Hi again, made an example that use jQTouch and Flotr2.

It seems to be important to initialize the div Flotr uses after it has been loaded and shown. Very cool library I must say. Also included code that fixes the jQTouch back button on Android.

Attaching the project. Also put it on GitHub: https://github.com/divineprog/MoSyncApps/tree/master/Flotr2TestJQT

Best regards, Micke

AttachmentSize
Flotr2TestJQT.zip 330.97 KB
Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
There should be a way to

There should be a way to display elements inside jQTouch that you can style yourself. Let me give it a try.

pima.developer wrote:

The first solution seems perfect and I guess that I was searching for such thing. Unfortunately, the second solution for the chart API does not work when using jQTouch since container div tag for chart cannot be processed by jQTouch.

Mikael Kindborg
miki's picture
Offline
Mobile Sorcerer
Joined: 29 Jun 2010
Posts:
I see, you mean it could be

I see, you mean it could be the href attribute tat disables the onclick event?

Would it work to make a function that sends the message and goes to the screen? Are you using jQTouch? Then you could try to do something like this (and remove the href attribute):

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }function GotoSettings()
{
sendMsgToCPP();
jQT.goTo("#setting");
}{/syntaxhighlighter}

Micke

pima.developer wrote:

About the second problem for passing JS messages to C++ side, I had already logged and monitored both JS and C++ messages by running my app in debug mode. It seems that onClick attribute of href tags does not called while chaing the screen by clicking on <a> tags defined as below:

{syntaxhighlighter brush: cpp;fontsize: 100; first-line: 1; }<a onclick="sendMsgToCPP()" href="#setting">Setting Tab</a>{/syntaxhighlighter}

Login or register to post comments