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>