PhoneGap Tutorial: 2012-12-23

Friday, 28 December 2012

Html5 PhoneGap app - how to play video example and tutorial




Title : Html5 PhoneGap app - how to play video example and tutorial



Hi , i am going to explain how to use html5 new video tag in phonegap particularly on android device.



here is the screen shots of playing a video in android mobile from a url.













Here is the code for the app.



create html file with name index.html with the following code






<!

DOCTYPE HTML>

<
html>




<head>




<meta name="viewport" content="width=320; user-scalable=yes" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>PhoneGap</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>

<script type="text/javascript" charset="utf-8" src="video.js"></script>


<
script type="text/javascript">






function

 init(){ 


document.addEventListener(
"deviceready", console.log('ready'), true);


}





function

 playVideo(vidUrl) {


window.plugins.videoPlayer.play(vidUrl);

}



</

script> 





</head>




<body onload="init();">




<a href="#" onclick="playVideo('http://www.youtube.com/embed/9HDeEbJyNK8')">Play HTTP</a><p/>

<a href="#" onclick="playVideo('http://broken-links.com/tests/media/BigBuck.m4v')">Play File</a><p/>





</body></

html>

Next add cordova video plugin for your app for adding plugin see the following steps.



for adding videoplayer plugin visit the following link Cordova VideoPlayer Plugin



VideoPlayer plugin for Phonegap

The video player allows you to display videos from your PhoneGap application.

This command fires an Intent to have your devices video player show the video.


Adding the Plugin to your project
Using this plugin requires Android PhoneGap.


To install the plugin, move www/video to your project's www folder and include a reference to it in your html file after phonegap.js.

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="video.js"></script>
Create a directory within your project called "src/com/phonegap/plugins/video" and move VideoPlayer.java into it.
In your res/xml/plugins.xml file add the following line:

<plugin name="VideoPlayer" value="com.phonegap.plugins.video.VideoPlayer"/>


Using the plugin
The plugin creates the object window.plugins.videoPlayer. To use, call the play() method:

  /**
    * Display an intent to play the video.
    *
    * @param url           The url to play
    */
  play(url)

Sample use:

window.plugins.videoPlayer.play("http://path.to.my/video.mp4");
window.plugins.videoPlayer.play("file:///path/to/my/video.mp4");
window.plugins.videoPlayer.play(file:///android_asset/www/path/to/my/video.mp4);

Html5 local storage example

Title : Html5 local storage example - a small tutorial.

User can enter the contact details , store the contact details in a table , can modify them, can retrive them and can remove them when he wanted.
Html5 comes with a new feature local storage that can add an item with key value pair and can retrive,modify,delete them when he wants.
Here is the code for the above example.


<!
doctype html>

html>

head>

<title>Contacts</title>

<style>

a { color: #0068D2; cursor: pointer; }

a:link, a:visited { text-decoration: none; color: #0068D2; }

a:hover, a:active { text-decoration: underline; color: #0068D2; }

body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

#contacts-table { border-collapse: collapse; }

#contacts-table, #contacts-table th, #contacts-table td { padding: 8px 16px; text-align: left; border: 0px solid #B9BABE; }

#contacts-table th { font-weight: bold; font-size: 14px; color: #29344B; }

#contacts-table td { color: #000; }

#contacts-table tr:nth-child(2n) { background: #E8EDFF; }

#contacts-form { padding: 10px; }

.text input, .button input { padding: 5px; margin: 0; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

#contacts-form .item { margin: 3px 0; }

#contacts-form label, #contacts-form .field { display: inline-block; color: #0C0B07; }

#contacts-form label { width: 110px; font-weight: bold; text-align: right; color: #666; }

#contacts-form .text input { width: 176px; padding: 3px; }

#contacts-form .button { display: inline-block; }

#contacts-form .button-wrapper { padding-left: 113px; }

.button input { padding: 4px 8px; color: #343434; background-color: #fdfdfd; background: -moz-linear-gradient(#fdfdfd, #e1e1e1); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#e1e1e1)); }

.button-default input { font-weight: bold; color: #fff; background-color: #7ca0c7; background: -moz-linear-gradient(#acc6e1, #7ca0c7); background: -webkit-gradient(linear, 0 0, 0 100%, from(#acc6e1), to(#7ca0c7)); border-color: #5b80b2; }

</style>

head>

body>

<h1>Contacts</h1>

<th>First name</th>

<th>Email</th>

<th>Actions</th>

</tr>

</table>

<label>First name:</label>

</div>

</div>

<label>Email:</label>

</div>

</div>

</div>

</form>

var Contacts = {

index: window.localStorage.getItem(

"Contacts:index"),

$table: document.getElementById(

"contacts-table"),

$form: document.getElementById(

"contacts-form"),

$button_save: document.getElementById(

"contacts-op-save"),

$button_discard: document.getElementById(

"contacts-op-discard"),

init:

function() {

// initialize storage index

if (!Contacts.index) {

window.localStorage.setItem(

"Contacts:index", Contacts.index = 1);

}

// initialize form

Contacts.$form.reset();

Contacts.$button_discard.addEventListener(

"click", function(event) {

Contacts.$form.reset();

Contacts.$form.id_entry.value = 0;

true);

Contacts.$form.addEventListener(

"submit", function(event) {

var entry = {

id: parseInt(

this.id_entry.value),

first_name:

this.first_name.value,

last_name:

this.last_name.value,

email:

this.email.value

};

if (entry.id == 0) { // add

Contacts.storeAdd(entry);

Contacts.tableAdd(entry);

}

else { // edit

Contacts.storeEdit(entry);

Contacts.tableEdit(entry);

}

this.reset();

this.id_entry.value = 0;

event.preventDefault();

true);

// initialize table

if (window.localStorage.length - 1) {

var contacts_list = [], i, key;

for (i = 0; i < window.localStorage.length; i++) {

key = window.localStorage.key(i);

if (/Contacts:\d+/.test(key)) {

contacts_list.push(JSON.parse(window.localStorage.getItem(key)));

}

if (contacts_list.length) {

contacts_list

.sort(

function(a, b) {

return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);

})

.forEach(Contacts.tableAdd);

}

Contacts.$table.addEventListener(

"click", function(event) {

var op = event.target.getAttribute("data-op");

if (/edit|remove/.test(op)) {

var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));

if (op == "edit") {

Contacts.$form.first_name.value = entry.first_name;

Contacts.$form.last_name.value = entry.last_name;

Contacts.$form.email.value = entry.email;

Contacts.$form.id_entry.value = entry.id;

}

else if (op == "remove") {

if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {

Contacts.storeRemove(entry);

Contacts.tableRemove(entry);

}

event.preventDefault();

}

true);

storeAdd:

function(entry) {

entry.id = Contacts.index;

window.localStorage.setItem(

"Contacts:index", ++Contacts.index);

window.localStorage.setItem(

"Contacts:"+ entry.id, JSON.stringify(entry));

storeEdit:

function(entry) {

window.localStorage.setItem(

"Contacts:"+ entry.id, JSON.stringify(entry));

storeRemove:

function(entry) {

window.localStorage.removeItem(

"Contacts:"+ entry.id);

tableAdd:

function(entry) {

var $tr = document.createElement("tr"), $td, key;

for (key in entry) {

if (entry.hasOwnProperty(key)) {

$td = document.createElement(

"td");

$td.appendChild(document.createTextNode(entry[key]));

$tr.appendChild($td);

}

$td = document.createElement(

"td");

$td.innerHTML =

'<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';

$tr.appendChild($td);

$tr.setAttribute(

"id", "entry-"+ entry.id);

Contacts.$table.appendChild($tr);

tableEdit:

function(entry) {

var $tr = document.getElementById("entry-"+ entry.id), $td, key;

$tr.innerHTML =

"";

for (key in entry) {

if (entry.hasOwnProperty(key)) {

$td = document.createElement(

"td");

$td.appendChild(document.createTextNode(entry[key]));

$tr.appendChild($td);

}

$td = document.createElement(

"td");

$td.innerHTML =

'<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';

$tr.appendChild($td);

tableRemove:

function(entry) {

Contacts.$table.removeChild(document.getElementById(

"entry-"+ entry.id));

}

};

Contacts.init();

</script>

body></
html>
I willl explain the line by line code with in this week so, please follow this blog.

Wednesday, 26 December 2012

HTML5 Tutorial

HTML5 Tutorial

Hi every body, I am going to explain what HTML5 is,what is it's features,its advantages and it's disadvantages as well as some demo's tutorial with code.

HTML5 is the latest evolution of HTML.It is new version of html comes with new html elements,attributes and behaviors.and it is a larger set of technologies that allows to develop powerfull web applications as well as mobile apps.this set is some times called it as HTML5 and friends and shorten to HTML5.Html5 is specified to develop or designed to open to all developers(means development code is visible to all people).HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

Where this HTML5 started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public

This tutorial links to different pages which consists of above features with demo's code explained clearly.

Semantics : Describes mostly how you place your content(mark up your content).
Connectivity : Allowing you to connect with different servers and exchange data.
OffLine and Storage : Allowing webpages to store data locally(client side) and operate offline more efficiently.
Multimedia : How to use Audio and Video new Elemnets.
2D/3D Graphics & Effects : Explains how to create 2d and 3d graphics in your applications.
Performance & Integration : Explains how HTML5 provides speed optimization and better usage of computer hardware.
Device Access : Explains How to use or access different input and output resourses of a device.
Style : Explains authors or developers can write most sophisticated articles and how to increase the appearence by styling them.