ChildBrowser and Cordova-1.6

Aaron — Tue, 17 Apr 2012 05:39:55 +0000

I just went through the process of updating the ChildBrowser plugin for Cordova-1.6. I posted the updated code on github for anyone that is interested. The README in the DMG has a pretty decent PDF on updating plugins to the various versions of Cordova but for anyone that doesn’t feel like spending the 20 minutes on the update, check out the code.

GeoTweets – an error free version of the Sencha Touch tutorial

Aaron — Sat, 25 Jun 2011 21:33:56 +0000

I have been messing around with Sencha Touch over the last few weeks and it is proving to be a very useful framework for mobile development. The main getting started tutorial is a GeoTweets application. It’s a neat example that ties in the Google Maps API and the Twitter API to create an app that shows twitter users’ tweets within a certain mile radius of the user location. The tutorial itself has a few errors that I thought I would fix here to hopefully save others the time it took me to debug. There is nothing more annoying than errors in tutorials.

The only adjustments that will need to be made are within the main index.js file. Below is the corrected code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

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: [
'',
'

',
'

{from_user}

',
'

{text}

',
'

',
''
]
});

var map = new Ext.Map ({
title: 'Map',
useCurrentLocation: true, //changed from getLocation
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;
timeline.update(data);

for (var i = 0, ln = data.length; i < ln; i++) {
var tweet = data[i];

if (tweet.geo && tweet.geo.coordinates) {
var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
addMarker (tweet, position);
}
}
}
});
};

var addMarker = function(tweet, position) {
var marker = new google.maps.Marker({
map: map.map,
position: position
});

google.maps.event.addListener(marker, "click", function() { //added this function
tweetBubble.setContent(tweet.text);
tweetBubble.open(map.map, marker);
});

};

tweetBubble = new google.maps.InfoWindow(); //added to display tweets on marker click

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
});

}

});

The changes:

Line 27: Changed getLocation to useCurrentLocation – getLocation is no longer supported within the Google Maps API. Changing to useCurrentLocation will fix the map display.

Line 70-78: These lines are necessary to add the functionality to display tweets when their marker is clicked on the map. Without them, nothing will display.

Another working example can be found at: github.com/nelstrom. The code in this post borrows from this link but stays as close to the original Sencha code as possible.

View GeoTweets working demo

Effel Design

ChildBrowser and Cordova-1.6

GeoTweets – an error free version of the Sencha Touch tutorial

{from_user}