110 XDK: Create ngCordova Calendar Test Project
This tutorial demonstrates the steps to create a ngCordova Calendar Test Project based onBlank Cordova Starter App.
This tutorial uses Intel XDK version 3759.
1) Create a new project
Select Samples and Demos.
Select General.
Select Blank Cordova Starter App.
Click Continue.
2) Specify Project Name and Location
Click Create.
Make sure you have an Internet connection.
Optionally, you may choose not to optimize with crosswalk (resulting with smaller package file size but having a risk of not compatible with various versions of android)
3) Add Calendar Plug In
We are going to add cordova-plugin-calendar located at https://www.npmjs.com/package/cordova-plugin-calendar
This plugin allows you to manipulate the native calendar.
Go to Project Page and find the Plugin Management.
Click Add Plugins to this project.
Select Third-Party Plugins
Select Plugin Source: npm
Set Plugin ID = cordova-plugin-calendar
Click Add Plugin
Wait for the fetching process.
Fetching successful.
4) Add Calendar.js
Add the Calendar.js file to the folder js.
5) Adding ngCordova libraries.
To use ngCordova we need to add two files
6) Modify app.js
Replace all codes in app.js with the following codes.
var app = angular.module('MyApp',['ngCordova']);
app.controller('MyCtrl', function($scope, $cordovaCalendar) {
$scope.addMyEvent = function(){
$scope.info = "processing. ";
document.addEventListener("deviceready", function () {
// beware: month 0 = january, 11 = december
$cordovaCalendar.createEvent({
title: 'notarazi',
location: 'Malaysia',
notes: 'tutorial',
startDate: new Date(2016,1,2,18,30,0,0,0),
endDate: new Date(2016,1,3,19,30,0,0,0)
}).then(function (result) {
// success
$scope.info += "\nsuccess. ";
}, function (err) {
// error
$scope.info += "\nerror. ";
});
}, false);
}
//$scope.addMyEvent();
});
|
Notice that this script contains AngularJS codes and Cordova code.
7) Modify index.html
Replace all codes in index.html with the following codes.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw; min-zoom: 100%; zoom: 100%;}
@viewport {width: 100vw; min-zoom: 100% zoom: 100%;}
@-ms-viewport { user-zoom: fixed; min-zoom: 100%;}
@viewport { user-zoom: fixed; min-zoom: 100%;}
</style>
<link rel="stylesheet" href="css/app.css">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/angular.min.js"></script>
<script src="js/ng-cordova.js"></script>
<script src="js/app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="text/javascript" src="js/Calendar.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<div id="mainpage">
<p style="white-space: pre;">{{info}}</p>
<p ng-bind-html="info"></p>
<button ng-click="addMyEvent()">ADD CALENDAR EVENT</button>
</div>
</body>
</html>
|
8) Simulate
9) Build
If you have not configured the Build Requirement, read the steps in http://xdk-steps.blogspot.my/2016/12/104-xdk-how-to-build-cordova-for-android.html .
Otherwise, select the target platform and click Build.
Wait for the process to complete.
10) Deploy
The app should be able to add an event to your calendar.
No comments:
Post a Comment