Pla.NET Southeast!

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

2012-02-01T20:30:40Z

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

2012-01-26T20:51:05Z

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

2012-01-26T15:20:40Z

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

2012-01-12T16:48:44Z

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

2012-01-10T20:32:42Z

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

2011-12-19T21:12:36Z

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!

2011-12-19T18:33:00Z

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

2011-12-14T16:33:13Z

“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

2011-12-02T18:47:27Z

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

2011-11-22T03:42:09Z

(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!

PhoneGap on WP7 tip #1: Handling Orientation

2011-11-16T15:08:00Z

Today’s PhoneGap on Windows Phone 7 tip involves handling orientation changes. This means when a user rotates their phone from portrait to landscape, the content should rotate as well. Not only that, in some scenarios elements on the screen should reformat for readability and ease of interaction.

As I mentioned in the introductory post,, you can do a lot of things within your application just working with HTML/JS/CSS inside the PhoneGap control. But you’ll gain a whole new set of app superpowers if you step outside of that. We’re starting today with something small – how to have the PhoneGap part of application rotate properly as the phone changes orientation.

To get ready for today’s tip, let’s create a new project in Visual Studio using the PhoneGap template that’s described in the introduction to the tip series.

It’s sneaky because you need to click on the Visual C# section on the left pane of the window to display the entire list of templates.

Once you create the project, what you’ll have is essentially a Silverlight for Windows Phone project. PhoneGap is running in a host Silverlight XAML page. By default, Silverlight for Windows Phone applications do not run in landscape mode. You can observe this by running the application (press F5) and click one of the screen rotation buttons on the phone emulator.

You’ll see that the emulator rotates, but the text does not.

This is a characteristic of the host Silverlight application as well as the HTML rendering inside of the PhoneGap control.

Allowing the host application to support landscape mode is pretty easy. In Solution Explorer, double click on the MainPage.xaml file. In the Properties window, find the SupportedOrientations and change it to PortraitOrLandscape. Note that you can do this directly in the XAML if you are feeling adventurous. Also note that there is an Orientation property which controls the starting orientation, so if you want your app to launch in landscape orientation, this is how you would control that.

Run the app again and rotate the emulator.

Success! We now have the host page and the PhoneGap control rotating.

At this point you could also put JS code in to respond when the devices is rotated, to adjust the UI via swapping out divs or using CSS to control it. Here’s a simple example, based on the boilerplate index.html page included in the template.

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    

    <title>PhoneGap WP7</title>

    

      <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

      

      <script type="text/javascript">
 
          // provide our own console if it does not exist, huge dev aid!
          if(typeof window.console == "undefined")
          {
          window.console = {log:function(str){window.external.Notify(str);}};
          }
        
          // output any errors to console log, created above.
          window.onerror=function(e)
          {
              console.log("window.onerror ::" + JSON.stringify(e));
          };
        
          console.log("Installed console ! ");
      
</script>
 
      
      <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js">
</script>
       
      <script type="text/javascript">
 
        document.addEventListener("deviceready",onDeviceReady,false);
 
        // once the device ready event fires, you can safely do your thing! -jm
        function onDeviceReady()
        {
            document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready! version=" + window.device.phonegap;
            window.addEventListener("orientationchange", orientationChange, true);
            
        }
        function orientationChange(e) {
            var orientation = "portrait";
            if (window.orientation == -90 || window.orientation == 90) orientation = "landscape";
            document.getElementById("orientation").innerHTML = orientation;
        }
      
</script>

      

     

      

 

  </head>

  <body>

    <h1>Hello PhoneGap</h1>

    <div id="welcomeMsg"></div>

    <div id="orientation">portrait</div>

  </body>

</html>

Note the new DIV to hold the text identifying the current orientation state, and the orientationChange function wired up to the event in the onDeviceReady function. It’s the host page rotation that causes this event to fire inside the PhoneGap user control. Without the property to allow both orientations, this event would never fire.

If you want to handle the orientation changed outside the PhoneGap part of your app, you can wire up a C# event handler at the page level as well. To do this, return to the properties windows for MainPage.xaml and switch to Events at the top of the window. Find the OrientationChanged event. We’ll create an event handler by double clicking on the event name.

The MainPage.xaml.cs window will open, ready for us to type in our code.

Allowing the user to work with the application in both portrait and landscape layout makes it more flexible. In later articles I will cover how there are even aspects of Windows Phone development that respond automatically to the orientation changing.

Let me know your feedback in the comments, and look for many more PhoneGap on Windows Phone tips coming in subsequent weeks, in increasing levels of complexity. :)

PhoneGap on Windows Phone Tips

2011-11-16T01:04:00Z

A few months ago, Microsoft announced support for PhoneGap on Windows Phone Mango. This announcement seems to have flown under the radar, because it hits a (currently) small intersection, developers who know HTML5 and developers who want to target Windows Phone 7. However, the former subset is huge, and the latter is growing rapidly, so it makes sense to take a look at PhoneGap on WP7.

From the PhoneGap website, here’s a summary of what it is:

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.

WP7 support for PhoneGap is in fact pretty significant because it opens up the Windows Phone Marketplace to tons of developers who have HTML/JS skills. Turns out you can create some pretty nifty apps with only those technologies running inside a Windows Phone app. But what if you want to take it up a level and really incorporate some cool features of the phone? Well, allow me to fill that… gap. <grin>

Over the next few months, I will be sharing tips about how to make PhoneGap applications on Windows Phone feel like first class citizens there. I’m not going to cover how to write HTML/JS applications within it, because there are tons of examples on the web as to how to do that. Also, PhoneGap provides its own API for using specific capabilities of the the underlying platform that is common across all devices, so we won’t be covering that here either.

Instead, this series will be tips on how to use Windows Phone specific features in your PhoneGap apps. Having your PhoneGap application support some of Windows Phone’s most compelling features like Live Tiles, background agents, push notifications and the application bar means users will get the engaging experience they expect from WP7 apps along with the functionality you deliver via HTML/JS from the main UI of your app. And most if not all of these features can be implemented with zero impact to your common code base, so a lot of your cross platform code can be preserved.

Recently, PhoneGap has been accepted into the Apache Software Foundation for incubation as Apache Callback. You can read about the requirements, how to get started, and download the latest bits from here. The most significant aspect of the bits you need right now is the GapAppStarter.zip template file.

PhoneGap on Windows Phone 7 Article Index

Resources for my “What’s New in Mango” talk

2011-11-14T14:40:34Z

Thanks to all who came out to last week’s Atlanta .NET user group meeting. Although we were moved a week back due to Halloween, I'll pretend it was some kind of super Daylight Saving time adjustment instead. (grin>. In any case, here are resources for the talk I did on new developer features in Windows Phone Mango. The slide deck is below, followed by links to more information. Enjoy!

What's new in Windows Phone Mango for Developers

Fast Application Switching – make sure you are coding the proper behavior into your apps so they don’t do a full restore from session state if it had only been suspended and not tombstoned – you’ll get much better performance. Here’s a quick lab on how to do it.

Speaking of suspended applications, I showed that now on Mango you can write some code to run periodically in the form of a background agent. Just remember that it’s not really your main app running in the background, but just a small bit of code that does some particular task when the OS wakes the agent, either every 30 minutes or so, or when the phone is on external power and WiFi. Read the overview of Background Agents to get started. If you want to download/upload files there’s an easy, monitorable way to do that with background file transfers. And you can notify users with toast as well as alarms/reminders. Lastly there is the ability to not only play background music while your app is not running, but give users track/artist information and the ability to skip forward and backwards in a playlist via Background Audio.

I also showed the basics of updating your application’s tiles. Live Tiles, and the ability to have multiple tiles on the user’s start screen, each representing specific information to the user and each being an entry point for a deep link into your application, is one of the fundamental principles of a compelling Windows Phone application. Don’t take my word for it, Live Tiles are so compelling that we built a 6 story Windows Phone in NYC to show them off. Get started on working with Live Tiles from your application with this MSDN article.

The last thing I showed was Silverlight and XNA integration. At first blush it’s easy to dismiss the significance of this capability. But ask anyone who’s ever tried to implement even the simplest menu or options screen in their XNA game, or who wanted to incorporate 3D model viewing in their Silverlight app, and you’ll see what I mean. Here’s a good walkthrough of the integration points, and here’s a video of the British Airways sample I showed illustrating the use of 3D models in a Silverlight application, complete with the Application Bar on top of the mode.

So enjoy these refreshing Mango features and let me know if you’ve published apps to the marketplace that take advantage of them!

WebVisions Mobile Hackathon for Good in ATL November 17

2011-11-09T20:03:24Z

Yet another great sounding conference is headed to Atlanta. This one is WebVisions and it explores the future of the Web and mobile design, technology, user experience and business strategy. After 11 years in Portland, the show is bringing its Indie/DIY/Maker vibe to Atlanta with presentations, studio tours and more. Unlike other conferences, WebVisions' all-star lineup of visionary speakers stake out the future of web and mobile, while offering practical tips that can be incorporated into today's projects.

I want to specifically call out a great event that is part of WebVisions and that is the Mobile Hackathon for Good. This is an opportunity to learn about Windows Phone app development and design, then use those skills to help out a good cause to boot! The free hackathon offers 1/2 day of instruction from several local WP7 experts, followed by an afternoon of building applications for great local organizations like Hands On Atlanta and other non-profits to help them advance their causes. At the end of the hackathon there will be reviews of the apps and prizes to be won.

Sign up today to participate in the hackathon, and you can even get a discounted day 2 ticket for WebVisions! Sign up at http://www.webvisionsevent.com/atlanta/session/mobile-hackathon/

Community Phone Camp in Birmingham, AL November 9

2011-10-21T14:50:09Z

In addition to the Microsoft led Windows Phone camps that are happening on the east coast, some industrious folks in Birmingham have put together one for folks in Alabama to get up to speed on Windows Phone development, learn about the Mango release, and write some apps!

Register now for this free event taking place Wednesday, November 9. We’ll be giving away prizes (including a Windows Phone device) for the top apps, and we also have tons of promotions and specials for attendees.

Do you know iPhone and Android development? Bring your apps and we’ll help you port them!

The guys in Mobile, AL are working on putting together a community Phone Camp too, once that’s set up we’ll let you know the details.

A Web Afternoon–in Atlanta

2011-10-18T19:45:26Z

A Web Afternoon is a mini event intended to inspire and educate people who love the web. It’s being put on by the leaders of the Atlanta Web Design Group.

Think TED, but for the web. Both speakers and attendees will be people from a variety of disciplines, but who all share a common passion for making the web a better place.

A Web Afternoon will take place on Saturday, October 22, at the GTRI Conference Center in Atlanta.

Learn more and get your tickets here. Bonus: Even though tickets are now $50, just use the code 'amigos' when you checkout to get $15 off.

SPEAKERS

You come to events like this to learn new things, and our lineup of insightful, engaging people will leave you educated and inspired.

Faruk Ates :: Co-creator of Modernizer and former Apple UI designer
Denise Jacobs :: Author of the CSS Detective Guide, co-author of InterAct with Web Standards
Ben Friedman :: A partner at Iconologic and former AIGA Atlanta President
Leslie Jensen-Inman :: Co-creator of Make Awesomeness, creative director of InterAct with Web Standards
Theo Rosendorf :: Author of the Typography Desk Reference and Creative Director at Matador.
Michael Mogill :: Founder of ATL Nightlife and Reboot Music, VP of FIT Radio.
Todd Schnick :: Marketing strategist, radio show host, and editor of the 40in240 Mini-MBA project.

FREEBIES

Everyone loves free stuff. At A Web Afternoon you’ll bathe in free WiFi and park your car for free. Plus they’ll be giving away a copy of Adobe Creative Suite Web Premium CS5.5 to one lucky attendee.

And since they know you’re thirsty, Coffee, soda, water, and other refreshments from Octane Coffee will be available at all times during the event.

AN AFTER-PARTY, TOO!

Of course it wouldn't be a good web event without an after-party. We've sequestered a great view of the Atlanta skyline at Rooftop 866 in the Renaissance Midtown. You can join for drinks and conversation, but you'll need your Web Afternoon ticket to do so. :)

Trial mode tips for Windows Phone apps

2011-10-18T18:42:33Z

At the Windows Phone camps that I’ve been presenting at around the east region, I’ve been showing how to use trial mode to help increase sales by giving users a way to try your application before they commit to buying it. Here are some suggestions to use trial mode effectively.

Read about Using the Trial Mode API there are a lot of good tips in there.
Check the trial mode when the application starts up as well as when it is activated, since users might be coming back from the activity of actually buying it in the marketplace, and you want to recognize that without forcing a restart. At the very least, if a restart is required, tell them that when they return to the app.
Don’t check the trial mode bit from inside an XNA game loop – unless you want to kill the game’s performance and your potential sales.
Nag trial users appropriately to buy the app, and give them an effortless way to get into the marketplace to buy it. Nag them every 3rd or 4th time they run the app, or whenever they run into the limitation of your trial functionality.
If you have a Silverlight ad control that displays ads in trial mode but not in purchased mode, remember to remove it from the control hierarchy – setting its Visibility property to Collapsed doesn’t stop the code from running and the app from making network calls.

If you have any tips or questions on trial mode and Windows Phone, or experience using it, share with me and others in the comments.

Go Mango and Win

2011-10-18T17:48:30Z

Here’s a great contest for those of you thinking about publishing Windows Phone applications that take advantage of the new Mango features.

For every new Mango app you publish, you’ll receive 1 entry into a raffle for a Samsung Series 7 slate PC.

Publish 5 new apps, and you’ll earn an entry towards winning free advertising for one app of your choice. The free advertising will run on the Windows Phone Application Network for about 60 days and include 25K impressions.

For complete rules and to enter, visit http://bit.ly/MangoOffer

Announcing ReMIX South–the top UX/Web/Mobile community conference in the southeast

2011-07-20T23:13:04Z

As many of you are aware, Microsoft has been holding conferences known as MIX in Vegas for several years. MIX features sessions and speakers from the cutting edge of the design and development world. The local community in Atlanta has channeled the excitement and great learnings from MIX into the premiere event in the southeast, called ReMIX South.

To me, MIX is a perfect name for this conference, because it really allows for designers, developers, UX specialists, and even enthusiasts to blend together at the same event, even if they are from different technology circles. There will be plenty of things to do at ReMIX, so even if you are coming from out of town, prepare to be thrown into the mix with the local community, your peers, and industry experts.

Here’s why I think ReMIX South will be a fantastic event:

Tracks on User Experience, Web, Mobile/Tablet and even Kinect. The speaker lineup is stellar, especially the keynoter Albert Shum.
Networking opportunities with fellow attendees.
A Windows Phone App Clinic where you can get free advice on development, design, marketing, and more for your in-development Windows Phone app, plus a contest where you can win a free phone.
A bargain at only $30 (through July 28).

You won’t want to miss this event!

Free Microsoft WebCamp coming to Atlanta on August 4

2011-07-15T19:48:26Z

The Microsoft HTML5 Web Camps are free, full-day events to help you get up to speed with HTML5 and related web standards.

Over the course of four sessions, you’ll learn about the next wave of web standards including HTML5, CSS3, ECMAScript5, SVG, and more:

HTML5
- Semantic Markup, Audio, Video, Canvas, Geolocation, and more
Cascading Style Sheets, Level 3 (CSS3)
Scalable Vector Graphics (SVG)
ECMAScript5 and scripting techniques
Internet Explorer 9
- Standards support and testing
- Performance
Present and future of web standards
- Internet Explorer 10
- Emerging standards (e.g. WebSockets, IndexedDB, etc.)
Developer options and tools
- Libraries
- IE9 Developer Tools
- Visual Studio 2010 and Expression Web 4

You’ll also see techniques and frameworks to help you get started today while still offering good experiences for non-modern browsers.

Students – build a Windows Phone app this summer and win!

2011-07-11T15:03:52Z

Are you a college student out of ideas on how to spend your summer? Learn how to build a Windows Phone app (the tools are all free), publish it in the marketplace, and win prizes!

For full details check out http://www.wpstudentapp.com/

Announcing the Rock Paper Azure Challenge Grand Tournament

2011-07-05T20:23:26Z

Have you ever played Rock, Paper, Scissors? Then you already know how to play the game. Now’s your chance to code your own player “bot” and test your skills online against players from seven countries.

The Grand Prize tournament winner will take home $5,000, Second place wins $1,000 and the 10 runners-up each get $250. Everyone who participates and uploads a bot will receive the official Rock Paper Azure Challenge t-shirt.

Will your bot have what it takes to crush the coding competition? Play and find out! Visit http://www.rockpaperazure.com to sign up, download the tools, and watch screencasts with step-by-step instructions. Entries must be submitted by 6:00 pm Eastern Time on July 13^th to be eligible.

Man, go get you some Mango!

2011-06-29T19:28:09Z

If you have been working with the Windows Phone Developer Tools for Mango, no doubt you have played around with the emulator some. And as good as that emulator is for testing your apps, what you’ve really been wanting is a way to test your apps on a real device.

Well, starting today you finally get you chance! As of this morning, you can download Beta 2 of the tools and a beta image of Windows Phone codename Mango that you can install on your very own retail device, regardless of carrier or brand.

Check out the full blog post from the Windows Phone developer blog. Essentially, they are distributing invitations for those developers registered with http://create.msdn.com/ so check your email for an invitation.

Having played with Mango for a little while, I can tell you that the app experience is faster, more responsive, and amazingly well integrated with the phone. Look for some blog posts from me in the near future highlighting new capabilities of the platform!

Atlanta Code Camp 2011 is June 25

2011-06-15T15:30:18Z

After a bit of a dry spell, the Atlanta Code Camp is back, and it’s bigger than ever!

Code Camp is a free event where speakers from the community share their knowledge and expertise with local developers. This year’s Code Camp features 11 tracks with 54 sessions, so it’s sure to have something for everyone.

Besides the learning you’ll do, the networking at a Code Camp is invaluable. Plus, the after party at Dave and Buster’s should be a blast.

Join us on Saturday, June 25 at Southern Polytechnic State University for this great community event.

Be sure to register at http://www.atlantacodecamp.org to secure your spot today.

Win a Windows Phone at a Windows Phone Garage event in South Carolina

2011-06-09T18:12:56Z

Two great community guys – Chris Eargle and Chris Williams - are setting up community led Windows Phone Garage events next week in Columbia and Greenville.

Remember, at a Windows Phone Garage you get instruction on the basics of creating Windows Phone apps, but also you get a lot of time to build your app, with help from onsite experts.

In addition, one attendee who showcases his app (in development or complete) at the event will win a free Windows Phone device!

Columbia, SC – Thursday, June 16 at Midlands Tech

Greenville, SC – Friday, June 17 at Immedion

Tell your friends!