Showing posts with label Modern UI. Show all posts
Showing posts with label Modern UI. Show all posts

Monday, April 15, 2013

[C# and Win8] How to develop your first Modern UI application Part 3: Function declarations & Windows Store Deployment

In the last part we saw how to develop our first Windows 8 Modern UI application. I showed you how to create a very basic Image Viewer application. This part will show how to use system features (such as access to system resources or external devices) and how to deploy your applications via the Windows Store.

Application Manifest for Windows 8 Modern UI Applications

By default Modern UI applications do not have any access rights to system resources or external devices. You have to specifically allow and authorize those operations within the Application Manifest. In our example we had to edit the Package.appxmanifest file, as explained in the last blog post.

This declaration is especially important if you want to add your applications to the Windows Store. In fact, during the acceptance process, Microsoft verifies that the available functionalities are fully mentioned in your application description.

This is done to assure that everything is coherent, because Users need to know what access rights are required, if they want to install your applications from the Windows Store. Then they are able to decide if they want to download and buy your applications.

There are mainly two types of functionalities, for which access rights can be declared in the Application Manifest :

  • General functionalities : Media Files, Pictures Library, Removable Storage, Microphone, Webcam, Localization, Internet Connection, etc...

image

  • Advances functionalities : My Documents, Enterprise Authentication, Certificates, Share Targets, Background Tasks, etc...

image

You have to know that if you provide access to the advanced functionalities, then Microsoft will analyze your application in more details before your it can be made available on the Windows Store.

Windows Store Deployment

The Windows Store is the centralized and unique software distribution platform for Windows 8 applications. Customers find all sorts of Modern UI applications in the store. You can get more information here: http://www.windowsstore.com.

As already mentioned, applications are validated before they can be distributed via the store. This allows a high quality and controlled security access for all applications present on the store. There is a whole acceptance process, that each application has to comply on before it can be put on the Windows Store. It assures that applications work correctly, that they use only the accesses that are declared in the application description and that they comply to certain Modern UI design rules.

The validation is done by specialized Microsoft teams. It includes a thorough technical review, which aims at prohibiting malwares and viruses as well as unnecessary security accesses. Thus, a Windows Store customer may be confident to buy anything from the store without any risks of bad impact on his system.

Before you can distribute you applications on the store, you have to create a user account within the Dev Center for Windows Store Apps :  
http://msdn.microsoft.com/en-us/windows/apps.

The are two types of user accounts: individual accounts and enterprise accounts. You have to know that only enterprise accounts can submit applications using advanced functionalities.

After the account creation you are now able to submit your first application to the Windows Store via the the “Submit an App” button. Choose a name for you application, enter a meaningful description and apply for the technical review.

After Microsoft has validated and tested your application it will be available on the Windows Store. That’s it you are now ready to build you own Windows 8 Modern UI application and distribute on the Windows Store.


Share/Save/Bookmark

Wednesday, January 23, 2013

[C# and Win8] How to develop your first Modern UI application
Part 2: Source Code & Development

In the last part we discussed how to create your first Modern UI project and all the prerequisites for being able to start its development. In this part you will actually see, what developing this type of application really means.

Development of the Image Viewer application

For this tutorial we are going to create an Image Viewer application. The goal of this example application will be to display all the images in your local Pictures Library. You may reuse the skeleton project, that we have created at the end of the last blog post and apply the following steps to it.

Add some code that gets data from your local Pictures Library and execute your application. A best practice in Modern UI applications is to always use an asynchronous approach, which is why we use the GetFilesAync() method and the await keyword in the following example :

CodePicturesLibrary

You will see that there is an exception of type “System.UnauthorizedAccessException” :

Exception

Modern UI application do not have any access rights by default, which is why you get an error message, when trying to access your local Pictures Library.

So as first step you have to allow access to your Pictures Library. To do this you just have to double-click on the “Package.appxmanifest” file in the Solution Explorer. Then go to the Capabilities section and enable the checkbox “Pictures Library”. Save your modifications and there should not be any error message anymore, when you execute your application.

Capabilities

In the next step, add a new class ImageItem to the solution and implement the following code :

ImageItem

This class will be instantiated for each picture in your local Pictures Library. It contains the picture itself, the picture name and a short description.

Add a GridView to the “MainPage.xaml” file, that is going to be used for displaying the pictures from the local Pictures Library :

GridView

Here is an example implementation of the whole code that could be implemented for the Image Viewer application in the “MainPage.xaml.cs” file :

Example

When executing the application, you will get a display of all the pictures that are currently stored in your local Pictures Library :

Fig9_Image_Viewer

If there are no pictures you will get a message that there were no pictures found :

NoPictures

This concludes this part. I am going to show you how to further configure your applications in more detail, as well as how to publish them in the next parts of the series.


Share/Save/Bookmark

[C# and Win8] How to develop your first Modern UI application
Part 1: Prerequisits & Project Creation

This tutorial is going to show you how to develop Modern UI applications (also called Metro-style applications). You will see the different steps such as creation and configuration of the project, the development using Visual Studio 2012 and its deployment on the Windows Store.

Modern UI applications can be developed using multiples languages. So if you are experienced in web development (HTML5/CSS3), .NET application development (XAML/C#, VB, or C++) or DirectX application development (C++), you already have the necessary skills to develop your first application.

Fig1_Presentation_Modern_UI

There are multiple display modes for Modern UI applications. You should know that by default they are border-less and full-screen (but you may change that).

Modern UI applications may currently only run on the Windows 8 and Windows 2012 operation systems. But they are running on all devices that are compatible with those operation systems (Desktop PCs, Laptops, Tablets, etc…).

Prerequisites for Modern UI applications

To be able to develop you first Modern UI application you have to have some prerequisites in place. Here are the technical requirements :

  • Windows 8 (Professional or Enterprise) / Windows Server 2012
  • Visual Studio 2012 (Professional or Ultimate)
  • Developer License (see below)

That is all ! After installation of those products you are now able to create your first Modern UI application project.

Project Creation

Start Visual Studio 2012, make sure that .NET Framework 4.5 is selected and click on “New Project” (you may also do this from the menu by clicking on “File” / “New” / “Project”). Create a new project of type “Blank App (XAML)”, which you may find under the “Windows Store” section.

Fig3_Creation_Nouveau_Projet

If this is the first time you have ever created a Modern UI application, you will not have a valid developer license for Windows 8. But this is really no problem, since you may ask for one for free.

You now have to connect yourself with a valid Windows Live account, then the system will present you with the following dialog. Just click on “I Agree” and the developer license will be downloaded to your system.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCTTWFYja5NvLW5iozWrjMqv_F6vB-wJuCP3y9PO6ThnGfaqLzqVrPq4uQCGmRhpkRutBbfGH7Xz5Ift053pPwwklb68XilLsJ0hmfAxutR14lxHH93NOUq-KEL80BDJKZE8TaepGsWolmKo/?imgmax=800

If you already had a license but it is not valid anymore (licenses are currently only valid during 1 month), then you have to renew it. For being able to develop Modern UI applications you have to have a valid developer license all the time.

The skeleton of your new application gets now generated. In the next parts of the series we will continue with the actual development of the application and see how to debug and in the end deploy it.


Share/Save/Bookmark