Mobile Application Development

Lab 6 – Storage (File)

Student ID: Student Name:

Instruction: Answer all questions. Write your answer in the table located at the
final page of this document.

This session, we are adding storage data capability to your app. After the session, your BMI
Calculator app will be able to save the BMI data inside a local file.

iOS

Android

1
Mobile Application Development
Lab 6 – Storage (File)
Student ID: Student Name:

Activity 1 – Add DatePicker

You need to screen capture each of the following highlighted activities.
1. Open MainPage.xaml
2. Replace the following code with the DatePicker code.
<!--<Label Text="Choose a date" HorizontalTextAlignment="Start" />-->
<DatePicker x:Name="selectDate" DateSelected="onDatePickerSelected"/>

3. Next, Open MainPage.xaml.cs. Create an event handler method for

onDatePickerSelected.
void onDatePickerSelected(object sender, DateChangedEventArgs e)
{
var selectedDate = e.NewDate.ToString();
}

4. Run the application on Android/iOS. See the date value. Click on the date to change its
value. Screen capture the result on Android/iOS.
5. By default, the date format is mm/dd/yyyy. You can change this format into dd/mm/yyyy
by Format attribute on the previous code on MainPage.xaml.
<DatePicker x:Name="selectDate" DateSelected="onDatePickerSelected"
Format="dd/MM/yyyy"/>

6. Run the application on Android/iOS. See the date value. Click on the date to change its
value. Screen capture the result on Android/iOS. Save all progress before continuing.

Activity 2 – Write data into file storage

1. Go again to MainPage.xaml
2. Enable click event handler for the Save button, OnSaveRecord.by adding the code
<Button x:Name="saveButton" Text="Save" VerticalOptions="CenterAndExpand"
Clicked="OnSaveRecord"/>

3. Open MainPage.xaml.cs
4. Import System.IO class
using System.IO;
5. Set the file path. Set the file name as BMIRecord.txt
public partial class MainPage : ContentPage
{
string fileName =
Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
"BMIRecord.txt");
public MainPage()
{
InitializeComponent();
}

2
Mobile Application Development
Lab 6 – Storage (File)
Student ID: Student Name:

6. Write an event handler method for OnSaveRecord. The code enables you to save the
Date from the DatePicker, followed by the BMI Result and BMI Group.
void OnSaveRecord(object sender, EventArgs e)
{
var writerRecord = selectDate.Date.ToString("dd/MM/yyyy") +
"\nWeight: " + inputWeight.Text + "kg" +
"\nBMI Value: " + outputResult.Text +
"\nBMI Status: " + outputBmiStatus.Text +
"\n";
File.AppendAllText(fileName, writerRecord + Environment.NewLine);
}

Activity 3 – Read data from the File Storage

1. Open Record.xaml. Add a name to the current label. Remove the default text you have
in previous lab.
<Label
x:Name="displayRecord"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
/>

2. Enable the scrollable layout by adding the code above the StackLayour and below its
closing tag.
<ScrollView>
<StackLayout>
<Label
...
/>

</StackLayout>
</ScrollView>
3. Save all progress so far. Then, Open Record.xaml.cs.
4. Import System.IO class
using System.IO;
5. Set the file path. Set the file name as BMIRecord.txt
public partial class Record : ContentPage
{
string fileName =
Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
"BMIRecord.txt");
public Record()
{
InitializeComponent();
}
}

3
Mobile Application Development
Lab 6 – Storage (File)
Student ID: Student Name:

6. Add the following code to read all text from the BMIRecord file and display it using the
label.
public Record()
{
InitializeComponent();

displayRecord.Text = File.ReadAllText(fileName);
}
7. Run the application on Android/iOS. Performs 3 times calculation. Choose different date
and weight. Click Save after each calculation. Open the Record page after you have
done 3 calculations. Screen capture the result on Android/iOS.

4
Mobile Application Development
Lab 6 – Storage (File)
Student ID: Student Name:

Instruction: Write your answer in the specified column given.

QUESTION MARKS ANSWER
Activity 1
Run the 5
application on
Android/iOS. See
the date value.
Click on the date
to change its
value. Screen
capture the result
on Android/iOS.

Run the 5
application on
Android/iOS. See
the date value.
Click on the date
to change its
value. Screen
capture the result
on Android/iOS.
Activity 2
Activity 3
Run the 10
application on
Android/iOS.
Performs 3 times
calculation.
Choose different
date and weight.
Click Save after
each calculation.
Open the Record
page after you
have done 3
calculations.
Screen capture
the result on
Android/iOS.

TOTAL 20

Rename your word document file to:

Lab 6 <studentID>.docx before the submission.

Submission type: Online

5
Mobile Application Development
Lab 6 – Storage (File)
Student ID: Student Name: