Mobile-Web-App

Friday, January 13, 2012

jQuery Mobile: ul element, with data-role="listview"

Example of html <ul> element in jQuery Mobile, with data-role="listview".

<!doctype html>
<head>
 <title>Mobile-Web-App: listview</title>
 <meta charset="utf-8">
 <meta name = "viewport" content = "width = device-width, height = device-height" />

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile: listview</h1>
</div>

<div data-role="content">
<ul id="myitems" data-role="listview" data-filter="true" data-inset="true" >
 <li><a href="http://jquerymobile.com/">jQuery Mobile</a></li>
 <li><a href="http://www.microsoft.com/">Microsoft</a></li>
 <li><a href="http://www.google.com/">Google</a></li>
 <li><a href="http://www.ibm.com/">IBM</a></li>
</ul>
</div>

<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

Related article:
- jQuery Mobile: listview with data-filter: insert <li> elements using Javascript code.

Thursday, January 12, 2012

FREE eBook: Programming Windows Phone 7, by Charles Petzold, from Microsoft

The book "Programming Windows Phone 7" is a gift from the Windows Phone 7 team at Microsoft to the programming community. Within the pages that follow, it show you the basics of writing applications for Windows Phone 7 using the C# programming language with the Silverlight and XNA 2D frameworks.

Download link:

TABLE OF CONTENTS

Part I The Basics

1 Hello, Windows Phone 7

Targeting Windows Phone 7

The Hardware Chassis

Sensors and Services

File | New | Project

A First Silverlight Phone Program

The Standard Silverlight Files

Color Themes

Points and Pixels

The XAP is a ZIP

An XNA Program for the Phone

2 Getting Oriented

Silverlight and Dynamic Layout

Orientation Events

XNA Orientation

Simple Clocks (Very Simple Clocks)

3 An Introduction to Touch

Low-Level Touch Handling in XNA

The XNA Gesture Interface

Low-Level Touch Events in Silverlight

The Manipulation Events

Routed Events

Some Odd Behavior?

4 Bitmaps, Also Known as Textures

XNA Texture Drawing

The Silverlight Image Element

Images Via the Web

Image and ImageSource

Loading Local Bitmaps from Code

Capturing from the Camera

The Phone’s Photo Library

5 Sensors and Services

Accelerometer

A Simple Bubble Level

Geographic Location

Using a Map Service

6 Issues in Application Architecture

Basic Navigation

Passing Data to Pages

Sharing Data Among Pages

Retaining Data across Instances

The Multitasking Ideal

Task Switching on the Phone

Page State

Isolated Storage

XNA Tombstoning and Settings

Testing and Experimentation

Part II Silverlight

7 XAML Power and Limitations

A TextBlock in Code

Property Inheritance

Property-Element Syntax

Colors and Brushes

Content and Content Properties

The Resources Collection

Sharing Brushes

x:Key and x:Name

An Introduction to Styles

Style Inheritance

Themes

Gradient Accents

8 Elements and Properties

Basic Shapes

Transforms

Animating at the Speed of Video

Handling Manipulation Events

The Border Element

TextBlock Properties and Inlines

Objective-C wins the TIOBE Programming Language Award of 2011!

According to TIOBE Programming Community Index for January 2012, Objective-C wins the TIOBE Programming Language Award of 2011!

This award is given to the programming language that gained most market share in 2011. The market share of Objective-C is 3.91% higher than it was in January 2011. The major cause of this is the continuing success of the iPhone and the iPad, which both are mainly implemented in Objective-C.

The entire top 20 included the following:

1 Java
2 C
3 C#
4 C++
5 Objective-C
6 PHP
7 (Visual) Basic
8 Python
9 Perl
10 JavaScript
11 Delphi/Object Pascal
12 Ruby
13 Lisp
14 Pascal
15 Transact-SQL
16 PL/SQL
17 Ada
18 Logo
19 R
20 Lua

Source: http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

jQuery Mobile: listview with data-filter

In the last exercise "jQuery Mobile: Add HTML elements using Javascript code", we insert the <ul> elements as standard html element, not natural jQuery Mobile element.

It's modify to jQuery Mobile "listview", with data-filter set "true":
<ul id="myitems" data-role="listview" data-filter="true" data-inset="true" >
</ul>

jQuery Mobile: listview with data filtered

<!doctype html>
<head>
 <title>Mobile-Web-App: Add HTML elements using jQuery Mobile</title>
 <meta charset="utf-8">
 <meta name = "viewport" content = "width = device-width, height = device-height" />

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>


<script>
function myOnLoad(){
 var myButton1 = document.getElementById("Button1");
 myButton1.onclick = Button1Listener;
}

function Button1Listener(){
 var myText1 = document.getElementById("Text1");
 var myInput1 = myText1.value;

 var newItem = document.createElement("li");
 newItem.innerHTML = myInput1;
 var myItems = document.getElementById("myitems");
 myItems.appendChild(newItem);
 
}

window.onload = myOnLoad;
  
</script> 
 
 
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: Add HTML elements using Javascript code</h1>
</div>
 
<div data-role="content">
<p>Enter new item</p>
<form>
<input type="text" id="Text1">
<input type="button" id="Button1" value="Add">
</form>
<ul id="myitems" data-role="listview" data-filter="true" data-inset="true" >
</ul>
</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>

Remark: we also hard-code jQuery Mobile css link and script pointing to the latest released version.

Related article:
- jQuery Mobile: ul element, with data-role="listview"

Wednesday, January 11, 2012

jQuery Mobile: Add HTML elements using Javascript code

It's mobile version of the last exercise "Add HTML elements using Javascript code", to make it mobile look and feel using jQuery Mobile.

<!doctype html>
<head>
 <title>Mobile-Web-App: Add HTML elements using jQuery Mobile</title>
 <meta charset="utf-8">
 <meta name = "viewport" content = "width = device-width, height = device-height" />

 <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<script>
function myOnLoad(){
 var myButton1 = document.getElementById("Button1");
 myButton1.onclick = Button1Listener;
}

function Button1Listener(){
 var myText1 = document.getElementById("Text1");
 var myInput1 = myText1.value;

 var newItem = document.createElement("li");
 newItem.innerHTML = myInput1;
 var myItems = document.getElementById("myitems");
 myItems.appendChild(newItem);
 
}

window.onload = myOnLoad;

</script> 
 
 
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile: Add HTML elements using Javascript code</h1>
</div>

<div data-role="content">
<p>Enter new item</p>
<form>
<input type="text" id="Text1">
<input type="button" id="Button1" value="Add">
</form>
<ul id="myitems">
</ul>
</div>

<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

In this example, <ul> is in standard html element. It will be modified to jQuery Mobile style "listview" in next post: jQuery Mobile: listview with data-filter.

Tuesday, January 10, 2012

Play Cut the Rope on browser, with HTML5

Microsoft’s Internet Explorer team partnered with ZeptoLab (the creators of the game) and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

You can play the HTML5 version of Cut the Rope at: http://www.cuttherope.ie/.

In this video you'll learn how one of the most popular mobile games of 2011 - Cut The Rope - was brought to the web in HTML5. Semyon Voinov and Denis Morozov from Zeptolab, creators of the game, explain how they collaborated with Pixel Lab's Robby Ingebretsen and Joel Fillmore to bring Om Nom to life on the web!

Monday, January 9, 2012

Add HTML elements using Javascript code

Example of adding HTML elements using Javascript code. Once the button clicked, new element of "li" will be added under the "ul" of id "myitems".

<!doctype html>
<head>
 <title>Mobile-Web-App: Add HTML elements using Javascript code</title>
 <meta charset="utf-8">

<script>
function myOnLoad(){
 var myButton1 = document.getElementById("Button1");
 myButton1.onclick = Button1Listener;
}

function Button1Listener(){
 var myText1 = document.getElementById("Text1");
 var myInput1 = myText1.value;

 var newItem = document.createElement("li");
 newItem.innerHTML = myInput1;
 var myItems = document.getElementById("myitems");
 myItems.appendChild(newItem);
 
}

window.onload = myOnLoad;

</script> 
 
 
</head>
<body>
<h1>Mobile-Web-App: Javascript</h1>
<p>Add HTML elements using Javascript code</p>

<p>Enter new item</p>
<form>
<input type="text" id="Text1">
<input type="button" id="Button1" value="Add">
</form>
<ul id="myitems">
</ul>

</body>
</html>

Related article:
- jQuery Mobile: Add HTML elements using Javascript code ~ make it mobile look and feel using jQuery Mobile.
- jQuery .appendTo() - add something on HTML at run-time