I am trying to make multiple pages in my hybrid app on IBM MobileFirst Platform on eclipse juno using the Dojo toolkit.
In design view: the text in pages other than the homepage does not appear.
after running and deploying all environments, i preview on the browser(chrome) and the tabs are not working
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MoodApp</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="stylesheet" href="css/main.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 style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:loginPage,transition:'slide',icon:'images/done.png'">Log in</li><li
data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:signupPage,icon:'images/comments16.png',transition:'slide'">Sign up</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:true">Enter username and password</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">sign up now</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
Eclipse Juno is not a supported version of Eclipse in IBM MobileFirst Platform - upgrade to Eclipse Java EE Kepler or Luna.
In design mode, you will see only the active tab, so per your code you will see only view 0. Swap between the true/false values of data-dojo-props="selected to switch between your pages... but better yet, see the fuller example below.
Your tabs do not work because you did not put the moveTo values in single quotes:
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
Fuller example:
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<p>
This is view 0.<br/>
This is view 0.<br/>
This is view 0.<br/>
</p>
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
Enter username and password
</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
sign up now
</div>
Related
I need to get OpenStreetMap running under Dojo. I followed this example : http://dojotoolkit.org/reference-guide/1.9/dojox/geo/openlayers.html
The problem is that the map is not rendered and I don't know why. The example implementation is this one : http://demos.dojotoolkit.org/demos/mobileOpenLayers/demo.html
When i copy the code and run it locally it does not work !
My code so far (it is the same as in the given example) :
<!DOCTYPE html>
<html>
<head profile="http://www.w3.org/2002/12/namespace">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Dojo OpenLayers Map Demo</title>
<!-- hosted version of Open Layer libraries -->
<script type="text/javascript" src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="parseOnLoad: 1, async:1"></script>
<script type="text/javascript" src="src.js" charset="utf-8"></script>
</head>
<body style='visibility:hidden;'>
<div id="home" data-dojo-type="dojox.mobile.View" selected="true" >
<h1 data-dojo-type="dojox.mobile.Heading" label="OpenLayers Map"></h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Go To:</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li id="paris" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
Paris
</li>
<li id="newyork" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
New York
</li>
<li id="lacolle" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
La Colle sur Loup
</li>
</ul>
</div>
<div id="mapPage" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="home" id="mapHeader"></h1>
<div id="map" style="height:100%; width:100%; background-color: #b5d0d0;">
</div>
</div>
</body> </html>
My research so far : When I use absolute values for the map-div, it works :
<div id="map" style="height:100px; width:100px; background-color: #b5d0d0;">
</div>
But I need to get it in fullscreen. How can I resolve this problem ?
While the page is loading in application, it takes a few seconds for framework libraries and CSS to load and i gets a noticeable blip.How to prevent this from happening ?
I had tried on Android virtual device running os version 2.2. I had also tried it on actual device running os version 4.1.
.html file:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Accordfintech</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/Accordfintech.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>
<style>
.col_M{margin:5px 7px 0 7px;}
</style>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Accord Fintech'" style="background-color: #10537b; color: black">
<img src="images/Accord.png" align="left" style="margin: 8px 0px 0px 8px">
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'About Us',moveTo:'abview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/about_us.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Software',moveTo:'swview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/software_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Database',moveTo:'dbview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/Database_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Products',moveTo:'prview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/products_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Research',moveTo:'resview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Research_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Contact Us',moveTo:'cuview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Contact_us.png"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="abview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'About Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>Accord Fintech Pvt. Ltd.</strong> is an ISO 9001:2008 certified company, set up by a team of professionals with competencies in Financial content, software development and database design using a variety of platforms, technologies and financial domain knowledge.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="swview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Software',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>We can offer you a typically 'made - to - order' solution, based on your requirements.</p>
<p>We are well versed with website development, intranet and extranet solutions.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="dbview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Database',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>The Database of Accord Fintech is the absolute solution for all financial analysis requirements, comprising listed companies traded on India's major stock exchanges.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="prview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Products',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>ACCORD</strong> offers a wide range of products and solutions designed specially for enterprises and small businesses across a variety of industries.
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="resview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Research',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>We are a professionally managed growing research house providing intelligence on every aspect of Indian business, finance and markets.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="cuview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Contact Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>Customer Support contacts:</strong></p><br/>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Accordfintech.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Snapshots:
After splash screen it displays the inner content:
After completely loading the package and css files :
However this happens just for a fraction of seconds but how can i avoid this?
Did you put "visibility: hidden" on your body element? You need to put it (and remove the "display: none" that some worklight versions are adding) and Dojo Mobile will make sure to remove it when it is ready to display the screen.
Hi all I have the following code
<script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
<script src="/js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
but for some reason in Chrome and on any android it just crashes the page and at the bottom I just get a "Loading" message
does anyone know why?
thanks
Solution
Don't use jQuery 2.0 with jQuery mobile 1.3.1
jQuery Mobile is locked to a certain jQuery version range. Use only jQuery 1.7 up to 1.9.X
And you have several errors in your live example.
CSS should be initialized before js files and your HTML tag was missing. Also DIV containing the page must have data-role="page" attribute.
EDIT :
Your final code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
<div id="pageHead" data-role="page">
<div id="logo"><img src="images/packerForbesLogo.jpg" width="226" height="106" alt="Packer Forbes" /></div>
<div id="socMedia"><img src="/images/socIconPM.jpg" width="35" height="40" alt="PMLive" /><img src="/images/socIconIN.jpg" width="35" height="40" alt="LinkedIn" /><img src="/images/socIconTW.jpg" width="35" height="40" alt="Twitter" /><img src="/images/socIconYT.jpg" width="35" height="40" alt="YouTube" /></div>
<div id="mainNav" role="navigation">
Show navigation
Hide navigation
<ul id="nav" class="clearfix">
<li>Home</li>
<li>What We Do
<ul>
<li>Market Access</li>
<li class="navIndent">Case Studies</li>
<li>Public Relations</li>
<li class="navIndent">Case Studies</li>
<li>Medical Education</li>
<li class="navIndent">Case Studies</li>
<li>Digital</li>
<li class="navIndent">Case Studies</li>
</ul>
</li>
<li>About Us
<ul>
<li>Awards</li>
<li>The Team</li>
<li>Life at Packer Forbes</li>
<li>Our Values</li>
</ul>
</li>
<li>Clients</li>
<li>News</li>
<li>Careers
<ul>
<li>Training</li>
<li>Internships</li>
<li>Benefits</li>
<li>Current Vacancies</li>
</ul>
</li>
<li>Contact</li>
<li>Download Centre</li>
</ul>
</div>
<div id="mainBanner"><img src="images/twentyBanner.gif" alt="We Are Twenty!" width="400" height="80" border="0" class="homeBanner" /></div>
</div>
<div id="mainBody">
<div id="contentWrapper">
<p class="brandStrip"> </p>
<div id="mainColumn">
<!--<h1>Who We Are</h1>-->
<h2>What We Do</h2>
<div id="marketAccess"> <img src="images/marketAccess.jpg" width="160" height="160" alt="Market Access" />
<h3>Market Access</h3>
</div>
<div id="communications"> <img src="images/communications.jpg" width="160" height="160" alt="Communications" />
<h3>Public Relations</h3>
</div>
<div id="medicalEducation"> <img src="images/medicalEducation.jpg" width="160" height="160" alt="Medical Education" />
<h3>Medical Education</h3>
</div>
<div id="digital"><img src="images/digital.jpg" width="160" height="160" alt="Digital" />
<h3>Digital</h3>
</div>
<p class="firstParaHome">Packer Forbes is an award-winning independent healthcare communications consultancy, specialising in medical communications. Our integrated approach ensures that our clients benefit from a compelling fusion of bespoke market access, public relations, medical education and digital communications approaches, all built on insight developed from years of experience.</p>
<p class="dividerLong"><span class="dividerLongMore">Find Out More»</span></p>
<p class="mobileindexorgslogos">
<img src="images/logoHCA.jpg" width="102" height="109" alt="HCA" />
<img src="images/logoEMIG.jpg" width="102" height="109" alt="EMIG" />
<img src="images/logoIIP.jpg" width="121" height="109" alt="IIP" />
<img src="images/abpi_new.jpg" width="102" height="109" alt="IIP" />
<div class="mobileclear"></div>
</p>
</div>
<div id="sideColumn"></div>
<p class="brandStrip"> </p>
</div>
</div>
<div id="pageFoot">
<ul>
<li>1.09 Harbour Yard, Chelsea Harbour, London, SW10 0XD</li>
<li>t: +44 (0)20 7036 8550</li>
<li>f: +44 (0)20 7036 8569</li>
<li>e: healthmail#packerforbes.com</li>
<li>cookie policy</li>
</ul>
<p>Registered office: Packer Forbes Communications Ltd, 1.09 Harbour Yard, Chelsea Harbour, SW10 0XD Registered number: 3753460 </p>
</div>
</body>
</html>
If you are using JQM 1.3.1, you can use this 2 script files.
jQuery JavaScript Library v1.9.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.js
jQuery Mobile 1.3.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.mobile.min.js
Loading message error
If you want to hide this message, try to use this as soon as on load.
$(document).ready(function() {
$('.ui-loader').hide();
});
I have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!
I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.
There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Northern Landscape APP</title>
<meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
<meta name="author" content="LFS" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$('.link').live('tap', function() {
url = $(this).attr("rel");
loadURL(url);
});
function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div id="contentor">
<header>
</header>
<nav>
<div id="cabeca">
<img src="imgs/cabecalho.png">
</div>
<br>
<br>
<br>
<div id="botoeswraper">
<div id="linha1">
<div id="b1">
<div id="icone"><img src="imgs/logo_compus.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
</div>
</div>
<div id="linha2">
<div id="b2">
<div id="icone"><img src="imgs/rblogo.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
</div>
</div>
<div id="linha3">
<div id="b3">
<div id="icone"><img src="imgs/groupmsg.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
</div>
</div>
<div id="linha4">
<div id="b4">
<div id="icone"><img src="imgs/issues.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
</div>
</div>
<div id="linha5">
<div id="b5">
<div id="icone"><img src="imgs/tweeter.png"></div>
<div id="texto">
<a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
</div>
</div>
</div>
</nav>
<p> </p>
<p> </p>
<footer>
<p>
NL APP version 1.0 - Developed by LFS©
</p>
</footer>
</div>
</body>
</html>
I am most appreciated for any help that I can get...
I have done the changes below and each one works for me.
<!-- Opens in new tab -->
Official Website
<!-- Opens in new window -->
Redbubble group
I have the following code for swipe right event in jquery mobile/phonegap app.Code is working fine, but problem is i have to swipe 3-4 times to get response on android device.
<!DOCTYPE html>
<html>
<head>
<title>Slider Stop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("swiperight", "#listitem", function() {
$.mobile.changePage("#page1");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li>Back to the Home Page</li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
</body>
</html>
You need to make sure your document and device are both ready. I suggest this:
<!DOCTYPE html>
<html>
<head>
<title>Slider Stop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// set your swipe threshold explicitly
$.event.special.swipe.horizontalDistanceThreshold = 120;
$(document).on("swiperight", "#listitem", function() {
$.mobile.changePage("#page1");
});
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="home">
...
This is caused by a bug in JQM that has been resolved but is not yet implemented https://github.com/jquery/jquery-mobile/issues/5534
Basically the min distance measured by the swipe event must take into account the pixel density of the device. So in JQM's case, the following change to touch.js will solve the issue:
horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;