Mobile Programming Laboratory

Week 7: Widgets (Switch, Slider,

Picker and Dialog)
Name: Mr.Pongsatorn Tammavaragorn
Date: 17 October 2016

ID: 5631301062
Due:

Section: 01

Assignment 1 Coffee Ordering app

Assume that a coffee shop needs an app to let customers order either hot or iced coffee.
Customers can also choose level of sugar from none, less and normal.

If touching ORDER now,

Then try changing to iced coffee without sugar.

And finally iced coffee with normal sugar.

coffee.xml
<Page loaded="pageLoad">
<StackLayout>
<Label id="h1" text="MFU Coffee Shop"/>
<StackLayout orientation="horizontal" >
<Label id="l1" text="lced" width="50%" horizontalAlignment="left"/>
<Switch id="swChoice" width="50%" horizontalAlignment="right"/>
</StackLayout>
<StackLayout orientation="horizontal" >
<Label text="Sugar Level" width="50%" horizontalAlignment="left"/>
<Slider id="sldSpeed" minValue="0" maxValue="2" value="1" width="50%"
horizontalAlignment="right"/>
</StackLayout>
<Button text="ORDER" tap="show"/>
</StackLayout>
</Page>
coffee.css
#h1{
text-align: center;
color: brown;
font-size: 30;
}
Label{
font-size: 22;
margin: 10;
}
button{
margin: 10;
background-color: green;
color: white;
font-size: 20;
}
Switch,Slider{
margin-right: 10;
}
coffee.js
var page;
var sldSpeed,swChoice;
var sugar = ["none", "less", "normal"];

exports.pageLoad = function(args){
page = args.object;
sldSpeed = page.getViewById("sldSpeed");
swChoice = page.getViewById("swChoice");
};
exports.show = function() {
if(swChoice.checked == true){
alert("Your order Ice Coffee "+ sugar[sldSpeed.value]+" sugar");
}else{
alert("Your order Hot Coffee "+ sugar[sldSpeed.value]+" sugar");
}
};

Assignment 2 Extend the previous assignment to let customers choose coffee type. Also show
the corresponding price to the selected coffee.

Clicking ORDER will summarize your choice.

Lets try another choice.

cofee.xml
<Page loaded="pageLoad">
<StackLayout>
<Label id="h1" text="MFU Coffee Shop"/>
<StackLayout orientation="horizontal" >
<Label text="Type" width="50%" horizontalAlignment="left"
verticalAlignment="center"/>
<ListPicker id="lpFruit" width="50%" horizontalAlignment="right"/>
</StackLayout>
<StackLayout orientation="horizontal" >
<Label text="lced (+5)" width="50%" horizontalAlignment="left"/>
<Switch id="swChoice" width="50%" horizontalAlignment="right"/>
</StackLayout>
<StackLayout orientation="horizontal" >
<Label text="Sugar Level (Free)" width="50%" horizontalAlignment="left"/>
<Slider id="sldSpeed" minValue="0" maxValue="2" value="1" width="50%"
horizontalAlignment="right"/>
</StackLayout>
<Button text="ORDER" tap="show"/>
</StackLayout>
</Page>
coffee.css
StackLayout{
background-color: #C86428;

}
#h1{
text-align: center;
color: brown;
font-size: 30;
margin-top: 10;
}
Label{
font-size: 22;
margin: 10;
}
button{
background-color: green;
color: white;
font-size: 30;
margin-top: 50;
}
ListPicker,Switch,Slider{
margin-right: 10;
}
coffee.js
var page;
var sldSpeed,swChoice;
var sugar = ["none", "less", "normal"];
var CoffeeType = ["Latte (30)", "Espresso (25)", "Cappuchino (35)"];
var Coffeename = ["Latte", "Espresso", "Cappuchino"];
var Coffeeprice =["30","25","35"];
exports.pageLoad = function(args){
page = args.object;
sldSpeed = page.getViewById("sldSpeed");
swChoice = page.getViewById("swChoice");
lpFruit = page.getViewById("lpFruit");
lpFruit.items = CoffeeType;
lpFruit.selectedIndex = 1;
};
exports.show = function() {
if(swChoice.checked == true){
alert("Your order Ice "+Coffeename[lpFruit.selectedIndex]+" with "+

sugar[sldSpeed.value]+" sugar "+Coffeeprice[lpFruit.selectedIndex]+" Baht ");

}else{
alert("Your order Hot "+Coffeename[lpFruit.selectedIndex]+" with "+
sugar[sldSpeed.value]+" sugar "+Coffeeprice[lpFruit.selectedIndex]+" Baht ");
}
};

Assignment 3 Modify the previous exercise to let the default date be today. date-picker.xml
<Page loaded="pageLoad">
<StackLayout horizontalAlignment="center">
<DatePicker id="dp" year="" month="" day=""/>
<Button text="SHOW" tap="show"/>
</StackLayout>
</Page>

date-picker.js
var dp;
var currentDate = new Date();
var currentTime = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();

exports.pageLoad = function(args) {
var page = args.object;
dp = page.getViewById("dp");
dp.minDate = new Date(2000, 0, 1);
dp.maxDate = new Date(2020, 11, 31);
dp.year = year;
dp.month = month;
dp.day = day;

}
exports.show = function() {
alert("Date: " + dp.day + "/" + dp.month + "/" + dp.year);
}

Assignment 4 Create an alarm clock app.

When an app starts, it shows the current time.

Assume that we set an alarm for the next one minute.

After pressing SET,

After clicking OK to close the alert dialog,

Later after the setting time (one minute), an alarm dialog appears.

We can choose SNOOZE to temporarily disable the alarm. Assume that the snooze time is 10
seconds.
After pressing SNOOZE and wait for 10 seconds,

This time, suppose that we choose DISMISS, the alarm stops permanently. It returns to the first
screen and show the current time.

alarmclock
.xml
<Page loaded="pageLoad">
<StackLayout horizontalAlignment="center">
<!-- Current device time is auto shown-->
<TimePicker id="tp"/>
<Button id="btt" text="SET" tap="show"/>
</StackLayout>
</Page>
alarmclock.css
Button {
font-size: 22;
}
Button[text="SET"] {

background-color: green;
color: white;
}
Button[text="UNSET"] {
color: white;
}
alarmclock.js
var viewModule = require("ui/core/view");
var dialogs = require("ui/dialogs");
var timer = require("timer");
var tp;
var currentDate;
var Hr ;
var Min ;
var a;
var b;
var c;
var d=0;
var btt;
var ten;
var timeID;
exports.pageLoad = function(args) {
var page = args.object;
tp = viewModule.getViewById(page, "tp");
btt = viewModule.getViewById(page, "btt");
}
exports.show = function() {
if (d==0){
currentDate = new Date();
Hr="";
Min="";
Hr = currentDate.getHours();
Min = currentDate.getMinutes();
if (Hr>tp.hour ){
a=Hr-tp.hour;
a=24-a;
b = tp.minute-Min;

if (b<0){
a=a-1;
b=60-Math.abs(b);
}else if (b==0){
a=a-1
b=59-b;
}else{
}
alert (a + " hour and " + b + " minute to alarm");
d=1;
btt.text="UNSET";
timeID = timer.setInterval(countdown, 1000*60*b+(3600000*a));
btt.backgroundColor ="red";
}else if(Hr==tp.hour && tp.minute<Min){
a=23;
b = Min-tp.minute;
b=59-b;
alert (a + " hour and " + b + " minute to alarm");
d=1;
btt.text="UNSET";
timeID = timer.setInterval(countdown, 1000*60*b+(3600000*a));
btt.backgroundColor ="red";
}else if(Hr==tp.hour && tp.minute==Min){
} else{
a=tp.hour-Hr;
b = tp.minute-Min;
if (b<0){
a=a-1;
b=60-Math.abs(b);;
}
alert (a + " hour and " + b + " minute to alarm");
d=1;
btt.text="UNSET";
timeID = timer.setInterval(countdown, 1000*60*b+(3600000*a));
btt.backgroundColor ="red";
}
}else{
timer.clearInterval(ten);
timer.clearInterval(timeID);

d=0;
btt.text="SET";
btt.backgroundColor ="green";
}
function countdown() {
var optionConfirm = {
title: "Alarm",
message: "Wake up!",
okButtonText: "SZOONE",
cancelButtonText: "DISMISS",
};
dialogs.confirm(optionConfirm).then(function(result) {
//result could be true/false/undefined
//console.log(result);
if(result==true) {
ten = timer.setInterval(countdown,10000);
} else if(result==false) {
timer.clearInterval(ten);
timer.clearInterval(timeID);
d=0;
btt.text="SET";
btt.backgroundColor ="green";
} });
}
}