Custom font in Phonegap Android or html5

http://stackoverflow.com/questions/12454681/custom-fonts-in-android-phonegap

http://www.fontspace.com/category/contemporary  <== free font download link

Below works like charm for custom font with jQueryMobile and Phonegap:
Added in html file head section:
Working Example:
===============

phonegap1.4= eclipse= android= windows= mx p410 tab== working

In a html file add this style code and download and store custom font in asset/www dir.
Call this otf or tif file for

 <style type="text/css" media="screen">

 @font-face {
                font-family: 'tombats7';
                src: url('fonts/tombats7.ttf');
            }

 @font-face {
    font-family: 'MyFont';
 src: url('fonts/ThirstyScriptExtraBoldDemo.otf');

}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,h,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
                font-family: 'MyFont';
        }
      
      
</style>
 body { font-family: 'MyFont';} alone does not display custom font.

method:1
<style>

@font-face {
font-family: "Lato-Reg";
src: url("fonts/Lato-Reg.ttf") format("opentype");  
    /* Make sure you defined the correct path, which is related to
        the location of your file `my_css.css` */
}

 body *{
margin: 0;
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

font-family: "Lato-Lig" !important;
font-weight: normal !important;

 }
</style>


Method:2

@font-face
{
font-family: CustomArial;
src: url('arial.ttf');
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-family: CustomArial;
}

if you are using jquery mobile, you have to override the font like,

.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
    font-family: CustomArial !important;
}

you have to override the font- family in your css for whatever jquery mobile class having font-family:Helvetica, Arial, sans-serif; to
font-family:CustomArial !important;

Method:3



I made it work after doing the following steps:

-Put your CSS in a file, for example my_css.css:

@font-face {
    font-family: "customfont";
    src: url("./fonts/arial.ttf") format("opentype");  
        /* Make sure you defined the correct path, which is related to
            the location of your file `my_css.css` */
    }
    body {
        font-family: "customfont";
        font-size:30px;
    }

-Reference your CSS file my_css.css in your HTML:

<link rel="stylesheet" href="./path_to_your_css/my_css.css" />

Pay attention to the definition of your paths!

For example, let's say you have the following directory structure:

    www

        your_html.html

        css
            my_css.css

        fonts
            arial.ttf

Then, you would have:

@font-face {
    font-family: "customfont";
    src: url("../fonts/arial.ttf") format("opentype");  
        /* Make sure you defined the correct path, which is related to
            the location of your file `my_css.css` */
    }
    body {
        font-family: "customfont";
        font-size:30px;
    }

and:

<link rel="stylesheet" href="./css/my_css.css" />

Note: if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).

So, you may try to impose your style by using the style attribute.

Eg:

<body>
    <h>Custom Fonts</h>
    <div style="font-family: 'customfont';">This is for sample</div>
</body>

One drawback is that it seems that the style cannot be applyied on body...

So, if you want to apply the font to the whole page, you may try something like this:

<body>

    <!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE -->
    <div style="font-family: 'customfont';">

        <h>Custom Fonts</h>
        <div >This is for sample</div>

    </div>

</body>

Hope this will work for you too. Let me know about your results.

PhoneJS HTML5 JavaScript framework for smartphones and tablets [[ Phonegap]]

Create mobile apps -HTML5 and JavaScript for different screens & platforms

http://phonejs.devexpress.com/   Home Page and Buy


PhoneJS contains everything you'll need to create native client applications using HTML5 and JavaScript with a single codebase and deliver solutions that target today's most popular smartphones and tablet devices.
With a touch-optimized user experience, natively rendered widgets, straightforward page navigation, view management, and data access layers, PhoneJS is a single page application (SPA) framework for your next iOS, Android and WindowsPhone application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap).

Set Up Your Environment

Learn how to prepare your environment to start working with PhoneJS.

Download PhoneJS

You can download PhoneJS now - using the Download link in the topmost menu.
PhoneJS is distributed as a ZIP file. Unzip the downloaded archive to a directory where you wish to store PhoneJS files. Note that this is not a temporary folder - no further installation or unpacking is required. However, if you need to change PhoneJS files to a different directory, simply move them to the new location.
The PhoneJS folder contains the following subfolders.

• Application Template
  A template for PhoneJS application projects. Use this template to start developing an PhoneJS application quickly.
• Demos
  A source code for all the demos that are presented on the site.
• Eula
  Familiarize yourself with the End-User License Agreement that comes with PhoneJS, as well as with the licenses of the Globalize, jQuery and Knockout libraries that are used in PhoneJS applications.
• Lib
  The libraries that must be included into PhoneJS applications.
  - css - Style sheets for styling PhoneJS applications for different platforms.
  - js - The PhoneJS library together with the Globalize, jQuery and Knockout libraries that are used in PhoneJS applications as well.
  - layouts - Predefined layout templates for application views.

NOTE: When adding a link to the PhoneJS library, set it last - after links to Globalize, jQuery and Knockout libraries.

Prerequisites

To develop PhoneJS applications, use any code editor you are used to.
PhoneJS is a framework that is based on JavaScript, HTML5 and CSS3. When developing PhoneJS applications, you will need to use only JavaScript, HTML and CSS. In addition, you will need basic knowledge of Knockout and jQuery.
Optionally, you can use TypeScript when developing PhoneJS applications. You can download a .ts file with TypeScript definitions from GitHub. Copy this file to your project. In your TypeScript file, add a reference to this file and the .ts files that include TypeScript definitions for the jQuery, Knockout and globalize libraries.

/// <reference path="TypeScript/dx.phonejs.d.ts" />

Add Libraries

When developing an application using PhoneJS, the following libraries must be referenced.

• jQuery version 2.0.3
• Knockout version 3.0.0
• globalize
• PhoneJS

NOTE: Reference the libraries in the same order as they are listed above.
There are three possible ways to provide links to the necessary files.

Use Manually Installed Libraries

Place the contents of the Lib folder to the folder with your application. In this instance, the links you have to add to your application will be the following.

HTML

<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/knockout-3.0.0.js"></script>
<script src="js/globalize.min.js"></script>
<script src="js/dx.phonejs.js"></script>

Use a CDN

It is not always necessary to deliver libraries with a published application. There are times when it is best to use a link to these libraries from a Content Delivery Network (CDN). This can improve the performance of your applications.
The DevExpress CDN hosts the PhoneJS library and enables you to easily add it to your applications. A link to this library should be added in the following manner.

HTML

<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/13.2.9/js/dx.phonejs.js"></script>

In addition, you can access all the resources that come with PhoneJS:

HTML

<link rel="text/css" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.ios.default.css" />
<!--PhoneJS culture dictionaries-->
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/13.2.9/js/localization/dx.phonejs.de.js"></script>
<!--Predefined layouts for views-->
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/13.2.9/layouts/Navbar/NavbarLayout.js"></script>
<link rel="text/css" href="http://cdn3.devexpress.com/jslib/13.2.9/layouts/Navbar/NavbarLayout.css"/>

To use the jQuery, Knockout and globalize libraries in the same manner as the PhoneJS library, use the Microsoft Ajax CDN or Google CDN.

HTML

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>

To add the globalize library for all cultures, use the globalize.cultures.js file. To add a library for a specific culture, replace {culture-code} with the desired culture code in the globalize.culture.{culture-code}.js file. For instance, you can add Spanish localization using the globalize.culture.es-MX.js file.

HTML

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.culture.es-MX.js"></script>

Run and Debug

To run a PhoneJS application locally, use any web server (Apache HTTP Server, IIS or any other).
As an HTML-JavaScript application, a PhoneJS application is run by a browser. The following desktop browsers are supported.

• Internet Explorer 8+
• Safari 5+
• Firefox Latest Version
• Google Chrome Latest Version
• Opera 12 and the Latest Version

The browsers integrated in the following mobile OS are supported.

• Android 2.3+
• iOS 5+
• Windows Phone 8
• Tizen 2.2

Generally, a PhoneJS application can run on any device whose browser is supported. However, the corresponding style sheets must be applied so that the application looks native on this device. PhoneJS comes with the following predefined themes.

• Android Holo Light and Android Holo Dark
• iOS
• Windows 8 and Windows Phone 8
• Tizen Black and Tizen White
• Generic
  

  Run and Debug

  To run a PhoneJS application locally, use any web server (Apache HTTP Server, IIS or any other).
  As an HTML-JavaScript application, a PhoneJS application is run by a browser. The following desktop browsers are supported.
  
• Internet Explorer 8+
• Safari 5+
• Firefox Latest Version
• Google Chrome Latest Version
• Opera 12 and the Latest Version

The browsers integrated in the following mobile OS are supported.

• Android 2.3+
• iOS 5+
• Windows Phone 8
• Tizen 2.2

Generally, a PhoneJS application can run on any device whose browser is supported. However, the corresponding style sheets must be applied so that the application looks native on this device. PhoneJS comes with the following predefined themes.

• Android Holo Light and Android Holo Dark
• iOS
• Windows 8 and Windows Phone 8
• Tizen Black and Tizen White
• Generic

• To test how your PhoneJS application looks and how it behaves on different devices, use one of the following options.
  
• When your application is running in a browser, choose the required browser using the user agent switcher that is built into the browser.
• In the index.js file of your application project, set the target device using the devExpress.devices.current(deviceName) function before the HtmlApplication object creation. In this instance, the application will run in your browser with the styles corresponding to the device you specified. This approach is helpful when testing URLs that are generated during navigation between views.
• Use third-party device simulators, such as Ripple or PhoneGap Emulator.
• 
  

Deploy

Although PhoneJS applications can just be deployed to a web server, they are also ready to be compiled by Apache Cordova (PhoneGap) into a native package that can then be submitted to app stores. If you follow this route, PhoneGap also gives you libraries to access your device’s built-in functionality such as camera, accelerometer or contact list.

  http://phonejs.devexpress.com/Buy

licence

 

'phonegap' is not recognized as an internal or external command

Command line Execution for Cordova 

The Problem is you need to set environment variable. 

Start -> Control Panel -> System and Security -> System -> Environment variables 

or 

Mycomputer -> Right Click -> properties -> Advance System settings -> Environment 
variables

under User variables for youruser:
Path:     
%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%
\System32\WindowsPowerShell\v1.0\;C:\Users\user1\AppData\Roaming\npm\

I already installed phonegap but son:

I change user variable in SYstem advance.......

REF Links is  

http://stackoverflow.com/questions/20116108/phonegap-is-not-recognized-as-an-internal-or-external-command

Phonegap Sqlite Database storage

Phonegap Sqlite Android Eclipse windows Environment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<!--  <meta name="viewport" content="width=default-width;user-scalable=no" />-->
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>Embedded Sql Example</title>


<script type="text/javascript" charset="utf-8" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>

<script type="text/javascript" charset="utf-8">


var db;
var shortName = 'WebSqlDB';
var version = '1.0';
var displayName = 'WebSqlDB';
var maxSize = 65535;

function errorHandler(transaction, error) {
alert('Error: ' + error.message + ' code: ' + error.code);

}


function successCallBack() {
alert("DEBUGGING: success");

}

function nullHandler(){};

function onBodyLoad(){

alert("DEBUGGING: we are in the onBodyLoad() function");

if (!window.openDatabase) {


alert('Databases are not supported in this browser.');
return;
}


db = openDatabase(shortName, version, displayName,maxSize);


db.transaction(function(tx){


 tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler);


tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)',[],nullHandler,errorHandler); },errorHandler,successCallBack);

}


function ListDBValues() {

if (!window.openDatabase) {
alert('Databases are not supported in this browser.');
return;
}


$('#lbUsers').html('');


db.transaction(function(transaction) {

transaction.executeSql('SELECT * FROM User;', [],function(transaction, result)
{

if (result != null && result.rows != null)
 {

for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item(i);
$('#lbUsers').append('<br>' + row.UserId + '. ' + row.FirstName+ ' ' + row.LastName);
}
}
},errorHandler);
},errorHandler,nullHandler);

return;

}


function AddValueToDB()
 {

if (!window.openDatabase) {
alert('Databases are not supported in this browser.');
return;
}


db.transaction(function(transaction) {
transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler);});


ListDBValues();

return false;

}

</script>
</head>
<body onload="onBodyLoad()">
<h1>WebSQL</h1>
<input id="txFirstName" type="text" placeholder="FirstName">
<input id="txLastName" type="text" placeholder="Last Name">
<input type="button" value="Add record" onClick="AddValueToDB()">
<input type="button" value="Refresh" onClick="ListDBValues()"> <br>
<br>
<span style="font-weight:bold;">Currently stored values:</span>
<span id="lbUsers"></span>
</body>
</html>

Cordova CLI porject import to Eclipse Error in org.apache

New PhoneGap 3.0 The import org.apache.cordova cannot be resolved

http://phonegap.com/blog/2013/12/13/phonegap-release/

build all project containing work space.

http://stackoverflow.com/questions/20703463/phonegap-3-3-eclipse-cordovalib-project-missing-android-properties?lq=1


http://stackoverflow.com/questions/18097370/new-phonegap-3-0-the-import-org-apache-cordova-cannot-be-resolved

Add cordova for all command prefix

create project

add platform

build

emulate android <emulator run>

run android  <run with real device usb>

then

 platform update android

build and run

copy paste to desktop

import and clean workspace

cordova lib project also included

run this will clear all bugs in org.cordova.app


http://docs.phonegap.com/en/3.4.0/guide_cli_index.md.html#The%20Command-Line%20Interface