PDA

View Full Version : Geotweets sample app



speyyety
21 Oct 2011, 12:17 PM
Hi,
I did what exactly was recommended in html and javascript.
however it did not work.
even a simple application sample application for showing a message when the app started
did not work. i must be doing something wrong
i copied the touch library
i have index.html,
app.js in the root directory
i adjusted html file to reflect the scenario.
what does '.' in the mean, i would think it is the root directory of app.
i know that i am definitely missing some thing.can anyone help with this

speyyety
22 Oct 2011, 2:24 AM
i thought that i might get help by specifying the config and code that i used to figure out what i have been doing wrong. i do see blank screen when i access this application
can you pl let me know what i am doing wrong
thanks
in the root folder i have a folder 'touch' which contains the touch library.

the html in root directory contains 2 files
1) index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GeoTweets</title>


<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="C:/xampp/htdocs/Geotweets/touch/resources/css/sencha-touch.css" type="text/css">


<!-- Custom CSS -->
<link rel="stylesheet" href="C:/xampp/htdocs/Geotweets/touch/css/guide.css" type="text/css">


<!-- Google Maps JS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>


<!-- Sencha Touch JS -->
<script type="text/javascript" src="C:/xampp/htdocs/Geotweets/touch/sencha-touch-debug.js"></script>


<!-- Application JS -->
<script type="text/javascript" src="C:/xampp/htdocs/Geotweets/index.js"></script>




</head>
<body></body>
</html>

2. script file
<script type="text/javascript">


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var timeline = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
]
});


var map = new Ext.Map({
title: 'Map',
getLocation: true,
mapOptions: {
zoom: 12
}
});


var panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [map, timeline]
});


var refresh = function() {
var coords = map.geo.coords;


Ext.util.JSONP.request({
url: 'http://search.twitter.com/search.json',
callbackKey: 'callback',
params: {
geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
rpp: 30
},
callback: function(data) {
data = data.results;


// Update the tweets in timeline
timeline.update(data);


// Add points to the map
for (var i = 0, ln = data.length; i < ln; i++) {
var tweet = data[i];


// If the tweet is geo-tagged, use that to display marker
if (tweet.geo && tweet.geo.coordinates) {
var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
addMarker(tweet, position);
}
}
}
});
};


// These are all Google Maps APIs
var addMarker = function(tweet, position) {
var marker = new google.maps.Marker({
map: map.map,
position: position
});
};


map.geo.on('update', refresh);


var tabBar = panel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});


}
});


</script>
2.index.js