Titanium Studio Deep Dive       Ingo Muschenetz
Photo: babawheels.comPimp My RIDECustomizing your Titanium Studio
Director, ToolsEngineering,AppceleratorLeads both the TitaniumStudio and Aptana Studioproducts and communities10+ years de...
Titanium StudioAptana StudioEclipse Platform
Titanium StudioMobile/Desktop platform support specific to Titanium Development. Titanium-specific content assist, Android...
What is a Ruble?           Scripting interface to Studio                  Coded in Ruby                   Contributes:    ...
Creating a New Ruble1.   File > New > Ruby Project2.   Name your Ruble. Click Next3.   Select the Ruble Template4.   Click...
Modifying an Existing Ruble1. Commands > Ruble Name > Edit this bundle…2. Ruble cloned into your workspace3. Update to lat...
ScopesCSS Document:body!{! !    background:#000000;! !    text-align:left;!}!1.  Colorize “background”?2.  Specify a valid...
Scopes"   Scopes describe a subset of the document tree"   Often closely map to language tokens"   Scopes provide coloriza...
Document Scopebody!{! !    background   :   #000000   ;! !    text-align   :   left      ;!}!source.css
Token Scopes          support.type.property-name.css                                           constant.other.color.rgb-va...
Meta Scopes          meta.property-name.css       meta.property-value.cssbody!{! !    background                   :   #00...
Scope Example  Colorization and Context  "   source.css  "   support.type.property-name.css  Context  "   meta.property-li...
Matching Rules Most specific scope matches first            text.html vs. text       Descendant selectors           text.h...
Embedded Scopestext.html<html>! !<body>! ! !<?php! ! !! ! !?> !!      ! !</body>!        source.php</html>!
Scopes are Hierarchial           Generally follow a convention of       category.sub-category.language-extension comment  ...
The Properties View helps discern relevant scopes
CommandsA script triggered manually or automaticallyExecute on:"   Menu selection"   Content assist"   Tab activation"   F...
Sample Commands"       Compile CoffeeScript"       Post editor selection as gist"       Execute editor selection as bash c...
Command Examplecommand Swap Case do |cmd|!     cmd.key_binding = SHIFT+CTRL+A!     cmd.scope = source!     cmd.input = :se...
Command Demo
Inputs & OutputsInput Specifiers   Output Specifiersselection          insert_as_textleft_character     insert_as_snippetr...
Listener Examplecommand "Show Save Information" do |cmd|!  cmd.input = :none!  cmd.output = :discard!  cmd.trigger = :exec...
SnippetsSnippets focus on inserting small pieces of content.          Commonly use activation triggers (tab)Support:"   Ta...
Snippet Examplesnippet "background: color" do |s|!  s.scope = "meta.property-list.css" !  s.trigger = "bgr"!  s.expansion ...
Snippet Example (Mirrored)snippet "background-foreground" do |s|!  s.scope = "meta.property-list.css" !  s.trigger = "bgfr...
Snippet Demo
Project TemplatesProvide default content for a new project"   Packaged as .zip file"   Variable substitutions"   Contribut...
Project Template Exampleproject_template "Ruble Template" do |t|!  t.type = :ruby!  t.location = "templates/ruble_template...
File TemplatesProvide default content for a particular file type"   Variable substitutions"   Contributed via Ruble   http...
File Template Exampletemplate("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      htt...
JSCA Example{!  "types": [!    {!       "name":"Titanium.Android.NotificationManager", !       "examples": [], !       "fu...
Documentation ExampleIn bundle.rb:require ruble!bundle Titanium do |bundle|!  bundle.project_build_path["Titanium 1.8"] = ...
Plugins"   Eclipse-based so most Eclipse plugins work   "   Database Explorer   "   Mobile Tooling"   Java extensibility v...
ResourcesTitanium-specific Rubles"   https://github.com/mschmulen/appfab.ruble"   https://github.com/aptana/titanium.ruble...
AppFab Demo
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Ingo Muschenetz: Titanium Studio Deep Dive
Upcoming SlideShare
Loading in …5
×

Ingo Muschenetz: Titanium Studio Deep Dive

1,282 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,282
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ingo Muschenetz: Titanium Studio Deep Dive

  1. 1. Titanium Studio Deep Dive Ingo Muschenetz
  2. 2. Photo: babawheels.comPimp My RIDECustomizing your Titanium Studio
  3. 3. Director, ToolsEngineering,AppceleratorLeads both the TitaniumStudio and Aptana Studioproducts and communities10+ years designingdeveloper tools andexperiences
  4. 4. Titanium StudioAptana StudioEclipse Platform
  5. 5. Titanium StudioMobile/Desktop platform support specific to Titanium Development. Titanium-specific content assist, Android/iOS debugging.Aptana StudioWeb language support(HTML, JS, CSS, Ruby, PHP, Python). FTP/SFTP, JavaScriptdebugging infrastructure. Git, Rubles.Eclipse PlatformIDE Shell, project management, basic editor architecture. Default preferencelayout. Toolbars. Update mechanisms.
  6. 6. What is a Ruble? Scripting interface to Studio Coded in Ruby Contributes: Content Themes Commands Snippets Templates Assist
  7. 7. Creating a New Ruble1. File > New > Ruby Project2. Name your Ruble. Click Next3. Select the Ruble Template4. Click FinishRuble template is itself a template contributed by a Ruble
  8. 8. Modifying an Existing Ruble1. Commands > Ruble Name > Edit this bundle…2. Ruble cloned into your workspace3. Update to latest version with Git pulls http://wiki.appcelerator.org/display/tis/Rubles
  9. 9. ScopesCSS Document:body!{! ! background:#000000;! ! text-align:left;!}!1.  Colorize “background”?2.  Specify a valid region for property proposals?
  10. 10. 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
  11. 11. Document Scopebody!{! ! background : #000000 ;! ! text-align : left ;!}!source.css
  12. 12. Token Scopes support.type.property-name.css constant.other.color.rgb-value.cssbody! punctuation.rule.terminator.css{! ! background : #000000 ;! ! text-align : left ;!}!entity.name.tag.css support.constant.property-value.css punctuation.separator.key-value.css
  13. 13. Meta Scopes meta.property-name.css meta.property-value.cssbody!{! ! background : #000000 ;! ! text-align : left ;!}!meta.selector.css meta.property-list.css
  14. 14. Scope Example Colorization and Context "   source.css "   support.type.property-name.css Context "   meta.property-list.css "   meta.property-name.css
  15. 15. Matching Rules Most specific scope matches first text.html vs. text Descendant selectors text.html source.php
  16. 16. Embedded Scopestext.html<html>! !<body>! ! !<?php! ! !! ! !?> !! ! !</body>! source.php</html>!
  17. 17. Scopes are Hierarchial Generally follow a convention of category.sub-category.language-extension comment All comments comment.line All line comments All line comments in comment.line.js JavaScript files
  18. 18. The Properties View helps discern relevant scopes
  19. 19. CommandsA script triggered manually or automaticallyExecute on:"   Menu selection"   Content assist"   Tab activation"   File listener"   Eclipse “Command” execution
  20. 20. 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 codehttp://wiki.appcelerator.org/display/tis/Ruble+Cookbook
  21. 21. Command Examplecommand 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!
  22. 22. Command Demo
  23. 23. Inputs & OutputsInput Specifiers Output Specifiersselection insert_as_textleft_character insert_as_snippetright_character replace_selectionword replace_documentline copy_to_clipboarddocument show_as_htmlclipboard show_as_tooltipnone create_new_document discard replace_line replace_word
  24. 24. Listener Examplecommand "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 !
  25. 25. SnippetsSnippets 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
  26. 26. Snippet Examplesnippet "background: color" do |s|! s.scope = "meta.property-list.css" ! s.trigger = "bgr"! s.expansion = "background:${1:red};$0"!end!
  27. 27. 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!
  28. 28. Snippet Demo
  29. 29. Project TemplatesProvide 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
  30. 30. Project Template Exampleproject_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!
  31. 31. File TemplatesProvide default content for a particular file type"   Variable substitutions"   Contributed via Ruble http://wiki.appcelerator.org/display/tis/Templates
  32. 32. File Template Exampletemplate("HTML 5 Template") do |t|! t.filetype = "*.html"! t.location = "templates/html5.html"!end!
  33. 33. 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
  34. 34. JSCA Example{! "types": [! {! "name":"Titanium.Android.NotificationManager", ! "examples": [], ! "functions": [! {! "name": "addEventListener", ! "parameters": [! {! "name": "name", ! "usage": "", ! "type": "String", ! "description": "name of the event"! },!
  35. 35. Documentation ExampleIn bundle.rb:require ruble!bundle Titanium do |bundle|! bundle.project_build_path["Titanium 1.8"] = ! "#{File.dirname($0)}/titanium.1.8.jsca"!end!
  36. 36. Plugins"   Eclipse-based so most Eclipse plugins work "   Database Explorer "   Mobile Tooling"   Java extensibility via extension points"   Eclipse Marketplace
  37. 37. ResourcesTitanium-specific Rubles"   https://github.com/mschmulen/appfab.ruble"   https://github.com/aptana/titanium.rubleAdditional Rubles:"   https://github.com/aptana/
  38. 38. AppFab Demo

×