Learning WinJS Fundamentals

I’ve just published my first Pluralsight course, WinJS Fundamentals. WinJS is the Javascript framework developed by Microsoft to help with developing Windows 8 apps on the Javascript / HTML stack – which is the alternative to the C#/XAML stack on this platform.

Why Learn WinJS?

So why would you want to choose Javascript – and with it, WinJS – over C# and XAML to build Windows 8 applications? From my view these are the top 3 reasons to do so:

  • 1. Javascript is a Really Hot Technology
    Javascript is becoming really popular with web development (from jQuery to Angular.js) and server side development alike (Node.js). On Github Javascript is the #1 language used in repositories as of December 2013. It’s hard to find a more popular language than Javascript today.
  • 2. Microsoft is Investing Heavily in the Javascript Stack
    There is a lot of investment going into the Javascript stack on Windows 8 from Microsoft. In 2012 WinJS 1.0 was released. Only a year later, in 2013 WinJS 2.0 came out with lots of new features and significant improvements. I am expecting this investment to continue for the coming years, WinJS and the Javascript stack in Windows 8 becoming even more powerful.
  • 3. Most 1st Party Windows 8/8.1 Apps are Already Built Using Javascript / HTML
    Do you know what technology was used to build the email app on Windows 8.1? Skype? Music? Games? Video? Weather? News? Travel?

    These – and most other preinstalled apps – were all built on the Javascript/HTML stack, making heavy use of the WinJS framework. If Microsoft decided this stack was good enough to build key Windows 8 apps with them, it will likely work for your app as well.

What’s In this Course?

The course aims to cover the basics of WinJS, concepts that almost all apps will use. These topics are:

  • Introduction and WinJS Overview
    What the main features of WinJS are and how does WinJS compare to other popular Javascript frameworks like jQuery, Angular.js or Knockout.js.
  • Classes and Namespaces
    Working with classes in Javascript is possible, but the syntax is not very straightforward. WinJS introduces class helpers to deal with classes in a clean and structured way and adds support for using namespaces.
  • Mixins and Events
    WinJS introduces a powerful feature, mixins, to help with code and functionality reuse between classes. Mixins is a similar concept to multiple inheritance and event support for classes is easy to implement implemented using some of the built in mixins like eventMixin.
  • Data Binding
    WinJS has built in data binding support to allow updating the HTML UI of the application from the javascript data source. In this module we’ll be convering one time, one way and two way data binding, as well as data binding converters.
  • Promises
    Promises is an asynchronous programming concept which allows working with asynchronous operations in a nice and clean way. In WinJS, promises are a really important part of most applications, so because of this it is critical to understand them and know how to use them.
  • Pages and Navigation
    By using pages in our application, the app can be structured in a clean and modular way. In this module we’ll be going through the most important things to know on using pages and navigating between them.

If you’d like to watch this course, you can do here, on Pluralsight. If you don’t have a Pluraslight subscription, you can sign up for a free trial and watch most of the course using the trial period.

Other Resources to Learn WinJS

This course is meant to be to give solid understanding of the most important parts of WinJS. If you want to learn more or about different parts of WinJS, here are some further good resources:

Flashlight 7 Update: Constant LED Light Around the World

The latest version of Flashlight 7, v4.4 has added two exciting features: it now supports continuous LED light without flickering and has been fully translated to all 19 languages supported by Mango.

This makes Flashlight 7 the only app on the market to support constant LED light under the lock screen as well as probably the most feature rich and handy app available.

So grab the update now, what ever language you may have set your phone to:

And here’s a screenshot of the LED:


Flashlight 7 Updated to Mango, Adds LED Support

I’m happy to announce that Flashlight 7, the – currently – most popular flashlight app has been updated for Mango and now has LED support. According to tests the LED works on all phones, except for HTC HD7, MTC Mozart and Dell Venue Pro – these models don’t seem to properly implement the API used to trigger the light on and off. The other features – such as police light, hypnosis, kaledioscope mode – have not been touched in this release, but expect some more fun modes in future releases.

And finally some pictures: the app running on a Samsung Omnia 7 and some screenshots of the application. Hope you enjoy the app, grab it from the Marketplace here, it’s free!

Bus Tracker Edinburgh for Windows Phone 7

I’m happy to announce that I’ve finally finished and published the Edinburgh Bus Tracker application, Bus Tracker Edinburgh. It’s completely free, get it from the Marketplace now:

Main features of the application are:

  • Find bus stops based on your location, by service number or by bus stop codes
  • Mark stops as favorites and access them with a simple swipe on the main screen
  • Acess the most recently viewed stops from the main screen
  • Get automatic Lothian bus service alerts
  • … all designed to blend perfectly with your Windows Phone with beautiful Metro design

(A note as to why I chose this name versus Edinburgh Bus Tracker or EdinBus: should you not pin the app to the start page it’s somewhat a drag to scroll all the way down to “E” to start the app. Changing the name to start with “B” seemed to put it at my fingertips in the long list app selector as well).

For more information and screenshots, visit the Bus Tracker Edinburgh home page.

If you’re an Edinburgh resident I hope you’ll find it useful on your everyday commute. (And if the lack of this application was stopping you getting a WP7 you can now reconsider it ;) ) Enjoy!

Ad Rotator Control for Windows Phone 7

I’ve finished creating an ad rotator control for Windows Phone 7 and have published it along with the source code here: Windows Phone 7 Ad Rotator on CodePlex.

I originally created the control so that I could dynamically configure ads appearing on Flashlight 7 based on ad culture. In the US I normally prefer using PubCenter as it usually has the highest eCPM, outside of the US I would switch between other providers (AdMob, InnerActive and AdDuplex for promoting of the app). The main reason for changing the ratios of ad providers was that I wanted to experiment how showing more AdDuplex ads impacts downloads of the app – with this little tool I can do so when eCPM has gone somewhat down (Note: I’ve actually found AdDuplex have a positive effect on app downloads and use it despite higher eCPMs as well).

The control allows setting up of ad probabilites based on culture, so its possible to configure (and update) such a configuration as this:

  • US: 80% PubCenter, 10% InnerActive, 5% AdMob, 5% AdDuplex ads
  • Germany: 80% AdMob, 10% PubCenter, 10% AdDuplex
  • France: 100% AdMob
  • Other: 25% PubCenter, 25% InnerActive, 25% AdMob, 25% AdDuplex

Read the project description and the WP7 ad rotator documentation on more details on how to integrate the control into projects.

Hope you find this tool useful!

Creating a Beautiful Windows Phone 7 Application

I’ve presented the talk Creating a Beautiful Windows Phone 7 Application in two locations the past weeks:

Some useful resources to get started with:

Slides of the talk:

Cocktail Flow – Valentine’s Day Update

Cocktail Flow (on Twitter: @CocktailFlow) development hasn’t slowed since the Holiday update and I’m happy to announce that we’ve released another update for Valentine’s day. This update comes with a new, Valentine’s package as well as several small, but useful features added.

The most important things we’ve added this update are the following:

  • Valentine’s day cocktails – nearly 30 delicious, themed drinks are added to the application in the Valentine’s package
  • Packages can be deactivated and activated. This means if you’ve downloaded one of the holiday packages, but aren’t interested in those cocktails during the summer, simply deactivate the package to hide its contents.
  • Extended cabinet – we’ve added a few drinks to the cabinet and from now on the cabinet is dynamically growing based on ingredients in packages.
  • Search by ingredients – simply start typing the name of an ingredient in the search field and cocktails containing ingredients with that name are also returned.
  • Smarter cabinet – if you select dark rum, lime juice and coke in the cabinet, you’ll see that Cuba Libre is suggested as a cocktail that can be mixed, even though the official recipe suggests using white rum, not dark. However, we’ve introduced substitute ingredients, and in the case of Cuba Libre, both white rum and dark rum can be used to mix this drink.

And finally, here are a few screenshots of some of the new cocktails and new features:

Valentine’s Day package and the ability to deactivate (and activate) packages

Read More…

Stock Data Visualization Using Silverlight

I’ve written an article on CodeProject on visualizing live and historic stock data using Silverlight. In the article I’m presenting a pretty generic way of fetching, parsing and displaying the stock data.

The structure of the article is as follows:

Read the full article and download the source code on Codeproject: Visualizing Live and Historic Stock Data Using Silverlight

Cocktail Flow: Holiday Update

With the team at Distinction we’ve continued to work hard on Cocktail Flow and I’m happy to announce that we’ve shipped an update for the application with some new features and holiday themed cocktails!

So here’s a summary of what’s new:

  • We’ve added support for cocktail packages - these can be downloaded within the application for more cocktails.
  • We’ve released a Christmas and New Years package with over 50 new, holiday themed cocktail recipes
  • Cocktails can be browsed by color as well and we’ve added brandy and champagne to the base drinks category
  • New settings: the lock screen can be configured not to turn the application off and the currency can be changed in the shopping assistant

Of course the updates don’t stop with this; new cocktail packages planned to be released continuously. Should you miss some recipes, just send your suggestion on Twitter @cocktailflow.

Here are some screenshots of some of the new, holiday cocktails, the packages and the new start screen. Enjoy and Happy Holidays!

Read More…

1 2 3 7  Scroll to top