SnappiTi
A emmet/zencoding style code generator for Titanium
Install
$ [sudo] npm install -g snappiti
Usage
$ snappiti compile [code]
There is an optional flag to hide style option generation. E.g.
$ snappiti comiple [code] -s
$ snappiti compile [code] --hide-style
Examples
--hide-style
flag)
Simple cases (with named objects
Window#win
becomes
var win = Ti.UI.createWindow(styles['#win'])
with children, styles and ids
Window#win>View#container>Label.white#label+Button.green
becomes
var win = Ti.UI.createWindow(styles['#win'])
var container = Ti.UI.createView(styles['#container'])
win.add(container)
var label = Ti.UI.createLabel(_.defaults(styles['#label'],styles['.white']))
container.add(label)
container.add(Ti.UI.createButton(_.defaults({},styles['.green']))
attributes
Window#win.white>Label#title[text="Hello World!"]+View.black[borderRadius=5 backgroundColor="black"]
becomes
var win = Ti.UI.createWindow(_.defaults(styles['#win'],styles['.white']));
var title = Ti.UI.createLabel(_.defaults({"text":"Hello World!"},styles['#title']));
win.add(title);
win.add(Ti.UI.createView(_.defaults({"borderRadius":5,"backgroundColor":"black"},styles['.black'])));
iterations
View#container>View#num$.button*8
becomes
var container = Ti.UI.createView(styles['#container'])
var num1 = Ti.UI.createView(_.defaults(styles['#num1'],styles['.button']))
container.add(num1)
var num2 = Ti.UI.createView(_.defaults(styles['#num2'],styles['.button']))
container.add(num2)
var num3 = Ti.UI.createView(_.defaults(styles['#num3'],styles['.button']))
container.add(num3)
var num4 = Ti.UI.createView(_.defaults(styles['#num4'],styles['.button']))
container.add(num4)
var num5 = Ti.UI.createView(_.defaults(styles['#num5'],styles['.button']))
container.add(num5)
var num6 = Ti.UI.createView(_.defaults(styles['#num6'],styles['.button']))
container.add(num6)
var num7 = Ti.UI.createView(_.defaults(styles['#num7'],styles['.button']))
container.add(num7)
var num8 = Ti.UI.createView(_.defaults(styles['#num8'],styles['.button']))
container.add(num8)
device and platform queries
The ?
character has been added for this purpose.
You will need this library for detection: gist
Window#win>(View#android?android>Button.blue)+(View#ios?ios?tablet>Button.red)
becomes
var win = Ti.UI.createWindow(styles['#win'])
if (Detect.android) {
var android = Ti.UI.createView(styles['#android'])
win.add(android)
android.add(Ti.UI.createButton(_.defaults({},styles['.blue'])))
}
if (Detect.ios && Detect.tablet) {
var ios = Ti.UI.createView(styles['#ios'])
win.add(ios)
ios.add(Ti.UI.createButton(_.defaults({},styles['.red'])))
}
--hide-styling
flag)
Better cases (without the style object generation
Window#win>View#container>Label.white#label+Button.green
becomes
/****** STYLES *****/
var styles = {
'#container': {
},
'#label': {
},
'#win': {
},
'.green': {
},
'.white': {
}
};
/****** VIEWS *****/
var win = Ti.UI.createWindow(styles['#win'])
var container = Ti.UI.createView(styles['#container'])
win.add(container)
var label = Ti.UI.createLabel(_.defaults(styles['#label'],styles['.white']))
container.add(label)
container.add(Ti.UI.createButton(_.defaults({},styles['.green'])))
using wrapping snippets
see the snippets.json
file for module
definition
module#MainWindow>Window#win>(View.white>Label#label)+(View.green>Button#exit)
becomes
/****** STYLES *****/
var styles = {
'#exit': {
},
'#label': {
},
'#win': {
},
'.green': {
},
'.white': {
}
};
/****** VIEWS *****/
var _ = require('/lib/underscore'), Detect = require('/lib/detect');
function MainWindow(o){
var win = Ti.UI.createWindow(styles['#win'])
var _view6 = Ti.UI.createView(_.defaults({},styles['.white']))
win.add(_view6)
var label = Ti.UI.createLabel(styles['#label'])
_view6.add(label)
var _view10 = Ti.UI.createView(_.defaults({},styles['.green']))
win.add(_view10)
var exit = Ti.UI.createButton(styles['#exit'])
_view10.add(exit)
}
module.exports = MainWindow
Editor Plugins
Hopefully this list will continue to be updated
- VIM - SnappiTi.vim
- Sublime Text 2 - SnappiTi.sublime