Windows store HTML 5 Universal Apps and the datepicker control

Nowadays is possible to build an windows store app that will work cross Windows platform, i mean it would work in Windows 8.1, Windows RT and Windows Phone 8.1.

The support for this developing model was announced by Microsoft  sometime ago.

https://dev.windows.com/en-us/develop/building-universal-windows-apps

This development support was made in 3 phases a first phase when it was supported using defines in the code, a second phase with the Shared code and override concepts (https://dev.windows.com/en-us/develop/building-universal-windows-apps).

In my opinion the way Microsoft build this universal development environment was the right one and comparing with the other players i would say that for developer’s this is the better platform.

The universal development model respects the fact that HTML 5 is a first class citizen and with WinJS a way to code natively to all the Microsoft Windows 8.1 platform.

Some months ago i start with a team at Innovagency the promotion of a big Windows 8.1 store app (only desktop and tablet) to Universal APP to bring also the support to the Windows Phone. The original app was developend in HTML 5 and WinJS and this new Universal app will also be developed that way.

When developing a Windows Store Universal app there are a lot of chalenges nowadays and one off them is what native controls exists in the different flavors of the platform. Especially in the case off WinJS controls not all controls had come to Windows 8.1 on the phone.

Microsoft had decided not to implement the following WinJS controls on the Windows Phone.

Object name	Description
BackButton object and all its members	Not needed. Apps that target Windows Phone should listen for the hardware backbutton event. See WinJS.Application.onbackclick
CellSpanningLayout and all its members	Use GridLayout or ListLayout instead.
DatePicker object and all its members	Use SELECT and OPTION HTML elements.
Hub object and all its members	Replace with the Pivot control. See section above.
HubSection object and all its members	Replace with the Pivot and PivotItem controls. See previous section.
SwipeBehavior enumeration	Replace with phone-appropriate gestures.
Flyout object and all its members	Navigate to a new page or use the Windows.UI.Popup context menus.
Menu object and all its members	Navigate to a new page or use the Windows.UI.Popup context menus.
MenuCommand objectand all its members	Navigate to a new page or use the Windows.UI.Popup context menus.
NavBar object and all its members	Replace with AppBar and AppBarCommand controls.
NavBarCommand objectand all its members	Replace with AppBar and AppBarCommand controls.
NavBarContainer objectand all its members	Replace with AppBar and AppBarCommand controls.
Rating object and all its members	Use SELECT and OPTION HTML elements.
SearchBox object and all its members	Use INPUT HTML element with the type attribute “text”.
SettingsFlyout object and all its members	Navigate to a new page or use the Windows.UI.Popup context menus.
TimePicker object and all its members	Use SELECT and OPTION elements.
Tooltip object and all its members	Navigate to a new page or use the Windows.UI.Popup context menus.

Source of this table can be found at Microsoft in the following URL:

https://msdn.microsoft.com/en-us/library/windows/apps/dn632432.aspx#unsupported_apis

This means when building Windows Universal APPs this controls will be considered not supported s cross platform since they are not supported by the rendering engine of Windows Phone 8.1

At this time our reader may say but i had listen/read that WINRT is shared along the distributions of Windows 8.1, true but only partial.

One off the controls that is not shared in WinJS is the DatePicker, the main reason for that is that in HTML and Javascript there are many ways to build Date Pickers, but imagine that you are promoting a Windows Store app that was built-in HTML to a Universal APP.

Or let’s imagine that we really need or want to have the Date Picker the same way you are used to in WinJS when building Windows apps. We understand the Microsoft option but this disruption is not uniform with what happen in the XAML development UI model.

In my team case we were promotion a Windows Store APP to Universal APP and we get in trouble since we have a lot of user interface logic based on the DatePicker.

The optimal solotion would be to have the control in both devives ( phone and desktop/tablets) or at least a control that has the same behaviour and methods.

Sebastian Gomez is a developer who had the same problem and had strat to build a first implementation of WinJS datePicker (https://github.com/sebagomez/windows-phone-winjs-datepicker ). The only problem to use this in the context we had present above is that thiss control does not map every methods and properties the original WinJS control have.

Me and my team had extend the explendid work of SebaGomez and anchieve a solution that give us that desired behaviour, we had mantain gomez as the prefix of the namespace as a way to mantain the intelectual property to Gomez.

The instation of the control can be made the same way as a common WinJS control or the original WInJS control of Windows.

First of all you should copy the files  Goomez.UI.DatePickerv2.js (implementation of the date picker ) and rx.lite.js (heper class to make easy the implementation of the DatePicker control) to your development enviroment.

In the view where you intend to instatiate the DatePicker:

– in the head make a reference to the files needed respecting the order of the files

 

– You can instatiate the control using a HTML tag where you declare the type of the control as being our control, like in others WINJS cases

– you can also instatiate the control dynamic form like you would do with any other WinJs control.

As you would do in a normal WinJS control. The usage of this control in the code is the same you are used to in WinJs controls. We had tried to implement every method’s the original WinJS DatePicker has in their interfaces.

I terms of interface the user experience is similar to the native datepicker avaiable in Windows 8.1.

On challenge the ones who will use this control may feel, is how to interact directly with the control deleting or upgrading information, if that is the case always remember that you are dealing with select box, so remember the DOM concepts and will be as easy to use this control as is with the original DatePicker.

You can get our files from the github public repository amarreiros/WinjsDatePicker_Phone, feel free to use the code and collaborate.

You can also get the original DatePicker from SebaGomez GitHub.

A special thanks to Gomez for the initial code and also to my team in Innovagency who had correct some bugs my extension had.

Speaking at Microsoft PT Technical Refresh

 

Last Month Microsoft Potugal had invite me to make 2 sessions at the Microsoft Tech Refresh an event to show the development community what’s new and what’s caming next you can have a look ate the agenda in the figure

I was responsible for the deliver of the sessions  Web Application Development using WinJs and Universal Apps Development using HTML 5 and WinJS.

Was a good experience once more i had discover that few people had explore and know the really potential to use HTMl and WinJS on the development of Windows store apps. Was a great event and i was blessed with a great audience in my sessions very interested people with the potential to raise a technical discussion taht will lead them to learn more.

Thanks Microsoft Portugal for this amazing opportunity and a special thanks to the technical community taht once more had recieve me very well at the stage.

You can find the resources of this sessions at my slideshare.

Windows 8 Security

One of the main focus of Windows 8 development is the web development community and the idea that this is a great opportunity to make the evolution from Web development to App development. I also defend that theory and i think that this is a real deal and opportunity, but what i always say at the training sessions is that in app development we must consider a lot of little things that some of Web developments normally don’t do.

In my Windows 8 training sessions for WebDeveloper’s one of the things i keep remembering to my student’s is the security and performance mindset a app developer must have.

 

Today i found at the MSDN magazine a great article about the security part and that follow the same guideline i defend i would suggest to all the Web developer’s that had start to build Windows 8 app’s or to the core Windows 8 developer’s that are in the HTML 5 + CSS + JS to give a look at this.

http://msdn.microsoft.com/en-us/magazine/jj721591.aspx

Azure and Windows 8

Many people had been asking around why the surface and some other tablets that will be powered by Windows 8 have a little percentage of available memory.

As far as i am concern i think this is not a fail but a vision of the new times, Cloud is here do we really need big disk’s if we are almost always conected?

The next question that some people ask me in the developer quorum is “Ok so i guess i can store my data on skydrive azure and that’s all”, that kind of reaction made me think yesterday.

Maybe people hadn’t seen yet how they can connect Windows 8 and Azure and what amazing things can be made for our app in the cloud.

So i would suggest all to read the blog post of Bruno Terkaly on of the Microsoft developer’s evangelist’s

http://blogs.msdn.com/b/brunoterkaly/archive/2012/07/11/what-windows-8-developers-should-know-about-the-cloud.aspx

If you are around Porto and go to the Microsoft Portugal WAWZapp event,  Nuno Silva a Microsoft Technical evangelist will also talk about these theme bu not only thinking in Windows 8 but also in the new Windows Phone 8.

 

Tell me about Windows 8 package

Ok so you are a windows 8 App developer you create packages that you install in your or in some machines, and maybe you had already submit to the store your app. But, what’s a Windows 8 package after all, in this post we will try to answer that question and show how everything is processed.

The windows 8 package is presented in the form of a file with the appx extension.

This file behaves as a zip file that contains some files and is descriptions and dependencies.

This file contain’s not only the app code but also a manifest the app resources an AppBlockMap and the libraries used by the application.

The manifest is the part of the app where we describe the capabilities of the app and her platform needs (webcam, Localization etc). The manifest describes also the app dependencies, and enumerate some of the identity of the app like the name and logos.

The AppBlockMap describes how the memory blocks of the application are assigned, the blockmap allow us also to determine what parts of an app have been updated between different versions of the application. This is particular useful to the store to optimize the download of the new version of an application sending only the blocks that are related to the new version.

*http://dev.windows.com

The appx contains also a certification signature that is given by the Windows Store to certified the application (in an initial stage this signature is given by the visual studio)

After publishing an app to the Windows store, any user who has access to the Windows Store can download and install your application.

When selecting install an app from the Windows Store, the appx package is downloaded to the device and installed automatically along with is dependencies. The installation process intends the creation of a folder where the app will be extracted.

The installation process will also make the necessary installations in the registry and enables the different needs present in the appx Manifest.

One of the questions the author can think right now is about acceptance of the Licence terms or the payment of the application, all this are integrated with the install action of the application in the store.

Cold dive into windows 8 runtime part 2

In the last post we had start diving into the WINRT, we had seen the basic blocks that made WINRT and define is role in to the Windows 8 platform, so let´s continue or journey in to the kernel of the Windows 8 runtime.

Windows Metadata & Namespace

Windows Metadata and namespace is the component part of WINRT that is the key to the ritch development experience we have in the WINRT.   And allow us that even in dynamic systems to have complete and concise information to describe the Windows Runtime.

You can extend and generate Metadata natively when using languages as C++ or C# and VB .net. The inner struture of the metadata is similar to the CLI Metadata defined in .NET, in reallity the metadata of winRT is an extension to the schema defined for the CLI Metadata.

This Metadata Mechanism is the support for the Language Projection runtime, is based on this Metadata System that Language Projection does it’s magic.

So we can define The windows Metadata system as the definition and structure of WINRT that support the runitime objects in Windows RT . The Windows  Runtime objects are in Simple and unified hierarchical namespace.

In development platforms everytime we talk about Runtime objects and metadata we end up explaining the defined basic types. In an explanation of WinRT that support windows 8, we will not have an exception, let´s take a look in to the Basic Types and take some notes about them.

• Strings :  WINRT defines characters chains as an handler, and the type is named as HSTRING, this defines that a string behaves as a pointer to a character chain at the runtime. This allows some optimizations at runtime level enabling the system to have only one instance foreach string content. This is equally true even between languages so if you pass a string value to a javascript function we will always have a reference parameter betwen functions. Once a string is changed the runtime does it’s copy if another handlers are looking to the same string.
• Primitive types: As primitive types WINRT defines int and Uint in some few cases pointers to primitive types are allowed we will see later in what scenarios this can happen. It is also supported simple arrays for this types.
• Enumerations: WINRT support enumerations.
• Interfaces: WINRT supports the concept of interfaces and generic Interfaces (pe. IInspectable, IInspectable<v>). interfaces are the soul for the Version support in WINRT.
• Strutures: WINRT supports also the concept of Strutures that can contain String Fields but no interfaces. They are just named value pairs of fields. They only have public fields.

Of course all this conceptes are then maped when using Language projection to the technology we are using. For example let’s take the case of a string in C# it is imutable that behaviour will be mantained when we are using C# to program since that’s the natural behaviour of CLR. In the Backstage the CLR will handle this behaviour with the defined behaviour of the WINRT.

After this explanation one obvious question is where WINRT phisically stores his metadata, and how can i navigate to that place. To goto Windows metadata we have to go to the prompt and navigar to the system 32 folder where we can find the Windows System Metadata Store.

If we see the contente inside this folder we will discover that we have a lot of *.WinMD files.

The winmd files represent the windows metadata that self describe Windows Runtime objects. If we wanto to study this description files and analyse them we can do that using ILDASM since the schema of the metadata is based on CLI conventions.

If we choose to opne one off the listed files in ILDASM one of the things you will notice is that two new field descriptors appear:

This two descriptors work like flags to say to the runtime that they are descriptors to say that this files are Metadata files of windows 8.

If we keep navigationg with ILDASM in our metadata descriptor we will find that this file doesn’t contains il code and that all the definition are interface methods definition. We also discover that the defined type extends from the Windows runtime. The implementation of the method defined in the present interfaces are stored in the register in the named activation store. So we can say that the Metadata defines the struture of the Type or service and not his implementation.

And this is all for now, i hope you have understand what it is the metadata service how it is organized and what’s is her role in the WINRT, in the next post we will analyse the what are the windows runtime objects and how they behave.

 

Cold dive into windows 8 runtime

Nowadays we can found a lot of posts over the internet about new Microsoft windows 8 capabilities or Windows 8 Metro style Apps.  Since i am diving in to this platform since the public announcements of the developer preview, i decided today to take sometime to make a journey with you in a different view of windows 8.

I am talking about windows 8 runtime. This is the first post of our win RT journey.

Win RT is the codename that stands for Windows runtime, and is the software block of the new windows that powers metro style applications.

!important: remember that at the time of this written Windows 8 is at the consumer preview version so that can happen some slightly changes in the final versions.

Presenting WinRT

Presenting WinRT as a concept can be made on 4 different sentences:

• Is a bunch of Windows Management APIS used to build Metro Style applications;
• Is the runtime that manages the resources necessary to make a Metro Style APP run;
• Is the maestro between the different software blocks that connects windows core and metro style apps;

All the sentences above are true and complementary views so if we try to condense all this view in to just one we will found the definition presented by microsoft since the build event

“WINRT is the solid, efficient foundation to build and run metrostyle APPS”

Localize WINRT in Windows 8

After understanding what is and what the mission of WINRT, let’s position Metro APPS in to the Windows 8 Universe and find the action place of WINRT.

                                                                                         (image copyrights to Microsoft)

 As you can see from the figure above and as you maybe already know, windows 8 windows support 2 kinds of different interaction paradigm (and build) apps.

• Desktop Apps : the usual kind of applications we are used to in a windows operation system
• Metro Style Apps: apps that follow the patterns of Metro style principles

As you can see from the picture Metro Style Apps are supported by a bunch of APIS named Windows Runtime APIS, this APIs correspond to the programmatic service interface of Windows runtime over the Operating System Kernel (like win32 or .NET libraries) . Basically WinRT sits right on top of Windows as a thin layer, exposing functions of Windows. These functions can be used in Metro style apps from all languages.

The figure above shows the different APIs used by developers to build Windows 8, that provides the abstraction layer over the operating system.

• User Interface: Abstraction layer related to the handling of controls and other Visual and user interaction objects.
• Devices: Abstraction layer that gives the developer an abstraction over the different devices that are assembled in the machine where the operating system runs (sensors, GPS and others).
• Communication & Data: Abstraction layer over the communication between apps and systems.
• Fundamentals: The core of the windows Runtime this API is an abstraction layer over the basic computation processes and needs of the application like memory management, security and others.

But Windows Runtime is much more than just a bunch of APIS, the most beautiful part is the runtime system and our main goal is to deconstruct and understand how this runtime works, so let’s continue our journey.

Discovering Windows Runtime Architecture

Let’s make take a deep look in to the Windows runtime deconstructing and understanding his architecture.

Windows Core: correspond to the services of Windows;

Windows runtime core: Is a Layer that exposes the Windows services, definition of types exposure of interfaces, is the core of the runtime;

UI, Pickers, Controls; Media; XAML;Storage; Network;.. : Some APIS that live on the top of windows runtime;

Windows Metadata & Namespace: The runtime give us the concept of metadata for types, what allow us to manage and get in a natural way the runtime notions of types.

Web Host: A host for Web applications;

Runtime Broker: is a separate process that handles the security permission of separated processes like sensors or cameras;

Language projection: A mechanism that allows the windows runtime API be exposed in a different way according to the language in usage;

Language support: Is the implementation of the technologies to allow the support of windows runtime over the different languages (WINJS,  CLR )

Thanks to is design and architecture of Windows Runtime it is allowed to create applications over Windows 8 runtime that respect the fundamental software development principles:

• Major improvement of developer experience and freedom: thanks to the language projection and metadata developers can choose and use different languages without losing functionality and thanks to metadata we have great intellisense.
• Responsive and fluid user first: One of the principles of windows 8 programing is assyncronism, that option is imposed in some cases by the platform and WINTRT;
• APP Centric platform: Applications are isolated as they was in the past (with processes boundaries) but are possible the creation of contracts between apps and operating system and the manage of app to app contracts;
• Versioning: The runtime enables the concept of version in a way that each application as the reference of built and can run in future systems, because runtime knows how to get that information and can adapt to the needs of the application.

That’s all for now, in the next post we will take a look in to Windows metadata and to the way memory managed and objects are supported. Thanks for your attention and stay tuned.

Next posts:

 
cold-dive-into-windows-8-runtime-part-2