This document discusses using CoffeeScript, Compass, and Sass to accelerate Titanium development. It provides examples of CoffeeScript code and how it improves readability over JavaScript. It also discusses using Sass and Compass for styling Titanium applications, including features like nesting, mixins, variables, and color functions that allow for cleaner, more reusable CSS code. Organizing stylesheets with partials and importing them is also covered.
25. for own key, value of query
uri += "#{ key }=#{ escape(value) }&"
COFFEESCRIPT
var key, value;
var __hasProp = Object.prototype.hasOwnProperty;
for (key in query) {
if (!__hasProp.call(query, key)) continue;
value = query[key];
uri += "" + key + "=" + (escape(value)) + "&";
}
JAVASCRIPT
26. Comprehensions
for own key, value of query
uri += "#{ key }=#{ escape(value) }&"
COFFEESCRIPT
27. Interpolation
for own key, value of query
uri += "#{ key }=#{ escape(value) }&"
COFFEESCRIPT
45. var buttonOne = Titanium.UI.createButton({
title:'I am a Button',
height:40,
width:200,
top:10
});
var buttonTwo = Titanium.UI.createButton({
title:'I am also a Button',
image:'../images/chat.png',
width:200,
height:40,
top:60
});
JAVASCRIPT
46. var buttonOne = Titanium.UI.createButton({
title:'I am a Button',
height:40,
width:200,
Presentation
top:10
});
var buttonTwo = Titanium.UI.createButton({
title:'I am also a Button',
image:'../images/chat.png',
width:200,
height:40,
top:60
});
JAVASCRIPT
47. var buttonOne = Titanium.UI.createButton({
id: "buttonOne", JAVASCRIPT
Behavior and composition in
className: "button"
});
var buttonTwo = Titanium.UI.createButton({
id: "buttonTwo",
className: "button"
});
.js
#buttonOne {
title:'I am a Button'; JSS
width:200;
height:40;
top:10
}
#buttonTwo {
Presentation in
title:'I am also a Button';
image:'../images/chat.png';
width:200;
height:40;
.jss
top:60
}
.button {
height: 40;
width: 200;
}
48. var buttonOne = Titanium.UI.createButton({
id: "buttonOne", JAVASCRIPT
className: "button"
Style hooks
});
var buttonTwo = Titanium.UI.createButton({
id: "buttonTwo",
className: "button"
});
#buttonOne {
title:'I am a Button'; JSS
width:200;
height:40;
top:10
}
#buttonTwo {
title:'I am also a Button';
image:'../images/chat.png';
width:200;
height:40;
top:60
}
.button {
height: 40;
width: 200;
}
64. #buttonOne
title: 'I am a Button'
width: 200
height: 40
top: 10
#buttonTwo
title: 'I am also a Button'
image: '../images/chat.png'
width: 200
height: 40
top: 60
.button
height: 40
width: 200
SASS
65. DRY it up. Mixins
=button
height: 40
width: 200
#buttonOne
+button
title: 'I am a Button'
top: 10
#buttonTwo
+button
title: 'I am also a Button'
image: '../images/chat.png'
top: 60
SASS
66. DRY it up. Mixins with params
=bottom-right($height: 40, $width: 200)
height: $size
width: $size
right: 0
bottom: 0
#buttonOne
+bottom-right
title: 'I am a Button'
#buttonTwo
+bottom-right(50, 300)
title: 'I am also a Button'
image: '../images/chat.png'
SASS
67. #buttonOne
title: 'I am a Button'
width: 200
height: 40
top: 10
#buttonTwo
title: 'I am also a Button'
image: '../images/chat.png'
width: 200
height: 40
top: 60
.button
height: 40
width: 200
SASS
68. DRY it up. @extend
.button
height: 40
width: 200
#buttonOne
@extend .button
title: 'I am a Button'
top: 10
#buttonTwo
@extend .button
title: 'I am also a Button'
image: '../images/chat.png'
top: 60
SASS
69. DRY it up. @extend
.button, #buttonOne, #buttonTwo {
height: 40;
width: 200;
}
#buttonOne {
title: 'I am a Button';
width: 200;
}
#buttonTwo {
title: 'I am also a Button';
image: '../images/chat.png';
One less class in our .js
top: 60
}
JSS
109. CoffeeScript class
class GolfStatus.API
# Initialize with login and password
constructor: (@login, @password) ->
COFFEESCRIPT
110. URI building
...
# Build the full API URI for a request
requestURI: (path, query={}) ->
uri = "#{GolfStatus.API_ENDPOINT}#{path}.json?"
for own key, value of query
uri += "#{ key }=#{ escape(value) }&"
uri
COFFEESCRIPT
111. HTTP Request building
# Common request handling across all verbs
request: (path, options, authenticated=true) ->
# Default to GET
options.method ?= 'GET'
options.query ?= {}
options.success ?= -> Ti.API.info
options.error ?= -> Ti.API.error
xhr = Ti.Network.createHTTPClient()
xhr.onreadystatechange = (e) ->
...
# Default event handlers
# Basic auth
# other common stuff
...
if options.body
data = JSON.stringify(options.body)
Ti.API.debug data
xhr.send(data)
else
xhr.send()
COFFEESCRIPT
112. High level methods for HTTP verbs
# High level method for GET requests
get: (path, options, authenticated=true) ->
options.method = 'GET'
@request path, options, authenticated
# High level method for POST requests
post: (path, options, authenticated=true) ->
options.method = 'POST'
@request path, options, authenticated
# High level method for DELETE requests
delete: (path, options, authenticated=true) ->
options.method = 'DELETE'
@request path, options, authenticated
COFFEESCRIPT
113. Higher level API methods
# ### Authenticate the user ###
authenticate: (options) ->
Ti.API.debug "GolfStatus.API.authenticate"
@get '/me', options
# ### Logout the user ###
logout: (options) ->
Ti.API.debug "GolfStatus.API.logout"
@delete '/logout', options
# ### Forgot password
forgotPassword: (email, options) ->
Ti.API.debug "GolfStatus.API.forgotPassword"
options.query = {}
options.query.email = email
@post '/passwords', options, false
# ### Convenience method to get current user info ###
me: (options) ->
Ti.API.debug "GolfStatus.API.me"
@authenticate options
COFFEESCRIPT
125. # GolfStatus.App.init()
window = GolfStatus.Views.Play.createGameWindow()
window.open()
Comment out init and
fire up the deepest view.
COFFEESCRIPT