DRAG DROP

###BeginCaseStudy###
Case Study: 2
Windows Store app
Background
You are developing a Windows Store app by using HTML5, JavaScript, and CSS3. The app
will be used to access details about products that your company sells.
Business Requirements

The app must do all of the following:
• Be available to customers in many different countries.
• Display a list of product categories.
• Display the products for a selected category.
• Display details of a selected product.
• Display images of each product one at a time in a vertical presentation.
• Provide a link to an about section in the Settings pane.
• Update product data on a daily basis.
• Allow the user to view the last selected product while the app is offline.
• Be deployed in the Windows Store.
Technical Requirements
General
• When the user restarts the app, the app must start in the state it was in when it was last
used.
• App settings controls must be 346 pixels wide.
• The app must optimize bandwidth use and performance.
Security
• The app must use an enterprise certificate.
• The user must provide valid credentials to access the app.
• After user authentication, the app must use stored credentials.
• User accounts will be validated against a pre-existing enterprise service.
App Architecture
• Service calls must be separated from the user interface.
• The app must follow the MVC design pattern.
• Service classes can be written in C++, C#, VB, or JavaScript.
• The app must communicate with pre-existing enterprise services.
Application Structure
Relevant portions of the app files are shown below. (Line numbers in the code segments are
included for reference only and include a two-character prefix that denotes the specific file to
which they belong.)


###EndCaseStudy###

You need to ensure that the product details are displayed.
Which three actions should you perform in sequence? (To answer, move the appropriate
actions from the list of actions to the answer area and arrange them in the correct order.)

Answer: See the explanation.

Explanation:
Box 1: Bind the model to the view.
Box 2: Instantiate the model with product details.
View models connect to the app’s underlying model by calling instance methods.
Box 3: Iterate through the product details.

Note:
* Here are the relationships between a view, a view model and a model.

* MVVM is an architectural pattern. It is a specialization of the presentation model pattern
that was introduced by Martin Fowler. It is also related to the model-view-controller pattern
(MVC) and the model view presenter (MVP) pattern that you may already know.
An app that uses MVVM separates business logic, UI, and presentation behavior.

/ Models represent the state and operations of business objects that your app manipulates.
For example, Hilo reads and modifies image files, so it makes sense that data types for
image files and operations on image files are part of Hilo’s model.
/ Views contain UI elements, and they include any code that implements the app’s user
experience. A view defines the structure, layout, and appearance of what the user sees on
the screen. Grids, pages, buttons, and text boxes are examples of the elements that view
objects manage.
View models encapsulate the app’s state, actions, and operations. A view model serves as
the decoupling layer between the model and the view. It provides the data in a format that
the view can consume and updates the model so that the view does not need to interact with
the model. View models respond to commands and trigger events. They also act as data
sources for any data that views display. View models are built specifically to support a view.
You can think of a view model as the app, minus the UI. In Windows Store apps, you can
declaratively bind views to their corresponding view models.
Reference: Using the Model-View-ViewModel (MVVM) pattern in Hilo (Windows Store apps
using C++ and XAML) (Windows)