Working in a Mobile App Development Environment Lesson 2

Exam Objective Matrix Skills/ConceptsMTA Exam Objectives Working with Developer ToolsWorking with developer tools. (3.4) Understanding Design for Mobile Devices Designing for mobile devices. (3.1)

Working with Developer Tools Platform-specific –Visual Studio Express for Windows Phone –iOS SDK for Apple iPhones Multiplatform –PhoneGap HTML5 JavaScript –Rhodes Open source Ruby-based framework

Using Visual Studio 2010 Express Open project files in Solution Explorer Modify in Code Editor Design Surface resembles phone skin Toolbox provides controls Configure settings through Application Pane Check for build and runtime errors Create a release build

Main Window in Visual Studio 2010 Express for Windows Phone

Application Pane

New Project Dialog Box in Visual Studio IDE

Selecting a Template

Selecting a Windows Phone Version

Microsoft.NET Framework Features –Common Language Runtime (CLR) –Base Class Libraries (BCL) ADO.NET ASP.NET Windows Presentation Foundation (WPF) Windows Workflow Foundation (WF) Windows Communication Foundation (WCF) Windows Forms Data access.NET Compact Framework.NET Micro Framework

.NET Framework Developer Center Main Web Page

Describing and Defining Mobile Design Concepts Metro style provides consistent user interfaces (UIs) Common UI elements –Start screen –Application Bar (usually icons but may contain text labels) –Status Bar (system-level information) –Hardware buttons (i.e., Power, Start, Volume, Back, Search) Location is device dependent

Example of Proper Sizing and Spacing

Example of an Application Bar

Default Hardware Buttons

MyFirstApp in the Visual Studio IDE

Changing the Name of a Control

Adjusting the Button Control

Adjusting the Size of the WebBrowser Control

The Web Browser App UI

Describing and Defining Localization and Globalization Localization –Process of translating text strings into other languages –Achieved by storing resources in resource-only files (separate from application code) Globalization –Process of making an application language- neutral –App presents data as format specific to user’s locale or culture

A List of Resource-only Files in the Visual Studio IDE

Adding a String to the Localization Table

Verifying the Neutral Language

Opening MyFirstApp.csproj in Notepad

Optimizing Mobile Applications Important factors to consider –Startup time –Responsiveness to user Explore development tips for app optimization

Development Tips for Optimized Apps Application startup –Create duplicate splash screens with limited display time –Break into smaller assemblies that load only if needed Images –Use JPG format for opaque –Use PNG format for transparent –Limit maximum image size

Development Tips for Optimized Apps (cont.) Content and resource files –Resource files reduce performance –Set read-only files to Content Progress bar –Use PerformanceProgressBar control instead of ProgressBar Storage bar –Clear temporary data –Give users option to delete user-created data

Selecting to Profile Execution Performance Data in the Application

Profiling Results

More Information about Profiled Performance Data

Asynchronous Programming/Threading Enables multiple tasks to be processed at same time Shares threads Creates discontinuous execution (activities are split) Greatly improves application performance

Object-Oriented Programming (OOP) Everything grouped as objects Increases code re-use and decreases code maintenance –Encapsulation Groups properties and methods together –Polymorphism Ability to substitute one class for another –Inheritance Ability to create new classes based on existing

Model View ViewModel (MVVM) A design pattern which separates the UI from a database Is an example of separation of concerns Allows testing of application’s back-end separate from the UI Enables efficient re-use of code Allows for separate development of back- end and UI

The MVVM Model with Integrated Services ModelViewModelView Services

Model View ViewModel (MVVM) (continued) Model –Describes application domain View –The application UI ViewModel –Middleman between Model and View –Accomplishes data capture and transfer through services, or service agents.

Recap Designing for mobile devices Describing and defining mobile design concepts Describing and defining globalization and localization Optimizing mobile applications Understanding asynchronous programming/threading Understanding object-oriented programming (OOP) Understanding Model View ViewModel (MVVM)