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 ?
Related
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>
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 tried following code and I am getting error Connection to server was unsuccessful to "www/assets/index.html"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
the interesting fact is it was working fine earlier. But now I am getting this error. Infact I have even tried this approach[super.setIntegerProperty("loadUrlTimeoutValue", 60000); ], but not solved. It removes the error, but the data from remote server is not loading..Please help me..
Thanks.
Sorry for the late reply..here is the code..the only difference is i have included all the css and js files into my project than referring from CDN
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li span
{
font-weight: normal;
}
</style>
<title> Sample App using jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<link href="styles/jquery.mobile-1.0.min.css" />
<script src="scripts/jquery-1.6.4.min.js"></script>
<script src="scripts/jquery.mobile-1.0.min.js"></script>
<head>
<body>
<div data-role="page" id="car">
<div data-role="header" data-postion="fixed">
<h1> Cars</h1>
<h1 id="blogheader">Loading...</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="contentListView">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1> Footer </h1>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
var serviceUrl='http://mysite:81/Service.asmx/ShowListViewData';
$.ajax({
url:serviceUrl,
success:function(xml){
setTimeout(
function(){
$(xml).find( "newset" ).each(function(){
carName = $(this).find('ItemName').text();
description = $(this).find('ItemDescription').text();
$('#contentListView').append('<li><h3>Car type:<span> '+carName+'</span></h3><p>' + description + '</p></li>');
});
$('#contentListView').listview('refresh');
}
,100);
},
error:function(){
},
dataType:"xml"
});
});
</script>
</body>
</html>
Thanks.
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;
How can i get these items below to read that data from the device and Display in in my html page below?
$('#devicename').html(device.name);
$('#devicephonegap').html(device.phonegap);
$('#devicplatform').html(device.platform);
$('#deviceuuid').html(device.uuid);
$('#deviceversion').html(device.version);
Full page code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(document).on("pageinit", "#newpage", function () {
$('#saveButton').click(function () {
localStorage.setItem("name", $('#name').val());
});
});
var wID = navigator.accelerometer.watchAcceleration(onSucess, onerror, { frequency: 1000 });
function onSucess(a) {
$('#aX').html(a.x);
$('#aY').html(a.y);
$('#aZ').html(a.z);
$('#aTime').html(a.timestamp);
}
function onError() {
}
var phoneName = window.device.name;
var phoneName = device.name;
$('#devicename').html(device.name);
$('#devicephonegap').html(device.phonegap);
$('#devicplatform').html(device.platform);
$('#deviceuuid').html(device.uuid);
$('#deviceversion').html(device.version);
$(document).on('pageshow', '#newpage', function () {
var personName = localStorage.getItem("name");
if (personName.length > 0) {
$('#name').val(personName);
}
});
</script>
<title>Hello World 2</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Home Page2</h1>
</div>
<div data-role="content">
hello Phone Gap and JQuery Mobile!
new page
<br>
<p id="devicename"> </p>
<p id="devicephonegap"> </p>
<p id="deviceplatform"> </p>
<p id="deviceuuid"> </p>
<p id="deviceversion"> </p>
<p id="ax"> </p>
<p id="ay"> </p>
<p id="az"> </p>
<p id="aTime"> </p>
</div>
<div data-role="footer" data-position="fixed">
Add Something
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
Cancel
<h1>New Page</h1>
save
</div>
<div data-role="content">
<label for="name">what is your name?</label>
<input id="name" type="text" name="name" value="" />
<a id="saveButton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<div id="dialogpage" data-role="page">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
this is a dialog
</div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
You need to include the Device plugin and ask for the Android READ_PHONE_STATE permission. This is clearly documented at:
http://docs.phonegap.com/en/2.1.0/cordova_device_device.md.html#Device_permissions
- You will need to add READ_PHONE_STATE permission to your AndroidManifest.xml file.