Ch17 Listings
satya - Friday, February 26, 2010 11:12:17 AM
Listing 17-1. Directories to Remove for Uninstalling Titanium
\documents and settings\all users\application data\Titanium
\documents and settings\\application data\Titanium
\Program Files\Titanium (your install directory)
satya - Friday, February 26, 2010 11:12:33 AM
Listing 17-2. Hello World for the Titanium IDE Scratchpad
<html><head></head>
<body>
<h2>Hello World</h2>
</body></html>
satya - Friday, February 26, 2010 11:13:14 AM
Listing 17-4. Titanium Mobile Project Structure
c:\work\AndroidTest1
\build
\android\<eclipse like project structure>
\Resources
\android\appicon.png
\default.png
\<your files and sub directories go here>
\index.html
\index.css
\about.html
\manifest
\tiapp.xml
satya - Friday, February 26, 2010 11:13:27 AM
Listing 17-5. Example tiapp.xml
<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
<id>com.ai.titanium.android.AndroidTest1</id>
<name>AndroidTest1</name>
<version>1.0</version>
<icon>appicon.png</icon>
<persistent-wifi>false</persistent-wifi>
<prerendered-icon>false</prerendered-icon>
<statusbar-style>opaque</statusbar-style>
<windows>
<window>
<id>initial</id>
<url>index.html</url>
<backgroundColor>#111</backgroundColor>
<icon>ti://featured</icon>
<barColor>#000</barColor>
<fullscreen>false</fullscreen>
</window>
<window>
<id>about</id>
<url>about.html</url>
<backgroundColor>#111</backgroundColor>
<icon>ti://top rated</icon>
<barColor>#000</barColor>
<fullscreen>false</fullscreen>
</window>
</windows>
</ti:app>
satya - Friday, February 26, 2010 11:13:43 AM
Listing 17-6. Stand-alone ?Hello World? Example
<html><body>
<h2>Hello World</h2>
<p><a href="javascript:alert('hello')">
Click here to execute JavaScript
</a></p>
</body></html>
satya - Friday, February 26, 2010 11:14:00 AM
Listing 17-7. tiapp.xml with a Single Window
<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
<id>com.ai.titanium.android.AndroidTest2</id>
<name>AndroidTest</name>
<version>1.0</version>
<icon>appicon.png</icon>
<persistent-wifi>false</persistent-wifi>
<prerendered-icon>false</prerendered-icon>
<statusbar-style>opaque</statusbar-style>
<windows>
<window>
<id>initial</id>
<url>index.html</url>
<backgroundColor>white</backgroundColor>
<icon>ti://featured</icon>
<barColor>#000</barColor>
<fullscreen>false</fullscreen>
</window>
</windows>
</ti:app>
satya - Friday, February 26, 2010 11:16:45 AM
Listing 17-8. index.html That Uses Alternative Debug Options
<html><head>
<script>
function myalert(message)
{
var a = Titanium.UI.createAlertDialog();
a.setMessage(message);
a.setTitle('My Alert');
a.setButtonNames(["OK"]);
a.show();
}
function dalert(message)
{
Titanium.API.info(message);
alert(message);
//var a = prompt(message);
myalert(message);
}
</script>
</head>
<body>
<h2>Hello World</h2>
<p><a href="javascript:dalert('hello')">
Click here to execute JavaScript
</a></p>
</body></html>
satya - Friday, February 26, 2010 11:17:06 AM
Listing 17-9. keytool Options
keytool
-genkey //generate a public/private key
-alias mykey //name of the key
-keystore c:\somekeystore.store //location of a store
-storepass abc //password
-keypass abc //password
-keyalg RSA //key algorithm
-validaty 14000 //how many days is it valid
satya - Friday, February 26, 2010 11:17:26 AM
Listing 17-10. adb Install and Uninstall Options
adb install [-l] [-r]
- push this package file to the device and instal it
('-l' means forward-lock the app)
('-r' means reinstall the app, keeping its data)
adb uninstall [-k]
- remove this app package from the device
('-k' means keep the data and cache directorie)
satya - Friday, February 26, 2010 11:17:41 AM
Listing 17-11. Including JQuery in an HTML File
<script src="../../js/jquery132-dev.js"></script>
satya - Friday, February 26, 2010 11:17:55 AM
Listing 17-12. JQuery Selection Examples
function replaceAParagraph(newText)
{
//locate the HTML element with an ID
//it returns an array of matching elements
var myParagraph = $("#MyParagraphID")[0];
//read the old HTML from the element
var oldText = myParagraph.html();
//replace it with the new
myParagraph.html(newText);
//or simpler format
$("#MyParagraphID").html(newText);
//change the style of that element
$("#MyParagraphID").css("color:red;");
//hide the element
$("#MyParagraphID").hide();
}
satya - Friday, February 26, 2010 11:18:19 AM
Listing 17-13. Various JQuery Selectors
$("#MyElementID") // A specific id
$(".MyClass") //all elements matching this class
$("p") // all paragraphs
$("p.MyClass") //paragraphs with MyClass
$("div") // all divs
$(".MyClass1.MyClass2.MyClass3") // locate three classes
$("div,p,p.MyClass,#MyElementID") //matching all those
//Immediate children
$("#Main > *") // All children of Main
$("parent > child")
//Children and grand children
$("ancestor descendents")
$("form input") // all input fields in a form
$("label + input") // all inputs next to a label
$("prev + next")
//starting at myclass find siblings of type div
$(".myclass ~ div")
$("prev ~ next)
satya - Friday, February 26, 2010 11:18:38 AM
Listing 17-14. JQuery Selection Criteria
first
last
even
odd
eq(index)
lt(index)
gt(index)
header //(h1, h2 etc)
animated
satya - Friday, February 26, 2010 11:19:33 AM
Listing 17-15. Implementing hover over a Paragraph
function hoverParagraph()
{
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
}
satya - Friday, February 26, 2010 11:19:59 AM
Listing 17-16. Working with a Mouseover
function paragraphMouseover()
{
$("p").mouseover(function () {
$(this).css("color","red");
});
}
satya - Friday, February 26, 2010 11:20:13 AM
Listing 17-17. JavaScript Array Definition Example
var itemArray = [
{name: "Social", value: "12345678"},
{name: "cell1", value: "12345678"},
{name: "cell2", value: "12345678"}
];
satya - Friday, February 26, 2010 11:20:33 AM
Listing 17-18. Nested Object Initialization
var someobj = {field1:10,
field2:"string",
field3:{field1:10,field2:"string"));
satya - Friday, February 26, 2010 11:21:02 AM
Listing 17-19. Anonymous Functions
function Person() {
var age = 40; //init value
this.setAge = function(howold) { age = howold };
this.firstname = "First";
this.lastname = "Last";
}
var me = new Person();
me.firstname = "aaaa";
me.lastname = "bbbb";
me.setAge(25);
//the following will be wrong
me.age=44;
satya - Friday, February 26, 2010 11:21:21 AM
Listing 17-20. JavaScript Namespaces
var MY_NAME_SPACE = function() {
return {
method_1 : function() {
// do stuff here
},
method_2 : function() {
// do stuff here
}
};
}();
satya - Friday, February 26, 2010 11:21:37 AM
Listing 17-21. Example HTML Template
<#
for(var i=0; i < itemArrayData.length; i++)
{
var item = itemArrayData[i];
#>
<p><#=item.name #>:<#=item.value #></p>
<# } #>
satya - Friday, February 26, 2010 11:21:56 AM
Listing 17-22. John Resig?s Code for Microtemplating Engine
var _tmplCache = {}
this.parseTemplate = function(str, data) {
/// <summary>
/// Client side template parser that uses <#= #> and <# code #> expressions.
/// and # # code blocks for template expansion.
/// NOTE: chokes on single quotes in the document in some situations
/// use ? for literals in text and avoid any single quote
/// attribute delimiters.
/// </summary>
/// <param name="str" type="string">The text of the template to expand</param>
/// <param name="data" type="var">
/// Any data that is to be merged. Pass an object and
/// that object's properties are visible as variables.
/// </param>
/// <returns type="string" />
var err = "";
try {
var func = _tmplCache[str];
if (!func) {
var strFunc =
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
// str
// .replace(/[\r\t\n]/g, " ")
// .split("<#").join("\t")
// .replace(/((^|#>)[^\t]*)'/g, "$1\r")
// .replace(/\t=(.*?)#>/g, "',$1,'")
// .split("\t").join("');")
// .split("#>").join("p.push('")
// .split("\r").join("\\'") + "');}return p.join('');";
str.replace(/[\r\t\n]/g, " ")
.replace(/'(?=[^#]*#>)/g, "\t")
.split("'").join("\\'")
.split("\t").join("'")
.replace(/<#=(.+?)#>/g, "',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+ "');}return p.join('');";
//alert(strFunc);
func = new Function("obj", strFunc);
_tmplCache[str] = func;
}
return func(data);
} catch (e) { err = e.message; }
return "< # ERROR: " + err.htmlEncode() + " # >";
}
satya - Friday, February 26, 2010 11:22:16 AM
Listing 17-23. HTML Utilizing Microtemplating Engine
<html><head>
<script src="../../js/jquery132-dev.js"></script>
<script src="../../js/template-engine.js"></script>
<script>
//Data
var itemArray = [
{name: "Social", value: "12345678"},
{name: "cell1", value: "12345678"},
{name: "cell2", value: "12345678"}
];
function onloadFunction()
{
var s = $("#MyTemplate").html();
var s1 = parseTemplate(s, {itemArrayData: itemArray});
$("#target").html(s1);
}
</script>
<script id="MyTemplate" type="text/html">
<#
for(var i=0; i < itemArrayData.length; i++)
{
var item = itemArrayData[i];
#>
<p><#=item.name #>:<#=item.value #></p>
<# } #>
</script>
</head>
<body onload="onloadFunction()">
<div id="target">
<p>target</p>
</div>
</body></html>