On The Dot...
A Day in the Life of a .NET Developer

Quick Look at What’s New in VS 2013 Update 2 RC

One of the major announcements at BUILD 2014 was the topic of universal apps. What are universal apps?

u·ni·ver·sal apps [yoo-nuh-vur-suhl aps] - an app that is developed using a common Windows runtime which can run on multiple platforms (ie. phones, tablets, and PCs)

Check out the post, Extending Platform Commonality Through Universal Windows Apps on the Windows Blog to learn more about it.

To enable developers to build universal apps, Microsoft released an update to Visual Studio 2013 which also installs the latest SDKs so that you can get started on developing apps which target Windows 8.1, Windows Phone 8.1 or both (ie. universal)! You can download the update from the Microsoft Download Center.

I installed the update last night to have a quick peek at what has changed.

Universal App Templates

The first noticeable difference is the grouping of templates for Windows Store and Windows Phone apps.  Everything is now grouped under the label “Store apps”, from which you can choose to create Universal, Windows Store, or Windows Phone apps.

Drilling down to the Universal Apps, you can see there are a handful of templates available: Blank App, Hub App, Class Library, Windows Runtime Component.

image

In creating a new Universal App using either the Blank App or Hub App template, you will notice that it creates a Windows 8.1, Windows Phone 8.1 and a Shared project by default. This allows you to create code that will be shared among both platforms in one location, similar to the concept of Portable Class Libraries, with one major difference…. the ability include your views in the Shared project! This concept was demonstrated at BUILD yesterday. If your views are designed properly (one example is to ensure you are not using fixed widths in your UI elements, folks), then your views will adapt to the resolution of the device that it is running on.

image

Also, you will notice now that your projects will list the platform that it is targeting to the right of the project name.

I plan on experimenting with the latest SDKs and writing more posts on my experiences in developing Universal apps. But those are posts for another day. In the meantime, check out Laurent Buignon wrote a post on building a Universal App using MVVM Light, which is a great starting point.

Windows App Templates

The Windows Apps templates are pretty much the same as what was offered before, except the Portable Class Library template is no longer available here. Portable Class Libraries are available under the Universal Apps umbrella.

image

Windows Phone Templates

The number of available Windows Phone templates has grown considerably in this update. The new Windows Phone 8.1 templates are labeled as “Windows Phone”. The original templates are still available, but are now labeled as “Windows Phone Silverlight”. This means that along with developing new WP8.1 apps, you can continue to develop new, and maintain any existing, WP8 apps.

image

The WP8.1 templates will create projects that incorporate the Windows Runtime. So although there are a handful that are named the same as the original Windows Phone Silverlight templates (ie. Blank App, Hub App, Pivot App), the projects that are created reference a different set of libraries than the WP8 templates:

image      image

You will also notice that there is a WebView template. For those of you that have developed apps for Windows 8, you will be familiar with the WebView control, which allows you to embed HTML content into your app. This replaces the WebBrowser control, which is no longer available when creating new WP8.1 apps. However, the WebBrowser control is available in WP8 apps, and in WP8 apps that have been retargeted to WP8.1.

Also, you can see that Coded UI Test Projects are now available for Windows Phone!

Summary

This was just a quick look at the new templates available in the latest VS2013 update, as well as the ability to create universal Windows apps. We have only scratched the surface of what’s new in VS2013 Update 2 RC. More posts will follow on my experiences with the latest update. But for now, you should download the update for yourself, and dive right in!



CTTDNUG’s Windows Azure Cloud Camp Wrap Up

This past Sunday, CTTDNUG hosted its annual workshop. This year, the focus was on Windows Azure and it was held at The Tannery Event Centre in downtown Kitchener. For those of you that live in the KW area, you know that the Tannery is a pretty prime location for hosting events. So I was really excited about securing this venue for this year’s workshop.

In the months leading up to the workshop, I had a campaign going to convince the “Cloud Guy”, Jonathan Rozenblit, to come out to our event to give the keynote presentation and assist with running the hands-on labs. In order to convince Jonathan that we were a serious bunch of devs (aside from the fact that our CTTDNUG members are cool, amazing, and fun), I asked our members to start ramping up ahead of time, on any technology that their hearts desired, by watching free video sessions on the Microsoft Virtual Academy web site. For those developers that completed at least 2 courses, Jonathan was willing to award them an extra 100 points on their MVA profile.

As I expected, our CTTDNUG members rose to the occasion to watch as many MVA sessions as they could. It really was a win-win deal for our members. Free training videos on the latest technologies, plus bonus points just for learning, plus the fact that we could convince one of Microsoft’s very own Cloud Experts to participate in our camp!

We welcomed just over 30 people at our camp on Sunday! True to his word, Jonathan delivered a great keynote presentation to kick off the day long workshop, followed by a hands-on lab where our camp attendees learned how to build ASP.NET web sites in Azure.

Next up to bat, our very own CTTDNUG volunteer and Azure Community Expert, Tom Walker was up to talk about Windows Azure Virtual Machines. He wrapped up his great presentation with a hands-on lab to walk the group through setting up VMs in the Cloud.

Last but not least, I had the opportunity to present the final session on Windows Azure Mobile Services, demonstrating many of the cool features that are included (data storage and dynamic schemas, push notifications, scheduler, authentication, and so much more!), which was also followed by a hands-on lab to allow the attendees to get a Windows 8.1 app connected to Azure Mobile Services up and running.

We wrapped up the day o’ fun with some pretty sweet prize giveaways including a Telerik DevCraft license, Telerik Kendo UI license, a 1 year subscription to Pluralsight, books donated by O’Reilly and Apress, and a Lenovo Miix 2 8” Windows 8.1 tablet!

WP_20140216_003

Thanks to….

Thanks to my fellow presenters, Jonathan and Tom, for helping out during the camp. Tom was also our resident photographer, who took some great photos during the camp which are posted on the CTTDNUG Facebook page. Jonathan assisted with troubleshooting issues during the hands-on labs, and for some of the demos that weren’t working quite right. He also saved the day by assisting an elderly lady who had fallen outside in the parking lot. A Superhero cape is awarded to him for this alone!

Thanks to Bingeman’s who catered the event at the Tannery! Everything was setup perfectly for our workshop. The food was fabulous, including a great selection of drinks during breakfast and lunch, and there was a never ending supply of coffee and water throughout the day for our attendees!

Thanks to everyone that attended and participated! You are the reason we continue to host these types of workshops. We hope you enjoyed learning as much as we enjoyed teaching!

The event was a huge success because of the active participation from our members and the support we received from our sponsors.

Special thanks to our event sponsors for supporting CTTDNUG and helping us to make this the event of the year for our members: Microsoft Canada, Telerik, Pluralsight, Apress, O'Reilly, and Solola Solutions Inc.

WP_20140216_001

Jonathan Rozenblit schooling a table full of students on the ways of Azure

I’m happy to say that we had a great turnout for the event and we received positive feedback from those that attended.

Missed our workshop?

If you missed our Azure Cloud Camp and are feeling remorseful at having missed this wonderful opportunity for learning, networking, socializing, and potentially walking away with some great prizes (along with a new set of skills), I have good news! Another Azure Cloud Camp is being held in London, Ontario on March 16th hosted by the London .NET User Group. To check out details on that event and to register, check out their registration page on EventBrite: http://www.eventbrite.com/e/windows-azure-cloud-camp-tickets-9017428371

If you can’t make it out to a full day’s workshop in person, then go to the Microsoft Virtual Academy site to watch videos at your own pace, on a variety of technologies…for free!

Ready to start building cloud-connected apps?

If you attended our camp, or watched a ton of training videos on the MVA site, and are ready to start building cloud-connected apps, be sure to register for the Developer Movement first, so that you can earn points for your efforts! Those points can then be cashed in for prizes! If you haven’t heard of the Developer Movement, check out my recent post, “The Developer Movement Is Back”, to learn more about it!



Creating An App With Windows Phone App Studio–Part 3

So you read my previous posts, Creating An App With Windows Phone App Studio - Part 1 and Creating An App With Windows Phone App Studio - Part 2, became inspired, and decided to use App Studio to design a fully FUNctional app Now what?

In the final step of the Windows Phone App Studio wizard, you are given the option to generate your app so that you can install it on your personal Windows Phone device, or you can visit the summary page of the application to have a look at what you have accomplished thus far.

image

Generating the App

Let’s generate the app so you can download it on your device. Click the Generate app link. This will raise a message to let you know it may take a few minutes to complete the app generation, and ask if you wish to continue. Click the checkmark button to proceed with the app generation.

image

At this point, you will see a progress indicator screen as shown below.

image

When the app has been created, a Congrats message will be displayed. As you can see, you have a long list of options available to you. You can choose to:

· install the Windows Phone App Studio Certificate,

· install the newly created app to your device,

· download the app’s source code,

· download the app’s publish package,

· share your app by email, or

· continue editing the app

Since the point of this post is to demonstrate how to install the app onto your personal Windows Phone device, let’s carry on down that path.

image

Installing the Certificate

Before installing your newly created app to a device, you will need to install the Windows Phone App Studio Certificate. You can do this in one of two ways:

1) Click the “Install the Certificate” link in the Congrats page shown below, or

2) Click the link that was sent to you via email by App Studio

Clicking the “Install the Certificate” link displays a QR Code which you can scan from your device by tapping the Search device button to bring up Bing, and tapping the Vision icon in the application bar. Scan the QR code by pointing your device directly at it. A URL will appear when the scan is successful. This is the direct link to download your certificate.

Tap the URL that is displayed. When the URL is tapped, you should receive a prompt indicating “Tap to Open”. Tap to install the certificate.

Trouble installing certificate?

If you are anything like me, then you most certainly have experienced Murphy’s Law firsthand (you know… the old adage “if something can go wrong, it will”). In my case, installing the certificate just wasn’t happening. The email link nor the QR code scan worked. I just was left at a “Tap to Open” prompt that did nothing when tapped.

In this case, I managed to come across a helpful reply by Richard Baily regarding a post on the Microsoft forums that brought up this issue.

He simply suggested to download the certificate on a laptop using the link provided in the original email sent by App Studio, and email it back to yourself as an attachment (use an email account that is set up on your device). On the device, open the attachment, at which point you will be prompted to install the certificate. Done and done.

Installing the App

Simply scan the QR code displayed on the Congrats page. As with the certificate, successfully scanning this QR code will provide you with a URL that is a direct link to download the app to your device. You will receive a confirmation asking if you wish to install the app from Microsoft Corporation.

image

Click the install button to proceed. And just like that, you have a shiny brand new app to play with on your device!

Revisiting Your App From the Dashboard

When you go back to your Dashboard, you will notice that the status of your app has been updated to indicate that it has been generated, along with the date and time of generation, when your mouse hovers over the app’s tile in the Dashboard.

image

Click on the app tile to view the App Summary page. The App Summary page allows you to regenerate your app, edit or delete the app, download the source code or publish package, re-install the app through the QR Code that is displayed, or share your app by email. You can also view the generation history, and other details about your app (logo, description, images from your data source collections, etc).

image

In Summary

In a few easy steps, which I managed to convert into lengthy blog posts, you can see that Windows Phone App Studio provides you with a healthy selection of pre-defined templates that you can leverage to quickly create an app from your imagination and install it onto your device in no time at all!



Creating An App With Windows Phone App Studio–Part 2

Welcome back! In my previous post, Creating An App With Windows Phone App Studio - Part 1, we started the process of designing an app through Windows Phone App Studio using one of the templates provided. We wrapped up that post with editing the info section in the My City template, which is the default entry point into the app.

The next step in the process is to examine the remaining sections that were generated by the My City template, and determine if we want to edit them to include real data that is relevant to the application, or remove the sections altogether.

Manage Application Sections

You can edit, preview or delete a section by selecting the respective buttons located at the right side of the section header. For my application, I have decided I don’t really need a monuments page. So I will remove the section by clicking the “x” button.

This will raise a confirmation, at which point I can choose to confirm the deletion and remove the section, or cancel the action and leave the section intact.

image

In this case, I will confirm the deletion by clicking the checkmark button.

As you can see below, the monuments section has been removed, but its related data source was not deleted along with it. This data source has been left in place. This could be a safeguard in the event you are using the same data source in different sections. However, I can tell that the monumentsCollection is not used elsewhere, because now I have the option to delete the collection as noted by the big red delete button available on the data source itself.

image

Since I know it is safe to delete the monumentsCollection without affecting any other section, I will remove it simply by clicking the X button. A confirmation displays giving me the option to continue with the delete or cancel and go back. I will continue with the delete to permanently remove the data source.

Edit a Collection Data Source

Next, I want to modify the special places section, so that it contains places of interest in Leamington. To do this, I will need to modify the data source, specialPlacesCollection. Click on the collection to launch its editor.

image

Notice that the Edit Data Source view for this section looks different than the Edit Data Source view for the info section, which we worked on in the previous post. The data source editor will change based on the type of data source you are editing. In this case, we are working on a static collection of items. Each item in the collection contains a Title, Subtitle, Image and Description.

To modify the items in the collection, I can choose to:

· edit the existing items in place and change the content by clicking the Edit button for each item

· delete one or more items individually by clicking the Delete button for each item, or

· add new items using the Create Item button at the top, left of the collection grid

· import my own collection as long as it follows a specific format,

· delete all rows

I’m going to delete all rows, by clicking the respective button, and enter my own list of special places from scratch. Notice that in doing so, there is no confirmation before the deletion takes place. The rows are simply cleared.

Now, I can select the Create Item button, to start adding my own places to the collection. Clicking the Create Item button launches the Item Edit view.

image

For this collection, I am required to enter data in all fields, and include an image. If I exclude any of these items, and select the checkmark button to save my changes, I will receive an error.

image

In the screenshot above, I have entered my data and obtained an image from Wikimedia which is available under the Creative Commons license. It is important to provide proper attribution here in order to give credit to the publisher of that photo.

Important Note about Using Images

Be careful when using images in your apps. Purchase royalty-free photos from stock photo sites such as Fotolia, or search for images that are available for use under the Creative Commons license. Do not just pull any images from Google on a whim. It could cost you dearly. Read this article to learn more about what to do, and not do, when using images, whether it is on a blog or web site, or within an app: “How Using Google Images Can Cost You $8000

Here is the photo attribution I included in the app:

“Point Pelee from the tip” (http://commons.wikimedia.org/wiki/File%3APoint_Pelee_from_the_tip.jpg) by Alasdair McLellan (http://commons.wikimedia.org/wiki/User:Arsenikk) [CC-BY-SA-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

The one pain point I have with the Collections data source is that it does not allow HTML in the Description field, so the URLs provided will appear as static text in the attribution. So for any images I use, the attribution is going to look quite messy. I’d prefer to have the attribution read like this:

Point Pelee from the tip” by Alasdair McLellan is licensed under CC-BY-SA-3.0-2.5-2.0-1.0 via Wikimedia Commons

Once you have entered the necessary item data within the Item Edit view, you can add the item to the collection by clicking the Save button. This will close the Item Edit view, and refresh the collection grid with your newly added item in the list.

image

Repeat these steps to create as many items as you need in your collection. Once you are finished modifying the collection (ie. adding, editing and/or deleting items), click the Save Changes button to return back to the Configure App Content view.

Edit Section Page Layout and Content

At this point, you have the option to modify the layout of the section pages in your template. It’s not a requirement. You can choose to leave the default layouts for each page as is, but it is nice to at least go through them to see what options you have.

Note that in my example, there are 3 section pages which are structured in a Master-Detail format.

image

The Master page is the SpecialPlaces page which displays the entire collection of items as a list. The user can drill down into an item by tapping the item in the list, which will navigate to the Detail page. The Detail page is a single page which contains two pivot items: Detail and About. The Detail “page” is really a single pivot item which is also shared with the About “page”, a second pivot item. The Detail pivot item is loaded by default when the user selects an item from the list in the master page. The user can then swipe from right to left, or left to right, to view the About pivot item, and to switch back to the Details pivot item.

You can edit the layout of Master page, SpecialPlaces, as well as the Detail and About pivot items. To edit the layout or the content that displays, simply select one of the section pages to load its respective Edit Page view, as shown below.

image

To select an alternate layout, you can click on any of the available layout icons that display in the Edit Page view. As you select a layout, the app preview will refresh to give you an idea of how the layout will look before you save your changes. Once you’ve decided on a layout for the current page, you can choose to change the content of the page’s title, and image. As you switch between layouts, you may notice that some layouts contain additional fields to display more information.

As we discussed in Creating An App With Windows Phone App Studio - Part 1, within the Edit A Page section, you can select the blue icon next to a field that is associated to a Data Source field. This will allow you to either select another field from the same Data Source, or clear the field. You cannot enter freeform text into this field. It will not render in the application.

image

Depending on the page that you are editing, you may also have the same Extra options that were also discussed within the Edit A Page section in Part 1 (ie. Pin Tile to Start, Text to Speech, Share, etc).

Go through each section page, and adjust your layout and content as you see fit. Once you are satisfied with your changes, you can move onto the remaining sections, and modify them and/or their respective data sources, to suit your application. You can remove any sections that you feel are not needed in your application.

Configure the App Style

When you are happy with your data, sections, pages, and layouts, you can then click the Next button to move on. At this point, you will now be able to set the style of your app, including colors (accent, background, foreground, and the application bar), tiles, splash screen and lock screen.

Colors

In Windows Phone development, when defining a color scheme for your app, you assign colors using brush resources. App Studio gives you the ability to set 4 types of brushes:

Accent – this brush sets the foreground color for special items, such as the page’s title.

Background – this brush sets the background color of the pages within your app. Alternatively you can choose to select an image, instead of a color, for the background on all pages. This is the only brush that allows you this option.

Foreground – this brush sets the foreground color of the text in your app.

Application Bar – this brush sets the background color of the application bar in your app. The application bar is the bottom vertical bar along the bottom of the device screen, which contains icon buttons, an ellipsis button (..) which when tapped expands to display any additional menu items (such as Share or About), if available.

image

You can select one of the standard, pre-defined colors in the color bar, or you can select a custom color by selecting the dropdown arrow in the custom color picker at the right.

When selecting a custom color, you can choose to select a color in the palette, or enter a hexadecimal (hex) notation that represents your desired color in the field provided, as shown below.

image

Once you are happy with the color selected, you can click the choose button to continue and set the brush to the color you selected, or you can cancel out of the color picker leave the brush at its original color selection.

When you make your color selections, you will notice the app preview will update accordingly. Once you are satisfied with your color scheme, click Next to continue on to Tiles.

Tiles

On a Windows Phone, a tile is an image that represents your app when pinned to the Start screen. An app is pinned to the Start screen when the user decides to do so. It does not display on the Start screen by default, when it is first installed. The user can pin a tile to the Start screen in one of two ways: from the device’s app list, or from within the app, if the app provides the option.

If you recall in the my previous post, Creating An App With Windows Phone App Studio - Part 1, within Edit A Section, I touched on this topic when discussing the purpose of enabling/disabling the Pin To Start option.

Every app must have a default tile defined. This is done by selecting one of the 3 available tile templates: cycle, flip and iconic. App Studio provides a description of each type of template, and an example on how each displays, as shown below.

image

To select a template as the Tile Template for your app, simply click on the template. The template will become highlighted, and you will have the option to edit the template. Click the Edit button to further customize your tile.

Tile Sizes

A tile can be pinned to the Start screen in 1 of 3 sizes: Small, Medium, or Wide. As we discuss tile templates, you will see examples of each of these sizes.

Cycle Template

The Cycle template allows you specify the title that will appear at the bottom of the tile. You must also select a small image which is displayed when the tile is reduced to a small icon on the Start screen (in this case, no images will cycle). By default, it has inserted the app logo here. Since the app logo is the image that displays when the tile appears in the app list, I want to leave the small image set to the app logo as well just to maintain consistency.

image

The cool thing with the Cycle template is that you can select a data source which contains images that can be used in your tile. Up to 9 images will be used in the cycle tile, so if your data source contains a large number of items with images, only the first 9 images will appear. The Cycle tile will only display images when the medium or wide application tile is pinned to the Start screen. If the small tile is pinned, only the static small image appears. A preview of each tile size is displayed in the Edit page.

Flip Template

Just as with the Cycle template, you can specify the title and select the small image for your flip tile.

However, you now have the option to select a normal image. This is the image that displays on the medium sized flip tile. Since the Flip template creates a tile that “flips” from front to back, you now have the ability to define a title for the back tile display, as well as an image. Just as with the Cycle template, a preview of all 3 tile sizes are displayed in the template, which refreshes to reflect any changes as you are editing the template.

image

 

Iconic Template

The Icon template provides the option to specify the title that will display at the bottom of the app tile. However, you only have one image option, which is indicated as the icon image. This image will display within all 3 sizes of your tile. You also have the option to specify 3 separate lines of text that will display when the Wide tile is pinned to the Start screen.

image

Once you have decided on a tile template, customize it, save your changes, then click the Next button in the Tiles tab to continue on.

 

Splash & Lock Screen

The final step in configuring the style of your app is selecting images for the application’s splash screen and lock screen.

A splash screen image is a static image that appears when your app is loading. It usually appears for a second or two when the app is launched.

A lock screen image is a static image that displays when the device is locked. A user must choose your application as the lock screen provider. In doing so, the lock screen image you selected for your application will be used. Be sure that both the splash screen and lock screen images reflect the nature of your application.

To select an image for the splash screen, select the “+” button within the Splash Screen Background section. Selecting the image itself will only cause the image to display in the app preview.

image

Once you select the “+” button to select an image, you will be prompted to choose an image resource, which will give you the option to select an image from your computer, your SkyDrive account, or an App Studio resource.

If you choose to use an App Studio resource, you will notice that your resource options are different based on the type of image you are selecting an image for, as shown in the two screen shots below.

Selecting a splash screen image from App Studio resources:

image

Selecting a lock screen image from App Studio resources:

image

When you have decided on the splash screen and lock screen images for your app, you can select each image in the Splash & Lock tab to have the images display in the app preview at the right. If you are happy with the images you selected, click Next to finish configuring your app’s style.

To Be Continued (yet again)…

In this post, you learned:

  • - how to edit a Collections Data Source, by adding, deleting, and editing items within the collection
  • - how to delete a section from your app,
  • - how to delete a data source that is no longer in use,
  • - how to edit a section page and change its layout,
  • - how to change your app’s background, foreground, accent, and app bar colors
  • - what a tile is, and the different templates available to create a tile
  • - how to select a splash screen image for your app, and
  • - how to select a lock screen image for your app

In the next post, we will move on to the final step which is generating your app and installing the app on your device! 



Creating An App With Windows Phone App Studio – Part 1

In the last blog post, we went through the steps to get registered for Windows Phone App Studio. Now we can move on, and talk about how to create an app without having to enter a single line of code!

Login to App Studio

In order to access your App Studio account, you will need to login with the credentials that were used when you registered your account for the first time. To login to App Studio:

1. Go to http://apps.windowsstore.com/

2. Click the Start Building button

3. Login with your Microsoft Live ID credentials

Create Your Masterpiece

Once you are logged in, you will be redirected to your App Studio Dashboard. Click Create link in your Dashboard to create a new app.

image

Template Selection

Upon clicking the Create link, you should see the following screen:

image

As you can see, you have the option to create an empty app or an app from a template. An empty app simply allows you to create a new app from scratch. If you are new to App Studio and to Windows Phone development, I recommend that you create a few apps from the different templates available to become familiar with the layouts and features that App Studio provides, then move on to creating apps from scratch! After all, there’s no limit to the number of apps you can create!

If you’re not sure which template you would like to use, simply click on each template to view more information about it along with sample preview screens, as shown below.

image

Once you have decided on a template, click the Create App button in the template preview window. This will redirect you to the App Designer with your selected template loaded in view.

App Information

The first step in the designer requires you to enter information about your app including title, description, and a default language.

image

Notice that you have an app preview on the right side of the screen, which shows you how your app will look on a Windows Phone device. When you change your app’s title, and tab off the field, notice that the title in the preview changes.

Note that changing the text in the Description field does not affect the preview of your app’s info page. This is because the description is the information about your app that appears in the About page in your app, which you will be able to access when you install the app on your device. Try to keep it short and sweet (maximum of 255 characters) to ensure that your description is not cut off in the About page.

To change the logo, simply click on the image that appears as the current Logo image in the top left corner of the screen. This will provide you with the option to select an image from your computer, your SkyDrive account, or use an App Studio resource image:

image

If you choose to use your own image, you must ensure the logo is 160 pixels in both width and height.

For this walkthrough, I’m making an app based on my hometown of Leamington, Ontario. Here’s what I’ve entered for my app information:

image

I’ve changed the logo to a tomato because Leamington, Ontario is known as the Tomato Capital of Canada. I made this logo using Syncfusion’s Metro Studio app.

Once you are happy with the app information you have entered for your new super awesome app, click the Next button at the bottom of the page.

Configure App Content

Now it is time to modify the default sections and data that were generated for your app.

The first thing you will notice is that there are a set of Data Sources and a set of Application Sections that were generated by the template you selected (this will vary across templates). For the My City template, I have 5 data sources that were generated for me.

Sidebar #1: What the heck is a Data Source?

A data source is the thing that will provide content to your app. In App Studio, a data source can be an HTML page, a collection of items (which you will create and we will see later), an RSS feed, a Flickr feed, a YouTube feed, or a Bing search. You can tell which data sources are being used simply by the icon that represents the data source:

image

Sidebar #2: What are Application Sections?

Application Sections are the sections in your app with the first one in the list being the default section. The default section is the page that your app will open up on when first loaded. From there you will be able to navigate to other sections of your app. For the city template, you will navigate between sections by swiping to the left or to the right. Note that you can have up to 6 sections in your application. Also note that an application section can be 1 of 2 types:

  • Section – group of pages
  • Menu – list of links to other sections or to external web sites

Edit a Data Source

Ok, so let’s go back to App Studio and enter in data that is relevant to our app, starting with the first page. The first thing I want to do is enter some basic information about Leamington which will serve as an introduction to this lovely community. To do that, I will click on the info link under “Data Sources” or the info DataSource link in the info Application Section.

image

This will load up my Edit DataSource page. Since this Data Source is an HTML page, I have a very basic WYSYWIG (ie. What You See Is What You Get) editor available to me, in which I can enter basic text with options to bold and/or italicize the font, and maybe even throw in a list. If I want to design my HTML page with additional features (for example: specifying a font color and size), then I can choose to enter in raw HTML by selecting the button in the editor. To go back to the text view, I simply select the button again.

image

For this example, I’m just going to enter plain text, because I promised you that you wouldn’t have to enter a single line of code.

image

Once I’m happy with the text and formatting for my info page, I click the save button (ie. the checkmark button), to save my changes and return to the list of Application Sections. To cancel your changes, simply click the X button.

If you saved your changes, you will now notice that the info page displays the HTML page you created in the app preview.

Sidebar #3: The HTML Editor Glitch

Now when I enter in custom HTML to change the font color, for example, if I switch between the HTML view and the text view in the editor by toggling the button on and off, the custom HTML tags are stripped out and all is lost when in the text view.

If I stay in the raw HTML view, and save what I have entered in the editor without switching back to the text view, then my custom HTML is rendered in the preview. I’m not sure if I’m going against the grain by entering in HTML tags that are not available off the editor, or if the editor has a glitch that doesn’t recognize these additional tags and strips them out. Either way, it is possible to customize your HTML page beyond the basic bold, italics, and list buttons that are available.

If you do this, I recommend that you save a copy of your formatted HTML page to an external file so that if you ever want to revisit the editor to make changes, you can do so by copying your HTML from your external file and pasting it into the editor. Because you will notice that when you revisit this data source, your formatted HTML will be wiped out when loaded in the editor, and if you hit the Save button, that formatting will be lost forever.

Edit a Section Page

Let’s edit the info section page. Click the info link within the Section Pages in the first application section.

As you can see below, you can change the title of the page which won’t affect your app preview. This will simply be the text that is displayed if you add a link to this page from another section.

Changing the header title will change the heading that appears in the preview to the right. I am fine with “info”, so I’ll just be leaving it as is.

image

 

The Content field shows some weird text there. This is a notation to indicate that the content of your page will be retrieved from a data source. If you click on the blue icon next to the field, you will have the option to select a field from your data source where the data will be pulled from. Since this is an HTML page, I only have one option for a data source and that is the one HTML field for which we entered data. So in this case, {Data.Content} refers to that and I have no other options to select from, as shown below.

image

If you are still unsure about how this works, it will become clear as we look at the collection data source.

Next, expand the Extras section. Here you can see that you can turn on/off Windows Phone features within your app:

Text To Speech – when enabled, this feature provides a “read” button within the current page in your app. When pressed, the content from your data source will translate the text to speech. Essentially the phone will read out the information on the page.

Share Text – when enabled, this feature provides a Share link in the application bar’s menu for the current page. This link will allow you to share the text with social media feeds or by sending the text via email or messaging.

Pin To Start – when enabled, this feature provides a “pin to start” button within the current page in your app. When pressed, an application tile will be pinned to the Start screen of the device so that users can access your app simply by clicking the application tile.

image

If you have made changes to the header title, or if you have turned off the features included in the Extras section, you will notice your preview hasn’t updated to reflect your change. You can click the Preview button at the bottom of the page to refresh the app preview displayed at the right. Once doing that, you can see that the app preview reflects your changes. Your changes still aren’t saved at this point. You have the option to save your changes, if you like what you see in the app preview window. Or you can cancel your changes.

At this point, you will be back at the Configure App Content section.

To Be Continued…

We covered a lot of ground in this post. You learned:

  • - how to create a new app in App Studio,
  • - how to preview and select a template for your app,
  • - what data sources and sections are, and how they are tied together
  • - how to edit a data source
  • - how to edit a section page

In the next post, we will look at data sources in depth. In the meantime, poke around and take a look at the other data sources and sections that were generated by your template! 



Can’t Code? Build a Windows Phone 8 App Anyway!

Microsoft has provided a way for anyone -  developers, hobbyists, non-techie folks, your next door neighbour - with the ability to build a Windows Phone 8 App without installing developer tools or even knowing how to code.

Windows Phone App Studio is a web-based, app-builder tool which allows you to create a personal mobile app from a set of pre-defined templates (19 templates, at the time of this writing). You also have the option to start off with a clean slate (ie. an empty app). It allows you to easily customize your app content and style, and install the newly created app to your own Windows Phone.

If you have a Windows Phone Developer Center account, you can also publish your app to the Windows Phone Store to share with the world!

Getting Started

In order to start building apps with App Studio, you will need to register for an account:

1. Navigate to the Windows Phone App Studio site.

2. Click the Start Building button

3. Next, you will be prompted to sign into your Microsoft Live account. Enter your Live Id credentials and click Sign in.

4. You will then be prompted to allow App Studio to access your Live account information. Click Yes to continue.

GrantPermission

5. A Welcome message will be displayed, with your Live account information pre-populated in the User and Email fields. Read and accept the Windows Phone App Studio Agreement, and then click the Register button.

Register

6. Voila! You now have a Windows Phone App Studio account, and you are able to view your Dashboard, as shown below.

Dashboard

7. You can click the my profile tab to view your profile information (user name, email, and account registration date). As well, you have the option to remove your account if you no longer wish to use App Studio.

In my next post, we will walk through the steps to create an app in App Studio using one of the predefined templates!



My Career Bucket List

When I reflect back on 2013, I think “Lucky me”. A year that started off with uncertainty had turned into one filled with achieving some significant career milestones. These were goals I had set for myself as part of a bucket list years ago, and in 2013 I managed to cross a few off that list.  

Writing a Book

My first book proposal was accepted by Apress. I was over the moon, but knew the hard work was just beginning. My friend/colleague, David Totzke, and I spent the next 7 months working evenings and weekends to complete this project. When it was published, I was quite ecstatic. This was a major milestone for me. I always thought “someday” I wanted to write a technical book. Most people asked “Why?”. The main reason being that I have always found technical books the best resource to learn from, and wanted to one day make my contribution to the industry in the same way. Receiving feedback from people who have read my book, and being told that it helped them to get started on their path to mobile app development, gives me a great sense of pride and satisfaction.

Becoming a Consultant

At the same time, I was lucky enough to have joined the ObjectSharp team, a group of talented professionals who I always admired. Not only to join them, but to be welcomed with open arms, to be recognized and respected, and to be given opportunities as a consultant I had only dreamed of at one time in my career, but thought was out of reach. Working with an elite team of professionals is a dream come true. For someone like myself, who loves to continue to learn and grow, being surrounded by this type of talent is simply amazing.

Appearing on Channel 9

Being asked to participate in a web broadcast, Developer Camp session for Microsoft Canada was something that wasn’t even on my radar as a remote possibility. And shortly after joining ObjectSharp, there it was. That session is now archived on Microsoft’s Channel 9 site. There were no words to describe how I felt about that, except I did pinch myself a few times to make sure I wasn’t dreaming.

Writing Posts for the Canadian Developer Connection blog

Again, this is another opportunity that wasn’t on my radar, but when the opportunity arose, I jumped all over it. I wrote a 5 part series on getting started on Windows Phone development that was posted to Microsoft’s Canadian Developer Connection blog. Writing posts for my own blog is one thing, but being asked to submit posts for Microsoft’s blog is a whole new level of awesome. It was pretty exciting, and invoked another “pinch me, I’m dreaming” moment. I received positive feedback from those posts, and I get satisfaction out of helping others get started on a new development journey: 

1) You Have What It Takes To Be A Mobile App Developer… You Really Do!

2) Setting Up Your Windows Phone Development Environment in 30 Minutes (or less)

3) Time Saving Tips to Get Your Windows Phone App Started

4) Making Money From Your Windows Phone Apps

5) Publishing Your App – It’s Not The Last Thing You’ll Do

Growing the .NET User Group

Granted I have been running the local area .NET User Group since the end of 2011, but this is a group that  I love wholeheartedly. So they are at the top of my list every year. I’m always looking for ways to make the group fun and keep the content fresh for our regular attendees, while also looking at ways to raise awareness and increase interest in the group for students and professionals that don’t know about us yet. One big win for 2013, was a noticeable increase in women that attended our sessions on a regular basis. Providing a group that appeals to everyone, across the board, is what matters most. I feel that we achieved that in 2013. I say we, because I have a great group of volunteers that have been working just as hard to make this group awesome: David Totzke (who was the original founder in 2002 and ran the group for 9 years before allowing me to take over), Jamie Robinson, Steve Karnis, Ken Cenerelli, and Tom Walker. They are a talented group of professionals, with a strong dedication to this group. Without their help, this group wouldn’t be as vibrant as it is today. I appreciate them wholeheartedly and can’t thank them enough for what they’ve done and continue to do for our .NET User Group.

Into 2014…

I have more items on that bucket list, and my goal for 2014 is to knock one, maybe two, off that list. It may not sound so ambitious, but I’d prefer to have one or two things to work towards, while keeping myself open to new possibilities and opportunities, rather than bogging myself down with lists and creating some sort of career tunnel vision. After all the best opportunities out there are the ones that you don’t even know about yet!

 

Update!

On April 1st, 2014, I was awarded Microsoft MVP, Client Development! I am extremely proud and honoured to be part of such a great community!

MVP_FullColor_ForScreen



Comparing Third Party Windows Phone Controls

As a Windows Phone developer, I find that oftentimes it is easier to purchase controls that enhance the appearance and functionality of my apps, rather than trying to build the controls that I need from the ground up. With the increase in popularity for Windows Phone development, we have seen third party vendors selling top quality, useful, and unique controls for Windows Phone. Below, you will find a comparison of the offerings provided by the most popular vendors in this arena, and which controls are unique to their product offering.

VendorComparison

*Infragistics Professional includes the controls for multiple development platforms: ASP.NET, WPF, WinForms, Windows UI, HTML5, Silverlight, Reporting, iOS, Android, and Windows Phone. This explains the higher price point. At one time, developers were able to purchase Windows Phone controls separately as part of the Infragistics NetAdvantage license, but this is no longer available. To purchase Windows Phone controls through Infragistics, you must purchase the full suite of development controls under a Professional or Ultimate license. The Ultimate license with standard support is $1995 USD.

License Terms – Perpetual vs Annual

As shown in the table above, all of the vendors offer a perpetual license. It’s important to read the license agreements from any vendor before making a purchase, so that you understand what you can and cannot do once the license expires.

A perpetual license will allow you to use the licensed software indefinitely, once purchased. During the license term, you are able to download product updates and receive technical support. Once the license term has expired, if you have chosen not to renew the license, you may continue to develop new applications using the controls in the product suite you purchased, but you will no longer be able to download product updates or technical support.

An annual license will allow you to use the licensed software for one year. Just like the perpetual license, you will be able to download all updates to the software and receive technical support. However, after the one year period ends, you will not be able to use the controls in the product suite for any new development unless a new license is purchased.

Important side note: Initially I listed that Syncfusion offered an annual license term. This was misinformation provided by one of their sales reps who contacted me about renewing my subscription to Essential Studio. He insisted that the license was offered as an annual license, and he indicated that I could not conduct any new development on the version of controls that I had purchased the license for unless I renewed my subscription. I had reviewed the license agreement and it included a clause which stated “Customer may re-distribute retail/release builds of Syncfusion libraries as incorporated in Customer’s product(s) only so long as all modified binaries that are incorporated in such Customer products were created while Customer is under a valid Maintenance and Support services subscription."  However, on Syncfusion’s site, within their Sales FAQs, it states: “Please note that the licenses themselves are perpetual. If you need technical support or access to the latest releases, you should choose to renew your subscription.” and “Since our licenses are perpetual, you can continue to work with the latest software release you obtained before your subscription expired”.

I’ve corrected the table above to reflect that Syncfusion, does in fact offer a perpetual license. I will update this post if Syncfusion comes back with an alternate response that supports the sales rep’s initial claim.

This really grinds my gears because it negates the entire section on license terms comparison within this post, since all the vendors offer the same terms.

Cost Comparison

The table above clearly shows that Telerik offers the most bang for your buck, providing 60 Windows Phone components and 50 design templates for $99 USD. Syncfusion follows with 31 Windows Phone controls, for the same price as the Telerik suite.

Mindscape is a bit on the costly side for what you get, and if you wish to obtain the source code for the controls, you must pay a higher price. Their controls are marketed as Windows Phone 7 controls, so to me this indicates that there hasn’t been any new additions to the suite in quite some time.

Infragistics is at the highest price point, but as explained above, this is related to their product suite offering. You have to buy all of their controls. At one time Infragistics offered a separate Windows Phone control suite for a lower price point. I’m not sure why they decided to change it. I’m sure Windows Phone developers will have a hard time justifying the cost of this suite, when there are others out there that offer more controls for a fraction of the price.

What Makes Each Product Suite Unique

Sometimes price or license type isn’t enough to make a decision on which product offering meets your development needs. Each vendor offers something unique to their product suite which will likely be the deciding factor in your purchase decision.

Infragistics includes:

Access Control – provides an easy way to implement authentication by allowing users to login with their existing social media credentials (Facebook, Twitter, Gmail, or Microsoft Live ID).

Math Library – provides a library of mathematical and statistical structures and functions that you can use to perform mathematical operations with ease.

Barcode Reader – decodes barcode images by using the camera capabilities on the device. All vendors provide a way to generate barcodes through a barcode control, but Infragistics was the only one, of the vendors being compared in this post, that includes a barcode reader as well.

Mindscape includes:

An abundance of chart controls – Bar, Line, Area, Pie, Doughnut, Bubble, Scatter, Spline, Spline area, Stacked bar, Stacked area, Stacked line, Stacked spline, Stacked spline area. If your application is heavily focused on charting data, this may be the product suite for you. Although other vendors provide charting controls, if you’re hard pressed to find a specific type of chart, check out this product offering to see if it meets your needs.

Syncfusion includes:

The ability to read and write files in 3 different file formats.

Essential XlsIO – provides the ability to read and write Excel files

Essential DocIO – provides the ability to read and write Word files

Essential PDF – provides the ability to read and write PDF files

Telerik includes:

Along with 10 cloud-powered controls, and an abundance of design templates, there are components that are provided in this suite that aren’t offered in the others. Here are the notable ones…

Image Editor – enables you to include image editing within your apps, including crop, resize, contrast, auto fix colors, blur, hue editing, and adding text to images.

Multi-Resolution Image – if you provide different images within your app to support the various resolutions available among devices, this control will ensure that the correct image is loaded in your application, based on the resolution of the device that is using it.

Pan and Zoom – allows you to provide pan and zoom capabilities to images within your app through this control. This saves you from the effort of manually coding the gesture support in to handle pan and zoom.

Live Tile Helper – simplifies your ability to add dynamic tiles with custom design and content to your application.

Diagnostics – provides you with the capability to receive anonymous crash reports, as well as detailed diagnostic data in crash reports, and optionally include a screenshot.

Rate App Reminder – allows you to easily configure and customize a reminder message that appears to users to encourage them to rate your app.

In Closing…

If you’re looking to step up the look and feel of your Windows Phone apps by purchasing a control suite, I hope that this comparison has helped you to understand your options, and make an informed decision based on your development needs.

 



Useful Apps for Windows Phone Developers

Although mobile developers tend to focus on the next app development project that will appeal to the masses, there are a number of apps in the Windows Phone Store that were created BY developers FOR developers. Why? Because developers need apps too!

Here are the list of the apps that I think should be installed on every developer device:

 Dev Center by Microsoft

Overview: Provides you with all of the information you need to know about how your published apps are performing in the Store including the number of downloads, crashes, payments, pending payments, and user reviews for each app. The latest update also includes information on downloads in each market. This app also lists any apps that you have initiated a submission process for, but have not yet published.

What I love the most: The pinned live tile update that display my total downloads for the day right on my Start screen.

What would make it better: When an app doesn’t pass certification, I would love to access the report from the app.

 

 App Spotlights by DotNetApp

Overview: This app provides a comprehensive overview of apps that are currently in the spotlight, broken down by market. It also includes lists of the apps that have the highest number of spotlight appearances, the apps that have been in the spotlight in the most markets, and the apps that have appeared in the spotlight for the most number of days. App Spotlights also provides notifications when your apps are in the Store spotlight, and provide you with a detailed history for those apps that were lucky enough to make it to the spotlight!

What I love the most: Being able to view the list of apps in the Spotlight by market. As a developer, this gives some insight into the current trends, and the type of apps that are popular, or more likely to make a Spotlight appearance. This is invaluable information to have at your fingertips!

What would make it better: There’s nothing I can think of that would make this app any better. I love it just the way it is!

 

 Icons by Templarian

Overview: Icons is a simple icon viewer that allows you to preview the icons available in the Modern UI icons collection created by Austin Andrews (aka Templarian). If you need unique/special icons that conform to the Windows Phone design standards, but can’t find it in the standard icons that come with the Windows Phone SDK, then you will want to use this app to search the collection to see if it has those icons you need. You can donate to the designer through the app (or on the Modern UI Icons site), which I highly recommend you do, especially if you’ve made use of one or more icons from this collection.

What I love the most: Being able to preview the collection of icons from my device, which shows me how it will appear on the device if used within an app!

What would make it better: There’s nothing I can think of that would make this app better. 

 

Telerik Examples by Telerik

Overview: A great demo app that shows very creative implementations for each of Telerik’s Windows Phone controls that you can use in your app development, along with design template examples. Note that the Telerik Windows Phone control suite can be purchased from Telerik for $99.

What I love the most: Being a Telerik license holder, I love that there is an app that shows concrete examples of each control (including the XAML and C# code for each example), as well as design templates, animations, and sample layouts which I can then easily implement in my own development efforts.

What would make it better: The only thing I would have suggested was to include more design templates, but Telerik has already provided another app, Telerik Design Templates, which answers this need. They also have provided an additional example app, Telerik Cloud Examples, which is worth checking out as well.

 

WPCentral by Jay Bennett

Overview: The mobile companion app for WPCentral.com, which provides the latest Windows Phone news in a clean, simple, easy-to-read layout. You can also access videos, reviews, forums, podcasts, Windows Phone tips, wallpapers, app and game reviews. You can pin a section’s live tile to your Start screen to deep link back into the app. There’s even a developer section which lists news of interest to Windows Phone devs. There are so many other features this app includes, which makes it well worth the 99 cent price point (it’s a steal at that price). There’s a trial version as well, with some feature limitations (no offline reading mode, or viewing videos to name a couple), but come on… just spring for the paid version. It’s well worth it!

What I love the most: Being able to sign into my WPCentral account, and view my messages and track my forum posts/responses right from my device.

What would make it better: Give me the option to return to the home page from anywhere within the app. This is more tedious when I use a secondary tile to launch the app within a certain section. If I want to view other sections at this point, I have to leave the app and enter through the app’s primary tile.

 

Canadian Developer Connection by DotNetApp

Overview: The perfect mobile companion app for Microsoft’s Canadian Developer Connection blog. You can access the latest developer news and technical resources, watch videos from events/workshops, and view a list of upcoming developer events in your area or online. Being able to connect with the Microsoft Canada team all from within the app makes it a must-have app for any developer. 

What I love the most: Being able to access the latest Canadian Developer Connection blog posts and videos right from my device.

What would make it better: The live tile didn’t update for me. It still displays the title of the blog post that was current when I first installed the app. Fix this, and it will be as good as gold!

Do you agree with my take on the apps I’ve listed? Are there any apps that you would recommend for Windows Phone developers, that are not on this list?



Including Device & Network Information in your WP8 Application Error Report

When developing a Windows Phone 8 app, along with including proper exception handling, you may also wish to provide the user with the ability to email you an error report. Information about the type of error that occurred, such as the error number and message, along with the stack trace may be helpful in troubleshooting the source of the issue. However that may not be enough.

You might also want to know more about the user’s device and memory limitations. Which device did the user experience the error on? What is the device’s current firmware version? Has your application exceeded its memory usage limit on the device?

If your application relies on a network connection, you will also want to know about the device’s connectivity state at the time the error occurred. Is the device connected to a cellular or WiFi network? Is the user able to access data when on the cellular network or while roaming?

The Windows Phone API provides two classes which will help you obtain that information quite easily:

1. Microsoft.Phone.Info.DeviceStatus – use this class to retrieve information about the device through the following properties:

        •        ApplicationCurrentMemoryUsage
        •     ApplicationMemoryUsageLimit
        •     ApplicationPeakMemoryUsage
        •     DeviceFirmwareVersion
        •     DeviceHardwareVersion
        •     DeviceManufacturer
        •     DeviceName
        •     DeviceTotalMemory
        •     IsKeyboardDeployed
        •     IsKeyboardPresent
        •     PowerSource
          • The property names are self-explanatory, but if you would like a detailed explanation of what values they return, or more information on the DeviceStatus class, check out the DeviceStatus class page in the Windows Phone SDK documentation.
            2. Microsoft.Phone.Net.NetworkInformation.DeviceNetworkInformation – use this class to retrieve information about the device’s current network state through the following properties:
            •        CellularMobileOperator
            •     IsCellularDataEnabled
            •     IsCellularDataRoamingEnabled
            •     IsNetworkAvailable
            •     IsWiFiEnabled
            • Additionally, this class raises the NetworkAvailabilityChanged event whenever the device’s network state changes.  To learn more about the DeviceNetworkInformation class, check out the DeviceNetworkInformation class page in the Windows Phone SDK documentation.
            •  
            • Now that we know how easy it is to obtain pertinent information about the current user’s device and network state, let’s show how we can use this information in an error report. In my example below, I simply created two methods, each of which returns a string containing the device and network information that I care about. These methods are included in a static class in a common library so that I can reuse this functionality within all of my apps.
              • clip_image002

              When composing an email in the form of an error report, you can use the methods above to easily include the formatted device and network information within the body of your support email, as shown below.
              clip_image004
               

          This type of information is invaluable in pinpointing the root cause of application errors as they arise. Being able to receive a detailed account of the device and network state in the initial error report will reduce the need for you to request more information from the user later as you work to track down those issues that you are unable to reproduce on your own device.