Showing posts with label Windows 8 Metro Apps. Show all posts
Showing posts with label Windows 8 Metro Apps. Show all posts

Monday, January 2, 2012

Codeacademy

Thinking of building some new skills this year? How about learning to code for free in 2012? Then (http://www.codecademy.com) is just the site for you. Codecademy Labs is a place for you to program in Ruby, Python, and JavaScript online without downloading a code editor or IDE. Share your programs with friends and use your knowledge from Codecademy lessons!




With developments in JavaScript gaining steam and great support by Microsoft and Google in enhancing the JavaScript engine, now is the best time to learn to JavaScript. Visual Studio 2011 now has full support for building Metro Style Apps using JavaScripts. Build dashing websites or blogs with a little JavaScript, HTML5 and CSS3.

Here is a great introduction to HTML5, JavaScript and CSS3 to whet your appetite:



Codeacademy JavaScript Console

image

Codeacademy Ruby Console

image


Codeacademy Python Console

image


Intro to codeacademy:

Tuesday, December 27, 2011

What are Windows 8 Contracts?

image

Contracts are the glue that bind Metro Style apps together with the system UI. Different Metro style apps can talk to each other if they have implemented the same contract. Basically, contracts provide Share, Search and Picker and other services to apps. Apps can implement one or more contracts to interact with the system in a fluid way.

Share Contract

image

Both Socialite and Tweet@rama have implemented Target Share Contract.

image

image

Share lets you share data from one app with any other app that has implemented a share contract. A Source app is the one which provides something to share. A Target app is the app being shared through. This data interchange is made possible through a set of common formats. Every app, where possible, should implement a Source share contract. Apps that produce or store content, news, information, data should implement a Source Share contract.

Apps such as Mail, Social Networks, Chat, Note Takers, Image Editors, Translator Apps etc should implement Target Share Contracts,

Search Contract

image

Search enables searching from anywhere within Windows 8 within your app. This is generally recommended than building a search within your app because the search functionality is standardized across all apps. The apps that show below the search box are all the apps that have implemented the search contract. So, the context of your search will change depending on your app. You don’t have to search app to app any more. With Search Contracts, you launch search from a single place across all apps.

Apps that browse or create dynamic content, then such apps will benefit from implementing search contracts.

Search is probably not useful for games/utility apps.

Picker Contract

image

image

Picker contract allows other apps to choose content (pictures, documents, media etc) from you app. If I wanted to change user tile, I can choose a picture from my desktop or any of the apps that have implemented the Picker Contract. Note the apps: Socialite, Photo Feedr, Shutter Web and Skydrive have implemented the Picker Contract.

image

image

I just grabbed a picture of mine from Socialite app.

Implement a picker contract, if your app:

  1. accesses or stores files that would be useful to other apps
  2. keeps data in a service (cloud, social network)

Summary

In summary, contracts enable apps to power Windows 8 experience. You need to implement the right contract for your app. Avoid creating redundant services that is already available in Contracts.

Saturday, December 17, 2011

Building Windows 8 Metro Style Apps

Great presentation by Ales Holecek here and the slides are here. My key take aways below:

Metro Apps can be built on C/C++/C#/VB with XAML or HTML/CSS/JavaScript. You will leverage the WinRT APIs that are built within the OS – these are rich set of APIs that let you do almost anything out of the box.

image

HTML5 is on equal footing as XAML.

image

All WinRT APIs that take more than 50 ms now support Async.

Note use of async below:

   1:          async private void Photos_Tapped(object sender, Windows.UI.Xaml.Input.TappedEventArgs e)
   2:          {
   3:              var picker = new Windows.Storage.Pickers.FileOpenPicker();
   4:              picker.FileTypeFilter.Add(".jpg");
   5:   
   6:              var file = await picker.PickSingleFileAsync();
   7:   
   8:              var image = new BitmapImage();
   9:              image.SetSource(await file.OpenAsync(FileAccessMode.Read));
  10:              Photo.Source = image;
  11:          }



Most of the WinRT APIs go directly to the system. However, some of the API go through a Broker. For example, a JavaScript based application trying to invoke a camera and microphone.


image


Use the appmanifest file to enable capabilities:


image


When you run the app, you will be prompted as seen below:


image


If you used JavaScript to build your app, you will be able to use the cascaded style sheet (CSS).


image


-ms-grid-columns and –ms-grid-rows is the new proposed Microsoft style standard that makes it real easy to display a Grid rather than use HTML Tables or JavaScript for alignment.


Below are the list of controls available for building Metro style apps. You can control and customize these controls by applying style sheets. These can be used in HTML5 as well as XAML.


image


When you are ready, you can upload your application to the Windows Stores which will be launched most likely in Feb 2012.


image




Until the Store is ready, you can build the package locally.


image


The folder below shows the local package:


image


The appx file (which is actually a zip file) is the installer for the application. There is no separate installer program required. All apps must now be digitally signed which is the .cer file.