SenchaTouch becomes more readable and easier with Coffeescript

I always thought SenchaTouch is a fantastic mobile framework. But it quickly becomes difficult to code, especially if you do not master completely.

Fortunately, the birth of Coffeescript really changed the game.

This post is just a quick sample source code to illustrate my point. This a simple “splitview” sample. I just want to see a list of choices, allowing me to view multiple screens.

Something like that :

Alt "sencha-coffee.png"

Initialize the html page :

Before, you need (of course) :

to download SenchaTouch (http://www.sencha.com/products/touch/download/), then copy sencha-touch.css and sencha-touch.js in your working directory
to download Coffeescript run-time (https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js.) (or you can install Coffeescript and transpile to Javascript)

Then, create an html page :

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
		<link rel="stylesheet" href="sencha/sencha-touch.css" type="text/css">
		<script src="coffee-script.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="sencha/sencha-touch.js"></script>
	<head>
	<body></body>
	<script src = "sencha.demo.coffee" type="text/coffeescript"></script>

</html>

And, now, create a sencha.demo.coffee file in which we will enter the code that follows.

First, “Model & Models”

Define them

class Model extends Ext.regModel
	constructor:(name, fields)->
		super name, 
			fields : fields
		@name = name



class Models extends Ext.data.JsonStore
	constructor:(model, sorters, data)->
		super
			model : model.name
			sorters : sorters
			data : data

Initialize “Model & Models”

menuChoice = new Model 'menuChoice', ['code', 'label', 'item']

menu = new Models menuChoice, 
	(property:'code',direction:'ASC'),
	[
		(code : '01', label : 'Card One',   item : 0)
        (code : '02', label : 'Card Two',   item : 1)
		(code : '03', label : 'Card Three', item : 2)
	]

Next, UI Components

Header and Footer

class Header extends Ext.Toolbar
	constructor:(title)->
		super
			title : title
			dock : 'top'



class Footer extends Ext.Toolbar
	constructor:(title)->
		super
			title : title
			dock : 'bottom'

Card (the screen that appears on the right side)

class Card extends Ext.Panel
	constructor:(html)->
		super
			margin : '10px'
			scroll : 'vertical'
			height : '100%'
			style  : 'background-color:white;'
			html   : html

Right split view (a Card container)

class RightView extends Ext.Carousel
	constructor:(cards)->
		super
			height : '100%'
			layout : 'fit'
			direction : 'vertical'
			style : 'background-color:white;'
			items : cards #  this is an array of cards

class LeftView extends Ext.List
	constructor:(template, models, linkedView, fieldItemIndex)->
		super
			scroll : 'vertical'
			dock : 'left'
			style : "border-right:solid black 1px;"
			width : 250
			itemTpl : template
			store : models
			listeners :
				itemtap : (subList, subIdx)->
					store = subList.getStore()
					record = store.getAt subIdx
					# When i "tap" a item menu, i activate the corresponding card
					linkedView.setActiveItem record.get fieldItemIndex

The main screen (it will encapsulate all the elements of the UI)

class MainScreen extends Ext.Panel
	constructor:(items)->
		super
			fullscreen : true
			dockedItems: [items.header,items.footer,items.leftSidePanel]
			items : [items.rightSidePanel]

Last step : initialize the application

Ext.setup 
	onReady: ->
		header = new Header "Sencha <3 Coffeescript"
		footer = new Footer "by k33g_org"
		card1 = new Card "
			<b>Card 1</b>
			<p>
				Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. 
			<p>
		"
		card2 = new Card "
			<b>Card 2</b>
			<p>
				Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
			<p>
		"
		card3 = new Card "
			<b>Card 3</b>
			<p>
				Maecenas sed diam eget risus varius blandit sit amet non magna. 
			<p>
		"

		rightView = new RightView [card1, card2, card3]
		leftView = new LeftView '{code} {label}', menu, rightView, 'item'
		mainScreen = new MainScreen 
			header : header 
			footer : footer
			leftSidePanel : leftView
			rightSidePanel : rightView

That’s all. Launch it !

If you don’t know SenchaTouch, try to do it in javascript … ;)