Created
February 11, 2012 08:32
-
-
Save edspencer/1797867 to your computer and use it in GitHub Desktop.
The app.js file for a simple Sencha Touch 2 APOD app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The final thing is to add a tap listener that is called whenever the user taps on the screen. | |
* We do a quick check to make sure they're not tapping on the carousel indicators (tapping on | |
* those indicators moves you between items so we don't want to override that), then either hide | |
* or show the info Component. | |
*/ | |
Ext.Viewport.element.on('tap', function(e) { | |
if (!e.getTarget('.x-carousel-indicator')) { | |
if (titleVisible) { | |
info.element.removeCls('apod-title-visible'); | |
titleVisible = false; | |
} else { | |
info.element.addCls('apod-title-visible'); | |
titleVisible = true; | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* This app uses a Carousel and a JSON-P proxy so make sure they're loaded first | |
*/ | |
Ext.require([ | |
'Ext.carousel.Carousel', | |
'Ext.data.proxy.JsonP' | |
]); | |
/** | |
* Our app is pretty simple - it just grabs the latest images from NASA's Astronomy Picture Of the Day | |
* (http://apod.nasa.gov/apod/astropix.html) and displays them in a Carousel. This file drives most of | |
* the application, but there's also: | |
* | |
* * A Store - app/store/Pictures.js - that fetches the data from the APOD RSS feed | |
* * A Model - app/model/Picture.js - that represents a single image from the feed | |
* * A View - app/view/Picture.js - that displays each image | |
* | |
* Our application's launch function is called automatically when everything is loaded. | |
*/ | |
Ext.application({ | |
name: 'apod', | |
models: ['Picture'], | |
stores: ['Pictures'], | |
views: ['Picture'], | |
launch: function() { | |
var titleVisible = false, | |
info, carousel; | |
/** | |
* The main carousel that drives our app. We're just telling it to use the Pictures store and | |
* to update the info bar whenever a new image is swiped to | |
*/ | |
carousel = Ext.create('Ext.Carousel', { | |
store: 'Pictures', | |
direction: 'horizontal', | |
listeners: { | |
activeitemchange: function(carousel, item) { | |
info.setHtml(item.getPicture().get('title')); | |
} | |
} | |
}); | |
/** | |
* This is just a reusable Component that we pin to the top of the page. This is hidden by default | |
* and appears when the user taps on the screen. The activeitemchange listener above updates the | |
* content of this Component whenever a new image is swiped to | |
*/ | |
info = Ext.create('Ext.Component', { | |
cls: 'apod-title', | |
top: 0, | |
left: 0, | |
right: 0 | |
}); | |
//add both of our views to the Viewport so they're rendered and visible | |
Ext.Viewport.add(carousel); | |
Ext.Viewport.add(info); | |
/** | |
* The Pictures store (see app/store/Pictures.js) is set to not load automatically, so we load it | |
* manually now. This loads data from the APOD RSS feed and calls our callback function once it's | |
* loaded. | |
* | |
* All we do here is iterate over all of the data, creating an apodimage Component for each item. | |
* Then we just add those items to the Carousel and set the first item active. | |
*/ | |
Ext.getStore('Pictures').load(function(pictures) { | |
var items = []; | |
Ext.each(pictures, function(picture) { | |
if (!picture.get('image')) { | |
return; | |
} | |
items.push({ | |
xtype: 'apodimage', | |
picture: picture | |
}); | |
}); | |
carousel.setItems(items); | |
carousel.setActiveItem(0); | |
}); | |
/** | |
* The final thing is to add a tap listener that is called whenever the user taps on the screen. | |
* We do a quick check to make sure they're not tapping on the carousel indicators (tapping on | |
* those indicators moves you between items so we don't want to override that), then either hide | |
* or show the info Component. | |
* | |
* Note that to hide or show this Component we're adding or removing the apod-title-visible class. | |
* If you look at index.html you'll see the CSS rules style the info bar and also cause it to fade | |
* in and out when you tap. | |
*/ | |
Ext.Viewport.element.on('tap', function(e) { | |
if (!e.getTarget('.x-carousel-indicator')) { | |
if (titleVisible) { | |
info.element.removeCls('apod-title-visible'); | |
titleVisible = false; | |
} else { | |
info.element.addCls('apod-title-visible'); | |
titleVisible = true; | |
} | |
} | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Simple Model that represents an image from NASA's Astronomy Picture Of the Day. The only remarkable | |
* thing about this model is the 'image' field, which uses a regular expression to pull its value out | |
* of the main content of the RSS feed. Ideally the image url would have been presented in its own field | |
* in the RSS response, but as it wasn't we had to use this approach to parse it out | |
*/ | |
Ext.define('apod.model.Picture', { | |
extend: 'Ext.data.Model', | |
config: { | |
fields: [ | |
'id', 'title', 'link', 'author', 'content', | |
{ | |
name: 'image', | |
type: 'string', | |
convert: function(value, record) { | |
var content = record.get('content'), | |
regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/, | |
match = content.match(regex), | |
src = match[1]; | |
if (src != "" && !src.match(/\.gif$/)) { | |
src = "http://src.sencha.io/screen.width/" + src; | |
} | |
return src; | |
} | |
} | |
] | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Grabs the APOD RSS feed from Google's Feed API, passes the data to our Model to decode | |
*/ | |
Ext.define('apod.store.Pictures', { | |
extend: 'Ext.data.Store', | |
config: { | |
model: 'apod.model.Picture', | |
proxy: { | |
type: 'jsonp', | |
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.acme.com/jef/apod/rss.xml&num=20', | |
reader: { | |
type: 'json', | |
rootProperty: 'responseData.feed.entries' | |
} | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment