Pla.NET Southeast!

Windows 8 Game Development resources

GlenGordon — Thu, 24 May 2012 14:10:56 GMT

Earlier this week, for the Atlanta chapter of the International Game Developers Association (IGDA) I gave an introductory talk on building Metro style games for Windows 8. It was great to see so many folks excited about building games for Windows 8, out of the 50 people who attended, almost all are going to explore doing so.

Here is a collection of resources that I mentioned that will get you started:

Download the Windows 8 Consumer Preview and the beta for Visual Studio 11
Slides from my talk are available in the download Creating a Great Metro Style Game for Windows 8.
Videos from our BUILD conference around game development in Windows 8
An excellent tutorial on using Expression Blend to design a memory game in HTML5
Create a Metro style game using JavaScript
Create a DirectX game
What’s new in Direct3D 11.1

Enjoy!

Windows Phone App Challenge at the Atlanta Code Camp

GlenGordon — Sat, 19 May 2012 13:18:52 GMT

Today, at the Atlanta Code Camp, I just announced the Windows Phone App Challenge of the day.

During the event, between sessions, build a Windows Phone app around the theme of Summer, show it off at the end of the day, and win prizes!

Some idea around the theme would be vacations, cookouts, camps, the beach, Independence Day, etc.

The best 3 apps (by audience voting at the closing keynote) will win prizes, including a Windows Phone.

Find me onsite for more information.

Microsoft is hiring an IT Pro Evangelist in Atlanta

GlenGordon — Tue, 15 May 2012 20:18:33 GMT

If you are passionate about spreading the word about the awesomeness of Microsoft’s technologies, programs and partnership opportunities to IT Professionals far and wide,, have we got a job for you. We’re hiring an evangelist to reach the IT Professional communities around the southeast and online. Let me know if you have the skills and the drive to fill this role!

Have you been paying attention to the competitive market dynamics taking place around cloud computing - public, private, hybrid. Do you love technology? Do you like to share your technical knowledge with others? If you are a strong technical talent with experience and passion, our IT Pro Evangelism Team wants to meet you!
The IT Professional Evangelist (ITE) is a member of the East Region Developer and Platform Evangelism (DPE) team tasked with driving IT Professional platform adoption through a variety of channels: events, community groups, industry influencers and online capabilities. This is a highly technical role with the mission of inspiring the broad community of IT professionals and impacting adoption of Microsoft core infrastructure technologies such as Windows Server “8”, System Center, Private cloud, Hyper-V and Virtualization technologies, SQL Server 2012, Windows 7 and other emerging core infrastructure technologies. The ITE leads by example and invests heavily in cultivating productive, influential partners and community leaders.
This role is responsible for:
- Driving next generation virtualization technologies, Windows Server platform and private cloud adoption through evaluations and deployment
- Drive satisfaction with Microsoft, Microsoft tools and Microsoft platform technologies
- Engage the broad IT professional community in partnership with community leaders, industry influencers and online channels
- Deliver IT Pro oriented events/workshops/presentations on the next generation virtualization technologies, Windows Server platform and private cloud technologies
- Partner with other groups within Microsoft to scale the message
Description of experiences desired
Strong candidates should have minimum a 4 year degree, already involved with the IT professional community and experience delivering outstanding presentations to audiences of various sizes along with persuasive communication skills. Candidates should also possess broad familiarity with Microsoft technologies along with competitive platform knowledge and certification in both is desired. Passion for technology with solid knowledge of enterprise global IT requirements and competitive offerings is a must for this role. Moderate travel (20-30%) is anticipated and the preferred location is Washington D.C. or Atlanta, Georgia.

PhoneGap on WP7 Tip #8: Alarms and Reminders

GlenGordon — Tue, 15 May 2012 16:24:33 GMT

One of the key design decisions the design team made when creating Windows Phone was a focus on providing maximum battery life for the end user. And it seems a major contributor to short battery life is having applications running in the background. So it’s important to realize that apps you create for Windows Phone (including PhoneGap) are paused when the user switches away from them. But frequently, you want to provide information to the user while your application is not in the foreground. There are many ways to do this, including various background tasks and notifications.

We’re going to look at a particular kind of background task today – the ability to set custom Alarms and Reminders. These alarms and reminders can show alerts to the user when your app is not running, and can be used to launch your app either to the starting page or to a deeper page in the app by using a URI to another page as I showed here.

Read up on Alarms and Reminders, and then follow along as we interact with them from a PhoneGap app.

Begin by creating the plugin class like I showed here. Here’s the code for the plugin class that I’m calling scheduler.cs. Notice I’m using the latest template for Cordova so some of the references are a little different from previous samples.

using System;
using System.Net;
using System.Runtime.Serialization;
using Microsoft.Phone.Tasks;
using WP7CordovaClassLib.Cordova.Commands;
using Microsoft.Phone.Scheduler;

namespace WP7CordovaClassLib.Cordova.Commands
{
    public class scheduler : BaseCommand
    {

          public class alarmOptions
        {

            [DataMember]
            public string content;

            [DataMember]
            public DateTime beginTime;

            [DataMember]
            public DateTime expirationTime;

            [DataMember]
            public RecurrenceInterval recurrence;

            [DataMember]
            public Uri sound;

        }

        public void addAlarm(string options)
        {
            // Generate a unique name for the new notification. You can choose a
            // name that is meaningful for your app, or just use a GUID.
            String name = System.Guid.NewGuid().ToString();
                        
            Alarm alarm = new Alarm(name);

            alarmOptions opts = JSON.JsonHelper.Deserialize<alarmOptions>(options);
           
            alarm.Content = opts.content;
            alarm.BeginTime = opts.beginTime;
            if (opts.expirationTime > opts.beginTime)
                alarm.ExpirationTime = opts.expirationTime;
            
            if(opts.recurrence != null)
                alarm.RecurrenceType = opts.recurrence;
            
            if (opts.sound != null)
                alarm.Sound = opts.sound;

            ScheduledActionService.Add(alarm);

            PluginResult result = 
                new PluginResult(PluginResult.Status.OK, name);

            this.DispatchCommandResult(result);
        }   

   
    }
}

A couple of things to note. First, you’ll see there’s a RecurrenceInterval type that the Alarm (and Notification) class uses. It’s an enumeration with values like None, Weekly, Daily, etc. We’ll be passing a numerical value in here later. Also note the URL of a custom sound the alarm can play. That’s just an MP3 or WAV file you put in the project directory for your application. Finally, we’re creating a unique name for the alarm by using a GUID. That’s just a string that’s guaranteed to be unique. We’re returning the GUID so that the calling application can keep track of the alarms it creates if it wants to change or cancel them later. You could also alter this plugin to allow you to pass a unique name yourself instead.

For the JavaScript side of the plugin, create a file called scheduler.js and add this code.

PhoneGap.addConstructor(function () {
    
    navigator.plugins.scheduler =
    {
         addAlarm: function (callback, content, beginTime, expirationTime, recurrence, sound) {
            var options = {
                "content": content,
                "beginTime": beginTime,
                "expirationTime": expirationTime,
                "recurrence": recurrence,
                "sound": sound
            };
            PhoneGap.exec(callback, null, "scheduler", "addAlarm", options);
        }
    }
});

With this in place, it’s very simple to set an alarm. Make sure you add a <script> reference to the HTML page, then add a function like this, which sets an alarm for 1 minute in the future to walk the dog.

function addAlarm() {
    var alarmTime = new Date(); 
    alarmTime.setMinutes(alarmTime.getMinutes() + 1);
    var alarmMessage = "Walk the dog";
    navigator.plugins.scheduler.addAlarm(addAlarmCallback, alarmMessage, alarmTime, null, 0, null);
}
function addAlarmCallback(alarmName) {
    navigator.notification.alert("Alarm created named: " + alarmName);
}

Notice we have to pass a zero (for a RecurrenceType of None) for the recurrence interval. To make the code clearer, we can add this code to the very top of the scheduler.js function:

var RecurrenceInterval =
    { 
     "None": 0,
     "Daily": 1,
     "Weekly": 2,
     "Monthly": 3,
     "EndOfMonth": 4,
     "Yearly":5 
     };

Then our call to addAlarm becomes easier to read.

navigator.plugins.scheduler.addAlarm(addAlarmCallback, alarmMessage, alarmTime, null, RecurrenceInterval.None, null);

Following this pattern you could add an addReminder function to the scheduler.cs and scheduler.js files, with the slightly different parameters a Reminder expects. You could also query the system for a list of existing Alarms and Reminders so the user could manage them.

So don’t be alarmed (pun intended), go ahead and add these features to your PhoneGap apps!

Atlanta Code Camp–this weekend!

GlenGordon — Mon, 14 May 2012 14:25:00 GMT

The best free developer event in town is the Atlanta Code Camp. It’s free, it’s fun, it’s educational, and it’s this weekend (May 19).

Join 300 of your fellow geeks learning about the latest developer technologies, techniques and best practices from some of the best speakers around. Network, hang out, get fed, and have fun!

During the Code Camp, we’ll have a Windows Phone App Challenge. We’ll announce a “theme” at the beginning of the code camp. The teams (team of one is OK) who create the best Windows Phone apps during the day will get to show off their apps at the closing ceremonies and win great prizes. Form your team ahead of time or find folks at the event, and have a blast.

Nokia Coding Challenge coming to Atlanta on May 15

GlenGordon — Mon, 07 May 2012 20:19:00 GMT

Headphones on. Tilt the seat back. Just steady codin’ as the keys get tapped. Get ready, because Nokia Developer is about to turn Atlanta(and other cities) into Dev City with its Ready.Set () {Code} Challenge.

They are hitting the road to 13-cities looking for developers who want to build an experience - not just another app. To kick off the Ready.Set () {Code} Challenge, Nokia Developer will hold hackathons across the US and Canada beginning in May. You can sign up individually or form your own team to build the coolest, baddest apps for the Windows Phone platform and Nokia Lumia devices.

Prizes will be awarded on site at each event for the top 3 created apps, top student created app, and most Nokia-branded developer (use your imagination). App winners will be judged on creativity, usability, technical difficulty and app presentation.

1^st place: $500 gift card & Nokia Lumia 900

2^nd place: $250 gift card & Nokia Lumia 900

3^rd place: $100 gift card & Nokia Lumia 900

Student Winner: $150 gift card & Nokia Lumia 900

Most Nokia-Branded Dev : $100 gift card & Nokia Lumia 900

At Nokia, they don’t have ordinary developers, so these won’t be ordinary hacks. They have some amazing experiences in store – like the Re-Charge Room - for developers to chill out between pounding out code. So come show off your skills and earn rewards. Space will be limited so register early.

The Challenge is on. See you in Atlanta on May 15! Make sure you are prepared - show up to the event with the Windows Phone developer tools installed on your machines.

For some great tips on getting ready for the event, read my colleague Joe Healy’s great blog post.

Next week, learn about Windows 8 and tour a great coworking facility

GlenGordon — Fri, 04 May 2012 18:32:33 GMT

On Wednesday of next week, I’ll be giving a talk on what’s coming in Windows 8 for app developers and startups. I’ll be presenting this as a benefit to members (current and prospective) of a local coworking facility The Work Spot.

So grab yourself some takeout, stop on by for some learning, take a tour of the place, and maybe win a prize!

Wednesday, May 9, noon
Learn@Lunch
The Work Spot
3150 Main Street, Suite 103
Duluth, Georgia 30096

Announcing the launch of The Campus Coder podcast series

GlenGordon — Thu, 03 May 2012 15:01:59 GMT

Good news, everyone! My colleague Ed Donahue and I have launched a new podcast series called The Campus Coder.

The weekly half-hour podcast series features interviews with student developers who have made the leap into professional development with Microsoft tools. It’s intended to educate, entertain and enlighten aspiring student developers!

The home page for the series is http://aka.ms/thecampuscoder

Facebook page http://facebook.com/thecampuscoder

Twitter http://twitter.com/thecampuscoder

Check it out and let us know what you think! Also, send us guests!!!

Learn The Cloud. Make A Difference. @home with Windows Azure

GlenGordon — Tue, 10 Apr 2012 21:24:28 GMT

How does learning about cloud computing while contributing to scientific research sound to you? Join us for @home with Windows Azure to get a solid understanding of the Windows Azure platform while giving back to a very deserving cause.

What is @home with Windows Azure?

Microsoft provides a 90-day free trial of Windows Azure where you can kick the tires and run an application in the cloud 24x7, cost-free. Why not use that free compute time to give back to a deserving cause? The @home with Windows Azure project is an online activity where you use those 90-days of free compute time (or your MSDN Subscriber benefits) to contribute to Stanford University’s Folding@home distributed computing project.

The Folding@home project helps scientists provide insight into the causes of diseases such as Alzheimer’s, Mad Cow disease, ALS, and some cancer-related syndromes, by running protein folding simulations on thousands of machines world wide.

You will deploy Stanford’s Folding@home application to Windows Azure, where it will execute protein folding simulations in the cloud, thus contributing to the research effort. In essence, your participation is a donation of your free compute time to the Folding@home project!

Get Started

It’s easy to get started in 4 quick steps. The @home with Windows Azure site has a series of short, easy to follow along to, screencasts that walk you through deploying Folding@home to the cloud!

Learn The Cloud

Want to go deeper? Join the @home team for a live webcast or catch one of their recordings on demand to learn more about Windows Azure, including: compute & storage services, debugging in the cloud, and patterns for achieving scale.

Make A Difference

In addition to directly contributing CPU cycles to the Folding@home project, from the start of March 2012, Microsoft is donating $10 (up to a maximum of $5000) to Stanford’s Pande Lab for everyone that participates!

See Your Impact

You can see your impact by visiting the detailed World Stats page on the @home with Windows Azure site. For example, to date, over 6,300 VMs have contributed over 3.5 million compute hours!!!

Learn more about the project and join in at the project’s website: http://distributedcomputing.cloudapp.net

Windows Phone 101 series kicking off in Atlanta

GlenGordon — Tue, 03 Apr 2012 15:00:54 GMT

If you have been wanting to learn how to write and publish Windows Phone apps, here’s a great opportunity to get started in the Atlanta area. The Windows Phone meetup here is kicking off off a 7 part series of events that will teach you how to do it. Between now and June, attend these events, build and publish an app, and you can win great prizes.

Visit the group’s meetup page to sign up. The series kicks off tonight, April 3. Join us for as many of these as you can attend!

PhoneGap on WP7 Tip #7: Marketplace tricks

GlenGordon — Fri, 30 Mar 2012 21:48:11 GMT

This is a quick follow up tip to the last one I posted about using Trial Mode with a PhoneGap application on Windows phone.

As I mentioned in that article, having your application available for users to try without laying out any money is a great way to grab them as a customer. But successfully converting them is about more than just limiting the functionality. It’s about driving your desired behaviors for them. This can be prompting them to download your app, review it (good reviews are another key marketing tool in the marketplace) or even seeing other apps published by you in the marketplace.

Fortunately, there is an easy way to do this through the Marketplace tasks that are available to us. We will add a way to call those relevant tasks from PhoneGap by using the Marketplace Plugin from the previous article.

Revisiting the code from the previous article, we need to make a few changes. First, add this statement at the top of the marketplace.cs file.

using Microsoft.Phone.Tasks;

Then, add a wrapper for the task to show the detail in the Marketplace for the current application using the MarketplaceDetailTask class.

public void showInMarketplace(string args)
{
    MarketplaceDetailTask _marketplaceDetailTask = new MarketplaceDetailTask();
    _marketplaceDetailTask.Show();
}

This does not return a result to the calling JavaScript code, so you don’t need the DispatchCommandResult call as in the previous article.

Next up, a JavaScript wrapper in the marketplace.js file.

marketplace.prototype.showInMarketplace = function () {
    var args = {}
    PhoneGap.exec(null, null, "Marketplace", "showInMarketplace", args);
}

A small change to the index.html page will let us provide the user with a way to quickly jump to the marketplace and buy the app.

function licenseCallback(isTrial) {
    if (isTrial) {
        licenseDiv.innerHTML = 
        'Trial mode, please <a onClick=window.plugins.marketplace.showInMarketplace();>buy me</a>!';
    }
    else {
        licenseDiv.innerHTML = 'Thanks for buying!';
    }

If you try this in the phone emulator, you’ll notice a few things. First of all, the marketplace entry won’t display and in fact you’ll get an error. That’s expected, as your app didn’t get installed on the emulator from the marketplace in the first place. Be assured it will certainly work once your app is published. Second, after you go to the marketplace and then press the back button to return to the app, you get prompted to simulate trial or full mode again. That’s not only expected, but by design. If a user upgrades to paid, when they come back to the app, we want to know then. Not when the app is restarted.

There are other useful marketplace functions, including:

MarketplaceHubTask - Allows an application to launch the Windows Phone Marketplace client application.
MarketplaceReviewTask - Allows an application to launch the Windows Phone Marketplace client application and display the review page for the specified product. This is an EXCELLENT way to encourage reviews, and good reviews are key to a prominent position in the marketplace!
MarketplaceSearchTask - Allows an application to launch the Windows Phone Marketplace client application and display the search results from the specified search terms. You could search for other apps you’ve published by putting the app name or the publisher name in as a parameter to this call. Great for cross selling as in “Like this app? Try the my others!”

It’s easy to leverage the trial mode and the marketplace API in your PhoneGap apps on Windows Phone to get more purchases!

Now Available: Windows Phone SDK 7.1.1 Update

GlenGordon — Mon, 26 Mar 2012 21:42:43 GMT

Today the Windows Phone team announced the release of the Windows Phone SDK 7.1.1 Update! This is a patch for the full Windows Phone SDK 7.1 and includes many new capabilities and features for expanding your apps’ reach to new markets and new devices, plus the ability (unsupported) to test your apps on Windows 8.

Check out the new capabilities:

Updated 512 MB OS Emulator Image: An updated build Windows Phone OS 7.1 (Build 8773)
New 256 MB OS Emulator Image: A new Windows Phone OS 7.1 emulator image (Build 8773) that emulates running on 256 MB devices
Emulator Choice: Ability to debug or run your WP apps in either the 256 MB or 512 MB emulator
Windows 8 Support: An updated emulator is included, which can run on Windows 8
IntelliSense support for adding the new 512 MB requirement to the Windows Phone App Manifest file

Here are some other new things the release offers:

‘Go Live’ license: The update now has a ‘Go Live’ license; developers running WPSDK 7.1.1 are now empowered to publish their Windows Phone apps to the Windows Phone Marketplace.
Full Localization: WPSDK now supports all 10 IDE languages; and the OS image now has Malay and Indonesian
Windows 8 Support: The updated emulator will now run on Windows 8; note that the OS is still not officially supported by developer support until the final OS release

Download the full SDK today if you haven’t already, and add this patch to be at the latest set of tools for building Windows Phone apps.

Windows 8 Developer Camps – Coming Soon!

GlenGordon — Wed, 07 Mar 2012 22:05:23 GMT

Ready to dive in and learn more about Windows 8 and the developer opportunity it represents? Then get ready for the series of Windows Developer Camps! These are free, full-day, developer-focused events featuring a combination of sessions and hands-on labs, and we’ll have 10 of them right here in the east, including one in Atlanta!

Windows 8 changes everything.

Combining the broad reach of Windows, best-in-class developer tools, a reimagined user experience, support for new chipsets, and a built-in Store with industry-leading business terms — Windows 8 is the largest developer opportunity, ever.

Join us for this free, full-day event designed to share all the knowledge you need to start building Metro-style applications for Windows 8 – today. We’ll begin by showing you how to use Visual Studio to code fast, fluid, immersive and beautiful Metro-style applications in HTML5/JavaScript, XAML/C# and C/C++. Your existing investments in these languages carry forward, making Windows a no-compromise platform for developers.

Whatever language you choose, your app gets deep integration with the Windows shell, including notifications, live tiles, deep links, and contracts with other apps. And now you can build once and support all Windows customers, no matter what type of PC they have – from tablets to laptops to convertibles to desktops.

We’ll cap the day off with an open, hands-on lab session. It’s the perfect opportunity to get your dream application underway, or finish that app you’ve already started – with Windows 8 experts available to guide you through every step. Bring your laptop to join in the fun and show off your killer app.

Get started now!

The Schedule

Join us in one of these cities:

Windows Developer Camps
Date	City	More
March 27, 2012	Reston, VA	Details & Registration
March 29, 2012	Chevy Chase, MD	Details & Registration
April 11, 2012	Orlando, FL	Details & Registration
April 17, 2012	Tampa, FL	Details & Registration
April 19, 2012	Ft. Lauderdale, FL	Details & Registration
May 1, 2012	Charlotte, NC	Details & Registration
May 22, 2012	Waltham, MA	Details & Registration
May 23, 2012	Atlanta, GA	Details & Registration
May 23, 2012	Farmington, CT	Details & Registration
May 24, 2012	Malvern, PA	Details & Registration

PhoneGap on WP7 Tip #6: Trial Mode

GlenGordon — Fri, 02 Mar 2012 18:38:57 GMT

When you provide users a way to evaluate your application without any money up front, your app turns into the best advertising for itself. The user can check out your application in a limited feature mode, and when you have them hooked in to the benefits, they’re more likely to spring the cash to buy it.

On many platforms, this entails maintaining separate versions of your applications, both in the source code and in the marketplace. Not so with Windows Phone.

The Windows Phone marketplace (and the forthcoming Windows 8 marketplace) provide you, the developer/publisher, the option of providing a trial mode for your application. When you publish your app with trial mode enabled, users will see two ways to get your app in the marketplace, like in this example with Angry Birds.

Note that this is a single location in the marketplace. Which means it’s a single version of your application. You don’t need to maintain two different code bases!

When the user installs the app using the “try” option, you can check a flag within your application whenever you want, and if the user installed it as a trial, you can limit what they can do. This trial mode limitation is completely up to you. You can allow them to play only a few levels of a game, limit them to adding 5 friends to some list, prevent them from saving an edited picture, whatever. The choice is yours.

With a PhoneGap application on Windows Phone, we can take advantage of the trial mode capability very easily.

First, take a look at this article for implementing trial mode in a Silverlight application (since that is what hosts a PhoneGap application). We’ll be using that as a basis for the code in this blog post.

Specifically, we’ll need to create an application level variable to store the value of the trial mode flag. We do this because checking the flag from the underlying marketplace API takes a little time to do, so for our app to be most responsive, we’ll cache that value in a variable. Also note in the article there are certain times when we ask the marketplace API for that value – when the application starts and when the application resumes. The reason we check it when it resumes is that the user can switch away from the running app, buy the app, then return immediately, and we want to be ready to expose all the features of our app in their full glory when the user comes back!

Open an existing PhoneGap project (or create a new PhoneGap project using the Visual Studio template as described here). Then, follow the section of the trial mode article above article entitled “Checking for a Trial License in Your Application”. That will enable us to cache the value of the trial mode flag. It also provides a way to test it, since when you’re developing, there’s no marketplace installation yet from which to pull the setting. This testing code is contained in a compiler directive #if DEBUG. When the application is published, you should change the value in the drop down at the top of the Visual Studio window from Debug to Release, and you won’t have to remove any of the code, it will just switch to using the other section in the #if directive.

Now that we have the trial mode value cached in our hosting Silverlight application, let’s access it from the code in our PhoneGap application. We’re going to use a Plugin as described in my previous post about SMS messages. The difference here is that when we used a Plugin to send an SMS message, it was fire and forget, and in this case the Plugin must now return that trial mode flag.

We’ll create the C# code first for the Plugin. Right click on the Plugins folder in your project in Solution Explorer, and create a new class called Marketplace.cs. In that class we’ll put the code that our Plugin is going to call. Replace all the code in that class with the following. Note the namespace is important, it ties this class to the PhoneGap Plugin plumbing.

using System;

using System.Net;

using System.Windows;

namespace WP7GapClassLib.PhoneGap.Commands

    public class Marketplace : BaseCommand

        public void checkLicense(string args)

            PluginResult result = new PluginResult(PluginResult.Status.OK, (Application.Current as PGWP7_Trial.App).IsTrial);

            this.DispatchCommandResult(result);

This Plugin references our IsTrial variable created in the above article on trial mode, so it’s important to realize it won’t work without that code.

Now that we have the function in the Plugin, we can invoke it from JavaScript inside our PhoneGap application. We’ll create a separate .js file to handle calling into the Plugin framework. Add a new text file in the www folder in the project, named marketplace.js.

function marketplace() {

    this.resultCallback = null;

marketplace.prototype.checkLicense = function (callback) {

    var args = {}

    PhoneGap.exec(callback, null, "Marketplace", "checkLicense", args);

PhoneGap.addConstructor(function () {

    if (!window.plugins) {

        window.plugins = {};

    window.plugins.marketplace = new marketplace();

);

This handles the call to the C# code above and makes the Plugin available to the rest of the code in the PhoneGap project.

Here’s a simple example to check the license. At the top of the index.html page, add a <script> tag referencing the markeplace.js file. Then use this code to check the license. Note that this pattern requires a callback, since that’s how the plugin model returns results. Passing the callback function name as a parameter each time it’s needed is an easy way to keep dependencies out of the marketplace.js file.

<script>

  function checkLicense() {

      window.plugins.marketplace.checkLicense(licenseCallback);

  function licenseCallback(isTrial) {

      if (isTrial) {

          licenseDiv.innerHTML = 'Trial mode, please buy me!';

      else {

          licenseDiv.innerHTML = 'Thanks for buying!';

</script>

This bit of HTML will interact with that JavaScript.

<button onclick="checkLicense();">Check license</button>

<div id="licenseDiv"></div>

Any time you need to check the licensing for your app, just use that pattern. In my next post, we’ll expand the marketplace Plugin with some other features. So get those apps out with trial mode and hook in your users!

Windows 8 Consumer Preview available today!

GlenGordon — Wed, 29 Feb 2012 20:58:00 GMT

Today, the Windows family at Microsoft took a huge leap forward (pun intended).

The consumer preview for Windows 8 is now available, and it’s one of the easiest installs of an update I’ve ever encountered. In fact, I was surprised to find out that I could actually update from last year’s developer preview directly, instead of having wipe my machine.

Lots of great information about this release is available on various product team blogs, like the Windows Experience team blog.

Check out some of the reviews. Engadget has some Microsoft Windows 8 Consumer Preview detailed impressions, and cnet has a nice writeup.

What’s particularly exciting for developers is how well the Metro style interface scales. Check out Microsoft Windows 8 on 82-inch touchscreen hands-on (video)

Download it today from http://preview.windows.com/ and get started building Metro apps!

Don't forget that this consumer preview does not include the developer tools. For that, head over to http://www.microsoft.com/visualstudio/11/en-us from your Windows 8 installation and grab it.

Join the 30 to Launch challenge and build a Windows Phone application today!

GlenGordon — Wed, 01 Feb 2012 20:30:40 GMT

Lots of things are tough to do in 30 days. Having a baby, building a skyscraper, shooting a movie.

One thing that’s dead easy though? Creating a Windows Phone application.

To that end, we’ve launched a new campaign designed to help you be successful doing just that. It’s called 30 to Launch. From January 31 to February 29 (yes, you even get an extra day this year) learn about developing for Windows Phone. In Week 2, you’ll have a chance to request a token to register for App Hub for free to publish your apps. In week 3 you could win a Nokia Lumia 800 phone - to test your app of course! :)

Winners of the 30 to launch program have a chance to win a 3D TV, and Xbox Kinect, and more. Plus you’ll have the satisfaction of having brought a cool app into existence and sharing it with the world in the Windows Phone marketplace!

Are you in? Sign up today at www.30tolaunch.com to join the challenge.

Get help with your Windows Phone apps at the Phone Garage in Birmingham–February 18

GlenGordon — Thu, 26 Jan 2012 20:51:05 GMT

What's a Windows Phone Garage?

A free, full day event being designed to help developers/designers build Windows Phone applications. Whether you're a seasoned veteran or just getting started with .NET development this full-day event is for you. Not sure how to turn an idea into an app? Our local Windows Phone, Silverlight and .NET experts will be on hand to answer questions, share code and give guidance.

We will also have devices on hand for you to test your app throughout the day to make sure it performs well on Windows Phone hardware.
This is the perfect opportunity to begin work on your dream application, or finish that app you've already started, with Windows Phone experts there to guide you every step of the way. Bring your own laptop to join in the fun and show off your killer app!

Agenda

There is no set agenda. Community experts will provide impromptu sessions based on attendee questions/requests. Lunch and a light breakfast will be provided.

Prerequisites

Bring a notebook computer and identification. Also check out the APP HUB where you can get developer tools, learn about application features, understand common task for Apps and register and load your APP.

Alabama Code Camp 9–March 10 in Troy, AL

GlenGordon — Thu, 26 Jan 2012 15:20:40 GMT

The industrious developer community over in Alabama has just announced their 9th code camp, taking place this coming March 10th in Troy.

If you want a fantastic day of free training, networking with some great folks, and a lot of geek fun, make plans to attend. They need speakers too! So try your hand at even a simple presentation on a topic you’re interested in.

Save the date on your calendar, and get all the information at http://www.alabamacodecamp.com/

Excellent ASP.NET MVC3, HTML5 and jQuery training in Atlanta

GlenGordon — Thu, 12 Jan 2012 16:48:44 GMT

If you have been wanting in-depth in-person training on ASP.NET MVC3, HTML5 and jQuery in Atlanta , check out Shawn Wildermuth’s upcoming class on building applications on the Microsoft web platform. Here is the outline for the class:

This workshop is a 3-day class that features an in depth look at ASP.NET MVC3 and HTML5. ASP.NET MVC3 is the third iteration of the Model/View/Controller pattern as implemented by the ASP.NET team. In this course, you’ll learn how the next web is going to be created on the Microsoft platform.

The class will be held February 27-29. Register today because early bird pricing ends January 30!

PhoneGap on WP7 Tip #5: Live Tiles and Deep Linking

GlenGordon — Tue, 10 Jan 2012 20:32:42 GMT

Windows Phone has a unique and very handy way of providing multiple entry points into your application. This is done through the use of one or more Live Tiles. The start screen on Windows Phone is comprised of tiles that represent many things – applications, people, websites, music, map locations, and more.

There’s a neat way to get a feel for this UI metaphor even if you don’t have a Windows Phone or the emulator installed. Point your iOS or Android device to http://m.microsoft.com/windowsphone/en-us/demo/ and you can see the tiles in action.

When you have an application on Windows Phone, one of the best compliments that a user can give your app is to pin it to their start screen. And the cooler your application tile, the more your users will like and use your application. With Windows Phone 7.5, you can now have multiple tiles representing multiple entry points for your application pinned to the user’s start screen. Check it out in this quick video of FourSquare on Windows Phone. FourSquare allows you to pin locations and people to the start screen for quick access.

A common example of using multiple Live Tiles is a weather application. The user’s start screen might have a tile for each location for which they want to access the weather quickly. Each tile represents a different location, and when the user launches the app from each tile, the application responds by going straight to the details page for that city. This is a huge timesaver for the user.

Not only can the tiles represent multiple entry points into your application, but each tile can surface a small amount of data to the end user from your application, with different images and text being shown on each tile. In the case of a weather app, each city’s tile could display the current conditions or forecast, maps, and more for that city. Live Tiles also have this cool flipping effect, so you can even put things on the back of each tile like secondary images or text. The tile will flip over randomly, making for a dynamic start screen that users really get a kick out of.

You can manage your application’s Live Tiles from within the app’s code. And since a PhoneGap application runs within a Silverlight application, you could write some C# or Visual Basic code to create, change, or remove the tiles. But there’s an even easier way. Check out the Live Tile plugin on Jesse MacFadyen’s plugin page. It provides a simple way to create and update tiles from within the JavaScript of a PhoneGap application.

Here is some code from the sample page that shows how to create a secondary tile:

function createSecondaryTile() {

    console.log('Create secondary tile');

    var success = function (res) {

        console.log('secondary tile was created');

        document.getElementById('res').innerHTML = res;

};

    var fail = function (e) {

        console.log("Error occurred: " + e);

        document.getElementById('res').innerHTML = "Error occurred: " + e;

};

    navigator.plugins.liveTiles.createSecondaryTile(success, fail,

     { title: document.getElementById('title').value,

       image: 'Images/appbar.save.rest.png',

       count: document.getElementById('count').value,

       secondaryTileUri: secondaryTile,

       backTitle: 'back'

});

};

The key call in here is to navigator.plugins.liveTiles.createSecondaryTile. This code sets up the image, count and title to control how the tile appears, which are useful. But the key to making the secondary tile a deep link to someplace in your application is in the SecondaryTileUri parameter.

Normally that URI contains two things that a Windows Phone app cares about – the page to be navigated to (a XAML page in the project) and some parameter to be sent to the page, like the zip code of the city whose weather to display. These are formed just like a web based HTTP request. In Windows Phone app, the XAML part of the URI is automatically navigated to, and you can write code in C# or VB to retrieve the querystring parameters to get what you need.

Now, in our case what we want to do is go to the same XAML page each time (the one hosting the PhoneGap application) and navigate to a different HTML page within the PhoneGap file structure. So we just need to provide the proper URI to that HTML page as a querystring parameter at the end of the XAML page’s name in the URI we assign to that tile. Fortunately the plugin handles the XAML page part, and you just specify the HTML page to navigate to. In the code above the secondaryTile variable is set earlier in the code.

var secondaryTile = 'www/liveTiles.html';

This is added to the end of the URI for the tile.

While the plugin is useful, it’s missing one key part. Specifically, it doesn’t contain a way for the PhoneGap application to navigate to the proper HTML page when it is activated from a tile that has a deep link URI. So you’re going to need to put a little code in the hosting XAML page, and actually tweak the secondaryTile variable in the sample to get it to work.

If you’ve created a project from the PhoneGap template, open MainPage.xaml.cs. Inside the constructor method (which starts off with public MainPage), type Loaded += then hit Tab twice. This will create a MainPage_Loaded event handler. Change that to be the following:

void MainPage_Loaded(object sender, RoutedEventArgs e)

try

        string pgUri = this.NavigationContext.QueryString["Uri"];

        PGView.Browser.Navigate(new Uri(pgUri, UriKind.RelativeOrAbsolute));

    catch { };

This code will pull the HTML page off of the end of the URI and send the PhoneGap control’s browser off to that page. We wrap it in a try/catch in case there’s no URI or the Navigate fails.

The final thing to do is change the URI of the HTML page so it has the correct URI for the desired HTML page. Revisit the liveTilesExample.html page and change the secondaryTile variable to be this:

var secondaryTile = 'app/www/liveTilesExample.html';

Now run the project, click on Live Tiles page, and create a secondary tile. That should bring you back to the start screen and show the secondary tile. If you tap on the tile, it should launch the app and navigate to the Live Tiles page instead of the main page. Press the Windows key at the bottom, swipe to the right and you’ll see the main icon for the application. Launching the app from there will go to the index.html page and not the live tile page. If you press and hold that icon, you can pin it to start, and now you’ll have the main tile for the app as well as the secondary tile.

One thing I’m finding a challenge is passing a parameter into the HTML page. So if your page was showWeather.html and you wanted to send in a zip code, I’m finding that you can’t simply append ?zipcode=90210 at the end of the HTML page – it won’t work, although you can still make it part of the tile’s URI. I’m working on a tip for handling that, so look for a future blog post about it.

I encourage you to explore all the things you can do with Live Tiles now that you have a way to use them easily from PhoneGap. Here’s a useful article on MSDN on what you can do with them. Have fun with Live Tiles!

PhoneGap 1.3 released, full support for Windows Phone

GlenGordon — Mon, 19 Dec 2011 21:12:36 GMT

This morning the PhoneGap community announced their version 1.3 release! This release is special because it’s the first one to include support for Windows Phone. And not just a little support, but all the main PhoneGap features.

For those of you with PhoneGap experience or even just a heavy HTML5 background, this will be an excellent way to reach the growing audience of Windows Phone users with your applications. And because of the way PhoneGap is implemented on Windows Phone, it means you can add features and UI elements *outside* of the PhoneGap UI to round out your application as a full featured Windows Phone app!

Read the announcement on our interoperability blog, and download the framework from here.

Great Windows Azure announcements and fresh content!

GlenGordon — Mon, 19 Dec 2011 18:33:00 GMT

One of the downsides of finding videos and articles on the Web is that they can get out of date (to varying degrees) over time. So it’s always exciting to me when fresh material comes around, especially in conjunction with new announcements and especially from the product teams themselves.

So is the case with the latest round of Windows Azure videos and materials online. All the videos located at http://r.ch9.ms/LearnWA will give you what you need to get started. Read about all the amazing features in the December release including Node.js and Hadoop support (watch some videos covering that), easier subscription management, new scaling options for SQL Azure, and more.

Then, go play in the cloud using the Free Trial, now with spending caps to ensure you have no out of pocket costs to worry about. And since with Windows Azure you can build and run cloud solutions locally on the exact same platform as in the cloud, go get the SDKs. The new site has a tremendous collection of SDKs and guidance to help you get started.

So what are you waiting for? You now have plenty of information to get started and write your very own Azure service. Take some time between presents and meals to kick back with some cloud coding!

PhoneGap on WP7 Tip #4: The Application Bar

GlenGordon — Wed, 14 Dec 2011 16:33:13 GMT

“So two applications walk into a bar…”

One of the user interface constructs that’s unique to Windows Phone is the Application Bar. The App Bar (as we affectionately call it) gives users a standard place to find buttons for commonly used tasks within an application, and menus for lesser used but still necessary tasks.

Here’s a screenshot of the Search screen where you can see the App Bar at the bottom.

While it’s possible to create something inside your HTML in PhoneGap that mimics the look and behavior of the native one, in my opinion it makes more sense to use the native Windows Phone one since it’s already there. There are a lot of advantages to using the native App Bar:

It doesn’t scroll with your content.
It automatically rotates the icons when the user changes from portrait to landscape orientation.
It will recolor the icons if the user switches between light and dark themes.
The buttons have descriptions to help the user realize what they are for.
It will make your application look like it belongs on Windows Phone!

Because of the ability to communicate between the hosting Silverlight page and the HTML content in the PhoneGap control, you can do all the coding for the button or menu functionality in JavaScript and just invoke those functions when the button is clicked.

Start by creating a new project using the GapAppStarter template I described in Tip #1. We’re going to add the icon for the button to the project. There are several that can be found on your system after you install the Windows Phone developer tools. They’re stored in your Program Files folder (typically C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons). Create a folder in the project called Icons (right click on the project in Solution Explorer and chose Add, New Folder. Let’s call it Icons. Then, right click on the Icons folder and choose Add Existing Item. Browse to the Dark folder beneath the one mentioned above and pick your favorite. I’m using the refresh icon. Make sure you click on the png file and, in the Properties window, change Build Action to Content.

Now we’re ready to add the App Bar to the page. Open up mainpage.xaml and scroll to the bottom in source view. Add this XAML in below the </Grid> tag.

<phone:PhoneApplicationPage.ApplicationBar>

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.5">

        <shell:ApplicationBarIconButton IconUri="/icons/appbar.refresh.rest.png"

        x:Name="AppbarButtonRefresh"  Text="Refresh"/>

    </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

This will result in an App Bar having 50% opacity, with one button on it. If you want more buttons, just add more ApplicationBarIconButton lines. If you run the app in the emulator, you’ll see the button on the App Bar at the bottom. In addition to ApplicationBarIconButtons you could also add ApplicationBarMenuItems which show up when the user expands the App Bar by tapping the ellipses.

Clicking the button doesn’t do anything yet, so let’s add the code. First, inside the PhoneGap portion, let’s add some JavaScript to call. Here’s an example.

function appbar_refresh() {

    var currentTime = new Date();

    document.getElementById("welcomeMsg").innerHTML = "You clicked refresh at " + currentTime.toString();

To call this from our Silverlight code, just add an event handler for the button in XAML and put some code in. Go back to the MainPage.xaml page, put your cursor just inside the closing tag /> for the ApplicationBarIconButton element, type Click= and chose New Event Handler from the dropdown. Then in the C# code, just pass control into your JavaScript by typing PGView.Browser.InvokeScript("appbar_refresh");

Run the project again, and every time you click the button, the time should update on the page. Note that in this approach, we’re putting all the logic to handle the button click in JavaScript, so if you have the same PhoneGap application on other platforms, you would just need buttons in the HTML in that version to invoke that functionality.

If you want to experience the App Bar in landscape mode, just follow the instructions in Tip #1 to make your application able to rotate when the user changes device orientation. The app bar will automatically adjust for landscape. You will note that in Landscape the App Bar is covering part of the PhoneGap output. You could adjust that by changing the layout within the HTML when the screen rotates. But it’s useful here because here we get to see the semi-opacity of the bar as we configured it.

It’s worth mentioning that sometimes applications need to change the App Bar, like hiding it, changing or hiding or disabling buttons or menus, etc. You can create an event handler for the ScriptNotify event as in Tip #2 and invoke that from JavaScript to manipulate the App Bar. The steps for manipulating the App Bar in code can be found in this MSDN article.

Now let’s see some great PhoneGap apps with App Bars!

PhoneGap on WP7 Tip #3: Sending SMS and intro to Plugins

GlenGordon — Fri, 02 Dec 2011 18:47:27 GMT

In this tip, I’m going to show you how to send an SMS message from PhoneGap on Windows Phone using the SMSCompose member of the Microsoft.Phone.Tasks namespace. There are a lot of useful launchers and choosers in that namespace, and I’ll be writing about some in detail in a future blog post. I’m also using the SMSCompose task to introduce another way to interoperate between your PhoneGap application and the underlying platform, and that is through a PhoneGap plugin.

In the previous tip, I showed how you could write some code in the Silverlight application that is hosting the PhoneGap application, and call it from PhoneGap via the scripting interface. Plugins are simply a different mechanism to invoke platform specific code. The technique is pretty well known to PhoneGap developers already, so it makes sense to explore how to use it in Windows Phone.

PhoneGap has quite a few cross platform APIs in place to handle interop with each platform, in areas such as location, storage, sounds, etc. These are very useful in allowing you to write code that uses those features only once and run it on any device that PhoneGap supports. But, sometimes there are platform specific things you want to take advantage of (and in the case of Windows Phone there are many) so Plugins is a handy way to do that. Jesse MacFayden has also written a great blog post to get you started on writing PhoneGap plugins for Windows Phone.

We’re going to write a plugin to allow us to send an SMS message from JavaScript in PhoneGap using Windows Phone. First, let’s look at the code in C# for sending an SMS message.

SmsComposeTask smsTask = new SmsComposeTask();

smsTask.To = "4045551212";

smsTask.Body = "Message for you, sir!";

smsTask.Show();

Pretty straightforward. Note that in this API, it’s fire-and-forget in that we do not receive a return value. What we’d like to do now is provide a JavaScript function we can call from our PhoneGap application that could invoke that. Maybe we want it to look like this:

sendSMS.send(‘4045551212’, ’Hello’);

Let’s connect those two ends. First of all, we need to put the above C# code into a method in a class that can be called by the PhoneGap runtime. These classes can conveniently be placed in the Plugins folder in your PhoneGap project.

To add the class, right click on the Plugins folder and chose Add New Item. Pick Class and name it whatever you want. I named this one SendSMS.cs. The class has a lot of extra using statements at the top we don’t need, so feel free to remove them for simplicity.

Next, we need to change the namespace. By default, the namespace is our Visual Studio project. However, we want this class to be part of the PhoneGap runtime library’s namespace, so change the namespace at the top of the code to be WP7GapClassLib.PhoneGap.Commands. We also need to change our class to inherit from the PhoneGap runtime’s BaseCommand class so it has all the plumbing in place to be invoked from our JavaScript. So after the name of the class, put : BaseCommand.

Then, inside the class, we need a method to hold our SMS Compose code. I created one called send but you can call it whatever you want. Now we can put the code from above in that method. In order to reference the SmsCompose task we need to bring its namespace reference into our class by adding using Microsoft.Phone.Tasks to the top of the class. By now,you should have something that looks like this:

using Microsoft.Phone.Tasks;

namespace WP7GapClassLib.PhoneGap.Commands

    public class SendSMS : BaseCommand

        public void send(string args)

            SmsComposeTask smsTask = new SmsComposeTask();

            smsTask.To = "(678) 555-1212”;

            smsTask.Body = "Hello";

            smsTask.Show();

Although the recipient and message body are hard-coded, let’s leave that for now so we can get it working.

The next step is to set up a way to invoke this send method from the JavaScript in your PhoneGap application. The way you implement this method is up to you, but most PhoneGap developers will agree that it’s important to provide a consistent way to call Plugins across platforms. To that end, I went out and looked at a list of PhoneGap plugins developed by the community, and I found one that handles sending SMS messages on the iPhone. So I will create a method signature in JavaScript that matches the one for use on iOS. The JavaScript is below (inside of a .js file in your www directory in the project).

function SMSComposer(){

this.resultCallback = null;

SMSComposer.prototype.showSMSComposer = function(toRecipients, body)

    var args = {};

    if(toRecipients)

        args.toRecipients = toRecipients;

    if(body)

        args.body = body;

    PhoneGap.exec(null, null, "SendSMS", "send", args);

PhoneGap.addConstructor(function () {

    if (!window.plugins) {

        window.plugins = {};

    window.plugins.smsComposer = new SMSComposer();

);

This is a little different from the iPhone one. Since the SmsComposeTask doesn’t return a result, we don’t need any callbacks in JavaScript. The connection point in here is in the PhoneGap.exec call. The first two parameters (currently null) would be the function names that you’d write to handle a callback and an exception coming out of this method call. The third parameter is the name of the C# class, and the fourth is the C# method name. The fifth parameter is a JavaScript object containing any information we want to send to the function we’re calling. For now remember we are ignoring them in our C# code.

With the Plugin’s API in place, just reference that .js file in a <script> tag, and write some JavaScript to call window.plugins.smsComposer.showSMSComposer(recipients, message) with one or more recipient and a message. That’s the same JavaScript you’d write to call the iOS version using that plugin on that platform. By the way, this is what the SMS composer screen will look like to your end users, and if you run your project in the emulator, you’ll see the same thing.

The only thing we have to finish here is to actually make use of the recipient list and message that are sent into the C# function via its args parameter. Since the arguments are coming in as a JSON string, we can use a .NET deserialization library to handle that for us. We create a class that has the data fields that match the JSON object graph (recipients and message) and then deserialize the args parameter into an instance of that class. The deserialization is automatic provided the members of the class match the names and data types of the JSON object graph. Here’s the full version of the C# class with those changes:

using Microsoft.Phone.Tasks;

using System.Runtime.Serialization;

namespace WP7GapClassLib.PhoneGap.Commands

    public class sendSMSargs

        [DataMember]

        public string toRecipients;

        [DataMember]

        public string body;

    public class SendSMS : BaseCommand

        public void send(string args)

            sendSMSargs myargs = JSON.JsonHelper.Deserialize<sendSMSargs>(args);

            SmsComposeTask smsTask = new SmsComposeTask();

            smsTask.To = myargs.toRecipients;

            smsTask.Body = myargs.body;

            smsTask.Show();

            this.DispatchCommandResult();

If you want to use this plugin in other PhoneGap on Windows Phone 7 projects, you’ll just need the C# class file and the JavaScript that calls PhoneGap.exec. As I mentioned, there are many Windows Phone APIs that can be wrapped in plugins for use in PhoneGap, and I’ll be covering some in future blog posts.

There are definitely times you’ll want to use plugins and times you’ll want to use the script interface, and I’ll cover those in more detail in a later post as well. Happy coding!

PhoneGap on WP7 Tip #2: Script interaction

GlenGordon — Tue, 22 Nov 2011 03:42:09 GMT

(This post is part of my series PhoneGap on Windows Phone 7 tips.)

When you are creating integration points between your PhoneGap HTML5 application and the Silverlight hosting application, there are a few ways you can go about crossing the gap (pun intended). This tip is an example of one of those techniques. It’s very flexible, and is typically going to be used when you have one off types of code being written on both sides. We’re able to do this because the PhoneGap user control actually wraps a Windows Phone WebBrowser control, and we can access that internal WebBrowser and use the InvokeScript method and the ScriptNotify event to do what we want here. If you’re curious as to all the details about the WebBrowser control and if there’s other things you can do in the context of a PhoneGap application, you can read about it on the MSDN site.

As a side note, if you try the examples below and your version of PGView does not seem to have a Browser member, you’re probably working with an older version of the PhoneGap user control. To get the latest version, you’ll need to download the framework for the control, build that project, then add output of that to your project. To do that, open the solution WP7GapClassLib in the framework folder of the WP7GapBuild project. Build that solution. Then, when you create a project from the GapAppStarter template, simply right-click on the GapLib folder, choose Add Existing Item, then browse to the location where the WP7GapClassLib project is stored. Then drill down to the bin\debug folder and pick the WP7GapClassLib.dll file in there. Your references to it should update automatically.

This script integration technique is bidirectional. You can have the hosting page’s code call into the script in the PhoneGap application, and you can have JavaScript code in the PhoneGap application call code in the hosting Silverlight page.

Let’s start with a simple button on the Silverlight host page to trigger the code we want to run. On MainPage.xaml, go into designer view, then make room at the bottom of the page for the controls we’re going to add by resizing the PhoneGap control up just a little. Use the grab handle at the bottom of the control, it’s a downward facing triangle. Open the Toolbox at the left side of Visual Studio, if it’s not already open. In there you’ll see a lot of the basic Silverlight controls you can add to a page. Look for the Button control, drag it onto the page below the PhoneGap control. Then set its Content property to “To PhoneGap”. You can use the Property window to the right, or just change it inline in the XAML code.

To create an event handler, double click the button. That will open a code window and position your cursor inside the newly created button1_Click event handler. Here is where we call the script in PhoneGap. Type in PGView.Browser.InvokeScript(“button1_Click”); Your code window should look like this:

private void button1_Click(object sender, RoutedEventArgs e)
 {
     PGView.Browser.InvokeScript("button1_Click",textBox1.Text.ToString());
 }

Now we need to create a JavaScript function called button1_Click and put our code in it. In the <script> section at the top of index.html in the WWW directory of the project, put in the following script:

function button1_Click() {
           document.getElementById("welcomeMsg").innerHTML = "You clicked!";
       }

You could call the function anything you want, but for consistency in the demo I set it up this way. Run the project, click the button, and you should see the HTML change to “You clicked”.

You can also pass parameters into the script. Go back to the Silverlight page and add a TextBox to the right of the button. Your screen should look a little like this:

Set the Text property of the text box to be an empty value. Change the code in the button click event handler to include sending the Text of the textbox to the script handler.

private void button1_Click(object sender, RoutedEventArgs e)
{
    PGView.Browser.InvokeScript("button1_Click",textBox1.Text.ToString());
}

Then, we need to update the JavaScript button1_Click function to accept the parameter:

function button1_Click(textbox) {
    document.getElementById("welcomeMsg").innerHTML = "The TextBox says: " + textbox;
}

That parameter could be a collection/array too, if you need it.

(By the way, as you run this sample and click in the text box to type, you’ll see the emulator’s onscreen keyboard appear. The first thing to notice is that it slides your PhoneGap display up and off the screen. We’ll address that in a later article. Secondly, if you’d like to type with your computer’s keyboard rather than clicking the letters on the screen, just press Pause or Page Up / Page Down to toggle that.)

Going the other direction is a bit trickier, since you need to tell the host Silverlight page to expect a call “up” from the WebBrowser control inside the PhoneGap control. Add a button to the HTML page like so:

<button onclick="window.external.Notify('clearTextBox');">clear textbox</button>

Unlike calling into the PhoneGap’s browser script engine, calling out of it to the host page always raises a single event – Browser_ScriptNotify. We create an event handler for this in the host page’s constructor method. The constructor is the method with the same name as the host page. In our example it’s public MainPage(). Find that method at the top of the MainPage.xaml.cs file. At the end of that method, type PGView.Browser.ScriptNotify Then type a space, a plus, and an equals. Follow that with two presses on the Tab key. Congratulations, you just learned how to create and wire up an event handler in XAML! That will be a handy set of keystrokes in the future.

In the newly generated Browser_ScriptNotify method, delete the line that throws a NotImplemented exception, since we’re implementing the function. Look at the method parameters. The second one e is of type NotifyEventArgs. All you really need to know here is that e.Value will contain the string sent from the window.external.Notify call from the PhoneGap control. So let’s write code to handle it.

void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    string commandStr = e.Value;

    if (commandStr == "clearTextBox")
    {
        textBox1.Text = "";

    }
}

Run the project, type some text in the text box, then press the clear textbox button. The text in the textbox should be cleared.

As you add more places where your JavaScript inside your PhoneGap app needs to talk to the hosting page, you’ll just add new if statements in this event handler. You could get creative and pass an array serialized into json, with perhaps the name of an “action” prepended in front of it in the string.

Let me know your questions or comments about this technique below!