Mobile-Web-App

Thursday, January 12, 2012

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

Javascript: Read HTML element's property

Example of Button event listener, with reading property of HTML element.

<!doctype html>
<head>
 <title>Mobile-Web-App: Javascript button event and read element property</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;
 alert("Hello! " + myInput1);
}

window.onload = myOnLoad;

</script> 
 
 
</head>
<body>
<h1>Mobile-Web-App: Javascript</h1>
<p>Handle button event and read element property</p>

<p>Hello! Who are you?</p>
<form>
<input type="text" id="Text1">
<input type="button" id="Button1" value="Hello">
</form>


</body>
</html>

Javascript: Handle button onclick event

Example to handle button onclick event:

<!doctype html>
<head>
 <title>Mobile-Web-App: Javascript Button Event</title>
 <meta charset="utf-8">

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

function Button1Listener(){
 alert("Hello! Thanks for click:)")
}

window.onload = myOnLoad;

</script> 
 
 
</head>
<body>
<h1>Mobile-Web-App: Javascript</h1>
<p>Button Event</p>

<form>
<input type="button" id="Button1" value="Click Me">
</form>


</body>
</html>

next:
- Javascript: Read HTML element's property