Ingo Muschenetz: Titanium Studio Deep Dive

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


}!

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


}!

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

Date post:	26-Dec-2014
Category:	Technology
Upload:	appcelerator-inc
View:	1,020 times
Download:	0 times

Ingo Muschenetz: Titanium Studio Deep Dive

Technology