« August 2012 | Main | October 2012 »

September 2012

Configure Windows Live Writer Drafts Folder with SkyDrive

This blog post is how to configure Windows Live Writer to save the draft posts in the SkyDrive folder.

image

 

I’m using multiple systems in my normal work. If I ‘m working on a document on one system, I want to work on it on the other system as well. The data needs to be synchronized. This is the same with Windows Live Writer. Sometimes I start writing several blog posts, continue working on it, and publishing it on other days.

If I just would work on one system, I would like to synchronize the data as well. This makes new installations a lot easier, as the data comes automatically to my newly installed system without talking care to copy everything.

I’m using SkyDrive to synchronize my data across different systems and into the cloud.  Previously I’ve used Mesh, but as this is discontinued I fully switched to SkyDrive. Using Mesh it was possible to define what directories should be synchronized with the cloud. Using SkyDrive, there is (currently?) only one directory available for synchronization. And the Windows Live Writer adds the draft documents to the folder <users>\<username>\Documents\My Weblog Posts.

Usually this is not the wrong folder, it’s within user documents. However, Skydrive by default uses the folder <users>\<username>\Skydrive. The draft folder cannot be configured from the Windows Live Writer options. However, there’s a registry key that is used to define the path for the drafts and recent documents: HKCU\Software\Microsoft\Windows Live\Writer. The PostsDirectory string value must be added, and the string value receives the new directory, e.g. c:\users\Christian\SkyDrive\My Weblog Posts.

Found the registry information with LEHSYS Side Notes.

Christian

http://www.cninnovation.com

Moving to Windows Azure Web Sites

Recently I moved several of my Web sites to Windows Azure Web Sites. The previous version of the sites were running as shared sites using two different Web providers. One of the sites was using ASP.NET MVC 3 and a SQL Server, the other one using Flash and PHP. The Web site with Flash needed a complete redesign and a new implementation. The move was really easy to do, and all the sites are now running fine. This article describes how I did the move.

image

One database for multiple sites

http://www.cninnovation.com was running previously on a shared hosting site with ASP.NET MVC 3 using SQL Server from the same provider. Information about training and books is coming from SQL Server. I’ve written many books and offer many different courses, but this is still not a lot of data for a database. Windows Azure now has a great offer for SQL databases that is just USD 5,- (EUR 3.55) for 100 MB. This is less than I was paying for my previous SQL Server database.

http://www.kantine.at didn’t use any database before. However, the site became a complete new redesign now using HTML5 and ASP.NET MVC 4, and all the information about menus, drinks, and latest information is coming from the database as well. A lot of menus is not a lot of data as well. I’m using the same database as for the CN innovation site, just using different schemas for the tables. This makes a great separation between the different sites.

Moving the database from the old site to Windows Azure is an easy task, as for example described by WriJu using SQL Server Management Studio, there’s also a SQL Database Migration Wizard on CodePlex. As I’m using a different schema in the new SQL Azure database, I’ve just used a script that I generated from Visual Studio 2012. The script creates tables and fills them with data. I’ve modified the script for the new schemas, and created and filled the tables on Windows Azure.

The change for the CN innovation site just needed minor changes to the data access code for the new schema, and a change in the connection string.

Publishing to Windows Azure Web Sites

After doing a “Quick Create” of a Windows Azure Website I published my CN innovation site directly from Visual Studio 2012 to Windows Azure. This is one really great feature to publish the site from the Solution Explorer in Visual Studio directly to Windows Azure. The publish profile needed for that can be exported from the Windows Azure Management Portal, imported from Visual Studio, and it’s not necessary to deal with username, password, the correct link for publishing, and so on.

image

For the first tests I was using a free shared instance. For going live a DNS entry was needed. This required a reserved instance at that time. I just couldn’t switch to a reserved instance because there was no one free in West Europe. I had to wait for nearly two weeks before the switch was possible. At first I was afraid that I needed to switch every Web site to a new reserved instance. However, that’s not the case. Switching to reserved instance all my Web sites moved to the same reserved instance. I ‘m just paying one reserved instance for all the Web sites. With the recent changes I can run a hundred sites in one reserved instance. So I’m just paying one small VM for USD 57,60 (EUR 40,85) for the compute instance for all my sites.

A new Web application

The www.kantine.at Web site was previously done with PHP and Flash, just offering a flashy home page and a guest book that wasn’t really used. This site got a complete new design and implementation. The guest book is replaced by a Facebook page that’s linked from the home page. The home page gives actual news and the menu of the day.

image

You can see some images about the restaurant such as this…

image

…can read about the menus of the week…

image

and find the location by using Bing maps.

image

Don’t start development with .NET 4.5 to deploy to a Server running .NET 4

Christine Mark was doing the design and delivered HTML5 and CSS pages. I’ve created the solution with ASP.NET MVC 4, started the project with .NET 4.5. With this I moved the HTML content that I received to the layout and views of the ASP.NET MVC architecture. All the different menu cards are served from the same controller action which allows sharing a lot of HTML code. To give the current selection of the page and menu card a different look, jQuery helped to change the style for the active item. For accessing the database I’m using Entity Framework Code-First. I’ve been using the NuGet package for the new Entity Framework features.

Before deploying to Windows Azure just don’t forget – .NET 4.5 is not available with Azure yet. With Windows Azure you’ll only see released framework versions. Now as .NET 4.5 is released, I’m expecting the new .NET version with Windows Azure soon. Ok, I switched back to .NET 4.0 with a simple change in the project settings. Running and testing the application locally everything is fine. Deploying it to Windows Azure, the application failed. I’ve turned on error information to see the issue, which was a missing method in the Entity Framework library. It turned out that the Entity Framework NuGet package behaves differently if it is added to a .NET 4.5 or .NET 4 project. As I added it to a .NET 4.5 solution, some methods were used that have been available on my system (as .NET 4.5 is installed here), but not on the target system on Windows Azure. Deleting the NuGet package and adding it again helped, and the application was running great on Windows Azure.

It’s easy to switch from .NET 4 to .NET 4.5, but there are issues switching back. I’ve had the experience already several times, I just need to remember it Winking smile

Windows Azure Storage

The images for the menus – e.g. with salads – are not served from the SQL database. I try to keep the SQL database small, and use for larger items such as these images Azure Storage. The price is very different. For geo-redundant storage, 25 GB costs USD 3.13 (EUR 2.22). That’s a lot cheaper than relational data.

image

Making the final move from the test environment in Windows Azure to the production sites, was just a matter for changing the DNS entries.

The client application to manage the menus is a Windows Store client app. This is the topic of another blog article.

For more information on Windows Azure, ASP.NET MVC, jQuery, and Windows Store apps see my workshops. More information on ASP.NET MVC and Windows Store apps is also found in my new book Professional C# 2012.

Christian

CN innovation

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