New comments and files renamed to more logic names

README.rst

@@ -11,91 +11,70 @@ using basic technics and principles.
 
 Component oriented
 ==================
-TitanTricks uses the "factory" JavaScript pattern everywhere. Thanks to this, there is no need to use the "new"
-JavaScript constructor keyword (an interesting discussion about the "new" JavaScript keyword can be found in Douglas 
-Crockford literature).
+TitanTricks has been completely refactored to commonJS modules. Following Appcelerator guidelines, the app only uses
+commonJS modules.
 
-Specific app components are defined inside 'app' folder, using one js file for each component (AppWindow, WinDemo...)
+Specific app components are defined inside 'app' folder, using one js file for each component (AppWindow, DemoWin, IndexView...)
 
-Reusable components are now in commonJS modules, under 'modules' folder. At this time, one module TitanTricksUIComponents.js
-is available. Even inside the commonJS module, the factory patter is used, with public methods such as createLongClickButton()
-or createCollapsible()
+Reusable components are now in commonJS modules, under 'components' folder. 
 
 All TitanTricks components can be easily reused. Copy and paste 'modules' folder and require() them. Since TitanTricks modules
 are organized in types (UI, network, data...), you may want to load in properties of a global object. Note that, at this time,
-TitanTricks only provides UI components, but this may change in future :)
+TitanTricks only provides UI components, but this may change in future
 
-::
-
-  var TitanTricks = {}:
-  TitanTricks.ui = require('/modules/TitanTricksUIComponents');
-  
-  var btn = TitanTricks.ui.createLonkClickButton({title:'here we go!'});
 
+Coding style and commonJS modules
+=================================
+TitanTricks is built based on commonJS modules. All path modules are declared in module ModulePaths, so there's no need to use 
+paths in the project (except for the path to ModulesPath.js file):
 
+::
+var Mods = require('/ModulePaths');
 
-Style
-=====
-TitanTricks is built following the "Tweetanium style", but a little bit more strict in declarations. 
+//all the app modules are declared as constants inside a module
+var IndexView = require(Mods.INDEXVIEW),
+	Tools = require(Mods.TOOLS),
+	$$ = require(Mods.STYLES);
 
-Each file includes in its first lines the public methods implemented in that file, so is easier to find
-public method declarations. For example:
+module.exports = function() {
+	var win = Ti.UI.createWindow ($$.APP_WINDOW);
+	...
+}
 
-::
 
-  //declare all public methods of this file before start coding.
-  //JSlint friendly :)
-  App.ui.createWinDemo = {};
+Also the common styles for the app are defined in Styles.js file, and commonly assigned to $$ var, as a reminiscence of the tweetanium app.
+Specific styles for some demos are declared inside each demo view.
 
-  (function(){
-  	App.ui.createWinDemo = function(args){
-  		[...]		
-  	};
-  })();
+Tools.js file includes some useful and reusable functions and is required all along the project.
 
-Each folder in the structure (config, model, ui and demos) has a file wich includes the files contained in this folder, like an index file.
-
-Look inside ui.js to have an idea.
+If you don't know how to use commonJS modules on Titanium, these two reads will help a lot:
 
+http://wiki.appcelerator.org/display/guides/CommonJS+in+Titanium
+http://wiki.appcelerator.org/display/guides/Mobile+Best+Practices
 
 Global Vars:
 ============
+Global what? :)
 
-The project has 4 custom global vars:
-
-1. App:
-The namespace containing all app methods, with 3 main properties:
- - App.config
- - App.model
- - App.ui
-
-Each one of this properties has a corresponding folder inside /app/ folder.
+There's no need for global vars using CommonJS modules. Even the code in app.js has been involved in an anonymous javascript function
+to avoid pollute the global scope. 
 
-2. $$:
-is an alias for App.ui.properties, created in ui/styles.js file (like tweetanium does). 
-
-3. TitanTricks:
-All components included in commonJS modules are created under this namespace (TitanTricks.ui.*). 
-I decided to create a diferent namespace to facilitate reusing code. Copy and paste modules folder
-in your project and start reusing demo code.
-
-4. tools:
-tools.js is a common file I usually use in my projects. The code comes mainly from tweetanium project (thank you guys!)
-and also has some string functions prototiped I miss from other languages.
-The only place where I use tools as a global var is in TitanTricks.js to add all the functionality from tools to App object
-using the mixin method (declared in tools.js).
+::
+(function(){
+
+	var Mods = require('/ModulePaths');
+
+	var	AppWindow = require(Mods.APPWINDOW);
+
+	var appWin = new AppWindow();
+
+	appWin.open();
 
-CommonJS modules?
-================
-CommonJS modules is now supported for reusable components.
+})();
 
-If you don't know how to use commonJS modules on Titanium, these two reads will help a lot:
+//no global vars here!
 
-http://wiki.appcelerator.org/display/guides/CommonJS+in+Titanium
-http://wiki.appcelerator.org/display/guides/Mobile+Best+Practices
 
-Right now there is a big module file with all components (TitanTricksUIComponents.js), but I'll probably split it in several files, 
-one for each component.
 
 Collaboration
 =============
@@ -107,23 +86,20 @@ HOW TO ADD DEMOS
 
 All demo views are in app/ui/demos
 
-Custom components are in modules/
-
---> You don't have to change any file outside the demo modules to add a new demo! <--
+Custom components are in app/ui/components/
 
-Before be shown to the user, demos are built inside ViewTemplateDemo.js and WinDemo.js, wich are a template 
-with the toolbar (ios), title, descriptions and so on, in a vertical layout. Demos are launched from main index 
-tableview (in ViewIndex.js)
+Before be shown to the user, demos are built inside ViewTemplateDemo.js and WinDemo.js, which are a template 
+with a title, descriptions and so on, in a vertical layout. Demos are launched from main index 
+tableview (in IndeView.js)
 
 Each ViewDemo in demos/ folder returns a view that is built inside the demos template automatically.
 
-To add a new demo, create a new ViewDemo and include it in /app/ui/demos/demos.js.
+To add a new demo, create a new ViewDemo module and include it in /app/ui/demos/demos.js.
 
-Each ViewDemo has a private var called "demoInfo", with info about the demo and a "createView" interface property to 
+Each ViewDemo has a  var called "demoInfo", with info about the demo and a "createView" interface property to 
 launch the demo from the index table.
 
 ::
-
 	//Standard demo declaration used along TitanTricks App to reference each demo.
 	var demoInfo = {
 		title:	'Image reflection',
@@ -132,12 +108,16 @@ launch the demo from the index table.
 		component:	'ImageReflection',
 		header:	'UI',
 		ios:	true,
-		android:	false,
-		createView:	App.ui.demos.createViewImageReflection //IMPORTANT: Be sure you update this line with your own method.
+		android:	false
 	}
+	
+	demoInfo.createView = function(){
+		//implement here your demo
+	};
+	
+	module.exports = demoInfo; //make it public
 
-Appart of the demo folder, you may want to add some new components to the app. Please, add the components files inside commonJS modules, in
-modules folder.
+Appart of the demo folder, you may want to add some new components to the app. Add the components files inside the components.
 
 and code strong!
 

Resources/ModulePaths.js

@@ -5,15 +5,14 @@ var components = '/app/ui/components/';
 module.exports = {
 	//App components
 	APPWINDOW: ui + 'AppWindow',
-	INDEXVIEW: ui + 'ViewIndex',
-	INDEXROWVIEW: ui + 'RowIndex',	
-	DEMOWIN: ui + 'WinDemo',
-	MAINVIEW: ui + 'MainView',
-	TEMPLATEDEMO: ui + 'ViewTemplateDemo',
+	INDEXVIEW: ui + 'IndexView',
+	INDEXROWVIEW: ui + 'IndexRowView',	
+	DEMOWIN: ui + 'Demowin',
+	TEMPLATEDEMO: ui + 'TemplateDemoView',
 
 	//Others
 	TOOLS: '/app/Tools',
-	STYLES: ui + 'styles',
+	STYLES: ui + 'Styles',
 
 	//Demos "proxy"
 	DEMOSLIST: ui + 'demos/demos',

Resources/app.js

@@ -16,17 +16,3 @@
 	appWin.open();
 
 })();
-
-
-
-/*Ti.UI.setBackgroundColor('#eee');
-
-	
-	var l = Ti.UI.createLabel({text:'hola', width:300, height:300, backgroundColor:'blue'});
-	
-	var w = Ti.UI.createWindow();
-	
-	w.add(l);
-	
-	w.open();
-*/

Resources/app/ui/AppWindow.js

@@ -1,5 +1,5 @@
 /**
- * Creates main window creator function
+ * Creates main window 
  */
 
 

Resources/app/ui/demos/ViewJoystick.js

@@ -29,7 +29,7 @@ demoInfo.createView = function(){
 		text:'Move the joystick'
 	});
 
-	//joystick animation does not work fine on ios if it is in a vertical layout, so I create a view with absolute layoute
+	//joystick animation does not work fine on ios if it is in a vertical layout, so I create a view with absolute layout
 	//to draw the component on the demo view
 	var container = Ti.UI.createView({
 		left:0, right:0,

tiapp.xml

@@ -2,7 +2,7 @@
 <ti:app xmlns:ti="http://ti.appcelerator.org">
     <sdk-version>2.0.1.GA2</sdk-version>
     <deployment-targets>
-        <target device="mobileweb">true</target>
+        <target device="mobileweb">false</target>
         <target device="iphone">true</target>
         <target device="ipad">false</target>
         <target device="android">true</target>