App Development for Modern UI MODULE 4: APP DEVELOPMENT ESSENTIALS

Transcription

1 App Development for Modern UI MODULE 4: APP DEVELOPMENT ESSENTIALS

2 Module 4: App Development Essentials Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark, and Silverlight are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Other product and company names mentioned herein may be the trademarks of their respective owners. The example companies, organizations, products, domain names, addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, address, logo, person, place, or event is intended or should be inferred. The information contained in this tutorial is provided without any express, statutory, or implied warranties. Neither the authors, Microsoft Corporation, nor its resellers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this tutorial. Created for Microsoft by Avlade: Copyright 2012 by Microsoft Corporation. 2 P a g e

3 Module 4: App Development Essentials Table of Contents Overview... 4 Learning objective... 4 Starting up... 4 Visual Studio... 4 Templates in Visual Studio... 4 Exercise: Our first app... 7 Exercise: Blend for Visual Studio Grid App Template Exercise: Creating a Grid App Exercise: Sample Data Summary Self-study Questions Additional resources Answers P a g e

4 Module 4: App Development Essentials Overview Visual Studio provides several built-in templates which accelerate the app development process. It is important to understand the functionality provided by these templates, as they allow quick creation of apps that adhere to Metro principles using JavaScript, HTML5, and CSS. Learning objective In this module, we will learn the structure of a JavaScript-based Windows Metro style Project. We will learn about the tools used to create Metro style apps, look at the different templates available, and we'll create our first simple app. Starting up No startup files are required for this module. Visual Studio Visual Studio is the primary tool we will use for writing JavaScript code, debugging, and configuring properties of our Metro style apps. There are several core features to Visual Studio that we can take advantage of: Visual Studio provides a robust code and HTML editor with IntelliSense. We can debug JavaScript using Visual Studio, using Watches and Break Conditions to find runtime issues. We can use the Application Manifest Editor to set runtime properties for our app, such as security, device orientation, icons, and Windows Store settings. Templates in Visual Studio Visual Studio provides several out-of-the-box templates that provide a foundation for apps that follow the Metro design principles. You can access these templates by selecting File/New/Project from the Visual Studio menu, and then selecting JavaScript from the left panel 4 P a g e

5 Module 4: App Development Essentials Blank App Template The Blank App template is great for from scratch apps that need a highly customized user interface. Grid App Template This template shows hierarchical data in three different views: Hub, Section, and Detail. Users can easily drill into groups and explore data from different views; and this is an ideal template for any categorized data. 5 P a g e

6 Module 4: App Development Essentials Split App Template The Split App is similar to the Grid App Template, except a single split page shows both a list view and detail view for a selected Group. This template allows fast viewing of several detail items in a group, without requiring any other navigation. Fixed Layout App Template This template is similar to the Blank App template, but it resizes content to fit the device s screen size. For example, if your interface is designed for an 800 x 600 screen size, but the user s device is 1600 x 900, this template is set up to automatically scale the content up to 1600 x 900. The Fixed Layout Template is ideal for games. 6 P a g e

7 Module 4: App Development Essentials Navigation App Template This template is similar to the Blank App template, except that it includes the navigation framework used by the Grid and Split App templates. You can use this navigation framework to add new pages that the user can navigate to and then revisit with a historical back button. NOTE: For more details on all of the available Templates for JavaScript, see: Exercise: Our first app Let's create a project using the "Blank App" project template, and describe the major parts of this template. 1. From the Visual Studio menu, select File/New Project. 7 P a g e

8 Module 4: App Development Essentials 2. From the left pane, select JavaScript and select Blank App for the template. Enter Blank App for the Name, then select OK : The New Project dialog box in Visual Studio. 3. Visual Studio generates several project files for you, which you can see in the Solution Explorer: 8 P a g e

9 Module 4: App Development Essentials Solution BlankApp The Solution is the top-most file in the Solution Explorer. It is used to group multiple projects into a single file, but in this case our Solution has just a single project. BlankApp This is our project file, which groups together all files specific to our BlankApp template. /css/default.css This is our Cascading Style Sheet (CSS) file, which specifies the visual design of elements of our app such as fonts, color, and layout. default.html This HTML page defines the user interface for our app, which for now is just a single, blank page. package.appxmanifest This XML file contains many settings for the app such as supported orientations, icons, splash screen and capabilities. While it is an XML file, Visual Studio provides a custom editor for the manifest, which you can see by double-clicking the file. /images/ Contains image assets for our app s Splash Screen and icons (logos). /js/default.js This JavaScript code file contains page logic for default.html, such as event handlers and initialization. BlankApp_TemporaryKey.pfx This is used to sign the appxmanifest file, which can be used to ensure what publisher the app came from. The Solution Explorer, showing the files in a Blank App project template. 9 P a g e

10 Module 4: App Development Essentials Exercise: Blend for Visual Studio HTML editing in Visual Studio is limited to text editing the HTML markup of your pages. For more robust, WYSIWYG editing of your HTML assets, you can use Blend for Visual Studio. 1. Return to the Blank App template we created previously. 2. Right-click default.html and select "Open in Blend. 3. Select the Assets Panel from the top-left tab collection. The Assets Panel shows you the HTML elements and media that you can place on a page. The Assets Panel in Blend is available from this Tab. 4. Expand the Elements category and select the Forms subcategory. This section shows you controls that are typically used for data entry forms. 5. Select a <label> control and drag it onto the artboard (which is the main edit panel to the right). 6. Double-click the <label> control on the artboard and enter the text Hello, Blend! 7. Try moving the label on the page and note that it is locked in position. Blend provides a message: Blend displays a message when trying to position a static element. 8. To change the CSS position property for the <label>, we can use the Properties Panel. The quickest way to find the position property is to enter it in the Search box. The Search textbox inside Blend s Properties Panel. 10 P a g e

11 Module 4: App Development Essentials 9. Once you find the position property, set it to absolute: The position attribute shown in the Blend Properties Panel. 10. Now position the <label> element on the artboard where you would like. 11. Let s use Blend to add an Image to the user interface. Go to the Project Panel. 12. Right-click the images subfolder and select Add Existing Item The right-click submenu in the Blend Projects Panel. 13. Browse to the \Module_4_Assets\images\ subfolder and select the sports.png image. 14. Drag the image to the artboard. 15. Close Blend and Save the file. You are now returned to Visual Studio and the file you edited has been updated (note the changes in default.html). 16. Run the project with F5 and note that the edits are in place. 11 P a g e

12 Module 4: App Development Essentials Grid App Template The Grid App Template is a great fit for showing data that is hierarchical in fashion. It provides different views of the data with varying levels of detail, and provides some sample data to get started. Hub Pages show a top-level view of all Groups. Section Pages show a detailed view of a single Group. Detail Pages show a single item of data. Also, unlike the "Blank" Project Template, the Grid Template introduces a Navigation Model which tracks the history of pages that a user views and allows a "go back" functionality. NOTE: For more details on the Navigation Model, see: Exercise: Creating a Grid App Let's create a Grid App project using the template and explore its details. 1. In Visual Studio, select File/New Project. 2. Select Grid App Template and name this project WikipediaImages. The New Project dialog in Visual Studio. 12 P a g e

13 Module 4: App Development Essentials 3. Run the project to see what the template provides: Sample data has been provides for several top-level groups, each containing several items. Click on any item to go the detail page for that item. Click the Back Button to use the navigation history. Click a Group name to go to see a list of items for a single group. 4. Return to Visual Studio (you can use Alt+Tab). 5. Note the following parts of the Grid App Template that are different than the Blank App Template: Sample data has been provided in the file /js/data.js. In default.html, a PageControlNavigator control is provided to allow navigation to different pages. a subfolder has been added named /Pages which contains the separate pages shown inside the PageControlNavigator: groupeditems - the "Hub" page for the app, shows a grouped list of all items. groupdetail - the "Section" page for the app, shows details for a single group. itemdetail - the "Detail" page for the app shows details for a single item. A JavaScript file has been added at /javascript/navigator.js, which wraps the PageControlNavigator to provide additional common app functionality, such as keyboard navigation. Exercise: Sample Data The Sample Data that is generated as part of the Grid App template can easily be modified to suit your needs. Perhaps you just want better design time data, or maybe you want to create an entire app with static data that does not need to request data from a web service (in later modules, we will see how we can request dynamic data from web services or other resources). 1. Open data.js. 2. Modify one or two sampleitems row values. 3. Run the app and note that the data has changed. 4. We can also swap out the entire sample data with a different data set by bringing in a new data.js file and any assets, such as images, that the new data set needs. 5. Right-click the /js/ folder and select "Add Existing Item. 6. Browse to the sample data folder and select "data.js." 7. Choose Overwrite when prompted. 8. Right-click the /images/ folder and select "Add Existing Item". 13 P a g e

14 Module 4: App Development Essentials 9. Browse to the sample data folder and then the /images/ subfolder and select all images. 10. Run the project and note the data changes. Summary In this module, we learned about the available project templates provided by Visual Studio for creation of Metro style apps. We created a project using the Grid App template and saw how we could modify the sample data it provides, and examined the structure of a JavaScript-based Windows Metro style Project. Self-study Using the Grid App project output, we created in the last exercise, try modifying the data.js file so that you add in your own groups and sample items. How would you create the image assets, item description, and group icons for your new data? Questions 1. You want to create a game using JavaScript for Metro, and you need the user interface to automatically scale to the user s device size. Which template should you start with? 2. You need to create an app that shows hierarchical data with hub, section, and detail pages. Which template should you start with? 3. Which tool is best used for writing and debugging code: Visual Studio or Blend? Additional resources You can learn more about the project templates provided in Visual Studio from the following resources. JavaScript project templates for Metro style apps An in-depth description of the various templates for JavaScript based Metro apps. Adding Data to a Project Template More details on how to add and modify data in a Grid or Split app template. Navigation Model Describes the navigation model in Grid, Split, and Navigation app templates, used to provide page history and go back functionality. 14 P a g e

15 Module 4: App Development Essentials Answers 1. The Fixed Layout App Template is ideal for games, since the UI will automatically be scaled to the user s screen size. 2. The Grid App Template is ideal for displaying hierarchical data and provides hub, section, and detail pages. 3. Visual Studio provides debugging of code. 15 P a g e

16 App Development for Modern UI MODULE 5: USING JAVASCRIPT IN METRO APPS

17 Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark, and Silverlight are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Other product and company names mentioned herein may be the trademarks of their respective owners. The example companies, organizations, products, domain names, addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, address, logo, person, place, or event is intended or should be inferred. The information contained in this tutorial is provided without any express, statutory, or implied warranties. Neither the authors, Microsoft Corporation, nor its resellers or distributors will be held liable for any damages caused or alleged to be caused either directly or indirectly by this tutorial. Created for Microsoft by Avlade: Copyright 2012 by Microsoft Corporation. 2 P a g e

18 Table of Contents Overview... 4 Learning objective... 4 Starting up... 4 Windows Runtime... 4 Windows Library for JavaScript... 4 Windows Runtime Controls... 4 Exercise: Adding an Application Bar... 5 The data-win-control Property... 6 Exercise: Adding commands... 6 HTML controls... 7 Exercise: Adding a Flyout Control... 7 Program logic with JavaScript Exercise: Defining a namespace Handling events Exercise: Handling events Summary Self-study Questions Additional resources Answers P a g e

19 Overview When creating Metro apps using JavaScript developers need to understand the fundamentals of the Windows Runtime (WinRT) and the Windows Library for JavaScript (WinJS). These libraries provide controls and functionality to create rich, interactive applications for Windows 8. Learning objective In this module, we will learn how to add logic to our applications using JavaScript, how to create custom data entry forms, and how to use Metro specific controls such as the Application Bar and Flyout control. Starting up You will need the Starter Solution from \Module_5_Assets\Starter. This is the output of the previous Module, App Development Essentials. Windows Runtime All Windows 8 Metro style applications use the Windows Runtime - a set of controls and services that provide Windows platform specific functionality. The Windows Runtime (WinRT) is used across all programming languages - JavaScript, C#, Visual Basic, and C++. Windows Library for JavaScript When we create Metro applications using JavaScript, we use web standards such as HTML5 for User Interface creation, CSS for styling, and JavaScript for program logic. However, these web standards aren't enough to create truly unique experiences that take advantage of the Metro platform. For example, our Metro apps don't live inside of a web browser, so we need a new Navigation model for managing history and passing parameters to pages. And the life cycle of our Metro app is much different than the life cycle of an HTML page in a browser. Also, there are many specific functions offered by Windows that are built into the platform - such as Mulitouch, Video, Accelerometer, and file storage. And what about future technology, such as Natural User Interface, which moves into popularity much faster than web standards can evolve? For integrating with these platform specific functions and controls, Microsoft created the Windows Library for JavaScript (WinJS). WinJS consists of JavaScript and CSS files that you use along with the Windows Runtime (WinRT) to create compelling Metro style applications. Windows Runtime Controls Windows Runtime (WinRT) contains many controls that are defined outside of HTML controls. These WinRT Controls are created at the platform level, and accessed through WinJS. 4 P a g e

20 NOTE: You can see a list of available JavaScript controls here: An example of these controls is the Application Bar, which provides a standard location for common commands. Application Bars can be displayed at the bottom or top of a Metro app, and are usually hidden until the user performs a swipe from the bottom edge or top edge of the app. In some circumstances, you may want to have your Application Bar be "sticky" - that is, always remain open. An example of a sticky Application Bar might be a drawing app in which drawing commands should always be visible because they are frequently switched. This Windows 8 drawing app has two Application Bar controls visible one at the top and one at the bottom. Exercise: Adding an Application Bar Some templates, such as the Grid App Template, provide an Application Bar for you. You just need to uncomment the HTML so that the App Bar is shown. Let s enable the Application Bar for our Wikipedia Images app. 1. Open the Starter Solution in \Module 5\Starter\ 2. Open the default.html page in the Grid project. 3. At the bottom of the page, find the appbar (WinJS.UI.AppBar) control and uncomment it. 5 P a g e

21 <div id="appbar" data-win-control="winjs.ui.appbar"> <button data-win-control="winjs.ui.appbarcommand" data-win-options="{id:'cmd', label:'command', icon:'placeholder'}"></button> </div> 4. Run the project. If you are on a device with a touch screen, try swiping from the bottom edge of the screen. If you are on a device with a mouse, just right-click with the mouse. 5. Note the default placeholder command provided by the template. The data-win-control Property When we added the Application Bar, note that it contained a <div> element named appbar, which contains the following property, data-win-control: <div id="appbar" data-win-control="winjs.ui.appbar"> The data-win-control property crosses the HTML/Windows Runtime boundary. It allows us to make a standard "div" element into a Windows Runtime specific control, which exists at the native Windows platform instead of standard HTML. At runtime, this div will host a platform-specific Application Bar control because of the data-win-control property. So while <div> is an HTML control based on web standards, it can contain a Metro platform control such as Application Bar at runtime. Exercise: Adding commands We can add additional options to the Application Bar by adding in new AppBarCommand entries. Like the WinJS.UI.AppBar control, the AppBarCommand is a native Metro control (not a standard HTML control). Let's add in an option for "New Item" into our app bar: 1. Open default.html. <div id="appbar" data-win-control="winjs.ui.appbar"> </div> <button id="btnappbaraddimage" data-win-control="winjs.ui.appbarcommand" data-win-options="{section: 'global', label: 'New Item', icon: 'add'}"> </button> 6 P a g e

22 The New Item AppBarCommand control inside the Application Bar. HTML controls We can create our own custom controls in HTML using the WinJS.UI.HtmlControl object. Using HTML controls offers several benefits: we can separate complex logic and UI into smaller pieces we can re-use custom controls throughout our app we can place HTML controls into parts of the UI that show on demand, such as Flyout controls. Exercise: Adding a Flyout Control Let's create an HTML control which will allow users to enter details for their "new image item" when they click the New Item command on the App Bar. We will use a special control called a Flyout, which acts as a popup window when a command on the App Bar is executed. Custom controls are similar in structure to Pages in our project. They consist of three separate pieces: an HTML markup file, for user interface design a CSS file, for styling such as layout, font and color a JavaScript file, for program logic, such as handling button clicks 1. Right-click the project and select Add > New Folder. Name the new subfolder controls. 2. Right-click the controls subfolder and select Add > New Item 3. Select HTML Page and in the Name textbox, enter addimageflyout.html. 7 P a g e

23 The Add New Item Dialog inside Visual Studio. 4. Remove the default HTML from the editor and replace it with the following. This HTML will display a button for selecting and image, title and description edit boxes, and a Save button. Note that we do not need <html>, <head> or <body> tags because this is only an HTML fragment that will be placed into our UI dynamically. NOTE: This snippet is available in \Module_5_Assets\snippets\addImageFlyoutHtml.txt 8 P a g e

24 <div class="flyout" id="addimageflyout" data-win-control="winjs.ui.flyout"> <div> <button id="btnselectimage">select Image...</button> </div> <div> <label for="title">title:</label> <input id="title" placeholder="enter a title"> </div> <div> <label for="description">description:</label> <input id="description" placeholder="enter a description" /> </div> <div class="command"> <button id="btnadditem">save</button> </div> </div> 5. Right-click the controls subfolder and select Add/New Item. 6. Select JavaScript File, and in the Name text box, enter addimageflyout.js. For now, we will leave this JavaScript File empty. Select JavaScript File from the Add New Item dialog inside Visual Studio. 9 P a g e

25 7. Right-click the controls subfolder and select Add/New Item 8. Select Style Sheet, and enter flyout.css for the name. Select Style Sheet from the Add New Item dialog inside Visual Studio. 9. Enter the following styling information, which styles the label, input, and button controls in our HTML. NOTE: This snippet is available in \Module_5_Assets\snippets\flyoutCss.txt 10 P a g e

26 div.label { width:280px; margin-top: 10px; } div.flyout input { margin-bottom: 5px; width: calc(95%); } div.selectbutton { margin-bottom: 15px; } div.command { margin: 10px; float: right; } 10. Now that our HTML control is defined, let s add an instance of it to our Application Bar. In default.html, find the <head> element. 11. Before the ending </head> tag, add the following JavaScript include and link, which brings in our JavaScript code and StyleSheet. NOTE: This snippet is available in \Module_5_Assets\snippets\addJsIncludes.txt <!-- Add in the image flyout code --> <script src="/controls/addimageflyout.js"></script> <!-- Add in the Flyout styles --> <link href="/controls/flyout.css" rel="stylesheet"> 12. Just after the <body> tag, add in the following HTML. This script includes the addimageflyout.html inside default.html. You can think of it as embedding the contents of addimageflyout.html into this page. NOTE: This snippet is available in \Module_5_Assets\snippets\addFlyoutHtmlControl.txt 11 P a g e

27 <div data-win-control="winjs.ui.htmlcontrol" data-win-options="{uri: '/controls/addimageflyout.html'}"></div> 13. Add appbar command which displays the flyout using the flyout option NOTE: This snippet is available in \Module_5_Assets\snippets\addButtonWithOptions.txt <button data-win-control="winjs.ui.appbarcommand" data-win-options="{section: 'global', label: 'New Item', icon: 'add',type:'flyout', flyout: 'addimageflyout'}"></button> 14. Run the project. If you are on a device with a touch screen, try swiping from the bottom edge of the screen. If you are on a device with a mouse, just right-click with the mouse. 15. Click the New Item command button in the Application Bar, and note our flyout form appears: The New Item command now shows a Flyout control with our form details. 12 P a g e

28 Program logic with JavaScript When we need to add logic to our application, we write JavaScript code. Because program logic can quickly become complex and consist of many lines of code, it is a best practice to separate JavaScript code into separate files and define namespaces for related code. A namespace is a way of grouping similar functionality into a collection of functions. For example, the Grid App Template in Visual Studio creates a namespace name Data for grouping together all the sample data methods and properties. Here is how the Data namespace is created inside data.js: WinJS.Namespace.define("Data", { items: groupeditems, groups: groupeditems.groups, getitemsfromgroup: getitemsfromgroup, getitemreference: getitemreference, resolvegroupreference: resolvegroupreference, resolveitemreference: resolveitemreference }); In the above example, the WinJS.Namespace.define method is used to create a new namespace named Data. Also, several properties and methods are exposed through the Data namespace, which are accessible through any code file that includes this JavaScript. Note that when methods or properties are made public, you can optionally define an alias for the function name. In the example above, the property groupeditems is exposed with an alias named items. Likewise, the property groupeditems.groups is exposed publicly with the alias groups. Exercise: Defining a namespace Let s create a namespace for our Flyout. 1. Open the JavaScript file we created at \controls\addimageflyout.js 2. Add the code, which creates a namespace called ImageFlyout and adds a public function named initialize: 13 P a g e

29 /// <reference path="//microsoft.winjs.0.6/js/base.js" /> /// <reference path="//microsoft.winjs.0.6/js/ui.js" /> (function () { "use strict"; WinJS.Namespace.define("ImageFlyout", { initialize: initialize }); function initialize() { } })(); What the code above does: The following lines enable Visual Studio to show IntelliSense for the subsequent code we write: /// <reference path="//microsoft.winjs.0.6/js/base.js" /> /// <reference path="//microsoft.winjs.0.6/js/ui.js" /> The function section creates a global method that will automatically be executed when this.js file is included in our project. (Remember, we included this file into default.html, so it will be loaded when the app starts up). (function () { })(); The "use strict" qualifier tells the JavaScript compiler to raise errors if variables are used without declaration, and makes JavaScript feel more like a strongly typed language such as C#. The following code creates a namespace, which is a way of grouping similar functionality into a single entity. In the example below, a namespace called ImageFlyout is created, and it exposes a single public method named initialize. WinJS.Namespace.define("ImageFlyout", { initialize: initialize }); function initialize() { } 14 P a g e

30 When we include this.js file in any code, we could call the initialize method using the following call: ImageFlyout.initialize(); Handling events Functionality in a Metro application is executed in response to events. Examples of events include the user tapping a button, the app loading, or the user scrolling an element with a gesture. When we need to respond to an event in our application, such as a user clicking a button, we add a listener for that event. In order to add a listener, we first get a reference to a control using the getelementbyid function: var btnadditem = document.getelementbyid("btnadditem"); The code above creates a variable named btnadditem which is a reference to the control named btnadditem. Exercise: Handling events Let s add some JavaScript to handle the click of the Save button in our Flyout control. 1. Open the HTML for our control at /controls/addimageflyout.html. 2. Note that the HTML for the button control looks like the following. It defines a button with an id property of btnadditem. <button id="btnadditem">save</button> 3. Now open the JavaScript for our control at /controls/addimageflyout.js. 4. Add the following code inside the initialize() function: var btnadditem = document.getelementbyid("btnadditem"); btnadditem.addeventlistener("click", function (e) { // the following code will be executed when btnadditem is clicked: var title = document.getelementbyid("title"); var description = document.getelementbyid("description"); }); // show a message to the user for now var msg = new Windows.UI.Popups.MessageDialog( "The btnadditem button was clicked."); msg.showasync(); 15 P a g e

31 The code above first gets a reference to the button control in JavaScript so that we can manipulate its properties or respond to events. Once we have the reference to the control, we can add an event listener using the addeventlistener method for the control. In this example, we are using an inline function to define the code that is executed for the listener. The inline function gets references to the title and description controls (in the next module, we will use these references). Finally, it shows a message dialog to the user. 5. We still need to call the initialize() function in our ImageFlyout namespace. We would like this function to execute when the app starts up. 6. Open the JavaScript file at /js/default.js. This file contains the code for the default (main) page of our app. 7. We want to initialize our ImageFlyout control after all the UI for the default page is defined. This is because we need to ensure the Application Bar and Flyout Controls are fully created in the UI. Find the processall() function, which performs databinding on controls and add the highlighted line only below: args.setpromise(winjs.ui.processall().then(function () { ImageFlyout.initialize(); if (nav.location) { nav.history.current.initialplaceholder = true; return nav.navigate(nav.location, nav.state); } else { return nav.navigate(application.navigator.home); } })); 8. Run the project. If you are on a device with a touch screen, try swiping from the bottom edge of the screen. If you are on a device with a mouse, just right-click with the mouse. 9. Click the New Item button on the Application Bar, then click the Save button. This fires the click event and shows a message dialog 16 P a g e

32 Summary WinRT and WinJS provide a powerful framework for creating Metro style apps. We use JavaScript to code custom logic into these apps, and HTML and CSS to create the user interface. In this module, we used controls such as the Application Bar and Flyout control to create a data entry UI. Self-study JavaScript based Metro apps have access to many controls. Using the following link, examine the full list of available controls. Try using some of the available controls such as the progress ring, push button, and radio button in your own user interface: Questions 1. What is the purpose of WinRT for Metro app development? What about WinJS? 2. How do we add event handlers to controls in Javascript? 3. How do we create Application Bar Commands and Flyout controls? Additional resources You can learn more about using available controls and JavaScript from the following resources. Quickstart: Adding HTML Controls and Handling Events Describes how to instantiate controls and wire up events in JavaScript. Adding WinJS Controls and Styles Describes creating controls in markup, wiring up events, and setting properties. Laying out your UI Describes how to choose the appropriate container type for your user interface. 17 P a g e

33 Answers 1. WinRT is a set of controls and services that provide Windows platform specific functionality to XAML and JavaScript based apps. WinJS consists of JavaScript and CSS files that you use along with the Windows Runtime (WinRT) to integrate with platform specific functions and controls. 2. To add event handlers in JavaScript, we add an event listener using the addeventlistener function. 3. To add a flyout to an Application Bar Command, we can use the flyout property of the AppBarCommand object. 18 P a g e