sencha ide plugins
TRANSCRIPT
Copyright ©2015 Sencha
Sencha IDE Plugins Improve Developer Productivity
http://docs.sencha.com/ide_plugins/index.html
Stefan Stölzle Sr. Solutions Engineer, Asia Pacific
" me_stoe
Copyright ©2015 Sencha
http://docs.sencha.com/ide_plugins/jetbrains_ide_plugin.html
Copyright ©2015 Sencha
Any of these JetBrains Products • IntelliJ 14.1+ • WebStorm 10+ • PHPStorm 9+ • RubyMine 7.1+ • PyCharm 4.5+
Sencha Cmd 4+ (optional) Sencha Framework SDK (non-minified)
• Ext JS 4+ • Touch 2+
JetBrains IDE Plugin
Copyright ©2015 Sencha
Key Features • Project Creation • Code Completion • Code Inspection • Refactoring • Template Creation • Code Navigation • Code Generation • Spellchecking
JetBrains IDE Plugin
Copyright ©2015 Sencha
• Configs • Xtypes • Methods • Properties • Class Names • Event Names • CSS Classes • Stores • Models
• View Controllers • View Models • Layouts • View References • Controller
Methods • etc...
Code Completion
Copyright ©2015 Sencha
• Manages requires/uses arrays • Flags references to unknown classes
and aliases • Flags classes when names do not
match directory structure or file names
• Flags references to missing controller methods referenced in view components
• Provides quick fixes for all of the above
Code Inspection
Copyright ©2015 Sencha
• Move file/classautomatically keeps namespace in sync with directory structure
• Rename file/classautomatically keeps class name in sync with file name
Refactoring
Copyright ©2015 Sencha
• Classes • Views • View Models • View Controllers • Models • Controllers • Stores
Template Creation
Copyright ©2015 Sencha
• run sencha app watch directly from the IDE
• create a run configuration (or two if it is a universal app) automatically on app creation
Run Configuration
Copyright ©2015 Sencha
http://docs.sencha.com/ide_plugins/visual_studio_ide_plugin.html
Copyright ©2015 Sencha
Works w/ MS Visual Studio 2015 • Enterprise • Professional • Community Edition
Sencha Cmd 6+ (optional) Sencha Framework SDK (non-minified)
• Ext JS 4.2+ • Touch 2.1+
Visual Studio Plugin
Copyright ©2015 Sencha
Key Features • IntelliSense • Toolkit Identification • Definition Lookup • Code Creation • Run Configuration
Visual Studio Plugin
Copyright ©2015 Sencha
• properties and methods on instances of Ext JS components
• keys in config objects passed into constructors, Ext.create, Ext.define, Ext.widget, and object literals with xtype or xclass
• xtypes and other aliases • event names in listeners objects,
and on, mon, un, and mun methods
IntelliSense
Copyright ©2015 Sencha
• When using Ext JS (Ext JS 6+ only), the plugin automatically includes suggestions from the correct toolkit (classic or modern) depending on the location of current file being edited. This also applies to single toolkit applications based on the toolkit defined in the app.json file.
Toolkit Identification
Copyright ©2015 Sencha
• class name • xtypes and other type aliases • methods and properties • config keys • events
right-click and select Go to Definition (or use the standard F12 shortcut key)
Definition Lookup
Copyright ©2015 Sencha
• Classes • Views • View Models • View Controllers • Models • Controllers • Stores
Code Creation
Copyright ©2015 Sencha
http://docs.sencha.com/ide_plugins/eclipse_ide_plugin.html
Copyright ©2015 Sencha
Works with • Eclipse Luna • Eclipse Mars
Operating Systems • Windows 7 or higher (64 or 32 bit) • Mac OSX • Linux (64 bit only)
Sencha Cmd 6+ (optional) Sencha Framework SDK (non-minified)
• Ext JS 4.2+ • Touch 2.1+
Eclipse Plugin
Copyright ©2015 Sencha
Key Features • Wizard Creation • Code Completion • Open Definition • Documentation Lookup • Run Configuration
Eclipse Plugin
Copyright ©2015 Sencha
• Ext JS App(for existing Eclipse projects)
• Ext JS App Project (will create a new Eclipse Project)
• Ext JS Workspace(for existing Eclipse projects)
• Ext JS Workspace Project(will create a new Eclipse Project)
• Ext JS Class • Ext JS Package • Ext JS View Package
Wizard Creation
Copyright ©2015 Sencha
• Configs • Xtypes • Methods • Properties • Class Names • Event Names • CSS Classes • Stores • Models
• View Controllers
• View Models • Layouts • View
References • Controller
Methods • etc...
Code Completion
Copyright ©2015 Sencha
• Extend the Eclipse JavaScript editor, and allows to open up the defining source code for various elements/properties within Ext JS and Touch classes.
• Will open up user-generated source code in addition to Ext JS and Touch SDK source code.
• Inside a project that has the Sencha Nature, move the cursor to where you want to open the definition, and press ⇧ + F3.
Open Definition
Copyright ©2015 Sencha
• Allows to open up Sencha API documentation relevant to the code being edited from within the IDE.
• When editing a JavaScript file inside a project that has the Sencha Nature, move the cursor to appropriate element, and press the F1 key. The appropriate Sencha API documentation will open in a new external browser window.
• If no relevant API documentation can be found, it will default to the API documentation root for the version of the SDK found in your application. (e.g. https://docs.sencha.com/extjs/6.0/6.0.0-classic/)
Documentation Lookup
Copyright ©2015 Sencha
• run sencha app watch directly from the IDE
• create a run configuration (or two if it is a universal app) automatically on app creation
Run Configuration
Copyright ©2015 Sencha
Q & A
Stefan Stölzle Sr. Solutions Engineer, Asia Pacific
" me_stoe
Copyright ©2015 Sencha
Thank YOU
Stefan Stölzle Sr. Solutions Engineer, Asia Pacific
" me_stoe