Example code: http://dl.dropbox.com/u/7549925/shoppinglist.zip
Video from my SourceDevCon talk: Buildung a sample MVC Sencha Touch app
Reply
Author Archives: Nils Dehl
SourceDevCon – Sencha Community Conference in Split Croatia
SourceDevCon – Sencha Community Conference in Split Croatia was a amazing event.
Here are my slides and pictures.
Workshop: Creating a sample Sencha Touch app
Data modeling and Ext.direct
You can find my conference pictures on flickr:
http://www.flickr.com/photos/nils-dehl/sets/72157626648487744/
http://www.flickr.com/photos/nils-dehl/sets/72157626533490549/
http://www.flickr.com/photos/nils-dehl/sets/72157626544637927/
http://www.flickr.com/photos/nils-dehl/sets/72157626672433598/
Sencha Touch Webapplication: “Barrierefreies Reisen” (Travel barrier free)
“Barrierefreies Reisen” (Travel barrier free)
Last week we luncht the “Barrierefreies Reisen” mobile webapplication for the VGF Frankfurt.
Its a mobile web app for the public transportation in Frankfurt.The app consist of four modules.
Störungen (Malefunction)
- a list and map of current public transportation delays longer then 30min
Meldungen (informations)
- a list and map of informations about limitions of accessing barrier free stations
Haltestellen (stations)
- a list and map of all stations in frankfurt with barrier free informations
Tweets
- a list off tweets
Sencha Touch technical details:
- using the MVC pattern
- using lists with custom templates
- using google maps
- ruby and rails backend -> json outputs
- tweet list with css3 bubbles
URL
Open it with your iPhone or Android Smartphone or with your Webkit based Browser (please use user agent iPhone otherwise you will be redirect to the application backend)
Screenshoots:
Sencha Touch Forum:
Mobile Chat with Sencha Touch + node.js + socket.io
This is an example for a sencha touch based chat client which gets messages pushed from a chat-server written in node.js. For the connection between server and client i use socket.io as implementation of websockets.
I wrote / write this application to have a playground to demonstrate things.
features of the sencha touch chat client:
- mvc architecture
- use localstorage for user settings
- gravatar avatar icons based on user email
- css3 chat bubbles
- pushed chat messages over web-socket
- custom theme (scss)
features node.js chatserver
- using socket.io
- using connect
Screenshots:
Screencast:
http://vimeo.com/17742839
Live Demo:
got an no.de coupon will try to set up the demo soon
Sourcecode:
https://github.com/mrsunshine/Mobile…s—socket.io-
Roadmap:
I plan to use this app as playground which will be continuous upgraded to explain and show different topics of sencha touch and node.js.
if you have cool ideas let me know.
Hope you like it 
Nils
Pictures from Lissabon Portugal
Pictures from T3DD10
How to make a sencha touch app offline usable with the html5 cache manifest!
i made my test sencha touch app “remember the card” a memory like browser game offline usable and want to share the steps how to do this in this little “How to”.
If you need general information about the cache manifest take a look on the html5 working draft.
Do the following steps to make your app offline working.
1. create your cache manifest file
create a file yourappname.manifest in your application root. In the file enter all files you have to cache to make your app working offline.
in my case my rememberthecard.manifest file looks like this:
CACHE MANIFEST #rev5 index.html sencha-touch-beta-0.90/resources/css/ext-touch.css css/memory.css sencha-touch-beta-0.90/ext-touch-debug.js js/memory.all.js images/card-01.jpg images/card-02.jpg images/card-03.jpg images/card-04.jpg images/card-05.jpg images/card-06.jpg images/card-07.jpg images/card-08.jpg images/cover-leaf.jpg tablet_startup.png phone_startup.png
see all options you can use in the .manifest file here.
2. Add your manifest to your application .html file header
<!doctype html> <html manifest="yourappname.manifest">
3. Add type manifest to your apache config
Add following entry to your apache config (for example apache.conf or vhost.conf )
AddType text/cache-manifest .manifest
4. Add .htaccess with expire configuration for your *.manifest file to your app root
ExpiresActive On ExpiresDefault "access"
5. Thats it 
Now try if everything work, open you app on your mobile device.
Save the link to you homescreen.
Now turn off all your networkconnections and open your app from your homescreen.
It should now work offline.
Hope this helps
Sencha lunch Sencha Touch – The First HTML5 Mobile App Framework
Today Sencha lunch the public Sencha Touch Beta.
SenchaTouch is a JS framework for mobile devices.
Sencha Touch
Blogpost: http://www.sencha.com/blog/2010/06/17/introducing-sencha-touch-html5-framework-for-mobile/
www: http://www.sencha.com/
examples: http://www.sencha.com/products/touch/demos.php
introduction video: http://vimeo.com/12636777
I played with Sencha Touch and wrote a touch based memory like game.
For me as Ext JS developer it was pretty easy to write that application.
This cause Sencha Touch has the same syntax like Ext JS.
My first application a memory like browser game run on iPhone, iPad and Android.
It use the “tap” event and flip the cards after the tap with one of the nice animations.
Sencha Touch memory like remember the card demo: http://nils-dehl.de/m
Screenshots:
See Sencha Touch and of course the remember the card application live in action visit the Ext JS Usergroup meetup today in Franfurt!
http://www.meetup.com/Ext-JS-User-Group-Frankfurt/
