INTEL XDK TUTORIALS: December 2016

Saturday, 24 December 2016

CORDOVA COMPASS

<!DOCTYPE html>

<html>

<head>

<title>Compass Example</title>

// Wait for device API libraries to load

document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available

function onDeviceReady() {

navigator.compass.getCurrentHeading(onSuccess, onError);

}

// onSuccess: Get the current heading

function onSuccess(heading) {

alert('Heading: ' + heading.magneticHeading);

}

// onError: Failed to get the heading

function onError(compassError) {

alert('Compass Error: ' + compassError.code);

}

</script>

</head>

<body>

<h1>Example</h1>

<p>getCurrentHeading</p>

</body>

</html>

CORDOVA CONNECTION

If we want user must me asked to enable the connection before accessing to app

<!DOCTYPE html>

<html>

<head>

<title>navigator.connection.type Example</title>

// Wait for device API libraries to load

document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available

function onDeviceReady() {

checkConnection();

}

function checkConnection() {

var networkState = navigator.connection.type;

var states = {};

states[Connection.UNKNOWN] = 'Unknown connection';

states[Connection.ETHERNET] = 'Ethernet connection';

states[Connection.WIFI] = 'WiFi connection';

states[Connection.CELL_2G] = 'Cell 2G connection';

states[Connection.CELL_3G] = 'Cell 3G connection';

states[Connection.CELL_4G] = 'Cell 4G connection';

states[Connection.CELL] = 'Cell generic connection';

states[Connection.NONE] = 'No network connection';

alert('Connection type: ' + states[networkState]);

}

</script>

</head>

<body>

<p>A dialog box will report the network state.</p>

</body>

</html>

CORDOVA CONTACTS

<!DOCTYPE html>

<html>

<head>

<title>Contact Example</title>

// Wait for device API libraries to load

document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available

function onDeviceReady() {

var myContact = navigator.contacts.create({"displayName": "Test User"});

myContact.note = "This contact has a note.";

console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);

}

</script>

</head>

<body>

<h1>Example</h1>

<p>Create Contact</p>

</body>

</html>

APACHE CORDOVA EVENTS

use events plugin and then you use the below code

for example if we pressed back button

!DOCTYPE html>

<html>

<head>

<title>Back Button Example</title>

// Wait for device API libraries to load

function onLoad() {

document.addEventListener("deviceready", onDeviceReady, false);

}

// device APIs are available

function onDeviceReady() {

// Register the event listener

document.addEventListener("backbutton", onBackKeyDown, false);

}

// Handle the back button

function onBackKeyDown() {

alert("back button pressed!");

}

</script>

</head>

</body>

</html>

CORDOVA PLUGIN FILES

EXAMPLE FOR FILES

<!DOCTYPE html>

<html>

<head>

<title>FileWriter Example</title>

// Wait for device API libraries to load

document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available

function onDeviceReady() {

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

}

function gotFS(fileSystem) {

fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);

}

function gotFileEntry(fileEntry) {

fileEntry.createWriter(gotFileWriter, fail);

}

function gotFileWriter(writer) {

writer.onwriteend = function(evt) {

console.log("contents of file now 'some sample text'");

writer.truncate(11);

writer.onwriteend = function(evt) {

console.log("contents of file now 'some sample'");

writer.seek(4);

writer.write(" different text");

writer.onwriteend = function(evt){

console.log("contents of file now 'some different text'");

}

};

writer.write("some sample text");

}

function fail(error) {

console.log(error.code);

}

</script>

</head>

<body>

<h1>Example</h1>

<p>Write File</p>

</body>

</html>

Wednesday, 21 December 2016

how to write a code for different pages ?

to write a code .

If you want to write a code separately in different pages then you have to create different pages for HTML,CSS,JavaScript etc.

So you can create different pages and save them all with its own extensions like for HTML (index.html) for CSS(style.css) and for Javascript (script.js).

You can also use it in a single HTML file by using tags. You will write code for styling with style tags. Similarly you can write code within for javascript within script tags and overall save the file with index.html.

Please make sure before switching to emulator you have to save all you code instead to using save option because save all can save all other documents where you have edited.

to write code in html5 for app development makes you easy way to convert your websites to app easily today and intel xdk provides you to write once and then a single coded app can be used for android,IOS,windows,crosswalk android etc.
A typical intel XDK project, mainly corresponds to an app of a base of,

HTML5
CSS
IMAGES
JAVASCRIPT

This is your first project in xdk.
then you have to START A NEW PROJECT or you can import an existing intel xdk project in to the xdk.

Tuesday, 13 December 2016

HOW TO DRAG A BUTTON ?

Now we will drag button from control section and then on the right hand side we can change the properties of button as per our requirement.in the label section of properties we can edit the name of button in the right hand side of the properties of that button that we drag into screen of the app in the designing section .then on the right hand side we have a CSS properties of this button which we can set as per our requirements.We can also add the properties in the different section and then we can set its values like we do usually do in CSS pages for the development of websites.

In case we are not using design section and we have another option code so we can switch to code section cy clicking on the code button on the left side of DESIGN button and then we can then create first create a button in index.html file and then we can dsign the app by css properties by creating the style.css file and then we can do whatever we want to do with that button.

<div class="view">

02        <header id="headDriverLogin">

03            <!-- <I want to add button here like: back or menu button> -->

04            <h1> Driver Login </h1>

05        </header>

06 

07        <div class="pages" data-footer="none">

08            <div class="panel" id="driverloginpage">

09 

10                <form id="frmdriverlogin">

11                    <input type="text" name="driver_name" id="driverloginname" placeholder="Username">

12                    <input type="password" name="driver_pass" id="driverloginpass" placeholder="Password">

13                </form>

14                 

15                <div>

16                    <input type="checkbox" id="driverremember" name="driverremember">

17                    <label for="driverremember" style="font-size: 14px;color: deepskyblue;font-weight: bold;"> Remember Me </label>

18                    <br style="clear:both" />

19                </div>

20                 

21                <br />

22 

23                <a class="button block" href="#" id="btndriverlogin"> LOGIN </a>

24            </div>

25        </div>

26         

27        <footer>

28            <a href="#mainpage" class="icon home"> Index </a>

29        </footer>

30    </div>