Mobile App Programming 2

HANDOUT 1
FUNDAMENTALS
• The process of software development is called the Software Development Lifecycle (SDLC).
5 Phases of Mobile Software Development Cycle
1. Inception
• That idea is usually refined into a solid basis for an application.
2. Design
• Consists of defining the app’s User Experience (UX).
• Turning the UX into a proper User Interface (UI) design.
3. Development
• Most resource-intensive phase
• Actual building of the application
4. Stabilization
• Quality Assurance (QA)
• Testing the application and bugs are fixed.
• Given a chance to use it, provide feedback, and inform changes.
5. Deployment
• Applications and updates are delivered from developers to users.
.NET Multi-platform App UI (. NET MAUI)

• Cross-platform framework
• Creating native mobile and desktop apps with C# and XAML
• Allows to develop apps that can run on Android, iOS, macOS and Windows.

HANDOUT 2
Visual Controls
BUILDING BLOCKS
1. MauiProgram.cs file
• Contains the code for creating
• Configuring the Application object.
2. App.xaml and App.xaml.cs files
• Provide UI resources
• Create the initial window for the application.
3. AppShell.xaml and AppShell.xaml.cs files
• Specify initial page for app
• Handle the registration of pages for navigation routing.
4. MainPage.xaml and MainPage.xaml.cs files
• Define the layput and Ui logic for the page displayed
.NET MAUI project

• Contains resources such as images, icons, fonts, and default bootstrap code for each platform.
The Application Class

• Represents the .NET MAUI application as a whole.

• Inherits a default set of behaviors from Microsoft.Maui.Controls.Application.

NAVIGATION STRUCTURES
Shell

• l reduces the complexity of app development

• providing the fundamental features that most apps require
Three (3) main hierarchical objects:
1. FlyoutItem or TabBar
• A FlyoutItem represents one or more items in the flyout
• Should be used when the navigation pattern for the app requires a flyout.
• A TabBar represents the bottom tab bar
• Should be used when the navigation pattern for the app begins with bottom tabs and doesn't
require a flyout.
2. Tab
• Represents grouped content, navigable by bottom tabs.
3. ShellContent
• Represents the ContentPage objects for each tab.
Pages

• Root of the UI hierarchy in .NET MAUI inside of a Shell.

• A solution includes a class called MainPage, which derives from ContentPage, the simplest
and most common page type.
Page Types:
1. TabbedPage
• Root page used for tab navigation
• A tabbed page contains child page objects, one for each tab.
2. FlyoutPage
• Enables the implementation of a master/detail style presentation
• Contains a list of items.
• When selecting an item, a view displaying the details for that item appears.
3. NavigationPage
• Provides a hierarchical navigation experience
• You can navigate through pages, forwards and backwards, as desired.
Views

• A content page typically displays a view.

• A view enables users to retrieve and present data in a specific manner.

1. ContentView
• Default view for a content page, which displays items as-is.
• If the view is shrunk, items may disappear from the display until the view is resized.
2. ScrollView
• Enables the display of items in a scrolling window
• If the window is shrunk, items will be displayed by scrolling up and down.
3. CarouselView
• Scrollable view that lets the user swipe through a collection of items.
4. CollectionView
• Can retrieve data from a named data source.
• Present each item using a template as a format.
Controls and Layouts

• A view can contain a single control, such as a button, label, or text box.
• View is also a control so it can contain another view.
Layout

• Defines the rules by which the controls are displayed relative to each other.
• Also, a control so it can be added to a view.
• VerticalStackLayout element - enables fine-tuning the layout of other controls

1. VerticalStackLayout and HorizontalStackLayout

• Stack layouts that lay out controls in a top-to-bottom or left-to-right stack.
• StackLayout is also available, which has a property named StackOrientation
• Can be set to Horizontal or Vertical.
2. AbsoluteLayout
• Used to set exact coordinates for controls.
3. FlexLayout
• Similar to StackLayout, except that it enables wrapping the child controls it contains if they
do not fit in a single row or column.
• Provides options for alignment and adapting to different screen sizes.
• Horizontal FlexLayout could be used inside a ScrollView to display a horizontally scrollable
series of frames.
4. Grid
• Positions its child elements in a grid of rows and columns.
• Column and row sizes can be defined, as well as spans, so grid layouts do not necessarily
have a "checkerboard look" to them.
Tuning a Layout

• Add a little breathing space around a control.

• Each control has a Margin property that is respected by the layouts.
• One way to think of this is that all the controls are in a box with padded walls.

HANDOUT 3
User Interface with XAML
Fundamentals
Markup language

• computer language that is used to introduce various elements in a document. Elements are
described using predefined tags.
• The tags have specific meaning in the context of the domain where the document is used.
• Hypertext Markup Language (HTML) to create a webpage that you can display in a web
browser
Extensible Application Markup Language (XAML)

• Declarative language
• Created by Microsoft
• Based on XML. XAML was designed to simplify the process of creating the UI in
applications.

1. Division of labor
• Does not require programming knowledge.
• Designers can focus on XAML and programmers can focus on writing the code.
2. Tooling friendly
• Possible to use a design tool to create the XAML layout for you.
• Can drag and drop controls onto a design surface using a graphical experience.
Object Element Syntax

• Types can be created using this

• Standard, well-formed XML syntax to declare the element to instantiate.
• For example, want to declare a label, your XAML element will look like the following:
<Label />
XML namespace

• Used to specify the location of the information needed to instantiate the XAML elements that
you declare.
• Namespaces are defined by adding the xmlns attribute to the root element
• Root element of a XAML document is ContentPage.
Type Converter

• Used to convert an XML attribute value to its correct type.

Button

• Most fundamental interactive control.

• Defines a Clicked event that is fired once the Button is tapped.
• When the Button is tapped, the Button_Clicked method executes.
RadioButton

• Allows users to select one option from a set.

• Each option is represented by one radio button, and you can only select one radio button in a
group.
• Displays text when the Contentproperty is assigned a string.
• To group radio buttons, you can set the GroupName property on each radio button in the group
to the same value.
SearchBar

• User input control used to initiate a search.

• Control supports placeholder text, query input, search execution, and cancellation.
SearchButtonPressed

• When the user either clicks the search button or presses the enter key.
TextChanged

• Called anytime the text in the query box is changed.

ListView

• To display search results.

TextChanged event

• Set to an event handler named SearchBar_TextChanged.

• This handler is located in the xaml.cs file.

HANDOUT 4
XAML PAGES
LAYOUT

Layout Panel

• A Container that holds a collection of child views and determines their size and position

• Automatically recalculate when the size of the app changes.

4 Commonly Used Layout Panels
1. StackLayout
• Arranges its children in a single row or column.
2. Grid
• Arranges its children in cells that are created by rows and columns
3. AbsoluteLayout
• Arranges its children by using x and y coordinates.
4. FlexLayout
• Arranges its child views like a StackLayout but allows wrapping them to if they don’t fit

View Base Class

• Properties that influence the size of a view.

2 Properties of View Base Class (type double)

1. WidthRequest
• Allows to control the width
2. HeightRequest
• Allows to control the height

2 Properties for Retrieving View Size (type double)

1. Width
• Reflects the rendered width size
2. Height
• Reflects the rendered height size

2 Values of View Base Class

1. Points
• For iOS devices
2. Density-independent pixels
• For Android

LayoutOptions
• Sets the position of a view
• Encapsulates 2 layout preference
1. Alignment – Determines its position and size within its parent layout.
2. Expansion – Indicates if the view should use extra space if available

2 Types of LayoutOptions
1. VerticalOptions
2. HorizontalOptions

LayoutAlignment
• Controls how the child view is positioned

4 LayoutAlignment Values
1. Start
• Positions the view from left to right.
2. Center
• Horizontally or vertically centers the view.
 3. End
• Positions the view from right to left.
4. Fill
• The view fills the width or height of the parent layout

StackLayout
• Organizes child views in a one-dimensional stack, either horizontally or vertically.
• Can also be used as parent layout that contains other child layouts.

2 Properties defined by StackLayout

1. Orientation
• Direction of how the child views are positioned.
2. Spacing
• Space between child views.

Expands Property
• Designed specifically for StackLayout.
• Allows a child view to request extra space if available.
• Extra space is divided equally for each view.

4 Expand Property Values

1. StartAndExpand
2. CenterAndExpand
3. EndAndExpand
4. FillandExpand
• Fills available extra space when used.