42 posts categorized "UI"

04/08/2014

Fine-Tuning of Windows 8

An great session at the Build 2014 conference was about traps with the user interface design: "It's a trap! 3 remarkably common UI traps and how to avoid them in your designs". What's intuitive? There's no such a thing, it's only learned .vs. not yet learned. A one year old is learning to move objects. So the Microsoft design principle Authentically digital to take full advantage of the digital medium and remove physical boundaries are perfect. However, there are traps like "invisible elements". They are good for features like shortcuts for power users, but dangerous for critical features in the system. Remember search from Windows 8 and how it moved into the SearchBox of the app with Windows 8.1? Similar issues happened with search in Windows Phone and Xbox. Now I have to find out how users find share and and play to within my Picture Search app ;-)

This blog post is about Windows 8.+ features coming in Windows 8 Update, what's coming to Windows Store apps, and more.

UI Tuning

The upcoming releases to Windows 8 have some fine-tuning of Windows 8 features to make it more accessible. Windows 7 had some fine-tuning of Windows Vista to make good concepts like UAC (user account control) easier to use.

Windows 8 Update stays on this path. The turn off/shutdown button moved to the start screen. It can now be found easily, it's no longer necessary to click on the Start button as we learned with Windows 95, and it's not necessary to open the Charms bar as we learned with Windows 8. To click on the User name to sign out should be more easily detectable as well. Closing Windows store apps you no longer need to find out about the gesture with the move from top to bottom, just click the close button on top of the app. Of course for a power user, these features are not helpful, as how this could be done was already learned. However, what's great for power users as well is that Windows Store apps are listed in the task bar. You just need to find the setting Show Windows Store apps on the taskbar.

ShowAppsinTaskbar

The next version of Windows will also have the start menu back that contains tiles for Windows Store apps. Not sure if users could be happy with the start screen by that time anyway. With this version it will also be possible that Windows Store apps are running within a Window on the desktop. This way I can not only open three apps, but a huge number of apps on my big screen.

By the way, an easy way how to find out what users are doing with the app and what features of the app they do or do not find is by using Application Insights.  

Universal Apps

A great feature of the Visual Studio 2013 Update 2 are the Universal Apps templates. Having a more detailed look here, code sharing between projects could easily be done with earlier edtions of Visual Studio as well. Creating file links for code sharing is already described in my book Professional C# 5.0 and .NET 4.5.1, and Universal Apps are not part of the book. The really great feature is that Windows Phone Apps make use of the same Windows runtime like Windows Store apps, and the XAML code is very similar. More C# code and XAML code sharing between these platforms! It's interesting how the appbar switches automatically between the larger and smaller screen sizes for a tablet and the phone.

The Xbox One will be added to Universal Apps as well. Why this wasn't named "One App Model" instead of "Universal Apps" - I have no idea. Anyway, I like the name "Universal Apps" :-)

Windows Phone Silverlight 8.1 is the legacy version of Windows Phone programming. Instead of moving to the new model, the Windows runtime can be used from Silverlight phone apps as well!

Windows Store Business Apps

A great feature demonstrated by calling ADO.NET from Windows Store apps is the broker that allows calling into the complete .NET Framework. Of course, this is not allowed from apps in the Windows Store. This can be used for sideloading apps. This feature gives an easy way to use code from older applications such as Windows Forms applications, and give them a new UI.

What needs to be solved here is the licensing model for sideloading, the requirement of either the Enterprise editon or buying of sideloading rights for every device. Wait - this is solved as well! Enterprise Sideloading rights is granted to certain Volume License programs at no additional costs (starting in May-2014), and every customer can purchase Enterprise Sideloading rights for an unlimited number of devices for just $100,-. More information here in Windows for Business.

Sideloading rights together with using the complete .NET framework should create more interest for businesses developing Windows Store apps.

Summary

Windows 8 is on the way to make it easier for users to find features, both for touch and using keyboard and mouse. Windows 8.1 Update adds a lot for usability with keyboard and mouse.

With the application model, Windows Store apps, Windows Phone apps, and Xbox One are coming together. Using the same Windows Runtime, the same XAML. This move was expected, and makes steps into the right direction.

Many companies moved not to long ago to Windows 7. With this late update from Windows XP, creating Windows Store apps was not an option anyway. Because of the need to rewrite the code completely, and expensive licensing models depending on the company size, not a single thought was made about this. Now, as time progressed, the Windows Runtime is available in its second version with Windows 8.1, sideloading constraints removed, and it's even possible to use the complete .NET Framework from sideloaded apps, creating Windows Store business apps should get another thought.

Christian

CN innovation

 

09/02/2013

Grouping with the GridView Control - Windows Store Apps (XAML)

Representing data within Windows Store apps, grouping the data often is a very useful and appealing option. Visual Studio also offers a ready to use template to display grouped data by using the GridView control. Other than the default look that's given by the Visual Studio template, there are nearly endless possibilities. This article gives information on the templates of the GridView control and how they can be used to change the look of grouping data.

The Visual Studio template for the Grid app looks like this:

Grouping1

Another look using grouping is shown here:

MenuCardGrouping

With the MenuCard app (soon in the Windows Store), a list of menu items is grouped by a number of elements (6 or 8, depending on the screen size), and every group is shown in two columns.

Let's get into the source code. 

With the code generated from the Visual Studio template, the data is represented with a group and an item object. The group type SampleDataGroup is shown in the following code snippet. This type contains simple properties, and the property Items of type ObservableCollection<SampleDataItem>. The Items property leads to the items of the group.

Source Code: SampleDataGroup

The items are defined the type SampleDataItem. This type just consists of simple properties.

Source Code: SampleDataItem

From within XAML, the data is referenced via the CollectionViewSource. The Source property binds to the Groups property. Groups is a property of the SampleDataSource class that returns an observable collection of SampleDataGroup. Within a single group, the items of a group are referenced via the ItemsPath property of the CollectionViewSource. This is the Items property of the SampleDataGroup. To allow grouping, the IsSourceGrouped property is set to true.

Source Code: CollectionViewSource

The GridView binds to the CollectionViewSource with the setting of the ItemsSource property. Here is the complete definition of the GridView as it is created from the Visual Studio template.

Source Code: GridView

Maybe the most important part is the definition of the ItemTemplate. This template binds to properties of the SampleDataItem type.

Source Code: ItemTemplate

Item Template

Now let's change this template. Here' the size is changed, and a TextBlock element is added that bounds to the Description property.

Source Code: changed ItemTemplate

This change results in a different look:

Grouping2

Now it looks like with the larger templates, there's only one row of items. However, this depends on the screen resolution and scale as is shown here on a display with a lower scale:

  Grouping3

 Let's move on to another template, the HeaderTemplate.

Header Template

The header template that is defined with the group style defines how the header of the group should look like. The Visual Studio template generated code consists of a button with the title of the group, and the Chevron character. The button is used to navigate to another page of the app.

Source Code: HeaderTemplate

With a small change, the subtitle is shown as well.

Source Code: modified HeaderTemplate

Grouping4

For all the upcoming changes, the size of the item template is modified to a width of 240, and a height of 150. This allows to see multiple groups on a single screen.

Items Panel Template

The items panel is the panel for all the items - all the groups. To easily see the arrangement of the items panel, the background color is changed.

Source Code: ItemsPanel

Grouping5

As clearly can be seen, the ItemsPanel is the panel for all items across all groups. For arranging of the items, an ItemsWrapGrid is used. This panel arranges the items from left to right or top to bottom.

The ItemsWrapGrid supports grouping. The already defined GroupPadding property specifies the padding values between the groups. It's also possible to move the group header to the left instead of top with the GroupHeaderPlacement property.

By default, the items are arranged vertially from top to bottom. As soon, as the avaialble size is reached, the next column is started. This behavior can be changed by setting the Orientation property.

With the following screenshot, the background color is removed, the Orientation property set to Horizontal, and the MaximumRowsOrColumns set to 5 to only allow 5 elements in one row.

Grouping6

The ItemsPanel can specify any panel as its children, e.g. StackPanel, VirtualizingStackPanel, and VariableSizedWrapGrid. However, if grouping is used, not all the panels support grouping. Panels with grouping options are ItemsStackPanel and ItemsWrapGrid.

Summary

Item Template, Header Template, and Items Panel Template are important templates shown to arrange grouping with the GridView. The Header Template to define the header of the groups as it is specified with the Group Style, the Items Panel Template arranges all the items, and the Item Template defines the look of every item. This allows a lot of customization grouping the grid.

Christian

More information on programming Windows Store apps in my workshop and the book Professional C# 2012 and .NET 4.5.

12/22/2012

Picture Search available in the Windows Store

You still need a Christmas present? Picture Search is available in the Windows Store – ready for Christmas Smile

After submitting the app it didn’t take 24 hours until the app was available!

Picture Search is a Windows Store app that uses Bing Search to search for pictures – you just need to enter a Bing id, and you’re ready to go.

Picture Search in the store

image

You can use any term to search for pictures – of course using the Search charms.

With the settings you need to enter the Bing id before searching can start:

 

picturesearch4

Then you can step into search results to see thumbnails of the search:

image

Within a group you can also browse the pictures in large size:

picturesearch6

And open the Web page of the image from the app bar:

picturesearch7

Here you also can see information about the image:

picturesearch8

Of course images can be shared using the charms bar.

Try it out and have fun!

Christian

CN innovation

11/23/2012

Windows Store Apps with XAML or HTML?

Writing Windows Store apps for Windows 8 can be done with C# or C++ and XAML, or with JavaScript and HTML. What is the best option to do this?

In reality, the choice usually isn’t that hard. If you already have a rich client application that was done with XAML and C# (WPF), and a subset of this functionality should be offered for Windows Store apps, the easiest option to do this is to choose XAML and C#. You can build up on your knowledge on developing with C# and XAML. And it’s also possible to share code between desktop apps with WPF and Windows Store apps by using the Portable Class Library. With this project type you can select the frameworks that should be supported, e.g. .NET 4.5, Windows Phone 8, and .NET for Windows Store apps:

image

Of course the design of the WPF app needs to be changed to fulfill the new Microsoft Design guidelines, and to integrate with the charms bar, put commands into the app bar, and more.

In case you’ve an existing Web application that was done with HTML and JavaScript, and this should be enhanced with features for Windows Store apps, the choice will be using HTML and JavaScript for the Windows Store app.

You cannot do everything directly from JavaScript that can be done from .NET. With most apps you may not see the differences, just if you do something special such as using advanced printer features such as selecting another tray or automatically stapling. On the other side, using JavaScript has some other advantages such as easy CSS3 styling for documents, or more out-of-the-box controls such as flyout, rating, or date selection.

You can also write some C# or C++ code to use it from JavaScript by creating a Windows Runtime component. Such a library can be used by JavaScript, C#, and C++ apps. Just don’t use this library if the technologies you build upon are just .NET based. With Windows Runtime components you’re restricted to public sealed types, and types defined by the Windows runtime. If you are just using .NET technologies, you’re much better with the portable class library.

And of course, if you have a C++ desktop application, you can take the knowledge to write C++ apps for the Windows Store. XAML is now a great offer for C++ as well.

To summarize, you can utilize knowledge and code if you’ve an existing C# desktop application to create a Windows Store app with XAML and C#, and extending Websites that offer HTML and JavaScript can make use of Windows Store apps with HTML and JavaScript. Of course if you’ve already a rich app with JavaScript, the choice for the Windows Store app would be JavaScript as well.

Christian

CN innovation

10/12/2012

Deep Dive Windows Store Apps in Wien

Im Rahmen der BASTA! Austria mache ich am 21. November einen kompletten Tag Windows 8 Deep Dive. In 4 Sessions geht es durch die Entwicklung einer kompletten Windows Store App. Es startet mit dem UI, geht weiter mit Daten inkl. Zugriff auf Windows Azure, Kommunikation mit anderen Applikationen, und schließlich Notification der User:

Layout Challenges mit Windows Store Apps und CSS

Die Silhouette definiert die Positionen für den Titel und Content einer Windows Store App. Das ist aber mal der einfache Teil. Es stellt sich noch die Frage der Navigations- und Command-Struktur. Diese Session behandelt verschiedene Windows Store App Patterns und ihre Implementierungen mit CSS Grid, Flexbox, Regions, Hierarchische und Flat Strukturen, Semantic Zoom und vieles mehr was das Layout von Windows Store Apps betrifft.

Daten! Daten! Daten!

Der Content ist das wichtigste für Windows Store Apps - doch was passiert mit dem Content? Anzeige und Ändern von Texten, Fotos bringen Leben in Windows Store Apps. Diese Session zeigt APIs der Windows Runtime um Daten von Windows Azure abzuholen und lokal zu speichern, sowie optimale Möglichkeiten diese Daten dem User mit Hilfe verschiedener WinRT Controls und Templates anzuzeigen, zu filtern, zu sortieren, als auch Änderungen vom User im Service zu übernehmen

Mehrwert mit Contracts

Windows Store Apps werden wertvoller wenn sie nicht für sich alleine stehen, sondern im Zusammenspiel verwendet werden können. Wie wäre es von der Applikation gleich ein Email zu verschicken, oder Fotos einer anderen Applikation zu übernehmen? Oder eigene Datentypen zu definieren die von Applikationen ausgetauscht werden können? Diese Session behandelt Windows Store Contracts wie Sharing und Search, und deren Implementierung.

Tiles, Toasts und Notification

Der erste Eindruck der User einer Windows Store App ist die Kachel (Tile). Diese kann weit mehr als nur ein Icon zeigen und sollte die Aufmerksamkeit des Users gewinnen. Aktuelle Informationen können Zeitgesteuert, aber auch über Push Notifications angezeigt werden. Auch wenn Tiles gerade nicht sichtbar sind, sind Benachrichtigungen mit Hilfe von Toasts möglich. Der User bleibt dabei aber in Kontrolle. Diese Session zeigt die Implementierung von Tiles, Secondary Tiles, Badges, und Toasts, deren Möglichkeiten und Einschränkungen, und die Implementierung in Apps.

 

See you there!

Christian

CN innovation

09/08/2012

Updating Windows 8 Tiles using JavaScript

One of the great features of Windows 8 apps are tiles, the front facing information of apps. Windows 8 Apps can give live information to the user without the need to run the application. Tiles are not only icons, but can give actual information. A weather app shows the actual temperature, the news app gives highlights on news, the mail app the number of new emails since it was last opened – and all this can be done using pictures to give the app a more interesting look. This blog entry gives information on one way to update tiles automatically by offering a service with information for the tile.

Icons for the Tiles

The icon-based look of the tile can be defined with the package manifest editor as shown in figure 1. The app can have a normal or a wide logo with 150x150 pixels or 310x150 pixels for the tile. The wide logo is optional, and the user is in power to change the size of the tile for the application.

Figure 1

Live Information

To offer live information for the tiles, the TileUpdater from the Windows Runtime namespace Windows.UI.Notifications can be used. The TileUpdater can be retrieved using the TileUpdateManager as shown:

 

var notification = Windows.UI.Notifications;
var tileUpdater = notification.TileUpdateManager.createTileUpdaterForApplication();

 

Now the update for the tile can be requested. The method StartPeriodicUpdate allows specifying an Uri and a value from the PeriodicUpdateRecurrence enumeration that offers different values for updates every half hours up to updates once a day. The first parameter is of type Windows.Foundation.Uri:

 

var recurrence = notification.PeriodicUpdateRecurrence.halfHour;
var url = new Windows.Foundation.Uri(tileUrl);
tileUpdater.startPeriodicUpdate(url, recurrence);

Defining a start time

Instead of starting the tile updates immediately, an overloaded version of the method StartPeriodicUpdate can be used to define the start time for the update, and continue with updates using the periodic update recurrence from there. One example where this is useful is if the data for the tile is always available at the same time of the day. With JavaScript, the parameter type is of type Date:

 

var d = new Date();
var startTime = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 6);
tileUpdater.startPeriodicUpdate(url, startTime,
notification.PeriodicUpdateRecurrence.daily);

Tile Information from the Server

The server just needs to return XML as it is defined with the schema for the tiles. I'm using ASP.NET MVC to return the XML directly from a controller action method. Of course other technologies can be used as well. All what's needed is XML returned. The method GetTileXmlContent returns actual information contained within a square and a wide tile.

 

public ActionResult TileInfo()
{
  return Content(GetTileXmlContent(), "text/xml");
}

 

The XML that needs to be returned from the service can look like this – here two tiles in the format TileWideText04 and TileSquareText04 with one text information are returned to the client:

 

<tile>
<visual>
<binding template="TileWideText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
<binding template="TileSquareText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
</visual>
</tile>

 

Depending if the user selected the large or the square tile, this version will be shown.

Using different tile options

With the tile template TileSquareText04, the text is shown in the tile alongside the 30x30 icon that is defined with the small logo setting in the package manifest as shown in figure 2.

Figure 2

It's not completely free to define any look with the tile. This is a good idea as this way different tiles are not a complete mess but instead have some common experience for the users as shown in figure 3. The name of the application or the icon are always on the same place, the same font is used for the text, badge information with a number or an icon can be used that also shows up at the same position…

Figure 3

The different options for tiles are listed in the tile template catalog. This catalog lists square and wide templates, templates with text only or image only, and peek templates that change between text and an image. The list of wide templates also offer image and text templates.

The templates TileWideText04 and TileSquareText04 that were used in the sample contain one text that is wrapped in a maximum of four lines. Other text templates define multiple lines that are not wrapped, or define a larger header line.

To display an image and text the following XML code uses the wide template alternating with text, the tile templates TileWideSmallImageAndText03 and TileSquarePeekImageAndText04. The peek templates show partly text and an image using an animation.

 

<tile>
<visual>
<binding template="TileWideSmallImageAndText03">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
</visual>
</tile>

 

Figure 4 shows the wide tile variant with image and text.

Figure 4

Showing alternating tiles

To show different tile templates with alternate information, you cannot add multiple binding elements to one XAML that do not differ with the tile size. You need to pass different URL's to the StartPeriodicUpdateBatch method:

 

tileUpdater.startPeriodicUpdateBatch([url1, url2, url3], recurrence);

 

Summary

Just with a few lines of code it's possible to create cool looking tiles for a Windows Store app. Do not miss the chance to offer more information to the user than just a static icon. With just a few lines of code tiles can be dynamically updated with simple XML content from a server.

By far this is not all what's important with tiles. Badge information can be shown with tiles in the form of a number or an icon, to give some special information for the user, e.g. how many emails arrived since the last visit of the application, or some green/yellow/red mark to ask for some special attention. Tiles can also be updated using push notification. All this is the topic of some other blog entries – or my Windows 8 workshops.

More information on developing Windows 8 apps is in my Windows 8 workshop using HTML and JavaScript, and in the book Professional C# 2012 (this is C# code).

Christian

http://www.cninnovation.com

Updating Windows 8 Tiles using C#

One of the great features of Windows 8 apps are tiles, the front facing information of apps. Windows 8 Apps can give live information to the user without the need to run the application. Tiles are not only icons, but can give actual information. A weather app shows the actual temperature, the news app gives highlights on news, the mail app the number of new emails since it was last opened – and all this can be done using pictures to give the app a more interesting look. This blog entry gives information on one way to update tiles automatically by offering a service with information for the tile.

Icons for the tiles

The icon-based look of the tile can be defined with the package manifest editor as shown in figure 1. The app can have a normal or a wide logo with 150x150 pixels or 310x150 pixels for the tile. The wide logo is optional, and the user is in power to change the size of the tile for the application.

Figure 1

Live Information

To offer live information for the tiles, the TileUpdater from the Windows Runtime namespace Windows.UI.Notifications can be used. The TileUpdater can be retrieved using the TileUpdateManager as shown:

TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();

Now the update for the tile can be requested. The method StartPeriodicUpdate allows specifying an Uri and a value from the PeriodicUpdateRecurrence enumeration that offers different values for updates every half hours up to updates once a day. The first parameter is of type System.Uri:

tileUpdater.StartPeriodicUpdate(new Uri(tileUrl), PeriodicUpdateRecurrence.Hour);

Defining a start time

Instead of starting the tile updates immediately, an overloaded version of the method StartPeriodicUpdate can be used to define the start time for the update, and continue with updates using the periodic update recurrence from there. One example where this is useful is if the data for the tile is always available at the same time of the day. With C#, the parameter type is of type DateTimeOffset, the type that includes an UTC time offset:

DateTimeOffset tomorrow = DateTimeOffset.Now.AddDays(1);

var starttime = new DateTimeOffset(tomorrow.Year, tomorrow.Month,
tomorrow.Day, 6, 0, 0, TimeSpan.FromHours(2));

tileUpdater.StartPeriodicUpdate(new Uri(tileUrl), starttime,
PeriodicUpdateRecurrence.Daily);

Tile Information from the Server

The server just needs to return XML as it is defined with the schema for the tiles. I'm using ASP.NET MVC to return the XML directly from a controller action method. Of course other technologies can be used as well. All what's needed is XML returned. The method GetTileXmlContent returns actual information contained within a square and a wide tile.

public ActionResult TileInfo()

{

return Content(GetTileXmlContent(), "text/xml");
}

The XML that needs to be returned from the service can look like this – here two tiles in the format TileWideText04 and TileSquareText04 with one text information are returned to the client:

<tile>
<visual>
<binding template="TileWideText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
<binding template="TileSquareText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
</visual>
</tile>

Depending if the user selected the large or the square tile, this version will be shown.

Using different tile options

With the tile template TileSquareText04, the text is shown in the tile alongside the 30x30 icon that is defined with the small logo setting in the package manifest as shown in figure 2.

Figure 2

It's not completely free to define any look with the tile. This is a good idea as this way different tiles are not a complete mess but instead have some common experience for the users as shown in figure 3. The name of the application or the icon are always on the same place, the same font is used for the text, badge information with a number or an icon can be used that also shows up at the same position…

Figure 3

The different options for tiles are listed in the tile template catalog. This catalog lists square and wide templates, templates with text only or image only, and peek templates that change between text and an image. The list of wide templates also offer image and text templates.

The templates TileWideText04 and TileSquareText04 that were used in the sample contain one text that is wrapped in a maximum of four lines. Other text templates define multiple lines that are not wrapped, or define a larger header line.

To display an image and text the following XML code uses the wide template alternating with text, the tile templates TileWideSmallImageAndText03 and TileSquarePeekImageAndText04. The peek templates show partly text and an image using an animation.

<tile>
<visual>
<binding template="TileWideSmallImageAndText03">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
</visual>
</tile>

Figure 4 shows the wide tile variant with image and text.

Figure 4

Showing alternating tiles

To show different tile templates with alternate information, you cannot add multiple binding elements to one XAML that do not differ with the tile size. You need to pass different URL's to the StartPeriodicUpdateBatch method:

tileUpdater.StartPeriodicUpdateBatch(new Uri[] {uri1, uri2, uri3},
PeriodicUpdateRecurrence.SixHours);

Summary

Just with a few lines of code it's possible to create cool looking tiles for a Windows Store app. Do not miss the chance to offer more information to the user than just a static icon. With just a few lines of code tiles can be dynamically updated with simple XML content from a server.

By far this is not all what's important with tiles. Badge information can be shown with tiles in the form of a number or an icon, to give some special information for the user, e.g. how many emails arrived since the last visit of the application, or some green/yellow/red mark to ask for some special attention. Tiles can also be updated using push notification. All this is the topic of some other blog entries – or my Windows 8 workshops.

More information on developing Windows 8 apps is in my Windows 8 workshop using C#, and in the book Professional C# 2012.

Christian

http://www.cninnovation.com

03/24/2012

HTML 5 in Stockholm

Next week I’m giving a 2-day seminar on HTML 5 in Stockholm, covering not only semantic extensions of HTML 5 but also:

  • Geolocation
  • Video and Audio
  • Canvas
  • Messaging
  • Web Workers
  • Web Storage
  • Indexed DB
  • Offline Apps
  • Files API
  • Drag & Drop
  • Networking
  • HTML 5 Forms

This will be 2 fun days Smile

Code Samples for Download

Christian

01/02/2012

Hello, 2012

Early 2011 I blogged about my predictions on 2011. What were the things I blogged about the last year, was it becoming true? How does 2012 look like? The main topics my blog was about Silverlight 5, Windows Azure, Windows Phone 7, Windows 8, and HTML 5. Let’s have a look how my thoughts from early 2011 look like today, and what I think are the most important topics for 2012.

Silverlight 5

2011 (and earlier 2010) I blogged about the features of the upcoming coming Silverlight 5. In December 2011 it was finally released as is described here.

Now Silverlight 5 might not look as important as it was in the beginning of 2011. It’s not the tool of choice for writing platform-independent applications which is HTML 5 now. Silverlight applications cannot be used for Metro style apps with Windows 8. However, the traditional desktop of Windows 8 still is an important part to write applications for it for the next years to come. Looking into version 5, Silverlight received a lot of features important and helpful writing full desktop applications.

Silverlight 5 is supported by Microsoft until 10/12/2021, or through the support lifecycle of the underlying browsers, whichever is shorter. This should give enough time to give Silverlight the emphasis it needs to write new applications now. And the knowledge of XAML and C# can still be used with Metro apps in Windows 8.

Windows Azure

In 2011 I also blogged about new things coming with Windows Azure. Windows Azure still keeps growing, new features are added in a continuously basis. The cloud is becoming more and more important as the same data should be accessible from anywhere, no matter what device is used, and in some scenarios scalability can be solved by adding Windows Azure instances and just paying the instances needed.

New features recently added are support for Node.js, Hadoop-based Services, Federations, queues, topics, and relay services… More to come in 2012

Windows Phone

I also mentioned Windows Phone 7 with the Mango update to support copy and paste. The 7.5 update delivered a lot more great features as described in What’s new in Windows Phone 7.5. I really like this update and use the integration of Facebook Twitter, LinkedIn… a lot.

Currently Microsoft’s phone does not have the market presence it should have. I think this will change – and Nokia still has a lot of announcements to do to make Windows Phone more successful. It’s not the first time that Microsoft was a little late in the game but finally succeeded.

Windows 8

Early 2011 I already blogged about Windows 8 and expected a PDC for 2011 that should be a lot bigger than the 2010 PDC. This conference was a lot bigger, and still outsold just with the early bird bookings – and all this without posting an abstract of a single session before the conference. Just the name of the conference changed: Build Windows.

Although I was expecting a lot that was announced at this conference I was still surprised how well this all worked out and really like the new UI of the upcoming operating system. Applications to use the Metro UI can use XAML/C# or HTML5/JavaScript or XAML/C++. The choices are here. The application UI design must be done differently to be successful. Writing applications for Windows 8 I’m thinking a lot more about usability and how to change the workflow to be both easy to use and effective for the user.

Early 2012 (February?) I’m expecting the Beta version of Windows 8 and I’m already working now on several apps.

HTML 5 and JavaScript

Early 2011 I already mentioned HTML5 and already had several customers in 2011 to support them with HTML and JavaScript. HTML and JavaScript is making a comeback. jQuery helped a lot to make JavaScript programming more efficient.

I’m not only giving HTML5 and JavaScript an important place to create platform-independent applications to run on different mobiles and desktops but also think it’s a great option to write Metro style apps for Windows 8. For platform-independent HTML I'm using ASP.NET MVC that allows for great control of HTML and JavaScript.

Languages

For 2012 I’m also seeing a comeback for C++. C++11 gets cool improvements, and the support from Microsoft with Metro and XAML/C++ is here again. There are some applications that didn’t change the C++ code to .NET, and such libraries can now be really easy to use with new Metro style apps.

Of course C# gets cool improvements for async programming in 2012 that’s not less important. I’m working with C#, C++, and JavaScript in 2012.

I’m expecting 2012 to be an exciting year, expecting some new tablets that let Windows 8 shine, and put my big focus for the year on Windows 8 Metro, Windows Azure, HTML5, ASP.NET MVC, C++, C#, and JavaScript. Of course I’m also still doing WPF, Silverlight, and WCF, and writing about improvements on .NET 4.5. Already working on the next edition of Professional C# for several months now…

Christian

CN innovation

09/05/2011

Taking advantage of Windows 7 with Web Pages

The Windows 7 taskbar is one of the great improvements of Windows 7. Users can pin applications to the taskbar so the application is fast accessible. The application need not to run, the application is accessible with the click of a button and thus replaces the quick launch. With the task bar the application can also offer some tasks that can be accessed from the user directly, instead of starting the application first and accessing the specific feature of the application. The .NET 4 version of WPF got an improvement that integrating the application with the task bar becomes an easy task. Starting with IE9, this is also an easy task to do with Web applications as this article demonstrates.

First, I’m adding a custom icon to the Web application. This icon is shown with IE9 in the taskbar and with the address link as the following figure shows.

image

If the Web application is pinned to the taskbar, the icon is displayed on the left side as well, and the back and forward buttons are colored. There’s a way to specify the color of the back and forward buttons. If the color is not specified, the color is taken automatically from the icon.

image

The icon can be specified in the header section of the HTML page with a link to an icon as shown. The meta elements named application-name, msapplication-tooltip, msapplication-starturl, and msapplication-window are used to configure the settings for the taskbar.

<link href="/Content/Icons/favicon.ico" rel="Shortcut Icon" type="image/x-icon"/> <meta content="CN innovation" name="application-name" /> <meta content="Information about CN innovation" name="msapplication-tooltip" /> <meta content="http://www.cninnovation.com" name="msapplication-starturl" /> <meta content="width=1024;height=768" name="msapplication-window" />

Selecting the context menu of the application pinned to the taskbar you can see information about the application as well as some links for fast access as the figure below demonstrates. This is the jump list.

The icon of the application is shown in the lowest section above the unpin and close options. These options as well as the menu to start in private browsing cannot be changed with IE9. The name of the application that was set with the application-name meta tag is shown beside the icon. With the application here I’ve also added two tasks for fast access which are Training and Books, and a custom section that lists the latest blog entries. How this is done is shown next.

image

Adding tasks to the task list is just a matter of adding meta tags msapplication-task. The content of this tag lists the name that is shown in the jump list, the link that should be opened on activating the item, and the icon.

<meta content="name=Training;action-uri=http://www.cninnovation.com/Home/Training;icon-uri=/Content/Icons/training.ico" name="msapplication-task" /> <meta content="name=Books;action-uri=http://www.cninnovation.com/Home/Books;icon-uri=/Content/Icons/books.ico" name="msapplication-task" />

The items that should appear above the task list can have custom section names. I’ve created a Blog section and display titles of the last five blog entries that link to these. Adding such items to the jump list is done with JavaScript. First it is verified if the Window is pinned. This can be done with the function window.external.msIsSiteMode. If it is not, and if the site is opened from a different browser, the script doesn’t need to run. A new section is created with the function msSiteModeCreateJumpList. Items to the jump list are added with msSiteModeAddJumpListItem. The parameters of this method are the name that should be displayed with the jump list, the URL that should be opened, and the link to the icon that should be displayed.

<script type="text/javascript"> try { if (window.external.msIsSiteMode()) { ext = window.external; ext.msSiteModeClearJumpList(); ext.msSiteModeCreateJumpList("Blog"); ext.msSiteModeAddJumpListItem("Sharing Assemblies between Silverlight and .NET", "http://weblogs.thinktecture.com/cnagel/2011/07/sharing-assemblies-between-silverlight-and-net.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Real World .NET 4 and C#", "http://weblogs.thinktecture.com/cnagel/2011/08/real-world-net-4-and-c.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("BASTA! 2011 in Mainz", "http://weblogs.thinktecture.com/cnagel/2011/08/basta-2011-in-mainz.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("WPF ListBox Postioning using a Canvas", "http://weblogs.thinktecture.com/cnagel/2011/08/wpf-listbox-postioning-using-a-canvas.html", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Reserve the date! Developer Day 2011", "http://weblogs.thinktecture.com/cnagel/2011/09/reserve-the-date-developer-day-2011.html", "/Content/Icons/blog.ico"); ext.msSiteModeShowJumpList(); } } catch (exception) { } </script>
In my site the JavaScript function is created dynamically by using server-side ASP.NET code to create items that reference the last five blog entries.

It will be interesting to see what features Web applications will get from Windows 8. This taskbar feature from Windows 7 is limited in the way that there is not enough place for all my important applications. Let’s see how Windows 8 changes this using Metro, and what other features Web applications can use from Windows 8.

Christian

CN innovation

How to use WPF 4 to integrate in the Windows 7 taskbar is shown in my book Professional C# 4 and .NET 4.

Information on programming Web applications in my Web programming workshop.