Sencha Touch plugin authoring best practices?
Sencha Touch plugin authoring best practices?
I am beginning to write my first Sencha Touch plugin, and have not been able to find any clear direction (from the official documentation, or from the community) about plugin authoring best practices. In particular, the issues I'd like clarity on are (with a particular emphasis on large, complex plugins):
- namespacing / class naming conventions,
- where extensions should live in the filesystem, and
- including extensions in projects.
NAMING / CLASS NAMING CONVENTIONSThe community seems to be divided on this issue. Many plugins are Ext.ux.PluginName. Some are Ext.ux.touch.PluginName. Sometimes people have more classes, and append them: Ext.ux.touch.PluginName.data.proxy.PluginProxy. Some people namespace their plugins under their own brand: PluginCorp.PluginName. Some people sprinkle classes around without an umbrella namespace, like Ext.ux.data.proxy.PluginProxy and Ext.ux.data.writer.PluginWriter.
WHERE SHOULD THE PLUGIN LIVE IN THE FILESYSTEM
Again, no clear consensus. Some sources tell you to put it in sdk/ux and bank on the default class loader finding it like every other class. Some tell you to put it wherever you want, and use Ext.Loader to set the load path.
INCLUDING EXTENSIONS IN PROJECTS
Some people say to put the extension in sdk/ux and rely on the default class loader behavior to find things. Some tell you to put it elsewhere, then point Ext.Loader at it with a custom path. Some sources say to have a single file to include that Ext.require's all dependent files, some depend on the class loader to find each individual file.
After being pulled in many different directions, I don't have an answer, but I do have some thoughts, and some questions:
- Keeping extensions inside the sdk directory is going to make upgrading the sdk much harder than it needs to be. I don't want to have to move a bunch of classes or risk overwriting them when I upgrade, I just want to move a symlink and have it all just work.
- If it doesn't live inside sdk, you need to tell Ext.Loader to look elsewhere for a given namespace. This seems cumbersome in a multi-class plugin if you do not keep all the classes under an umbrella namespace, be it of the Ext.ux.PluginName.foo format, or of the PluginName.foo format.
- Ext.ux.PluginName.foo is more consistent, PluginName.foo is more concise, Ext.ux.foo is just collision-prone and (seemingly, to me) unnecessarilly limiting. Which is best?
- Join Date
- Mar 2007
- Location
- Gainesville, FL
- 37,858
- Vote Rating
- 932
The name of the plugin is totally up to you. We suggest the root namespace is UpperCamelCase and the class name be UpperCamelCase, the rest lower case just like all our classes are in the framework.
Samples:
Ext.ux.touch.grid.View
Ux.locale.Manager
I have shifted from using the Ext.ux namespace that is common to just using Ux.
You can put your plugins/extensions where ever as you can add paths to what you need. Integrating with a project you just add a path. The name must exactly match the file system structure.
So for Ext.ux.touch.grid.View I store in
~/Sites/ux/touch/grid/View.js
For Ux.locale.Manager:
~/Sites/ux/locale/Manager.js
In a project I add paths:
Code:
Ext.Loader.setPath({ 'Ext.ux' : '../ux', 'Ux' : '../u overview. Do you know if there is more information elsewhere? As the OP pointed out, there is very little structure and documentation around the concept of plugins, and plugins are a rather important tool for code reuse and sharing.
Things that aren't addressed here:
- A set of standard file locations, so that each plugin creator doesn't have to specify the install/reuse process for their particular plugin in explicit detail.
- treatment of custom CSS/SCSS
- base directory
- Namespaces that won't clash. 'Ux.*' is not appropriate for third-party plugins, for example.
- Does Sencha have design goals in mind for enhancing the plugin creation and (especially) use workflow?
Thanks,
What am I missing?
What am I missing?
Hello Everyone,
I haven't been able to figure this out and this thread has been the closes piece of information that I need.
I am trying to load a plugin/extension and although the namespace and path are set and align with the folder/file structure, secha-touch.js is looking at the wrong path for it.
Here's a quick overview; my structure is
Code:
/touch/src --> sencha-touch /app --> my app /ux --> my plugin(s) holder
HTML Code:
Ext.Loader.setPath({ 'Ext': 'touch/src', 'MyApp': 'app', 'Ux': 'ux' });
HTML Code:
Ext.namespace('Ux'); Ext.define('Ux.htmlPanel', { extend: 'Ext.Panel'.... });
Can anyone point out what I am dong wrong? I have been looking at this for far too long.
Thanks.
False alarm, after taking a break and reviewing the files one more time, the path to my extension was incorrect inside my view.