Assignment

Mobile Programming Laboratory

Week 4: Layouts
Name: Mr.Pongsatorn
Date:

ID: 5631301062
Due:

Section: 01

Objective

To experiment with different layouts

To design app user interface based on layouts References

https://docs.nativescript.org/ui/layouts
https://docs.nativescript.org/ui/layout-containers
http://www.w3schools.com/css/default.asp

Layouts are containers necessary for placing widgets in the desired places and orders over an
apps page. We can think of a layout as a transparent drawing paper placing on a canvas.
Page
Layout

Widget

Widget

NativeScript provides 5 different types of layout as follows.

Layout Name
Layout properties
Child properties
(widgets)
StackLayout
orientation
horizontalAlignment
vertical
left, center,
horizontal
right, stretch
verticalAlignm
ent
top, center,
bottom, stretch

Details
For placing widgets in
order either in vertical
(default) or horizontal
direction. All widgets
will be compressed to fit
in one row or one
column.

Assignment
WrapLayout

orientation
horizontal
vertical itemWidth
itemHeight

DockLayout

stretchLastChild
true
false

GridLayout

rows, columns
auto
*
absolute pixel
none

AbsoluteLayout

none

dock

left
top
right
bottom
row
col
rowSpan
colSpan
left
top

Similar to StackLayout
except when widgets fill
in the row height or
column width, another
widget will be placed in
the next row or column.
For ordering widgets in 5
main positions: left top
right bottom and the rest
area of the screen.
For putting widgets in a
table-like structure.

Defining absolute
position of a widget via
top left coordinate.

Exercise 1 Vertical StackLayout

stack
.xml
<Page>
<StackLayout>
<Label text="Label 1" backgroundColor="red"/>
<Label text="Label 2" backgroundColor="green"/>
<Label text="Label 3" backgroundColor="blue"/>
<Label text="Label 4" backgroundColor="yellow"/>
</StackLayout>
</Page>

Assignment

stack
.xml
<Page>
<StackLayout>
<Label text="Label 1" horizontalAlignment="left" backgroundColor="red"/>
<Label text="Label 2" horizontalAlignment="center"
backgroundColor="green"/>
<Label text="Label 3" horizontalAlignment="right"
backgroundColor="blue"/>
<Label text="Label 4" horizontalAlignment="stretch"
backgroundColor="yellow"/>
</StackLayout>
</Page>

Exercise 2 Horizontal StackLayout

Assignment

stack
.xml
<Page>
<StackLayout orientation="horizontal">
<Label text="Label 1" backgroundColor="red"/>
<Label text="Label 2" backgroundColor="green"/>
<Label text="Label 3" backgroundColor="blue"/>
<Label text="Label 4" backgroundColor="yellow"/>
</StackLayout>
</Page>

Assignment
stack.xml
<Page>
<StackLayout orientation="horizontal">
<Label text="Label 1" backgroundColor="red" width="25%"/>
<Label text="Label 2" backgroundColor="green" width="25%"/>
<Label text="Label 3" backgroundColor="blue" width="25%"/>
<Label text="Label 4" backgroundColor="yellow" width="25%"/>
</StackLayout>
</Page>

stack
.xml
<Page>
<StackLayout orientation="horizontal">
<Label text="Label 1" verticalAlignment="top" backgroundColor="red"/>
<Label text="Label 2" verticalAlignment="center"
backgroundColor="green"/>
<Label text="Label 3" verticalAlignment="bottom"
backgroundColor="blue"/>
<Label text="Label 4" verticalAlignment="stretch"
backgroundColor="yellow"/>
</StackLayout> </Page>

Exercise 3 WrapLayout

Assignment

wrap
.xml
<Page>
<WrapLayout>
<Label text="Label 1" backgroundColor="red" width="50%"/>
<Label text="Label 2" backgroundColor="green" width="50%"/>
<Label text="Label 3" backgroundColor="blue" width="50%"/>
<Label text="Label 4" backgroundColor="yellow" width="50%"/>
</WrapLayout> </Page>

wrap.xml
<Page>

Assignment
<WrapLayout orientation="vertical">
<Label text="Label 1" backgroundColor="red" height="50%"/>
<Label text="Label 2" backgroundColor="green" height="50%"/>
<Label text="Label 3" backgroundColor="blue" height="50%"/>
<Label text="Label 4" backgroundColor="yellow" height="50%"/>
</WrapLayout>
</Page>

Assignment
Exercise 4 DockLayout

dock.xml
<Page>
<DockLayout>
<Label text="Label 1" dock="top" backgroundColor="red" style.color="white"/>
<Label text="Label 2" dock="bottom" backgroundColor="green"
style.color="white"/>
<Label text="Label 3" dock="left" backgroundColor="blue"
style.color="white"/>
<Label text="Label 4" dock="right" backgroundColor="magenta"
style.color="white"/>
<Label text="Label 5" backgroundColor="gray" style.color="white"/>
</DockLayout>
</Page>

We can place all widgets in one direction of the DockLayout. This will result in the similar
output of StackLayout.

Assignment

dock.xml
<Page>
<DockLayout>
<Label text="Label 1" dock="left" backgroundColor="red" style.color="white"/>
<Label text="Label 2" dock="left" backgroundColor="green"
style.color="white"/>
<Label text="Label 3" dock="left" backgroundColor="blue"
style.color="white"/>
<Label text="Label 4" dock="left" backgroundColor="magenta"
style.color="white"/>
<Label text="Label 5" backgroundColor="brown" style.color="white"/>
</DockLayout>
</Page>

Exercise 5 GridLayout

Assignment

grid.xml
<Page>
<GridLayout rows="auto,auto" columns="auto,auto,*">
<Label text="Label 1" row="0" col="0" backgroundColor="red"
style.color="white"/>
<Label text="Label 2" row="0" col="1" backgroundColor="green"
style.color="white"/>
<Label text="Label 3" row="0" col="2" backgroundColor="blue"
style.color="white"/>
<Label text="Label 4" row="1" col="0" backgroundColor="magenta"
style.color="white"/>
<Label text="Label 5" row="1" col="1" backgroundColor="brown"
style.color="white"/>
</GridLayout>
</Page>

Assignment

grid.xml
<Page>
<GridLayout rows="auto,auto,*" columns="auto,auto,*">
<Label text="Label
1" row="0" col="0" backgroundColor="red" style.color="white"/>
<Label text="Label 2" row="0" col="1" backgroundColor="green"
style.color="white"/>
<Label text="Label 3" row="0" col="2" rowSpan="2"
backgroundColor="blue" style.color="white"/>
<Label text="Label 4" row="1" col="0" colSpan="2" backgroundColor="magenta"
style.color="white"/>
<Label text="Label 5" row="2" col="0" colSpan="3"
backgroundColor="brown" style.color="white"/>
</GridLayout>
</Page>

Exercise 6 AbsoluteLayout

Assignment
If you want to place widgets at specific location on apps page or you want to overlap one widget
with another, AbsoluteLayout is proper. Note that changing constraints (margin, padding, size
etc.) of this layout will not affect its widgets.
The reference of AbsoluteLayout is measured from top-left corner (0,0).
left
top
Widget
AbsoluteLayout

absolute.xml
<Page>
<AbsoluteLayout>
<Label left="10" top="10" text="10,10" width="80" height="80"
backgroundColor="orange"/>
<Label left="100" top="10" text="100,10" width="80" height="80"
backgroundColor="lime"/>
<Label left="10" top="100" text="10,100" width="100%" height="80"
backgroundColor="yellow"/>
<Label left="100" top="110" text="100,110" width="60" height="60"
backgroundColor="pink"/>
</AbsoluteLayout>
</Page>

1Design app UI using the suitable layout to get the

result as shown.

Assignment

Note that to add an image we can use a widget <Image />. The example below needs an image
phone.png in the projects subfolder namely image.
<Image src="~/image/phone.png"/>

layout.xml
<Page loaded="pageLoad">
<StackLayout>
<TextField hint="Phone number" id="pnum"/>
<GridLayout rows="*, *, *, *,*" columns="*,*,*">
<button text="1" row="0" col="0" tap="one"/>
<Button text="2" row="0" col="1" tap="two" />
<Button text="3" row="0" col="2" tap="tree" />
<Button text="4" row="1" col="0" tap="four" />
<Button text="5" row="1" col="1" tap="five" />
<Button text="6" row="1" col="2" tap="six" />
<Button text="7" row="2" col="0" tap="seven" />
<Button text="8" row="2" col="1" tap="eighth" />
<Button text="9" row="2" col="2" tap="nine" />
<Button text="*" row="3" col="0" tap="dok" />
<Button text="0" row="3" col="1" tap="zero" />
<Button text="#" row="3" col="2" tap="shap" />

Assignment

<Button id="c" text="CLEAR" row="4" col="0" tap="clear" />

<Image src="~/image/phone.ico" row="4" col="1" tap="call"/>
<Button id="d" text="DEL" row="4" col="2" tap="del" />
</GridLayout>
</StackLayout>
</Page>

layout.css
button {
font-size: 24; horizontal-align: center;
background-color: rgb(255, 255, 255);
padding-left: 57;
padding-right: 57;
}
Image{
horizontal-align: center;
vertical-align: middle;
}
TextField{
font-size: 35;
}
#c{
padding-left: 25;
padding-right: 25;
}
#d{
padding-left: 42;
padding-right: 42;
}

2.Complete the design of the page below.

Assignment

layout.xml
<Page>
<DockLayout>
<GridLayout rows="auto" columns="*,*" dock="bottom">
<button id="d" text="DELETE" row="0" col="0" />
<Button id="a" text="ADD" row="0" col="1" />
</GridLayout>
<StackLayout>
<Label
<Label
<Label
<Label

class="head" text="A" />

text="Adam" />
text="Alice" />
text="Anna" />

<Label class="head" text="B" />

<Label text="Batman" />
<Label text="Bobby" />
<Label class="head" text="C" />

Assignment
<Label text="Comscience" />
</StackLayout>
</DockLayout>
</Page>

layout.css
button {
font-size: 20; horizontal-align: center;
background-color: rgb(255, 255, 255);
color: white;
}
label{
margin: 5;
padding-left:5;
color: gray;
}
#d{
padding-left: 60;
padding-right: 60;
background-color: red;
}
#a{
padding-left: 75;
padding-right: 75;
background-color: green;
}
.head{
font-size: 18;
background-color: lightgoldenrodyellow;
}

2Design of the page below.

Assignment

layout.xml
<Page>
<DockLayout>
<GridLayout rows="auto" columns="*,*" dock="bottom">
<button id="s" text="START" row="0" col="0" />
<Button id="r" text="RESET" row="0" col="1" />
</GridLayout>
<StackLayout dock="top">
<Label text="Timer" horizontalAlignment="center"/>
</StackLayout>
<StackLayout orientation="horizontal" horizontalAlignment="center">
<Label id="time" text="00:00:00" verticalAlignment="center"
horizontalAlignment="center"/>
</StackLayout>
</DockLayout>
</Page>

Assignment
layout.css
button {
font-size: 15; horizontal-align: center;
background-color: rgb(255, 255, 255);
color: white;
border-radius: 20;
margin-bottom: 10;
}
label{
font-size: 30;
margin: 5;
padding-left:5;
color: gray;
}
#s{
background-color: limegreen;
}
#r{
border-width: 2;
border-color: gray;
color: darkgray;
}
#time{
font-size: 50;
color: darkblue;
padding-left: 40;
padding-right: 40;
border-width: 2;
border-color: black;
}

3Complete the design as shown.

Assignment

layout.xml
<Page>
<StackLayout>
<button id="add" text="ADD" horizontalAlignment="right"/>
<DockLayout>
<StackLayout dock="left">
<label text="Apple" />
<label text="10 bath" />
</StackLayout>
<Image src="~/image/Apple.png" dock="right" stretch="none"/>
<Label dock="top"/>
</DockLayout>
</StackLayout>
</Page>
layout.css
button {
font-size: 15; horizontal-align: center;
background-color: green;
color: white;
margin: 5;
}
DockLayout{
border-width: 2;
border-color: gray;

Assignment
border-radius: 10;
padding: 10;
margin: 5;
}
label{
color: gray;
}

Assignment 5 Add code to the assignment 1 to allow typing and deleting numbers

You can press a number continuously.

23
1

Tapping phone icon will alert the number.

Pressing DEL will delete the last digit.

23

Pressing CLEAR will clear the number.

layout.xml
<Page loaded="pageLoad">
<StackLayout>
<TextField hint="Phone number" id="pnum"/>
<GridLayout rows="*, *, *, *,*" columns="*,*,*">
<button text="1" row="0" col="0" tap="one"/>
<Button text="2" row="0" col="1" tap="two" />
<Button text="3" row="0" col="2" tap="tree" />
<Button text="4" row="1" col="0" tap="four" />
<Button text="5" row="1" col="1" tap="five" />
<Button text="6" row="1" col="2" tap="six" />
<Button text="7" row="2" col="0" tap="seven" />
<Button text="8" row="2" col="1" tap="eighth" />
<Button text="9" row="2" col="2" tap="nine" />
<Button text="*" row="3" col="0" tap="dok" />
<Button text="0" row="3" col="1" tap="zero" />
<Button text="#" row="3" col="2" tap="shap" />
<Button id="c" text="CLEAR" row="4" col="0" tap="clear" />
<Image src="~/image/phone.ico" row="4" col="1" tap="call"/>
<Button id="d" text="DEL" row="4" col="2" tap="del" />

23

</GridLayout>
</StackLayout>
</Page>

layout.css
button {
font-size: 24; horizontal-align: center;
background-color: rgb(255, 255, 255);
padding-left: 57;
padding-right: 57;
}
Image{
horizontal-align: center;
vertical-align: middle;
}
TextField{
font-size: 35;
}
#c{
padding-left: 25;
padding-right: 25;
}
#d{
padding-left: 42;
padding-right: 42;
}

layout.js
var page,p;
exports.pageLoad = function(args){
page = args.object;
phone= page.getViewById("pnum");
}
exports.one = function(){
p=phone.text.toString()
phone.text=p+1;
}
exports.two = function(){
p=phone.text.toString()
phone.text=p+2;
}
exports.tree = function(){
p=phone.text.toString()
phone.text=p+3;

23

}
exports.four = function(){
p=phone.text.toString()
phone.text=p+4;
}
exports.five = function(){
p=phone.text.toString()
phone.text=p+5;
}
exports.six = function(){
p=phone.text.toString()
phone.text=p+6;
}
exports.seven = function(){
p=phone.text.toString()
phone.text=p+7;
}
exports.eighth = function(){
p=phone.text.toString()
phone.text=p+8;
}
exports.nine = function(){
p=phone.text.toString()
phone.text=p+9;
}
exports.zero = function(){
p=phone.text.toString()
phone.text=p+0;
}
exports.dok = function(){
p=phone.text.toString()
phone.text=p+"*";
}
exports.shap = function(){
p=phone.text.toString()
phone.text=p+"#";
}
exports.clear = function(){
phone.text="";

23

}
exports.call = function(){
p=phone.text.toString()
alert("calling "+p);
}
exports.del = function(){
phone.text=phone.text.slice(0, -1);
}

23