The link can be found here

Please enjoy.

Have fun

Introduction

I am an experienced developer and have been using a MAC with XCODE to make some basic apps over the last 6 months.  Quite frankly I find it pretty hard work, that is not to say that programming should not be difficult, but Apps is more of a sideline for me and my company so I would like to be able to get a bigger ‘bang for my buck’ (buck in this case being hours).

I have built a sort of wrapper for quick and easy deployment of HTML5 based apps built with sencha touch and jqtouch but they are not quite as good as native apps.  It is for this native building that I want to maximize my efforts and therefore the idea of a cross browser platform is appealing so long as it really does produce native code.  In the case of Titanium I saw that after making my program I was able to export it as an XCODE project and then compile it, therefore I do see Titanium as providing this ‘real native’ solution.

The log of my app

firstly I see that Titanium makes a native folder structure on your filesystem and from then on you are on your own.  It creates a few files for you but you have to find an editor yourself and work from examples and the API Docs. From here I start with an app called test003m.

In the folder there is :

• tiapp.xml, which is apparently a static configuration file
• build(folder), which is where the output will go
• Resources (folder), where “resources” will go, I am not quite sure what “resources” are at the moment but I will soon find out.
• i18n (folder), where I can put language specific stuff, apparently.
• More informtion can be found here.

app.js

In the resources folder is app.js which I suspect is quite important. it contans the following code to start with:

Titanium.UI.setBackgroundColor('#000');

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({
 title:'Tab 1',
 backgroundColor:'#fff' 
}); 

var tab1 = Titanium.UI.createTab({
 icon:'KS_nav_views.png', 
 title:'Tab 1', window:win1 
});

Now this is very reminiscent of the structures you use in EXT.JS in order to set up the GUI.  It is all JSON based syntax, so far it looks like it could be quite easy to get the hang of.

The following are the major design components in Titanium:

• Windows – windows host one or most Views
• Views – views draw content on the screen
• Widgets – widgets are special types of views that perform specific actions like buttons

Here is an example from the Appcellerator website of code to make a view in a window

var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();

We could restructure the above code to use a URL-based design.

First, in your app.js, you would add:

var win = Ti.UI.createWindow({url:"view.js"});
win.open();

Then, create a file named view.js and add the following code:

var win = Ti.UI.currentWindow;
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);

Notice that the win variable points to Ti.UI.currentWindow. Titanium defines a set of special variables in your JavaScript context automatically for you which allow you. Ti.UI.currentWindow defines the Window reference that owns (opened) the current Window so you can still reference it.

To add interacivity this should be the code according the the tutorial I am reading:

view.addEventListener('click',function() {
 view.animate({width:96,height:96,duration:1000});
});

Here is a more complicated example:

view.addEventListener('click',function() {
 var t = Ti.UI.create2DMatrix();
 t = t.rotate(-90).scale(4);
 view.animate({transform:t,duration:1000});
});

Widgets

It seems to me that widgets are basically forms, i.e. views with controls on them which in turn cannot contain views.  Here is another example from the website

var win = Ti.UI.createWindow();
var view = Ti.UI.createImageView({
 image:"myimage.png",
 width:24,
 height:24
});
var button = Ti.UI.createButton({
 title:"Animate",
 width:80,
 height:40,
 bottom:10
});
button.addEventListener("click",function(){
 view.animate({top:0,duration:500});
});
win.add(view);
win.add(button);
win.open();

Modal windows

You can create modal windows at any time without adding them to another component.  Here is an example of opening a modal window which is attached to a button by the use of an onclick handler

var b3 = Ti.UI.createButton({
 title :'b3'
});
b3.addEventListener('click',function(e) {
 var mod1 = Titanium.UI.createWindow({
 backgroundColor:'red'
 });
 var mod1b3 = Ti.UI.createButton({
 title :'b3'
 });
 mod1b3.addEventListener('click',function(e) {
 mod1.close();
 });
 mod1.add(mod1b3);
 mod1.open({
 modal:true,
 modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
 modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
 });
});

The reference guide (link)

There is a comprehansive guide to the API but I found it difficult to determins which component was which by looking at the descriptions.  I made myself a set of notes which I share with you:

• Tab Group, this is the classic navigation with tabs below the display
• Table View, this is any sort of tabular data but NOT a navigation
• WebView, this is any sort of html in a window
• OptionsDialog – this is the options which shoot up from the bottom of the screen
• EmailDialog – this is for sending emails
• MapView – the classic map view
• Coverflow View – this is the flipping inames
• Dashboard view – this is like the appie front screen with a series of icons
• Tab Badge – is the red number on the tabs
• WindowNavBar – this is at the top of the window and has the back buttons
• Window Toolbar – this is at the bottom of the view and I think is seldom used
• NavGroup – this is the left sliding list of items with a detail view or a 2nd level of menu to the right
• Controls
• Slider
• Switch (on off)
• Activity indicator
• Progress bar
• Button
• Label (any text)
• Search Bar – this bar at the top of a view
• Text field, text area
• Button Bar – a group of buttons
• System Buttons (as from the system)
• Picker – this is a select box
• Photo Gallery – access to photos
• Orientation – access to orientation
• Contacts – acces to address book
• Camera – camers
• Save to Gallery
• Shake
• Status Bar – the whole bar at the top of the page  - can be hidden.
• App Badge – the red number in the app

To help with remembering which components and view to use I have made a sort of cheat sheet with screenshots from the Appcelerator Titanium kitchen sink Application:

I am currently writing my part 2 so this post is to be continued…

Here are some great links on the subject

http://www.ibm.com/developerworks/web/library/wa-senchatouch/?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=022411

• couchdb
  - A document database server, accessible via a RESTful JSON API.
  - Ad-hoc and schema-free with a flat address space.
  - Distributed, featuring robust, incremental replication with bi-directional conflict detection and management.
  - Query-able and index-able, featuring a table oriented reporting engine that uses JavaScript as a query language.

• mongodb
  - MongoDB (from “humongous”) is a scalable, high-performance, open source, document-oriented database. Written in C++.

Mongodb

I installed the code and after struggling I worked out that if I used the staticly linked code it worked first time with no compilation or other complecations

• IBM
• IBM again
• IBM again
• A book
• A blog
• a forum

There are so many components in the new servers I have found it very difficult to make sense of it all

Here will follow my next blog..

I am going to use the following links:

• List of scripts
• Rhino in Wikipedia
• ECMAScript in Wikipedia
• more to follow…

I have to say that it seems much more extendable than the other libraries also. I say this because with mootools, for instance, if you want to add GUI components you have to use something like cnet components which seem heavy

I want to refer to the following links ::

• http://jquery.com/

Some usefull plugins that I have used already::

• http://dev.iceburg.net/jquery/jqModal/

Some usefull looking plugins that I have not tried yet::

• http://www.makemineatriple.com/jquery/?newsTicker
• http://nadiaspot.com/jquery/confirm/#examples
• http://www.fyneworks.com/jquery/multiple-file-upload/
  
• http://plugins.jquery.com/project/SimpleModal
• http://www.freewebs.com/flesler/jQuery.LocalScroll/
• http://www.freewebs.com/flesler/jQuery.ScrollTo/
• http://www.freewebs.com/flesler/jQuery.Listen/
• http://plugins.jquery.com/project/livequery
• http://flesler.blogspot.com/2007/11/jqueryrule.html
• http://www.bernardopadua.com/nestedSortables/test/widget/
• http://plugins.jquery.com/project/wresize
• http://plugins.jquery.com/project/Codepress
• http://digitalbush.com/projects/masked-input-plugin#demo
• http://jquery.bassistance.de/validate/demo-test/
• http://www.trendskitchens.co.nz/jquery/contextmenu/
• http://www.andreacfm.com/examples/jQpanels/
• http://www.designerkamal.com/jPrintArea/#