Titanium Studio Deep Dive
Ingo Muschenetz
Pimp My RIDE Customizing your Titanium Studio
Photo: babawheels.com
Director, Tools Engineering, Appcelerator
Leads both the Titanium Studio and Aptana Studio products and communities
10+ years designing developer tools and experiences
Titanium Studio
Aptana Studio
Eclipse Platform
Titanium Studio Mobile/Desktop platform support specific to Titanium Development. Titanium-specific content assist, Android/iOS debugging.
Aptana Studio Web language support(HTML, JS, CSS, Ruby, PHP, Python). FTP/SFTP, JavaScript debugging infrastructure. Git, Rubles.
Eclipse Platform IDE Shell, project management, basic editor architecture. Default preference layout. Toolbars. Update mechanisms.
What is a Ruble?
Scripting interface to Studio
Coded in Ruby
Contributes:
Themes Commands Snippets Templates Content Assist
Creating a New Ruble
1. File > New > Ruby Project 2. Name your Ruble. Click Next 3. Select the Ruble Template 4. Click Finish
Ruble template is itself a template contributed by a Ruble
Modifying an Existing Ruble
1. Commands > Ruble Name > Edit this bundle… 2. Ruble cloned into your workspace 3. Update to latest version with Git pulls
http://wiki.appcelerator.org/display/tis/Rubles
CSS Document:
body!{!! background:#000000;!! text-align:left;!
}!
1. Colorize “background”? 2. Specify a valid region for property proposals?
Scopes
Scopes
" Scopes describe a subset of the document tree " Often closely map to language tokens " Scopes provide colorization and context
" Themes collect scope colorization rules " Content assist/commands use scope context
http://wiki.appcelerator.org/display/tis/Themes
body!{!! background : #000000 ;!! text-align : left ;!
}!
Document Scope
source.css
body!{!! background : #000000 ;!! text-align : left ;!
}!
Token Scopes support.type.property-name.css
entity.name.tag.css
punctuation.separator.key-value.css
constant.other.color.rgb-value.css
support.constant.property-value.css
punctuation.rule.terminator.css
body!{!! background : #000000 ;!! text-align : left ;!
}!
Meta Scopes meta.property-name.css
meta.selector.css
meta.property-value.css
meta.property-list.css
Scope Example
Colorization and Context " source.css " support.type.property-name.css
Context " meta.property-list.css " meta.property-name.css
Matching Rules
Most specific scope matches first
text.html vs. text
Descendant selectors
text.html source.php
<html>!!<body>!! !<?php!! !!! !?>! !!!</body>!
</html>!
Embedded Scopes
text.html
source.php
Scopes are Hierarchial
Generally follow a convention of category.sub-category.language-extension
comment All comments
comment.line All line comments
comment.line.js All line comments in JavaScript files
The Properties View helps discern relevant scopes
Commands
A script triggered manually or automatically
Execute on: " Menu selection " Content assist " Tab activation " File listener " Eclipse “Command” execution
Sample Commands
" Compile CoffeeScript " Post editor selection as gist " Execute editor selection as bash command " Strip HTML tags from a document " Run JSHint/HTMLTidy " Deploy app to cloud service " Execute any Java, Ruby, or Eclipse code
http://wiki.appcelerator.org/display/tis/Ruble+Cookbook
Command Example
command 'Swap Case' do |cmd|! cmd.key_binding = 'SHIFT+CTRL+A'! cmd.scope = 'source'! cmd.input = :selection! cmd.output = :replace_selection! cmd.invoke do |context|! word = $stdin.gets! context.exit_discard if word.nil?! print word.swapcase! end!end!
Command Demo
Inputs & Outputs Input Specifiers selection left_character right_character word line document clipboard none
Output Specifiers insert_as_text insert_as_snippet replace_selection replace_document copy_to_clipboard show_as_html show_as_tooltip create_new_document discard replace_line replace_word
Listener Example
command "Show Save Information" do |cmd|! cmd.input = :none! cmd.output = :discard! cmd.trigger = :execution_listener, ! "org.eclipse.ui.file.save"! cmd.invoke do |context|! # code here! end!end !
Snippets
Snippets focus on inserting small pieces of content.
Commonly use activation triggers (tab)
Support: " Tab stops " Mirrored variables " Very similar to TextMate snippets
http://wiki.appcelerator.org/display/tis/Snippets
Snippet Example
snippet "background: color" do |s|! s.scope = "meta.property-list.css" ! s.trigger = "bgr"! s.expansion = "background:${1:red};$0"!end!
Snippet Example (Mirrored)
snippet "background-foreground" do |s|! s.scope = "meta.property-list.css" ! s.trigger = "bgfr"! s.expansion = "background: ${1:red};!! ! ! ! ! foreground: ${1}$0"!
end!
Snippet Demo
Project Templates
Provide default content for a new project
" Packaged as .zip file " Variable substitutions " Contributed via Ruble or Extension point
http://wiki.appcelerator.org/display/tis/Templates
Project Template Example
project_template "Ruble Template" do |t|! t.type = :ruby! t.location = "templates/ruble_template.zip"! t.description = "A simple Ruble sample"! t.replace_parameters = true!end!
File Templates
Provide default content for a particular file type
" Variable substitutions " Contributed via Ruble
http://wiki.appcelerator.org/display/tis/Templates
File Template Example
template("HTML 5 Template") do |t|! t.filetype = "*.html"! t.location = "templates/html5.html"!end!
JSCA Files
" 3rd-party library content assist " XML- and JSON-based " Forthcoming tools to generate from TiDoc
http://wiki.appcelerator.org/display/tis/JSCA+1.0+Specification
JSCA Example
{! "types": [! {! "name": "Titanium.Android.NotificationManager", ! "examples": [], ! "functions": [! {! "name": "addEventListener", ! "parameters": [! {! "name": "name", ! "usage": "", ! "type": "String", ! "description": "name of the event"! },!
Documentation Example
In bundle.rb:
require 'ruble'!
bundle 'Titanium' do |bundle|! bundle.project_build_path["Titanium 1.8"] = ! "#{File.dirname($0)}/titanium.1.8.jsca"!end!
Plugins
" Eclipse-based so most Eclipse plugins work " Database Explorer " Mobile Tooling
" Java extensibility via extension points " Eclipse Marketplace
Resources
Titanium-specific Rubles " https://github.com/mschmulen/appfab.ruble " https://github.com/aptana/titanium.ruble
Additional Rubles: " https://github.com/aptana/
AppFab Demo
