ingo muschenetz: titanium studio deep dive
DESCRIPTION
Have questions about how to script or integrate a desired feature? Titanium Studio offers a wealth of opportunities for modifying and extending behavior through both Eclipse plugins and Rubles, Studio's own scripting interface.Ingo Muschenetz, Director of Tools Engineering, will lead a deep dive into the scripting interface of Titanium Studio to show how you can customize and extend Studio to better fit your preferences and workflow. We'll cover themes, scopes, commands, snippets, project templates and content assist showing possible approaches and solutions to easily modifying existing functionality, providing your own, and sharing with others.This session is for developers of all skill levels, with discussion and explanation of several use cases.TRANSCRIPT
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