Introduction

Microsoft Windows 8 provides a new versatile platform to develop Windows 8 store applications with the “modern” touch-optimized user interface concepts running on different set of Windows 8 devices—PCs, tablets, and mobile phones.

This book provides step-by-step instructions for developing a FinanceHub Windows 8 store application using XAML and C# and HTML5, JavaScript, and CSS3 following the Model-View-View-Model (MVVM) design pattern.

This book is a fast-paced guide for how to create Windows 8 apps for PCs, tablets, and mobile phones. Whether you use C# or JavaScript, XAML, or HTML5 and CSS3, this book teaches you how to use the MVVM pattern to bring elegance, power, speed, and reusability to your Windows 8 apps. Experience in XAML and C# or HTML5, CSS3, and JavaScript would be helpful learn these concepts quickly.

Before we dive in to developing the FinanceHub Windows 8 application, let’s quickly get an overview of the following:

• Model-View-View-Model (MVVM) pattern
• Windows 8 store applications
• The FinanceHub Windows 8 store application, which we are going to develop as part of this book
• The book structure

The Model-View-View-Model (MVVM) Pattern

We have established design patterns such as Model View Controller (MVC) and Model View Presenter (MVP) patterns that enable the application design to provide separation between what an application looks like (the user interface look and feel), and how the application acts on user actions (implementing the business logic and integrating with the data source). With the introduction of XAML-based frameworks and their capabilities of data binding, data templates, commands, and behaviors, an enhanced MVVM design pattern emerged, which can leverage the aforementioned XAML-based frameworks capabilities and can provide a separation between the presentation and business layers.

The MVVM pattern is mainly derived from the concept of MVC design pattern. Thus, if you are familiar with the MVC design pattern then you will see many similarities in the MVVM and MVC design patterns concepts. The MVVM pattern creates separation between these layers by allowing the user to define and implement clear role and responsibilities for the presentation and business layers and perform integration between these layers.

Figure 1 demonstrates the three main core classes—the View Class, the ViewModel Class and the Model class—of the MVVM design pattern.

• View Class—defines the applications’ user interface. It represents the structure, layout, visual behaviors, and styles of the application user interface. For Windows 8 store applications you can define Views of your application in XAML or HTML5. The application can contain one or more View classes as per the application requirements and application design.
• ViewModel Class—encapsulates the presentation logic and data for the view. It manages the interactions of views with the required model classes to support data binding and the change notification events by implementing required properties and commands in the ViewModel. The ViewModel class(es) do not contain any user interface. Application can contain one or more ViewModel classes as per the application requirements and application design. We will implement ViewModel classes required for the FinanceHub application, to be developed as part of this book, using C# (for the XAML-based views) and JavaScript (for HTML5-based views).
• Model Class—provides encapsulation of the application data and related business logic, allowing for maximum data integrity and data consistency. Basically it implements application data model, integrates with the data sources, and implements required business logic for data retrieval and validation in order to provide data integrity and data consistency. The Model class(es) do not contain any user interface. The application can contain one or more Model classes as per the application requirements and application design. We will implement Model classes required for the FinanceHub application, to be developed as part of this book, using C# (for the XAML-based views) and JavaScript (for HTML5-based views).

Windows 8 Store Applications

Microsoft released the latest version of the operating system Windows 8, which is designed to provide the next generation touch-optimized applications that can run seamlessly on different Windows devices from PCs and tablets, to Windows 8 mobile phones supporting different form factors. These touch-optimized, next-generation Windows 8 applications are called Windows 8 Store Applications.

The Windows 8 platform introduces a new Windows Runtime (WinRT) framework that introduces the new set of APIs and user controls for XAML and JavaScript (WinJS) to support Windows 8 store applications development. Windows 8 platform also introduces new user interface concepts, such as Charm bar and App bar, which should be considered as part of your application design.

The Windows 8 development platform enables you to develop Windows 8 store applications not only using .NET languages such as Visual Basic .NET and C# and XAML to define the presentation layer but also using more generic languages such as C++ and JavaScript and HTML5 and CSS3 to define the presentation layer. You must install Windows 8 and Visual Studio 2012 to develop Windows 8 applications.

Please note that in this book I will be using “Windows 8 store application” and “Windows 8 application” words interchangeably.

The FinanceHub Windows 8 Store Application

We are going to develop a FinanceHub Windows 8 store application using XAML and C# and HTML5, CSS3 and JavaScript using Visual Studio Windows store default XAML and JavaScript application project templates to demonstrate how to best implement MVVM design pattern for Windows 8 apps.

The FinanceHub application allows you to add/remove stocks to create a stocks watchlist to monitor your favorite stocks. The application contains two main views:

• The first view is a home page, showing your favorite stocks with the latest updates in the stock price.
• The second view is a stock details view, which provides the detailed information of the selected stock.

It will also implement a Windows 8 appbar to allow add and remove one or more stocks from your watchlist.

Figure 2 shows the home page and Figure 3 shows the stocks details page of the FinanceHub Windows 8 application.

The Book Structure

This book contains six chapters.

• The first four chapters are focused on developing the FinanceHub Windows 8 application using XAML and C# following MVVM design pattern.
• Chapters 5 and 6 will describe how to develop the FinanceHub Windows 8 application using HTML5, CSS3, and JavaScript following MVVM design pattern.

Chapter 1: Setting Up Windows 8 Application Project

The first chapter provides information on how to set up your development environment to start the Windows 8 application development. It will also create a skeleton of the FinanceHub XAML Windows 8 application that would require the user to follow and implement the MVVM design pattern.

Chapter 2: Implementing the View

The second chapter will implement required view classes to build the user interface (home page, stock details view, appbar, and add and remove stocks view) of the FinanceHub application following the hierarchical navigation pattern. Along with building the user interface, we will explore some of the key enhancements made in the XAML and some of the new properties introduced in WinRT.

Chapter 3: Implementing the Model

The third chapter will implement lightweight model classes that defined the serializable and deserializable stocks data model and will also implement pre-requisites to implement features of Add and Remove stock actions. During the implementation we will explore and use some of the new features introduced in the .NET Framework 4.5.

Chapter 4: Implementing the ViewModel

The fourth chapter will implement the ViewModel classes to support stocks information binding to StocksPage, StockDetails, and RemoveStock views, and application navigation. It will also implement action commands to support stock selection and add and remove stock actions. We will also revisit the earlier implementation of the project to remove the hard-coded information and bind it to the ViewModel properties and commands.

Chapter 5: HTML5, JavaScript, and Windows 8 Applications

The fifth chapter will provide a quick overview of HTML5, JavaScript, and best practices to develop JavaScript program. We will also look at Microsoft Windows 8 development platform and development tools to support development of Windows 8 store applications using HTML5 and JavaScript.

Chapter 6: View, Model, and ViewModel Structures in HTML5 and JavaScript

The sixth and final chapter of the book will create a navigation template-based Windows 8 JavaScript application project and set up the structure to support MVVM-based implementation. We will implement the View, Model, and ViewModel of the FinanceHub application with all features that were also implemented using XAML and C# in the earlier chapters of this book.

The Source Code

You can download complete source code of this book from the Apress website. The source code contains code for each chapter within the related chapter number folder. Some chapters may contain subfolders to demonstrate step-by-step implementation.