Proficient in the controls and settings in Windows Store applications built with JavaScript

A good user experience can automatically show the data to the user in an intuitive way, regardless of the size of the appearance. When presenting data and content, you need to create a new experience with updated APIs, controls, and tools. In the Windows store application, the amount of code required and the complexity of the control depend on which application is created, whether it is a productivity application, a game, a social application, or a financial application. Any developer who builds a Windows application store application with JavaScript can easily master the Windows JavaScript Library (WINJS) control, and then I'll talk about those controls.

Windows 8 introduces new UI paradigms and new UI controls

The Windows Store application looks and behaves differently than programs that run in earlier versions of Windows. There has been a major innovation in Windows, starting with a new start page that is full of dynamic tiles as your first layer of interaction with your application. Other notable changes are that Windows store applications run in Full-screen mode or aligned view, centering the content on the front, while commands and menus stay out of sight until the user requests them.

Once ubiquitous, the Windows UI elements such as minimize, Maximize, and close buttons no longer exist in the Windows Store application because touch-sweeping and mouse movement have made these controls useless. To close the application, simply swipe or move the mouse from the top of the screen to the bottom. Even menus are no longer fixed at the top of each screen. In the Windows store application, the menus remain hidden until a touch or mouse gesture shows them from the bottom of the AppBar, as shown in Figure 1, which uses a small countdown application as an example.

Figure 1: AppBar at the bottom of the application

As you can see in Figure 1, the menu on the outside, the command element is a graphic, followed by some text, rather than the traditional first text menu, occasionally with graphics. These elements also fit perfectly into the finger size. If you need more space to accommodate options than just the bottom, you can place the navigation bar, which is the AppBar at the top of the page.

Navigating in a traditional Windows menu can sometimes be cumbersome. We all hate cascading menus that are 13 levels deep enough to forget what they were originally looking for. In the Windows store application, the navigation itself is intertwined with content, because the touch and mouse gestures to the ListView item call other pages. Finger opening and closing gestures and Ctrl + mouse wheel Activates semantic scaling (BIT.LY/16IDTDI), the example of control and navigation in Windows application store applications. Semanticzoom is part of the entire WINJS control list (BIT.LY/W1JLM5).

Using HTML and Winjs controls

There are two main types of controls that use JavaScript in Windows store applications: Standard HTML elements and Winjs controls. The Winjs control is a combination of HTML and pre-generated JavaScript that extends the appearance or behavior of HTML elements. Because these controls are HTML, you can use CSS to set the style of the Winjs control. Figure 2 is an example of a basic WINJS control, a control that consists of multiple DropDown controls that represent the day, month, and year, showing the default output for this code:

<span id= "Eventdate" data-win-control= "WinJS.UI.DatePicker"/>

Figure 2:winjs DatePicker Control

Of course, the DatePicker control in Figure 2 has no other styles outside the default Winjs style, but can be overridden by the. Win-datepicker-date,. Win-datepicker-month and. Win-datepicker-year win JS CSS Selector To change this situation. Use. Win-datepicker to set the style of the entire control.

DatePicker (or any winjs control) works because of the HTML5 data-* feature, called Data-win-control. The Data-win-control attribute represents the type of control that WINJS will render in the appropriate place, so when you set the value of the Data-win-control attribute to WinJS.UI.DatePicker, the control renders the Drop-down list in Figure 2. The Data-win-options feature allows you to set additional properties for a control. For example, you can set the default display date for DatePicker and the data-win-options for the minimum and maximum date ranges. Although it is named DatePicker, you can change the control to capture time, such as hours, minutes, and seconds.

Because WINJS generates and renders the final control output, design-time HTML looks quite different from run-time HTML. Figure 3 shows the HTML injected into the host element at run time by Winjs. Available from the DOM Explorer (Debug |) Windows "|" DOM Explorer) to view it.

Figure 3:datepicker presents three DropDown, which fills in the date/month/year option

<span class= "Win-datepicker" id= "Eventdate" role= "group" lang= "en-US" dir= "ltr" data-win-control= " WinJS.UI.DatePicker "> <select tabindex=" 0 "class=" win-datepicker-month Win-order0 "aria-label=" Select Month "
> <option value= "January" >January</option> <option value= "February" >February</option> <option value= "March" >March</option> <option value= "April" >April</option> <!--more < Options>, the other months--> </select> <select tabindex= "0" class= "win-datepicker-date Win-orde
R1 "aria-label=" Select Day "> <option value=" 1 ">1</option> <option value=" 2 ">2</option>  <option value= "3" >3</option> <option value= "4" >4</option> <!--more <options> that Show day numbers--> </select> <select tabindex= "0" class= "win-datepicker-year win-order2" aria-label= "Sele CT year "> <option value=" 1913 ">1913</option> <option VALue= "1914" >1914</option> <option value= "1915" >1915</option> <option value= "1916" >1916 </option> <!-more <options> that show years--> <option value= "2112" >2112</option> < Option value= "2113" >2113</option> </select>