A SEMINAR REPORT ON

METRO STYLE APPLICATION

Submitted By: RACHIT TRIPATHI

Roll No. 1104310038 IIIrd Year, COMPUTER SCIENCE & ENGINEERING SESSION 2013-2014

Under the guidance of: Er. R.N.Verma

Seminar Incharge

BUNDELKHAND INSTITUTE OF ENGINEERING & TECHNOLOGY, JHANSI (U.P)

1 Metro Style Application

BUNDELKHAND INSTITUTE OF ENGINEERING & TECHNOLOGY JHANSI (U.P.)- 284128

CERTIFICATE

This is to certify that RACHIT TRIPATHI B.Tech third year, Computer science and Engineering, Bundelkhand Institute of Engineering and Technology has delivered seminar successfully on METRO STYLE APPLICATION, in the partial fulfilment of B.Tech degree under my guidance during the academic year 2013-2014.

Er. R. N. Verma

Prof. A.K.Solanki

SEMINAR INCHARGE

HAED OF DEPARTMENT

2 Metro Style Application

ACKNOWLEDGEMENT

I take the opportunity to express my sincere thanks to Er. R.N. Verma, Seminar In Charge,(CSE Dept.) for his immense guidance for the success of this seminar .I also give a special thanks to Prof. A.K. Solanki (Head Of Department of CSE) for his valuable advice to prepare my seminar .All other faculties of the department Er. Hemant Kushwaha, Er. Rakesh Kumar Sahu, Dr. Yogesh Kumar, Er. Yogesh Kumar Verma , Er. Ankit Vishwakarma, Er. Vinay Dwivedi, Er. Rahul Yadav. Thanks for their kind cooperation extended to me. Also I am extending my gratitude to everyone who helped me in successful preparation and presentation of this seminar.

I am thankful to all my friends who helped me in completing my seminar a successful one and reviewing the entire script with pain taking attention for detail. I am also thankful to all the people who were directly or indirectly involved with me in helping to complete my seminar report.

RACHIT TRIPATHI 1104310038 Third Year Computer Science &Engineering Session 2013-2014

3 Metro Style Application

Contents
Sr.no
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

Objectives Names
Abstract of Metro Style Application Introduction to Metro Style Application History Develop Metro Style Application Developing Metro Style Application with HTML5 Metro style application vs desktop application Features Applications Benefits Conclusion References

Page no.
05 06 09 10 11 24 26 28 29 30 31

4 Metro Style Application

1. Abstract of Metro Style Application

Metro Style Application is based on a language called Metro design language in which Metro is the codename of a typography-based design language by Microsoft. A key design principle is better focus on the content of applications, relying more on typography and less on graphics. Metro Style application are touch-screen-friendly apps written especially for Microsoft's WinRT programming interfaces. These are flat colored live tiles application and specially used for windows phone and tablets. These are full screen applications tailored to users' needs, tailored to the device they run on, tailored for touch interaction, and tailored to the Windows user interface. These are single screen apps that will likely run on smaller form factors more often than a desktop or laptop PC.Windows 8 is highly build up on Metro Style. Metro application also make use of the cloud more than ever for data storage. And are required to stay open unless rebooted or via task manager. These are designed for multitasking(Snapped view, Filled view) and can be deployed in multiple locals and languages so it fills the requirement of user and it is very fast as compared to others .This is the main reason why great companies like Microsoft are using them and build a whole operating system on it.

5 Metro Style Application

2-Introduction to Metro Style Application

Metro is the codename of a typography-based design language by Microsoft. A key design principle is better focus on the content of applications, relying more on typography and less on graphics ("content before chrome").

The design style's main objective is to remove any chrome and extra decoration and allow users to interact directly with content. It's all about the content and the beauty of simplicity. It's Microsoft's hope that the Metro style will allow users to have the same experience everywhere on phone, tablet and desktop. There will only be slight differences due to the nature and

6 Metro Style Application

specificities of each device but the design and aesthetic will be recognizable and branded as Metro. These are full screen apps and in the form of tiles. The applications tile is an opportunity to provide value to users even when they are not using apps.It gives the user the sense that there is something going on with his app, and is an invitation to go back. Tiles can be updated even if app is not running. Push notifications can be used to remotely update a tile on screen. From the figure it can be seen that tiles are used to showing the application and a weather application is used to show its working. The application shows only the content i.e. the temperature and the condition in the local .If you want to know more than you have to click on the particular point and the information will be displayed step by step as according to users desire. Metro apps are touch-screen-friendly apps written especially for Microsoft's WinRT programming interfaces. ARM-based Windows RT devices, such as the Surface tablet, will require Metro apps. Devices running Windows 8 are expected to be able to run on Metro apps. It's important to focus on being great at one thing and to remember that content should come before chrome with Metro style.It mainly contain following things. 1. App Bar- The app bar is located at the bottom of the screen and is shown by swiping up from the bottom edge, or down from the top edge. It contains commands that are relevant to the current screen. 2. Navigation Bar- The navigation bar is located at the top of the screen and is activated by swiping up from the bottom edge of the screen, or down from the top edge. It is used to navigate between different sections of an application. 3. Charms- They are shown by swiping left from the right edge of the screen. They include commands such as "Search", "Share", "Settings", "Devices", and "Start". 4. Hub Page- The Hub page is the user's entry point to the app. Hub screens use tiles in a grid layout to make the content visually interesting and easy to interact with. The Hub is supposed to engage users, showcase the most important content, and allow them to navigate to different sections of the app.

7 Metro Style Application

5. Section Page- Section pages are the second level in the hierarchical structure. The content can be displayed in any form, including groups of tiles or lists. Each content item is linked to a detail page that elaborates on it. Selection pages are accessed by tapping on a "see more" tile or header on the Hub screen.

6. Detail Page- The detail page is the lowest level in the hierarchy. The content can
include text, pictures, video, or songs.

8 Metro Style Application

3-HISTORY
The design language is based on the design principles of classic Swiss graphic design. Windows Media Center -Early glimpses of this style could be seen in Windows Media Center for Windows XP Media Center Edition, which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. Zune-In 2006, Zune refreshed its interface using these principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome. These principles and the new Zune UI were carried over to Windows Phone (from which much was drawn for Windows 8). The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune's previous Portable Media Center based UI. Windows phone- Flat colored "live tiles" were introduced into the design language during the early Windows Phone's studies.

9 Metro Style Application

4-Develop Metro Style Application

Unlike other competitor platforms that dictate that you build apps with a specific language, Microsoft provides two distinct tracks for building Metro applications. If you have experience creating WPF and/or Silverlight applications than you can leverage those skills by building new, or converting existing applications to, Metro apps with XAML and your choice of language (C#, VB, C or C++). If one has experience creating traditional standards-based web applications than you can leverage those skills by building Metro applications with HTML/CSS3 and JavaScript. The UI technology you select will dictate which language youll use and vice-versa. Existing investments in either XAML-based or HTML/CSS-based design assets will not be lost since you can leverage either based on which option you choose. In the end, WPF and/or Silverlight developers, as well as HTML and JavaScript developers, will all find themselves right at home building Metro applications. So there are two ways1. XAML (Extensible Application Markup Language) as a user interface with c++ or C#. 2. JavaScript (WinJS) as user interface with HTML5 and CSS3.

10 Metro Style Application

5-Developing Metro Style Application with HTML5

Metro apps are not cross-platform. They are native applications designed to run on Windows 8 exclusively. This is an important distinction that developers who are using

HTML/CSS/JavaScript need to keep in mind. Just because you are developing with HTML, CSS and JavaScript that does not mean you are creating a cross-platform web application. All of the HTML, CSS and JavaScript features you expect when building web applications are available when building a Metro app. In addition, you also have access to all of the objects in WinRT. When creating a Metro style app, you will be building a standards-based web application that runs within the Metro version of Internet Explorer 10. The Metro version of Internet Explorer 10 does not support plugins (Flash, Silverlight, etc.) but the desktop version of Internet Explorer 10 does. Metro apps run within an app container that limits what an app can do to protect the user from malicious apps. If your app requires access to specific system resources, you can select to provide access to specific system resources through the Capabilities tab on the package.appxmanifest dialog. So there are basically four part require to build a metro style application. 1. Packaging & Runtime 2. Web Platform 3. Process Lifecycle 4. WinRT Platform

11 Metro Style Application

5.1 Packaging and Runtime

Packaging contain 5 element in application package. 1. HTML 2. CSS 3. JavaScript 4. Resource 5. Manifest

An app container that is provided by windows operating system allow to run the app on this. An application code is built by some coding of its element. App code is given to HTML host process and app container provide execution environment to run this code. Now which Element do what thing, is explained as-

5.1.1 HTML5-It gives different tags like title, text meta and main focus to provide
content. Its new text, input, audio, video tag gives special appearance to content.so it givesa). Controls b) DOM touch API c) Content

12 Metro Style Application

The syntax for html code is<DOCTYPE html5> <Html> <head> <meta charset=utf-8/> <title>MyCoDemo</title> <body> <label for=firstname>Firstname: <input type=text id=first Name> </label> </head>

13 Metro Style Application

</html>

5.1.2-CSS
The new version of CSS i.e. CSS3 is used in it.It is used in it for different purpose Media Queries-It is used for device orientation and flexible design of app.Its example is @media screen and (min-width: 1200px) { #header-image { background-image:url ('large-image.gif'); } }

CSS Layout-it gives

CSS Grid, CSS Flexbox, CSS Multicolumn. Native performance. Handle snapped and filled view states Handle rotations.

Transforms and Animations-It gives an app Look and feel great effect. Fast and fluid performance
Scroll view- CSS Scroll Views give you: Support touch, mouse, and keyboard Stick to the finger experience for panning and zooming Consistent user experience with rails, inertia, and boundary feedback Support for snap points, nesting, and chaining.

14 Metro Style Application

5.1.3. JavaScript
WinJS is a Microsoft library for building Metro style apps with JavaScript. It provides the Metro style design, support for touch as well as keyboard/mouse user interaction, common UI controls and scales across different screen sizes and form factors. You will find the WinJS library files in the winjs folder in your project. It is mainly used as a user interface for metro style apps. WinJS contains of-

Pages- Metro Style apps feature in-line navigation without tearing down the whole
screen. WinJS Pages give you: Load and unload chunks of HTML + CSS + JS code directly inline into your user interface

Page content can be dynamic including other WinJS controls within it. Animation Library- Metro style apps feature fast and fluid animations.
CSS Animations give you: CSS 2D Transforms, CSS 3D Transforms, CSS Transitions, CSS Animations Smooth, independent composition doesnt block UI thread.

Stylesheets- Metro style apps have <text> WinJS Stylesheets give you: Dark & Light Default visuals that map to the Metro style design. Well-defined CSS Selectors you can use to over-ride and customize the visuals to map to your own apps branded look. WinJS Promise- Metro style apps have user interfaces that are always responsive. WinJS Promises give you: Handle asynchronous operations without blocking the UI.

Consistent programming model.

WinJS Binding- Metro Style apps are alive and connected to data (from the web or the PC itself) and let users view and consume it. WinJS Binding give you:
15 Metro Style Application

One way data binding. Asynchronous notifications. Programmatic binding. Declarative binding.

ListView AppBar
JavaScript has: o Global scope o Function scope o Defaults to global

Module Pattern(function () { var a = 10; function somePrivateStuff() { a = 15; } WinJS.Navigation.navigate("/html/firstPage.html"); })();

5.1.4. Resourses-Resource like Web camera, photo library, encrypted data, home
group, user drive, user location, stored data are used.

5.1.5. Manifest-Manifest designer is used for application.

16 Metro Style Application

5.2. Web Platform

To carry these apps to web application we use Internet Explorer 10 as mediator which provide web platform.App code with the help of packaging embedded into it & by help of Windows Runtime app container run this app on web.

The application package that is created by html,css and JavaScript is use in this as a app code .It is combine with the web platform.App container provide it a execution environment to run the app code on this.

17 Metro Style Application

5.3-Process Lifecycle
A Metro app exists in one of three states: not running, running and suspended. Fortunately, Microsoft handles the transitions from state to state for us, but we as developers are responsible for managing any information that the user is expecting to be saved between states. When a running app is suspended because another app has been switched to (or launched), the running app receives a suspend notification from the operating system. At this point that we can handle saving any data during the transition. A Metro app offers three ways to store session state information.

You will use the first way to save session information, using sessionState, to store temporary data or option selections that the user expects to be maintained when they switch back to the suspended app. For example, suppose a user is filling out a data entry form and switches to another app for a moment or two and then they switch back. They will expect their values to remain in the form.

18 Metro Style Application

WinJS.Application.sessionState.firstName = document.getElementById("firstName").value; When an app resumes from a suspended state, you can use the data from sessionState to reload your app with data.

document.getElementById("firstName").value = WinJS.Application.sessionState.firstName; You will use the second way to save

session

state

information,

using

Windows.Storage.ApplicationData, for saving application-specific data like configuration settings. The third way involves saving the information the user has entered into the app. In the text editing app example, this would involve saving the actual text the user typed to a permanent data store such as a relational database or XML file. How you perform this is up to you as the developer. Introducing Suspend System resources focused on the app that the user is intracting with the foreground. Inactive apps have no impact on battery life or responsiveness, they are suspended by OS. Enable instant switching between apps.

Termination System needs more memory. User switch occurs. User close the app. System shutdown. Apps crush.

App do not get notified when they are getting terminated.

19 Metro Style Application

 Saving/Restoring User Session StateOnly save and restore user session metadata

HTML/JS Use WinJS.Application.sessionState object Property bag that automatically serializes to disk during suspend. Reloads property bag from disk on activation. Smart about not reloading state if app crashed. Splash Screen During Activation System provided splash screen mechanism provides consistent transition to your
app.

Shown while windows launch your app. Presented during activation. Developer provides color and image in app manifest. Apps need to present a window within 15 seconds of activation or the app will be
terminated.

20 Metro Style Application

5.4. Windows Runtime

WinRT has over 1,800 different objects providing services for you to use. These services include file system access, communications and networking access, device and printing access and so on. Metro style Apps run within an app container that restricts what an application can do in order to protect the users machine from malicious apps. Regardless of whether the app is a Metro App or a Desktop App, if its a C# or Visual Basic app it compiles to the same MSIL.

Both C# and Visual Basic can call directly into WinRT for system resources not available in .NET, accessing the sensor inputs for example. C, C++ and JavaScript Metro style Apps only access WinRT. Think of using WinRT like you used to call the Win32 API to access the operating system services, but instead of having to use something difficult like P/Invoke() or COM, youre doing it in a much more familiar way.

The functionality of the following code isnt important for the moment, but notice the using statements and the reference to FileOpenPicker. Windows. Storage and

21 Metro Style Application

Windows.Storage.Pickers are WinRT references and FileOpenPicker is a new WinRT class for selecting files.

using Windows.Storage; using Windows.Storage.Pickers; var picker = new FileOpenPicker(); picker.FileTypeFilter.Add("*"); var files = await picker.PickMultipleFilesAsync(); foreach (StorageFile file in files) { listBoxFiles.Items.Add(file.FileName); }

WinRT software (referred to as Windows Store apps) can be downloaded and purchased by endusers. WinRT applications can also be coded using HTML with JavaScript in code-behind, which are run using the Trident rendering engine and Chakra JavaScript engine, both of which are also used by Internet Explorer. When coding a WinRT app in JavaScript, its features are adapted to follow JavaScript naming conventions, and WinRT applications run within a sandbox and
22 Metro Style Application

require explicit user approval to access critical OS features and underlying hardware. File access is restricted to several predetermined locations, such as Documents or Pictures. WinRT applications for Windows 8 and RT are packaged in the .appx file format; based upon Open Packaging Conventions, it uses a ZIP format with additional XML files.[11] WinRT applications are primarily distributed through an application store known as Windows Store, where namespaces are also mapped to JavaScript objects.

23 Metro Style Application

6. Metro style application vs desktop application

In this figure at bottom there is windows core OS services, every thing operate on top of this. The difference is that for desktop you actually developing for Internet Explorer or win32 or for .NET perhaps Silverlight. If you doing for IE you will code on HTML and JavaScript for win32 you might be developing in c or c++, & c# for .NET. So you have to adopt different style for working on different task which is not the case with the metro style application. In metro apps ,everything run on WinRT APIs .It interact with all the thing such as integrating with devices &printer ,device and media or access file IO from hard drive. So

24 Metro Style Application

either you are developing with XAML and c/c++ or c# or HTML and JavaScript, you can run with same API.

Metro Style Apps 1.These are full screen applications. 2.It has separate Platform.

Desktop Apps
These are not full screen applications. These run on desktop area.

3. Here you create app in that new start menu. Click That just the basic program like notepad, MS
on the button in the start menu to open your own app. Word, AutoCAD... Writing in the know language Here you can write the app also in html5/JavaScript such as C++, C#, VB. or c#.

4. These applications are essentially designed to The desktop version is usually larger, more
access small amounts of data and stay away from file information that is not important to the application. This keeps the apps snappy and responsive but theyre also confined to smaller services. powerful and requires more data, although because it does need information from multiple locations, it traditionally requires a bit more time to boot up and load.

5. These applications are all approved by Windows, The desktop versions are larger and can be
and usually the very best applications run well and purchased from a local retail store or downloaded dont have any kind of malware or bloatware. from a third party website. This gives you a However, if the publisher ever runs afoul of greater advantage for finding the kind of program Microsoft, the app can be completely removed from you need. The lack of an App Store for these apps the App Store, which means youll lose out on increases the chance of malware installing with the app, though. updates. This does not use any tiles.

6. This use tiles to show status of application.

25 Metro Style Application

7. Features of Metro Style Applications

7.1 Power Efficient- Microsoft has detailed its power efficiency work for Metro style apps
previously, involving suspending apps to save power, but the company is now revealing exactly how the method works. Metro style apps, available from the Windows Store, will effectively suspend any memory consumption while they are not being used.

7.2 Memory efficient using hibernate technique- Although the memory in working sets
of Metro style apps will still be allocated to the individual app, Microsoft has developed a method to reclaim memory from a suspended Metro style application. If the operating system, or other applications, require additional memory then Windows will simply write the whole (private) working set of a suspended Metro style app to disk to free up memory. The process is similar to the company's hibernation technique, used to suspend Windows itself to disk to avoid power use while offering a faster resume time than the traditional Windows boot.

7.3 Support Multiple Screen Sizes- It support multiple screen.it means that it can be run on
either phone, tablets ,laptop or PCs. It uses media queries to support multiple screen formats.

7.4 Touch Screen- These are touch screen. We can swipe to one app to another just by touch. Touch
enabling is provided by JavaScript user interface.

7.5 Fast- These applications are very fast. 7.6 Secure- These are secure apps. We can protect it by providing user name and passwords. 7.7 Live Tiles-This is main feature of this type of applications. The apps are in the form of tiles and
these tiles also move to show running applications. More description about tiles are as-

26 Metro Style Application

App tile is an opportunity to provide value to users even when they are not using your app. Gives the user sense that something is going on with your app, and an invitation to go back. Tiles can be updated if app is not running. Push notification can be used to remotely update a tile on the screen. Great for showing newest content to users.

27 Metro Style Application

8. Applications
8.1 Windows Media Centre- Windows Media Center is a digital video recorder and
media player developed by Microsoft. It is an application that allows users to view and record live television, as well as organize and play music and videos. The application is included in various versions of Windows XP Media Center Edition, Windows Vista Home Premium and Ultimate, and all editions of Windows 7 except for Starter and Home Basic. It is also available for Windows 8 Pro as an add-on.

8.2 Zune- Zune was a brand of digital media products and services developed by Microsoft.
Zune included a line of portable media players, digital media player software for Windows PCs, a music subscription service known as a 'Zune Music Pass', music and video streaming services for the Xbox 360 game console via the Zune Software, music, TV and movie sales, and desktop sync software for Windows Phone.

8.3 Windows phone- Windows Phone (abbreviated as WP) is a series of proprietary

smartphone operating systems developed by Microsoft. It is the successor to Windows Mobile, although it is incompatible with the earlier platform.

8.4 Windows 8- Windows 8 is a personal computer operating system developed by

Microsoft as part of Windows NT family of operating systems. Windows 8 introduced major changes to the operating system's platform and user interface to improve its user experience on tablets, where Windows was now competing with mobile operating systems, including Android and iOS.

8.5 Windows 8.1- Windows 8.1 is an update of the Windows 8 operating system. First
unveiled and released as a public beta in June 2013, it was released to manufacturing on August 27, 2013, and reached general availability on October 17, 2013, almost a year after the retail release of its predecessor.

28 Metro Style Application

9. Benefits
9.1 To Users9.1.1 Great in multiple view and multiple form factor-It can viewed in multiple way
so it is user interactive.

9.1.2 Interactive and touch first- It uses different interactive user interfaces and also
touch enabled. Therefore great for users.

9.1.3 Easy to use- By the use of tiles, it is very easy to use. 9.2 To Designer9.2.1 Good Performance- It is fast and responsive, so it performs well. 9.2.2 Development is easy-It use simple coding of html, css and JavaScript so it is easy for
the purpose of development.

9.2.3 Choice of language- In it we have a choice of language to build an application. We

can either use XAML with C++/c# or JavaScript with HTML and CSS.

29 Metro Style Application

10. Conclusion
These are designed for multitasking(Snapped view, Filled view) and can be deployed in multiple locals and languages so it fills the requirement of user and it is very fast as compared to others .This is the main reason why great companies like Microsoft are using them and build a whole operating system on it. Metro app has an impressive list of new features that will make it an attractive desktop operating system upgrade for both IT managers and users alike. Metro allows for both the present and the future if one wants both. If you want a future with touchscreen devices, you need to do something in the present to get there. Microsoft feels this is the best way and I can see why they think that. Metro apps is much more than just the UI; WinRT is great and brings a lot of new cool things developers can do to make our computing better. The way a Metro application functions on the desktop will be the same as it functions on a tablet or on a Windows Phone. Using the new Windows runtime WinRT, programmers can create for all compatible architectures at once. No longer does a coder have to worry about the difference between the calls of the x86 versus ARM architectures. Also, WinRT allows the user interface to be designed using familiar HTML or JavaScript. Plus, the power savings typically found on mobile applications can now automatically translate to the desktop applications as well. These are the main reasons why metro style application is getting so much popular.

30 Metro Style Application

11. References
[1] Getting started to metro apps by Ben Dewey. [2]Charles Petzold Prepping Metro-Style Programming Windows 8 Book. [3]Metro Revealed: Building Windows 8 Apps with HTML5 [4]JavaScript by Adam Freeman. [5]Code Magazine [6]HTML5 : Up And Running by Mark Pilgrim [7]JavaScript: The Good Parts by Douglas Crockford

31 Metro Style Application