Pla.NET Southeast!

The next big adventure for Glen

2012-11-28T20:52:00Z

As with any great adventure, the beginning is sometimes the hardest part, and so is the end.

As of this week, I am no longer with Microsoft. It's been a fantastic 9 years though, and I am grateful for all the friends I made, the knowledge I gained, and all the adventures along the way. All of this has paved the way for me to begin the next phase of my life and career.

I am still gathering my ideas for what I want to do next, as my true passion lies with helping others learn and be successful. I'll be checking out a few opportunities that I have heard of so far, but if you know of anything exciting, don't hesitate to toss it my way!

Soon I'll have my new blog set up at http://glengordon.name and you can always reach me through twitter as @glengordon

And, away we go!!! As a famous scientist once said "Roads? Where we're going, we don't need roads!"

Windows 8 Wednesday in Atlanta for November 13

2012-11-13T14:47:03Z

Wednesday, November 13 I’ll be in the Microsoft Alpharetta office from noon-2. Stop by and chat about Windows 8 apps – moving existing apps from other platforms, ideas for new apps, coaching on an app you already have under development, or test your app on a Surface PC.

Free online Windows Azure conference on November 14

2012-11-12T21:00:00Z

Sometimes the best way to learn how to be successful with a technology is to hear from your peers about what they are doing with it, and to get their insights and tips.

The Windows Azure community is doing just that on November 14 with the Windows AzureConf, a free online event. With a keynote by Scott Guthrie and sessions by Azure experts in the community, this promises to be an excellent event. Learn to master the cloud from the best and the brightest sharing their own ideas and experiences.

And remember you can get started with your own free 90 day trial of Windows Azure.

Startup Weekend Atlanta is November 9!

2012-11-08T03:48:00Z

If you have the itch and the idea to start a new company, there’s no better event to come to than Startup Weekend Atlanta starting November 9.

This weekend marathon is a fantastic place to pitch an idea for a company, rally some teammates, build a business plan and a prototype, and pitch your nascent company to a board of judges who will pick the most viable ones to win prizes.

With Windows 8 gaining tremendous traction in the marketplace, it makes sense to create a Windows Store app as the premier experience for customers of your new business.

Because of this, we are running a free Windows 8 bootcamp on the morning before Startup Weekend. That way you can get the technology under your belt, and then spend the rest of the weekend building the business and your app.

Next Windows 8 Office Hours – Thursday, November 8

2012-11-06T18:23:24Z

This week as you try to deal with the absence of political tweets and Facebook posts, why not swing by the Microsoft Alpharetta office and chat about or test out your Windows 8 apps?

The Windows 8 “Wednesday” will be Thursday this week, I’ll be there from 11 AM until 2 pm.

Windows 8 Hackathon (with prizes) in Birmingham on November 13

2012-11-02T15:48:28Z

Hey Alabama developers! Are you itching to get started building Windows 8 apps? Now that the OS has been released along with some amazing new devices, end users are going to be hungry for apps and games. Why not get in on the action?

Here’s an amazing opportunity to get started. A few enterprising folks in the Birmingham developer community have organized a Windows 8 hackathon. After a few hour of training, roll up your sleeves and start building an app onsite! By the time dinner rolls around, you’ll have an opportunity to show of your app to other hackers as well as a special meeting of the Birmingham .NET Users Group!

The winners will receive hundreds of dollars in gift cards, and event a Windows Tablet PC!

To prepare for the event, make sure you have Windows 8 and Visual Studio 2012 installed. If you want to get a head start on learning Windows 8 development, check out our GenerationApp program.

Windows 8 Wednesday schedule for October 31 in ATL

2012-10-30T16:09:40Z

Once again it’s about to be Wednesday, so that means it’s about to be Windows 8 Wednesday, another opportunity to come discuss app and game ideas, get help with your app in development, talk about monetization strategies, and more.

Join me in the Alpharetta Microsoft office between 11 AM and 2 PM on Wednesday, October 31. And since it’s Halloween, if you come in wearing a costume and get your picture taken with a Windows 8 machine (with hopefully your app running) I’ve got a special gift for you!

Developer sessions at the Microsoft Store in Atlanta starting October 29

2012-10-26T21:29:36Z

We’re putting together some great sessions for developers at the Microsoft store in Lenox Square. Come out each Monday night from 5 to 8, learn about Windows 8 development, do a hands on lab on your own machine, and get started building apps today!

Windows 8 Monday on October 22

2012-10-19T18:16:40Z

Next week I have a conflict on Wednesday, so I’m changing Windows 8 Wednesday to a Windows 8 Monday. Since I’m in charge of it I can do that.

Please join me between 11 AM and 2 PM at the Microsoft office in Alpharetta to chat about Windows 8 apps, get your in-development app running on a slate so you can test out multi touch and accelerometer support, or talk about porting an app.

ReMIX South 2012 designer developer conference is this weekend

2012-10-18T16:28:34Z

There’s still time to sign up for THE designer and developer conference in the Southeast – ReMIX! Lots of fantastic sessions, great tutorials, opportunities to network and meet experts in various areas.

I’ll be at the conference on Saturday giving one-on-one help to folks who want to learn about Windows 8 development and design.

Windows 8 Wednesday Office Hours for October 17

2012-10-16T19:01:13Z

On Wednesday October 17 I’ll be at the Microsoft office in Alpharetta from 11 AM until 2:00 PM.

Bring your Windows 8 app in development or your game or app on other platforms you want to discuss porting. I’ll have a slate device we can test your app on if you like.

See you there!

Windows 8–Are you developing for it? Why or why not?

2012-10-15T23:47:13Z

Windows 8 is coming. And with it, huge developer opportunities.

Lots of developers are getting their apps ready for the store. Are you one of them? Are you considering it? Answer these questions and let me know where you stand on Windows 8 development. If you live in Georgia, Alabama and Mississippi, I’ll pick 3 random winners from those who send feedback by Wednesday, October 17 at noon to win a $20 Xbox live points card. And if you have an app in the store, I’ll pick 3 to award a $50 Xbox live points card just for telling me about your experience.

Here are the questions:

If you have created any Windows 8 apps:

What do they do?
When do you expect them to be published? If they are published, please send me the link. If not, what’s the reason?

If you have not created any Windows 8 apps:

Why not? Are you waiting for something in particular? If so, what?
When do you think you might start?

Do you do development for other platforms/phones? Is Windows 8 more or less appealing? Why?

Send me the responses using the contact me form (I have to do that to track the responses received via this blog post).

PowerShell Saturday Atlanta is October 27

2012-10-10T15:30:10Z

PowerShell Saturday #003 will bring together developers, IT professionals, DBAs, and developers from Atlanta and the surrounding areas for a full day of intense learning and fun on October 27, 2012. With fifteen sessions covering a milieu of topics like Windows 8, Exchange, SQL Server, and of course PowerShell, this event offers a unique opportunity to participate in a diverse community.

Chance to learn Windows PowerShell from experts in the field like Ed Wilson ”The Microsoft Scripting Guy” – the person who has written 5 books on Windows PowerShell and taught literally thousands of people in person.
The event will be great fun – a chance to interact with 200 other people who LOVE Windows PowerShell so much, and realize the value of Windows PowerShell that they are willing to give up their Saturday to learn the stuff.

It will be of immediate value – with three tracks of information – Introductory PowerShell, Advanced PowerShell, and Applied PowerShell, there will be plenty of new things to learn!

The second official Iron Scripter event – put your scripting skills to the test and take home the Iron Scripter badge for PowerShell Saturday #003!
You will have an opportunity to meet and learn about some of our sponsors and their products
There will be great prizes handed out.
This will be a UNIQUE opportunity for some great networking. Bring your business cards to the event, and be prepared to make new friends, establish new contacts, and find great support.
It is a great chance to find out information about the Atlanta PowerShell Users Group.
The nominal fee covers lunch and snacks.
You can also meet the Scripting Wife!

For more information visit http://powershellsaturday.com/003/

Check out the latest session list at http://powershellsaturday.com/003/presentations/

DotNetRocks Roadshow coming to Atlanta on October 22

2012-10-09T19:10:26Z

Carl Franklin and Richard Campbell are hitting the road in the USA with the traveling edition of their DotNetRocks show. These guys are always a blast to hear live, you never know what’s going to happen.

Their DotNetRocks Visual Studio 2012 Road Trip will be stopping in Atlanta on Monday, October 22 featuring a special guest – author and awesome person Julie Lerman!

This show is always packed, so register today to save your spot!

New Windows 8 app meetup starting in Atlanta

2012-10-08T20:08:15Z

If you are in the Atlanta area and want to get started (or have already started) building Windows 8 apps, this meetup is for you!

http://www.meetup.com/Atlanta-Windows-Apps/

The organizers are taking a fresh approach to technical meetups. In addition to presentations, there will be a lot of peer sharing, networking, collaboration, support, contests, social events, and more.

Another spin on the group is the audience. In addition to people who architect and code Windows Store apps, we want to attract a lot of designers to the group. Many times experienced coders have a great idea for a Windows Store app, but no good design skills. So we hope to foster a community of Windows app designers, too.

At one point, there were no good web designers. Nowadays, web design is quite a widespread skill. I’m hoping that there are designers in the Atlanta area who want to take on the challenge of becoming well known for modern Microsoft design with Windows 8 apps, either through blogging and publications and samples, or on a consulting basis. Lots of money to be made in both!

If you have it in you to be on the cutting edge of design, this group is a great place to do it.

So join http://www.meetup.com/Atlanta-Windows-Apps/ and tell your friends! The first meeting will be a doozy, it will be a recap of Microsoft’s upcoming BUILD conference.

Windows 8 Game Hackathon October 3-4 in ATL

2012-10-01T18:22:06Z

Think you have the chops to create a game for Windows 8 in 2 days? Come learn, build and win at this hackathon in ATL!

In conjunction with SIEGEcon, Microsoft is sponsoring a game development contest. Come learn about Windows 8, team up, create games and win. Full details are at http://hackathon.siegecon.net so sign up today!

When: WED OCT 3 - THU OCT 4
Where: Atlanta Marriott Northwest, Atlanta GA
How to get involved:

Sign Up: Register for your FREE admission to the Hackathon: http://register.siegecon.net

Shout Out: Share this link with friends: http://hackathon.siegecon.net

Square Off: Come as a team, or come as an individual and we’ll help individuals get together into teams.
Who should come: Game developers – professionals, students and hobbyists – who want to join a team, build a game in 24 hours, and compete for great prizes in an atmosphere of fun, collaboration, and competition.
What: Nothing fosters creativity and productivity like a competition with awesome prizes. The 2012 SIEGE Hackathon is a two day event that brings together game developers eager to find out what they can build on a deadline.
Judges include representatives from several local game dev studios.
Professional participants, take a break from your day-to-day and experiment with something new and refreshing – something that might become a seed for a future project. Plus, of course, a chance to meet the most enthusiastic and energetic young developers. Student participants will get a great chance to showcase their skills and get feedback from local professionals.

Training: Windows 8 is poised to provide the single largest developer opportunity in history. With over 650 million licenses of Windows out there today, a reimagined user experience, the new windows Store for apps, and a slew of exciting new devices and form factors, now is the time to create apps for Windows 8. Casual and serious gaming will make up a huge portion of that opportunity, and now is the time to take advantage of the launch wave of Windows 8 by learning the options for game development on Windows 8. In this session, you’ll learn about the Windows 8 platform, how to building games in HTML, C#, DirectX, and other platforms like Xamarin and Unity, and how to publish to and get the most out of the Windows Store. Plus you’ll get tons of resources for being successful with your game development ventures.

Schedule: This FREE event includes training, the chance to form a long-lasting team, and coaching to help you on your path to success! All events are at the SIEGE hotel, the Marriott NW Atlanta. We'll have space where you can work around the clock. We have extended our room block to these nights, so take advantage of our discounted rates early!
Wednesday, Oct. 3
9:00-10:00, meet and greet, find teams
10:00-12:00, Windows 8 Training Session pt.1
12:00-12:30, Break
12:30-2:30, Windows 8 Training Session pt.2
2:30-3:00, Finalize Teams
3pm+ Hackathon
Thursday, Oct. 4
7pm, Stop
7:00-7:30, Dinner
7:30-8:30, Demos and Judging

Who will be there: Game industry professionals and students with a passion for game development and a desire to get a game done.

Windows 8 Wednesdays in Atlanta starting this week

2012-09-25T15:53:00Z

Hopefully by now everyone has seen that the Windows Store is accepting app submissions from every developer. This is another huge step on the road to general availability of Windows 8 to all of our customers. I want every developer to be successful with his or her apps, so I’m trying a new way to help developers out with what I’m calling Windows 8 Wednesdays.

W8W

Windows 8 Wednesdays will give you the opportunity to sit down with either me or my colleague Tara Walker and get specific help with developing your Windows 8 apps. Whether you’re just starting out, thinking of porting an app from another platform, looking for advice on how to incorporate Windows 8 features like Live Tiles, Sharing and Search, or running into challenges with specific areas of development, we’ll be here to help.

If you live on the north side, come on over to the Microsoft office in Alpharetta anytime between 10 AM and 2. Double check my Twitter feed to make sure I haven’t been called away to something else.

For those of you not on the north side of Atlanta, fear not! Tara is working on establishing the same Windows 8 Wednesday “office hours” in conjunction with an excellent co-working facility in Atlanta – Strongbox West. Check Tara’s blog for information.

See you on September 26!

Managing Settings in Windows Phone and Windows 8 Store apps

2012-09-17T05:04:30Z

I received a few questions at an event recently as to how to handle application settings in a Windows 8 Store app and how it is different from doing so in a Windows Store app. Turns out there is a lot of similarity, in the code as well as the platform offering for storing them, but Windows 8 does have some unique capabilities and challenges.

A settings page in a Windows Phone app is pretty easy. You basically create an additional XAML page in your app to provide the UI for the user to view and change settings. If you use the IsolatedStorageSettings class you get a nice, simple way to store name/value pairs of settings associated with your application.

Here’s a simple example of managing settings in a Windows Phone project. In this app we’re storing a boolean for whether the customer is tax exempt, the state they live in, their preferred shipping speed, and their email address. The class AppSettings (below) manages saving and retrieving our sample settings.

using System;
using System.Diagnostics;
using System.IO.IsolatedStorage;
namespace SettingsDemo
{
    public class AppSettings
    {


        // Our isolated storage settings
        IsolatedStorageSettings isolatedStore;

        // The isolated storage key names of our settings
        const string TaxExemptSettingKeyName = "TaxExemptSetting";
        const string StateSettingKeyName = "StateSetting";
        const string NextDayShippingSettingKeyName = "NextDayShippingSetting";
        const string TwoDayShippingSettingKeyName = "TwoDayShippingSetting";
        const string GroundShippingSettingKeyName = "GroundShippingSetting";
        const string EmailSettingKeyName = "UsernameSetting";
        

        // The default value of our settings
        const bool TaxExemptSettingDefault = true;
        const int StateSettingDefault = 0;
        const bool NextDayShippingSettingDefault = true;
        const bool TwoDayShippingSettingDefault = false;
        const bool GroundShippingSettingDefault = false;
        const string EmailSettingDefault = "";
        

        /// <summary>
        /// Constructor that gets the application settings.
        /// </summary>
        public AppSettings()
        {
            try
            {
                // Get the settings for this application.
                isolatedStore = IsolatedStorageSettings.ApplicationSettings;

            }
            catch (Exception e)
            {
                Debug.WriteLine("Exception while using IsolatedStorageSettings: " + e.ToString());
            }
        }

        /// <summary>
        /// Update a setting value for our application. If the setting does not
        /// exist, then add the setting.
        /// </summary>
        /// <param name="Key"></param>
        /// <param name="value"></param>
        /// <returns></returns>
        public bool AddOrUpdateValue(string Key, Object value)
        {
            bool valueChanged = false;

            // If the key exists
            if (isolatedStore.Contains(Key))
            {
                // If the value has changed
                if (isolatedStore[Key] != value)
                {
                    // Store the new value
                    isolatedStore[Key] = value;
                    valueChanged = true;
                }
            }
            // Otherwise create the key.
            else
            {
                isolatedStore.Add(Key, value);
                valueChanged = true;
            }

            return valueChanged;
        }


        /// <summary>
        /// Get the current value of the setting, or if it is not found, set the 
        /// setting to the default setting.
        /// </summary>
        /// <typeparam name="valueType"></typeparam>
        /// <param name="Key"></param>
        /// <param name="defaultValue"></param>
        /// <returns></returns>
        public valueType GetValueOrDefault<valueType>(string Key, valueType defaultValue)
        {
            valueType value;

            // If the key exists, retrieve the value.
            if (isolatedStore.Contains(Key))
            {
                value = (valueType)isolatedStore[Key];
            }
            // Otherwise, use the default value.
            else
            {
                value = defaultValue;
            }

            return value;
        }


        /// <summary>
        /// Save the settings.
        /// </summary>
        public void Save()
        {
            isolatedStore.Save();
        }


        /// <summary>
        /// Property to get and set a CheckBox Setting Key.
        /// </summary>
        public bool TaxExemptSetting
        {
            get
            {
                return GetValueOrDefault<bool>(TaxExemptSettingKeyName, TaxExemptSettingDefault);
            }
            set
            {
                AddOrUpdateValue(TaxExemptSettingKeyName, value);
                Save();
            }
        }


        /// <summary>
        /// Property to get and set a ListBox Setting Key.
        /// </summary>
        public int StateSetting
        {
            get
            {
                return GetValueOrDefault<int>(StateSettingKeyName, StateSettingDefault);
            }
            set
            {
                AddOrUpdateValue(StateSettingKeyName, value);
                Save();
            }
        }


        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool NextDayShippingSetting
        {
            get
            {
                return GetValueOrDefault<bool>(NextDayShippingSettingKeyName, NextDayShippingSettingDefault);
            }
            set
            {
                AddOrUpdateValue(NextDayShippingSettingKeyName, value);
                Save();
            }
        }


        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool TwoDayShippingSetting
        {
            get
            {
                return GetValueOrDefault<bool>(TwoDayShippingSettingKeyName, TwoDayShippingSettingDefault);
            }
            set
            {
                AddOrUpdateValue(TwoDayShippingSettingKeyName, value);
                Save();
            }
        }

        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool GroundShippingSetting
        {
            get
            {
                return GetValueOrDefault<bool>(GroundShippingSettingKeyName, GroundShippingSettingDefault);
            }
            set
            {
                AddOrUpdateValue(GroundShippingSettingKeyName, value);
                Save();
            }
        }

        /// <summary>
        /// Property to get and set a Username Setting Key.
        /// </summary>
        public string EmailSetting
        {
            get
            {
                return GetValueOrDefault<string>(EmailSettingKeyName, EmailSettingDefault);
            }
            set
            {
                AddOrUpdateValue(EmailSettingKeyName, value);
                Save();
            }
        }

      
    }
}

Notice that we need to call the .Save() method on the IsolatedStorageSettings instance when the properties are updated.

This settingsPage.xaml gives us the UI for the user to change the app’s settings.

<phone:PhoneApplicationPage 
    x:Class="SettingsDemo.settingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    xmlns:local="clr-namespace:SettingsDemo"
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <local:AppSettings x:Key="appSettings"></local:AppSettings>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="SETTINGS DEMO" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="settings" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Margin="30,0,0,0">
                <CheckBox Content="Tax Exempt" Height="Auto" HorizontalAlignment="Left"  Name="TaxExemptSetting" VerticalAlignment="Top"
                    IsChecked="{Binding Source={StaticResource appSettings}, Path=TaxExemptSetting, Mode=TwoWay}"  />

                <TextBlock Margin="0,25, 0, 0" Text="State:" TextWrapping="Wrap"  HorizontalAlignment="Left"/>
                <ListBox Margin="0,7, 0, 0" HorizontalAlignment="Left"
                                  SelectedIndex="{Binding Source={StaticResource appSettings}, Path=StateSetting, Mode=TwoWay}"
                                  >
                    <ListBoxItem Content="Georgia"/>
                    <ListBoxItem Content="Alabama"/>
                    <ListBoxItem Content="Florida"/>
                </ListBox>



                <TextBlock Margin="0,25, 0, 0" Text="Shipping speed:" TextWrapping="Wrap" HorizontalAlignment="Left"/>
                <RadioButton Content="Overnight" Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="NextDayShipping" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=NextDayShippingSetting, Mode=TwoWay}" />
                <RadioButton Content="Two day" Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="TwoDayShipping" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=TwoDayShippingSetting, Mode=TwoWay}"/>
                <RadioButton Content="Ground" Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="GroundShipping" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=GroundShippingSetting, Mode=TwoWay}"/>


                <TextBlock Height="36" HorizontalAlignment="Left" Margin="0,0,0,0" Name="textBlock1" Text="email address" VerticalAlignment="Top" Width="169" />
                <TextBox Name="textBoxEmail"  HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="274"  
                     Text="{Binding Source={StaticResource appSettings}, Path=EmailSetting, Mode=OneWay}"/>

            </StackPanel>
        </Grid>
    </Grid>
 
    

</phone:PhoneApplicationPage>

In here we’re data binding the visual elements to the properties in the AppSettings class. We’ve declared an instance of that class in the Resources section of the file. Our controls are data bound two-way so when the user updates them, they write back to the class. We don’t do that for the textbox, because that’s a lot of writes while the user is typing. Instead, when the page is navigated away from, we update the class. Here’s the code behind where that happens.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;

namespace SettingsDemo
{
    public partial class settingsPage : PhoneApplicationPage
    {
        public settingsPage()
        {
            InitializeComponent();
        }
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {  
            base.OnNavigatedFrom(e);
            AppSettings settings = (AppSettings)this.Resources["appSettings"];
          
            settings.EmailSetting = textBoxEmail.Text;
        }
    }
}

Here’s a screenshot of the thing running.

One thing you’ll notice about this approach is that it conforms to the UI paradigm for modern apps. That is, there is no “OK/Cancel” button for settings, as was in the past. When the user makes setting changes, they should both be saved right away, and also take effect in the app right away. The former is accomplished by simply calling .Save() on the underlying IsolatedStorageSettings.

OK, so what about the concept of settings in a Windows Store app? We’ll need to save them, and in that regard, Windows Store is very similar to Windows Phone. Our AppSettings class above comes over to a Windows Store project with very few changes.

using System;
using System.Diagnostics;
using Windows.Storage;

namespace WPMigrateSettingsDemo
{
    class AppSettings
    {
        // Our isolated storage settings
        //IsolatedStorageSettings isolatedStore;
        ApplicationDataContainer localSettings;

        // The isolated storage key names of our settings
        const string TaxExemptSettingKeyName = "TaxExemptSetting";
        const string StateSettingKeyName = "StateSetting";
        const string NextDayShippingSettingKeyName = "NextDayShippingSetting";
        const string TwoDayShippingSettingKeyName = "TwoDayShippingSetting";
        const string GroundShippingSettingKeyName = "GroundShippingSetting";
        const string EmailSettingKeyName = "UsernameSetting";


        // The default value of our settings
        const bool TaxExemptSettingDefault = true;
        const int StateSettingDefault = 0;
        const bool NextDayShippingSettingDefault = true;
        const bool TwoDayShippingSettingDefault = false;
        const bool GroundShippingSettingDefault = false;
        const string EmailSettingDefault = "";


        /// <summary>
        /// Constructor that gets the application settings.
        /// </summary>
        public AppSettings()
        {
            try
            {
                localSettings = ApplicationData.Current.LocalSettings;
                // Get the settings for this application.
                //isolatedStore = IsolatedStorageSettings.ApplicationSettings;

            }
            catch (Exception e)
            {
                            
            }
        }

        /// <summary>
        /// Update a setting value for our application. If the setting does not
        /// exist, then add the setting.
        /// </summary>
        /// <param name="Key"></param>
        /// <param name="value"></param>
        /// <returns></returns>
        public bool AddOrUpdateValue(string Key, Object value)
        {
            bool valueChanged = false;

            // If the key exists
            //if (localSettings.Contains(Key))
            if (localSettings.Values.ContainsKey(Key))
            {
                // If the value has changed
                if (localSettings.Values[Key] != value)
                {
                    // Store the new value
                    localSettings.Values[Key] = value;
                    valueChanged = true;
                }
            }
            // Otherwise create the key.
            else
            {
                localSettings.Values.Add(Key, value);
                valueChanged = true;
            }

            return valueChanged;
        }


        /// <summary>
        /// Get the current value of the setting, or if it is not found, set the 
        /// setting to the default setting.
        /// </summary>
        /// <typeparam name="valueType"></typeparam>
        /// <param name="Key"></param>
        /// <param name="defaultValue"></param>
        /// <returns></returns>
        public valueType GetValueOrDefault<valueType>(string Key, valueType defaultValue)
        {
            valueType value;

            // If the key exists, retrieve the value.
            if (localSettings.Values.ContainsKey(Key))
            {
                value = (valueType)localSettings.Values[Key];
            }
            // Otherwise, use the default value.
            else
            {
                value = defaultValue;
            }

            return value;
        }


        /// <summary>
        /// Save the settings.
        /// </summary>
        public void Save()
        {
            //isolatedStore.Save();

        }


        /// <summary>
        /// Property to get and set a CheckBox Setting Key.
        /// </summary>
        public bool TaxExemptSetting
        {
            get
            {
                return GetValueOrDefault<bool>(TaxExemptSettingKeyName, TaxExemptSettingDefault);
            }
            set
            {
                AddOrUpdateValue(TaxExemptSettingKeyName, value);
                Save();
            }
        }


        /// <summary>
        /// Property to get and set a ListBox Setting Key.
        /// </summary>
        public int StateSetting
        {
            get
            {
                return GetValueOrDefault<int>(StateSettingKeyName, StateSettingDefault);
            }
            set
            {
                AddOrUpdateValue(StateSettingKeyName, value);
                Save();
            }
        }


        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool NextDayShippingSetting
        {
            get
            {
                return GetValueOrDefault<bool>(NextDayShippingSettingKeyName, NextDayShippingSettingDefault);
            }
            set
            {
                AddOrUpdateValue(NextDayShippingSettingKeyName, value);
                Save();
            }
        }


        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool TwoDayShippingSetting
        {
            get
            {
                return GetValueOrDefault<bool>(TwoDayShippingSettingKeyName, TwoDayShippingSettingDefault);
            }
            set
            {
                AddOrUpdateValue(TwoDayShippingSettingKeyName, value);
                Save();
            }
        }

        /// <summary>
        /// Property to get and set a RadioButton Setting Key.
        /// </summary>
        public bool GroundShippingSetting
        {
            get
            {
                return GetValueOrDefault<bool>(GroundShippingSettingKeyName, GroundShippingSettingDefault);
            }
            set
            {
                AddOrUpdateValue(GroundShippingSettingKeyName, value);
                Save();
            }
        }

        /// <summary>
        /// Property to get and set a Username Setting Key.
        /// </summary>
        public string EmailSetting
        {
            get
            {
                return GetValueOrDefault<string>(EmailSettingKeyName, EmailSettingDefault);
            }
            set
            {
                AddOrUpdateValue(EmailSettingKeyName, value);
                Save();
            }
        }

    }
}

We use the Windows.Storage namespace instead of System.IO.IsolatedStorage and we use ApplicationData.Current.LocalSettings (an ApplicationDataContainer) instead of IsolatedStorageSettings.ApplicationSettings. The rest of the code refers to localSettings.Values instead of isolatedStore but the rest is the same.

In this sample I sought to mimic the Windows Phone settings capabilities, but it’s worth noting that in Windows Store apps, you can keep settings local (to the app on that machine) or roaming (with the user’s Microsoft ID automatically). Here are some good guidelines on using roaming app data.

How about the user interface aspect? Well, this requires us to connect into the Settings charm to display the settings screen for our app. So instead of simply navigating to a Settings.xaml page, we have to work with the SettingsPane. It is a little tricky to set up, but it creates a better experience for accessing settings within Windows Store apps for users.

First, we have to create a user control in our Windows Store project that’s going to contain the UI elements similar to the settings page in our Windows Phone app. We add a new User Control called SettingsFlyout to the project and use this XAML.

<UserControl
    x:Class="WPMigrateSettingsDemo.SettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WPMigrateSettingsDemo"
    
  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    

    <UserControl.Resources>
        <local:AppSettings x:Key="appSettings"></local:AppSettings>
        <Style x:Key="SettingsBackButtonStyle" TargetType="Button">
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="26.66667"/>
            <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
            <Setter Property="AutomationProperties.Name" Value="Back"/>
            <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Width="30" Height="30">
                            <Grid Margin="-6,-6,0,0">
                                <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="Transparent"/>
                                <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonSnappedGlyph}" Foreground="White"/>
                                <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" Foreground="#00b2f0" Opacity="0"/>
                            </Grid>
                            <Rectangle
                                x:Name="FocusVisualWhite"
                                IsHitTestVisible="False"
                                Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" 
                                StrokeEndLineCap="Square"
                                StrokeDashArray="1,1"
                                Opacity="0"
                                StrokeDashOffset="1.5"
                                />

                            <Rectangle
                                x:Name="FocusVisualBlack"
                                IsHitTestVisible="False"
                                Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" 
                                StrokeEndLineCap="Square"
                                StrokeDashArray="1,1"
                                Opacity="0"
                                StrokeDashOffset="0.5"
                                />

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverBackgroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation
                                            Storyboard.TargetName="ArrowGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                            <DoubleAnimation
                                            Storyboard.TargetName="NormalGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation
                                            Storyboard.TargetName="FocusVisualWhite"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                            <DoubleAnimation
                                            Storyboard.TargetName="FocusVisualBlack"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border BorderBrush="#00b2f0" BorderThickness="1,0,0,0">
        <Grid Background="DarkBlue" VerticalAlignment="Stretch">

            <!-- Root grid definition -->
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <!-- Header area for panel -->
            <Grid Background="#00b2f0" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <StackPanel Orientation="Horizontal" Grid.Column="0" Margin="40, 32, 17, 13">
                    <Button Click="MySettingsBackClicked" Margin="6,3,0,0"  Style="{StaticResource SettingsBackButtonStyle}"/>
                    <TextBlock Margin="10,0,0,0" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="24.6667" Text="Options" Foreground="White"/>
                    <Image Source="Assets/smalltile-sdk.png" Margin="400,0,6,0"/>
                </StackPanel>
            </Grid>

            <!-- Settings Panel Content -->
            <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
                <Grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.RowSpan="3">

                    <StackPanel x:Name="FlyoutContent">
                        <CheckBox Content="Tax Exempt" Height="Auto" HorizontalAlignment="Left"  Name="TaxExemptSetting" VerticalAlignment="Top"
                    IsChecked="{Binding Source={StaticResource appSettings}, Path=TaxExemptSetting, Mode=TwoWay}"  />

                        <TextBlock Margin="0,25, 0, 0" Text="State:" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                        <ComboBox Margin="0,7, 0, 0" HorizontalAlignment="Left"
                                  SelectedIndex="{Binding Source={StaticResource appSettings}, Path=StateSetting, Mode=TwoWay}"
                                  >
                            <ComboBoxItem Content="Georgia"/>
                            <ComboBoxItem Content="Alabama"/>
                            <ComboBoxItem Content="Florida"/>
                        </ComboBox>



                        <TextBlock Margin="0,25, 0, 0" Text="Shipping speed:" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>
                        <RadioButton Content="Overnight" Height="Auto" HorizontalAlignment="Left" Margin="0,20,0,0" Name="NextDayShipping" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=NextDayShippingSetting, Mode=TwoWay}" />
                        <RadioButton Content="Two day" Height="Auto" HorizontalAlignment="Left" Margin="0,20,0,0" Name="TwoDayShipping" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=TwoDayShippingSetting, Mode=TwoWay}"/>
                        <RadioButton Content="Ground" Height="Auto" HorizontalAlignment="Left" Margin="0,20,0,0" Name="GroundShipping" VerticalAlignment="Top" GroupName="GroupOne" IsChecked="{Binding Source={StaticResource appSettings}, Path=GroundShippingSetting, Mode=TwoWay}"/>


                        <TextBlock Height="60" HorizontalAlignment="Left" Margin="0,20,0,0" Name="textBlock1" Text="email address" VerticalAlignment="Top" Width="169" />
                        <TextBox Name="textBoxEmail"  HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="274"  
                     Text="{Binding Source={StaticResource appSettings}, Path=EmailSetting, Mode=OneWay}" LostFocus="textBoxEmail_LostFocus_1"/>

                    </StackPanel>
                </Grid>
            </ScrollViewer>
        </Grid>

    </Border>
</UserControl>

When the settings screen is accessed from the app, it will look like this.

There’s a <resources> section at the top that is related to the behavior and appearance of the back button at the top, which closes the settings pane. The rest of the XAML defines the controls on the page, almost the same way they do in Windows Phone (except I changed the list box to a combo box). The same data binding is used to an instance of the AppSettings class declared the same way at the top of the XAML file.

The user control has some code to deal with saving the data in the text box when it loses focus, as well as some UI things for when the user navigates away from the panel, or clicks the back button with the app snapped.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace WPMigrateSettingsDemo
{
    public sealed partial class SettingsFlyout : UserControl
    {
        // The guidelines recommend using 100px offset for the content animation.
        const int ContentAnimationOffset = 100;
        public SettingsFlyout()
        {
            this.InitializeComponent();
            FlyoutContent.Transitions = new TransitionCollection();
            FlyoutContent.Transitions.Add(new EntranceThemeTransition()
            {
                FromHorizontalOffset = (SettingsPane.Edge == SettingsEdgeLocation.Right) ? ContentAnimationOffset : (ContentAnimationOffset * -1)
            });
        }
        private void MySettingsBackClicked(object sender, RoutedEventArgs e)
        {
           
            // First close our Flyout.
            Popup parent = this.Parent as Popup;
            if (parent != null)
            {
                parent.IsOpen = false;
            }

            // If the app is not snapped, then the back button shows the Settings pane again.
            if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped)
            {
                SettingsPane.Show();
            }
        }

        private void textBoxEmail_LostFocus_1(object sender, RoutedEventArgs e)
        {
            AppSettings settings = (AppSettings)this.Resources["appSettings"];
            settings.EmailSetting = textBoxEmail.Text;
        }
    }
}

The biggest difference in the setting system between Windows Phone and Windows 8 is how this app settings UI ties into the Settings charm. There are a few ways to go about this, but I chose to connect the settings capability to the MainPage.xaml. In that page’s constructor, I added an event handler for the CommandsRequested event from the settings pane, so when the user invokes the Settings charm, we can add choices in the list. In that handler, we tell the system to add an Options command to the settings pane, and give it some code to run when that Options command is invoked. In this example I used a lambda expression to define a new Popup and fill the popup with an instance of the user control I defined above. We do a few other things to position the Popup and the user control properly based on screen resolution. Here’s the code behind for the mainpage.xaml file.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace WPMigrateSettingsDemo
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        private Rect _windowBounds;
        private Popup _settingsPopup;
        private double _settingsWidth = 346;

        public MainPage()
        {
            this.InitializeComponent();

            _windowBounds = Window.Current.Bounds;

            SettingsPane.GetForCurrentView().CommandsRequested += myCommandsRequested;
        }


        void myCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {

            SettingsCommand cmd = new SettingsCommand("options", "Options",

                 (x) =>
                 {
                     _settingsPopup = new Popup();
                     _settingsPopup.Closed += OnPopupClosed;
                     Window.Current.Activated += OnWindowActivated;
                     _settingsPopup.IsLightDismissEnabled = true;
                     _settingsPopup.Width = _settingsWidth;
                     _settingsPopup.Height = _windowBounds.Height;

                     SettingsFlyout mypane = new SettingsFlyout();
                     mypane.Width = _settingsWidth;
                     mypane.Height = _windowBounds.Height;

                     _settingsPopup.Child = mypane;
                     _settingsPopup.SetValue(Canvas.LeftProperty, _windowBounds.Width - _settingsWidth);
                     _settingsPopup.SetValue(Canvas.TopProperty, 0);
                     _settingsPopup.IsOpen = true;

                 });


            args.Request.ApplicationCommands.Add(cmd);
        }

        private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
        {
            if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
            {
                _settingsPopup.IsOpen = false;
            }
        }

        void OnPopupClosed(object sender, object e)
        {
            Window.Current.Activated -= OnWindowActivated;
        }

    }
}

One more note on roaming settings. Right now, settings don’t roam between Windows Phones (because users generally have only one phone anyway) or between Windows 8 and Windows Phone apps. If you wanted to accomplish something like that, you’d have to roll your own cloud-based settings system.

Fundamentally, the approach for handling settings in a Windows Phone app and a Windows 8 app are quite similar. Hooking into the settings charm is a great way to integrate with the Windows 8 user experience, but the underlying way to set and retrieve them is the same.

Windows 8 apps for the PhoneGap developer-Files

2012-09-04T20:48:04Z

(This is part 5 in my series on Windows 8 apps for the PhoneGap developer.)

Most applications save and read data. That can be just something as simple as a counter, the users credentials, or game high score. Or it can be complex sets of data the user manipulates as “documents” or all the data your application manages as a big set. At some point, you have to persist that data to the user’s device, whether it’s as a cache of cloud stored information or not.

PhoneGap provides file access in a few different ways. Let’s start with the simplest scenario and work up from there.

If you are managing application data in a PhoneGap app, chances are you are writing to and reading to a file on the local file system. The name and location of the file are controlled by you, and you’re saving that file in an application specific location on the system. You might be serializing JSON data to it or otherwise saving name/value pairs as settings for your app.

With Windows 8 JavaScript apps, you can store settings in a couple of different ways. The dead easy way is to just to do this.

var localSettings = Windows.Storage.ApplicationData.current.localSettings;
localSettings.values["my setting"] = "this is a setting";

That’s it! Now you have a setting stored for the app locally. If the app is uninstalled and reinstalled, the setting is cleared. No other app can access this app’s settings. You can store strings and integers and such this way. Reading it is easy too.


// Simple setting

var value = localSettings.values["my setting"];
        
if (!value)
{
    // No data
}
else
{
    // Access data in value
}

You can also collect several values together as a composite value to make them easy to pass around as arguments if needed.

// Composite setting

var composite = new Windows.Storage.ApplicationDataCompositeValue();
composite["loginAttemptCount"] = 1;
composite["lastUserName"] = "johndoe123";

localSettings.values["loginAttempts"] = composite;

You can also have settings containers for more complex scenarios.

In addition to local settings, you can have roaming settings. These are tied to a combination of the user’s Microsoft account (formerly Live ID) and your application. So if I run your app on multiple computers on which I have an account, anything you save to roaming settings is automatically synchronized between computers. This is great for high scores and furthest level reached in games – it shouldn’t matter which machine I unlock the berzerker level on, I should have access to that on every machine with my credentials and your app. These are so simple to use, and you don’t have to set up any cloud services or anything! Here are the example above changed to be roaming.

var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
roamingSettings.values["my setting"] = "this is a setting";

There is a pretty non-intrusive synching engine running to handle roaming profile. But sometimes you need stuff to sync very quickly. To do that, simply create a roaming setting (or composite) named HighPriority. That will sync within a minute!

If your app is running and you want to see if new roaming data is available that was saved on another machine, you can subscribe to the data updated event. Then you can update your app without the user even having to hit a refresh button.

var applicationData = Windows.Storage.ApplicationData.current;
 
function initialize() 
{
    applicationData.addEventListener("datachanged", datachangeHandler);
}

function dataChangeHandler(eventArgs)
{
    // TODO: Refresh your data
}

Be sure to read the guidelines for roaming application data for best practices on size, the user experience, size limits, and more.

Another great feature about setting is you can version them. That is, if version 1 of your app uses a certain set of settings data, and in version 2 of your app, you change that around (add or remove settings, change data types, whatever) you can have your app check the version of the settings on the user’s machine. That way you know if you can just rely on them as is or if you need to update them.

If you have more than simple settings to save, say, files like pictures or something, you can use the localFolder (or roamingFolder if you want that) property of application data. This saves in a specific location for each app. You write and read files using methods in the Windows.Storage.FileIO class, like so.

function writeSpeech() {
   localFolder.createFileAsync("gettysburg.txt", Windows.Storage.CreationCollisionOption.replaceExisting)
      .then(function (sampleFile) {
         var speechText = "Four score and seven years ago, etc...";
         return Windows.Storage.FileIO.writeTextAsync(sampleFile, speechText );
      }).done(function () {      
      });
}

Note the writing is asynchronous using the Promise pattern with .then syntax.

Reading is easy too.

function readSpeech() {
   localFolder.getFileAsync("gettysburg.txt")
      .then(function (sampleFile) {
         return Windows.Storage.FileIO.readTextAsync(sampleFile);
      }).done(function (speechText) {
         // Data is contained in speechText
      }, function () {
         // speechText not found, grab an envelope and start writing again!
      });
}

These are the same reading and writing techniques used for another option for saving data, which is managing things as files the user interacts with. This could be an image file the make with your app and want to save, or a checking account register that’s saved as a complete data file. The point is, in this technique, the user specifies the file name when saving or opening. Just like when working with Word, Excel or PowerPoint for example. You can access these files either directly with code, or with a File picker.

In code, you can use classes in the Windows.Storage namespace. This is probably most similar to a PhoneGap application in that you can request directories and/or files, create them, read them, move them, etc. For example, if you want to get to files the user has stored in their My Documents folder, you can use the documentsLibrary property of the Windows.Storage.KnownFolders class to get to those. That is, assuming you’ve specified the right capability in your app’s manifest. You did remember to do that. Right?

You use methods like getItemsAsync to get a collection you can .forEach over and process. You can search for files and create folder queries with some interesting options as well, like grouping pictures by month, grouping music by artist, etc.

If you don’t want to iterate, list and manage all the file names yourself, take a look at the file picker technique. With that approach, the user uses a Windows 8 common set of screens, selection and navigation paradigms to specify a file name or folder name to your app for it to save to, or to open. Here’s an example letting the user pick a file and then having your app write data to it.

// Create the picker object and set options
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// Dropdown of file types the user can save the file as
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
// Default file name if the user does not type one in or select a file to replace
savePicker.suggestedFileName = "New Document";

savePicker.pickSaveFileAsync().then(function (file) {
    if (file) {
        // Prevent updates to the remote version of the file until we finish making changes and call CompleteUpdatesAsync.
        Windows.Storage.CachedFileManager.deferUpdates(file);
        // write to file
        Windows.Storage.FileIO.writeTextAsync(file, "windows 8 rocks!").done(function () {
            // Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
            // Completing updates may require Windows to ask for user input.
            Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
                if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
                  //success!
                } else {
                  //epic fail
                }
            });
        });
    } else {
        //user cancelled
    }
});
   }

Interestingly, with this approach you don’t need the Documents Library Access capability enabled, because it’s the user who ultimately chooses the file. Here’s what the file picker looks like.

What you might not realize is that in addition to being able to use the file pickers to allow the user to choose files on their computer, they can also choose files for reading or saving to that are provided by other apps on the system. For example, I have SkyDrive app installed on mine, so I can tell the app to save there.

Your app just receives a reference to the file to read/write from. It doesn’t need to have any knowledge of how SkyDrive works or what my credentials are in order to have access to the file. All the user has to do is have the SkyDrive app (or any other app that provides files) installed on their system and have logged into it previously. Quite a powerful capability!

Browse through all these quickstarts for working with data and files, and you’ll uncover great programming capabilities enabling scenarios you’ve never even thought about!

Windows 8 apps for the PhoneGap developer-Contacts

2012-08-28T13:03:46Z

This is part 4 in my series on Windows 8 apps for the PhoneGap developer.

It’s time to make contact with a user’s contacts! Since a user’s device is very personal to them, it often has their list of contacts. And it’s very common to build functionality into phone apps for interacting with a user’s contacts. PhoneGap certainly lets you do that!

The PhoneGap api provides a way for your app to get a single contact by searching for it, or get a list of contacts. The general pattern is to retrieve the contacts and display them in a UI so the user can pick one or more. Be warned, however – don’t try this if your phone has a lot of contacts, it will likely crash the app due to memory constraints. Below is the typical example you’ll see on how to get a list of contacts from the user’s phone. Note that it’s an asynchronous operation and as such has callback specified – one for success and one for failure - as well as some parameters to filter the returned results (which can be used to get around the memory limitations I mentioned above).

function getContacts() {

    obj = new ContactFindOptions();
    obj.filter = ""; //Brooks";
    obj.multiple = true;


    navigator.contacts.find(["displayName", "name", "phoneNumbers", "emails", "urls", "note"],

        function(contacts)

        {

            console.log("received contacts :: " + contacts.length);

            console.log("contacts[0] = " + contacts[0]);


            var s = "";

            if (contacts.length == 0)

            {

                s = "No contacts found";

            }

            else

            {

                s = "Number of contacts: "+contacts.length+"<br/><table width='100%'><tr><th>Name</th><td>Phone</td><td>Email</td></tr>";


                for (var i=0; i < contacts.length; i++)

                {

                    try

                    {

                        var contact = JSON.parse(contacts[i]);

                    }

                    catch(e)

                    {

                        console.log(e.message + " " + contacts[i]);

                        continue;

                    }

                    s = s + "<tr><td>" + contact.displayName + "</td><td>";


                    if (contact.phoneNumbers && contact.phoneNumbers.length > 0)

                    {

                        s = s + contact.phoneNumbers[0];

                    }

                    s = s + "</td><td>"


                    if (contact.emails && contact.emails.length > 0)

                    {

                        s = s + contact.emails[0];

                    }

                    s = s + "</td></tr>";

                }

                s = s + "</table>";

  }


document.getElementById('contacts_results').innerHTML = s;
},
function(e)

{

document.getElementById('contacts_results').innerHTML = "Error: "+e.code;
},


obj);

};

Windows 8 employs a different mechanism for selecting contacts. You write code that lets your app invoke what’s known as the contact picker. This displays an interactive selection box that allows the user to select one or more contacts (your choice) to be returned to the app.

Here is code that invokes the Contact picker and processes the returned results.

function pickContact() {
       
       // Verify that we are unsnapped or can unsnap to open the picker
       var viewState = Windows.UI.ViewManagement.ApplicationView.value;
       if (viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
           !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
           // Fail silently if we can't unsnap
           return;
       };

       // Create the picker
       var picker = new Windows.ApplicationModel.Contacts.ContactPicker();
       picker.commitButtonText = "Select";

       // Open the picker for the user to select a contact
       picker.pickSingleContactAsync().done(function (contact) {
           if (contact !== null) {
               // Create UI to display the contact information for the selected contact
               var contactElement = document.createElement("div");
               contactElement.className = "contact";

               // Display the name
               contactElement.appendChild(createTextElement("h3", contact.name));

               // Add the different types of contact data
               appendFields("Emails:", contact.emails, contactElement);
               appendFields("Phone Numbers:", contact.phoneNumbers, contactElement);
               appendFields("Addresses:", contact.locations, contactElement);

               // Add the contact element to the page
               document.getElementById("output").appendChild(contactElement);
           } else {
               // The picker was dismissed without selecting a contact
           }
       });
   }

In this code, we make sure the Windows 8 JavaScript app is not in a snapped state, which is the view where the app takes up a narrow column on the screen. Picker dialog boxes won’t display properly if their host is in a snapped view. Fill or full screen view is acceptable though. The user will probably be picking a contact from their People app. Keep in mind that contacts in the People app come from a variety of sources that the user has set up on their machine – Windows Live, Facebook, Outlook, LinkedIn, etc. So not all of them have all the contact data that you might be looking for in your code. But the nice thing about the Contacts system is they will all have the same fields, identified in this documentation.

After the user chooses a contact and clicks the Submit button (the title is controlled by the commitButtonText property of the contactPicker), the contact data is returned to the app, which we then parse and display on the screen. There’s a helper method in this example called appendFields that formats things nicely for us.

function appendFields(title, fields, container) {
    // Creates UI for a list of contact fields of the same type, e.g. emails or phones
    fields.forEach(function (field) {
        if (field.value) {
            // Append the title once we have a non-empty contact field
            if (title) {
                container.appendChild(createTextElement("h4", title));
                title = "";
            }

            // Display the category next to the field value
            switch (field.category) {
                case Windows.ApplicationModel.Contacts.ContactFieldCategory.home:
                    container.appendChild(createTextElement("div", field.value + " (home)"));
                    break;
                case Windows.ApplicationModel.Contacts.ContactFieldCategory.work:
                    container.appendChild(createTextElement("div", field.value + " (work)"));
                    break;
                case Windows.ApplicationModel.Contacts.ContactFieldCategory.mobile:
                    container.appendChild(createTextElement("div", field.value + " (mobile)"));
                    break;
                case Windows.ApplicationModel.Contacts.ContactFieldCategory.other:
                    container.appendChild(createTextElement("div", field.value + " (other)"));
                    break;
                case Windows.ApplicationModel.Contacts.ContactFieldCategory.none:
                default:
                    container.appendChild(createTextElement("div", field.value));
                    break;
            }
        }
    });
}

Now that you know the different technique for accessing contacts from a Windows 8 JavaScript app, you’ll simply need to rewrite the contact selecting portion of your PhoneGap app. Fortunately, if you planned it well, your contact picker is a separate screen, invoked via a button or link on the screen that needs the contacts. So instead of showing that screen, simply put in calls to the Contact Picker API.

A side effect of the design of the Windows 8 Contact picker is that you can’t programmatically add contacts to the People app. Now, you might be saying “Hey I have a lot of contacts my app needs to manage. How can I get those contacts added to the user’s contact list so they can work with them?”

Well, an interesting thing about Windows 8 is that when the user goes to pick things like contacts (or files or pictures for that matter), they have the option to select different applications as the source of contacts. This means if your application manages or retrieves information that provides “contact” like data (your company’s personnel database, some online list like the user’s Pinterest friends, or perhaps collaborators in a github project) you can have your application be a source of contacts for any other application on the user’s machine from which they could pick contacts. That means if they’re in the mail app and want to email someone from a contact list you application provides, when they go to pick a contact in their email app, your app’s “contact picker page” that you have defined in your manifest file.

The quickstart for managing contacts has the full sample, but the main things you do is create a contact picker page that other apps (or even your app) will use, then register your app as a contact extension. Here’s what the custom Contact Picker screen from that sample app provides. Keep in mind that now, any other app that wants to pick contacts can use this sample app as its source.

Certainly you’d pretty it up a bit, but being able to show this type of cool selection box and return one or more contacts is pretty powerful.

In the above screenshot, the blue bars at the top and bottom are system provided. The user can switch between contact providers by clicking at the top where it now says ContactPicker JS sample. The Select and Cancel buttons at the bottom live in the collection area. The way this code is written, as the user clicks the checkbox next to each name, it is added to the collection of contacts to be returned, and displayed in the collection area.

In the project’s manifest file (below), you can see that we’ve declared our app a Contact Picker itself, and when it’s invoked in that way, the start page will be the contactPicker.html page.

That’s it! Integrating contacts with a Windows 8 app is slightly different from how you do it in a PhoneGap app, but it’s still programmable with JavaScript and designable with HTML so it’s pretty easy to adopt it into your overall application.

Windows 8 apps for the PhoneGap developer–Motion and orientation

2012-08-20T20:36:21Z

This is part 3 in my series on Windows 8 apps for the PhoneGap developer. Here we are going to focus on writing apps that respond to the various ways a user can move the device around.

The basic accelerometer code in PhoneGap is generally used to determine the orientation of the device with respect to gravity. This lets you create tilting games like marble mazes. It also can be used to test in what orientation the device is being held. To a small degree it can detect motion – but since it’s based on acceleration and not velocity, it’s not nearly as responsive as it needs to be to create something like, say, an augmented reality type application.

With PhoneGap you can obtain the accelerometer reading (x,y,z) at a given moment or you can set up a watcher with a callback, and specify the frequency of callbacks to occur. This usually gives you code that looks something like this:

var watchAccelID;
var watchAccel = function () {

     // Success callback
     var success = function (a) {
         document.getElementById('x').innerHTML = roundNumber(a.x);
         document.getElementById('y').innerHTML = roundNumber(a.y);
         document.getElementById('z').innerHTML = roundNumber(a.z);
     };

     // Fail callback
     var fail = function (e) {
         //display some error message
     };

     // Update acceleration every 1 sec
     var opt = {};
     opt.frequency = 50;
     watchAccelId = navigator.accelerometer.watchAcceleration(success, fail, opt);

 };

The equivalent in Windows 8 is to call GetCurrentReading for a single check of the accelerometer readings, or to add an eventListener for the ReadingChanged event on the accelerometer with a suitable ReportInterval to control the frequency of the callbacks. An interesting point is that in Windows 8 you can determine the MinimumReportInterval from the hardware so you can make sure you’re not asking for something the hardware/os can’t provide. Here’s an example of that.

var accelerometer;
function onDataChanged(e) {
    var reading = e.reading;

    document.getElementById('x').innerHTML = reading.accelerationX.toFixed(2);
    document.getElementById('y').innerHTML = reading.accelerationY.toFixed(2);
    document.getElementById('z').innerHTML = reading.accelerationZ.toFixed(2);
}

function watchAccel() {
    if (accelerometer) {
         return;
    }
    accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
   
    
    // Choose a report interval supported by the sensor
    var minimumReportInterval = accelerometer.minimumReportInterval;
    var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
    accelerometer.reportInterval = reportInterval;

    accelerometer.addEventListener("readingchanged", onDataChanged);
    
    }
}

There are some differences in the values returned to PhoneGap apps and Windows 8 apps. PhoneGap’s values for X,Y and Z are reported with the actual acceleration numbers (as in 9.8 m/s² (1g) and positive values meaning "down”), whereas Windows 8 reports 1g pull towards the earth as the value -1. In addition, on a phone, X,Y and Z are based on portrait orientation and on a Windows 8 device, X, Y and Z are based on landscape orientation. Confused? I thought so. Here’s a table to help.

	X,Y,Z PhoneGap	X,Y,Z Windows 8
Portrait	0, 9.8, 0	1, 0, 0 (rotated clockwise)
Landscape	-9.8, 0, 0 (rotated clockwise)	0, –1, 0
Flat on a desk	0, 0, 9.8	0, 0, –1

Pretty simple to accommodate the differences in your code though.

Another thing to consider is the fact that typical phone and Windows 8 UI rotates to stay upright as the user rotates the device – but the XYZ coordinate system does not. Meaning if you have a physics type game calculating movement of something on the screen based on X&Y, those will swap if the device is rotated. Y becomes left and right and X becomes up and down (assuming you hold the device more or less straight up in front of you). You basically have two choices. The easiest is to prevent the app from reorienting itself upon device rotation. That’s super simple in Windows 8. Just go into the app manifest file and check the box under the orientation you want to support. If all the boxes are unchecked, the app supports all orientations and will rotate automatically to stay upright to the user.

If you do want to allow the app to orient to the user, you can put some tests in your code processing the accelerometer values to test the orientation of the device, and together with that information, update your UI correctly. Here’s how you can have your app notified when the user changes the device orientation.

var orientationSensor;
function init() {
    orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();
    orientationSensor.addEventListener("orientationchanged", onDataChanged);
}

//Possible values for orientation are notRotated, rotated90DegreesCounterclockwise, 
//rotated180DegreesCounterclockwise, rotated270DegreesCounterclockwise,
//faceup or facedown

var currentOrientation = Windows.Devices.Sensors.SimpleOrientation.notRotated;

function onDataChanged(e) {
    currentOrientation = e.orientation;
}

Use the value saved in currentOrientation in your accelerometer calculations. Or, even if you’re not using accelerometer data in your application, use it to rearrange the UI as needed if the user rotates the device. However, use that only as a last resort because one of the cool things about Windows 8 JavaScript apps is you can use media queries in style sheets to do most of that rearranging for you. Media queries is a great topic, and in fact is great for IE browser apps as well as Windows 8 JavaScript apps on rotatable devices. They’re well explained in this blog post by Stephen Walther, but I digress…

A final useful tidbit while we’re talking about accelerometers is the availability in the WinJS library of a shaken event. Using that event, you can have the OS determine when a shake gesture has occurred, so you don’t have to calculate it from a bunch of accelerometer changes.

var accelerometer;
var shakeCount = 0;


//Init Accelerometer
function initAccel() {
     accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
     if (accelerometer) {
         accelerometer.addEventListener("shaken", onShaken);
     } else {
         document.getElementById("shakeOutput").innerHTML = "No accelerometer found";
     }
}

function onShaken(e){
     
         shakeCount++;
         document.getElementById("shakeOutput").innerHTML = shakeCount;
     };

Another sensor PhoneGap lets you tap into is the compass (if the device has one) to get the current heading of the device. There’s also a watching event for the compass to get continuous readings. Combining these with the accelerometer can give you some sense of the devices position is space, but it can be tricky to calculate.

In Windows 8 JavaScript apps, you can get the compass heading as well, either one time through the GetCurrentReading method, or by subscribing to the Readingchanged event.

Some Windows 8 devices coming out will have more advanced sensors like gyroscopes and inclinometers in them. There are some great possibilities there for advanced gaming or augmented reality apps. Check out the whole quickstart series on them for more information.

The last tip I’ll leave you with is around power optimization. All those callbacks to your app from the sensors can nibble into battery life. So it’s a good idea to remove the event handlers and dispose of the sensors when you don’t need them. The more optimized and better performing your app is on Windows 8, the more users will love the experiences you create for them.

Windows 8 app dev for the PhoneGap developer–Location

2012-08-14T21:02:22Z

In my previous post about PhoneGap to Windows 8 migration, I used the location API as comparison point about how similar the programming approaches were. In this post I’m going to examine location in a bit more detail.

Location information in Windows 8, as in PhoneGap, can be accessed either in single requests, or can be subscribed to as the device moves around. The location information is the same in both platforms (latitude, longitude, altitude, etc) so that’s an easy match. Another interesting point about location data in a Windows 8 JavaScript app is the fact that you can either use the WinJS library to get the location, or if you want to stick strictly to HTML, you can use the W3C Geolocation API available in HTML5. For this post I’m going to show the WinJS technique.

To get continuous updates of the device’s location, rather than PhoneGap’s callback model of geolocation.watchPosition, Windows 8 uses an event handler model. Thus, the PhoneGap line

var watchID = navigator.geolocation.watchPosition(onSuccess, onError);

becomes

var loc = new Windows.Devices.Geolocation.Geolocator();
loc.addEventListener("positionchanged", onPositionChanged);

When you no longer want to receive location updates, you simply removeEventListener in the same way. It’s a good idea in general to turn off sensors when you don’t need them, to maximize battery power and application responsiveness. Another way to maximize battery life is to obtain the location information without needing the accuracy of GPS – in a lot of scenarios like weather and local events, you just need a general idea of the user’s location, which Windows 8 can determine by WiFi triangulation. In fact, a lot of devices out there that will be running Windows 8 (at least initially) will likely not even have a GPS built in, so at least for the foreseeable future, you’re going to want to use the defaultvalue for the DesiredAccuracy property of the Geolocator, which is “low”.

In addition to the positionchanged event, there’s a statuschanged event that tells you about the sensors, as well as whether the application is permitted to access location data. Some sample code that might be used in a statuschanged event handler is below. Note the case when the status is Disabled.

switch (newStatus)
{
    case PositionStatus.Ready: 
        strStatus = "Location is available.";
        break;
    case PositionStatus.Initializing:
        strStatus = "Geolocation service is initializing.";
        break;
    case PositionStatus.NoData:
        strStatus = "Location service data is not available.";
        break;

    case PositionStatus.Disabled:
        strStatus = "Location services are disabled. Use the " +
                    "Settings charm to enable them.";
        break;

    case PositionStatus.NotInitialized:
        strStatus = "Location status is not initialized because " +
                    "the app has not yet requested location data.";
        break;

    case PositionStatus.NotAvailable:
        strStatus = "Location services are not supported on your system.";
        break;

    default:
        strStatus = "Unknown PositionStatus value (" + 
                    newStatus.ToString() + ").";
        break;
}

Speaking of permission to access location data, like many other phone platforms that PhoneGap supports, Windows 8 requires the developer to declare that they want to use the location capabilities of the device. This in turn notifies the user when they install and/or run the app that it’s going to want to access their location.That’s easily specified in the application’s manifest file. Just open the file package.appxmanifest in solution explorer and check the Location box.

The first time the user runs your app and it tries to access her location, she’ll actually get a prompt as to whether they want to allow that. The prompt interrupts the app so she can’t miss it.

Once the user decides to allow the app to access his or her location,, the permission stays that way until the user revokes it in the settings section of your app. You might be thinking to yourself “What settings section? I didn’t create a settings section!” Well one of the things that Windows 8 apps have in common is the Settings section accessible from the setting charm. That’s the panel users can bring up in Windows 8 on the right side of the screen. Just swipe in from the right side or press the Windows key and the C key at the same time. Because your app specified the Location capabilities, your app will automatically get as settings section for Permissions. You can also add your own sections and content to the settings panel, which makes it really flexible!

Another way you can reset the permissions is to uninstall the app and reinstall it. In general this is great for development, because every time you uninstall and reinstall, you’re getting fresh settings and fresh saved data.

The last tip I’ll leave you with is this. When you are developing your app and running it on your local Windows 8 machine, it will use your machine’s location, typically triangulated from WiFi. But if you want to test your app as if you are in another location, you can do that by running it in the Windows 8 Simulator. Just chose Simulator at the top of the Visual Studio window. This actually brings up a remote desktop connection to the local machine. On the side of the simulator window there’s a globe icon, and if you click it, you can input coordinates, altitude and accuracy directly.

So, as you can say, it’s pretty straightforward to start using location services in Windows 8 JavaScript apps if you’ve done it before in PhoneGap.

Downloads for Windows 8 Devcamps

2012-08-09T15:02:25Z

This month I’m presenting Windows 8 camps in Atlanta and Raleigh. For those of you who would like the labs, presentations and samples, they are available here in both C# and JavaScript versions.

http://www.microsoft.com/en-us/download/details.aspx?id=29854

Don’t forget to sign up for our Generation App promotion so you can launch your Windows 8 app in 30 days.

Windows 8 apps for the PhoneGap developer

2012-08-06T19:22:00Z

Abstract: Windows 8 apps can be designed and coded using HTML/CSS/JS just like PhoneGap apps can. And with very little effort you can use your skill and existing resources to crank out a sleek, modern looking Windows 8 style app in no time.

PhoneGap and Windows 8 development – more similar than you realize

PhoneGap is an interesting animal. While it’s most salient aspect is the cross platform nature of the applications you can build with it, it’s also interesting in that you use HTML and JavaScript to create the apps. Since this relies on the underlying mobile browser technology on each platform, there are (from time to time) a few little quirks. But overall, it really does provide a nice layer of abstraction. You can bring your web skills into play, and all you have to do is learn a few specifics of creating and publishing an app on a particular platform, design the UI with HTML and CSS, code it up with standard JavaScript, learn a few new APIs that PhoneGap offers, and you’re all set. In fact, to some teams, the cross platform nature is secondary. They embarked on PhoneGap development because it allowed their teams to reuse their web development skills, their favorite libraries, design tools, and more.

What does this mean in the context of Windows 8 development? Well, one of the approaches for building the new Windows 8 applications is actually to use HTML/CSS/CS. If you haven’t yet, I suggest you read about creating a Windows 8 Metro style apps with JavaScript. Here’s the upshot for PhoneGap developers:

Your skills, assets, and probably a lot of your existing pure HTML/CSS and JavaScript code will just work in a Windows 8 application.
You can update the look of your applications with very little effort by using the intrinsic styles for the basic HTML elements like <h1> and <button>, as well as the advanced Windows 8 controls like the app bar, date picker, flip view, and more.
Your code that interacts with the PhoneGap API (to handle things like file access, sensors and application lifecycle events) can be updated to use the WinJS library to accomplish the same things you were doing in PhoneGap.
Scenarios where you had to write PhoneGap plugins can be addressed by either finding the functionality in the expansive WinJS library, or by incorporating native code in a Windows 8 JavaScript app.

This blog post series is going to address the third bullet above – figuring out how to do things in Windows 8 app development that you know how to do in PhoneGap. We’ll start with a simple example and then dive in deeper over subsequent weeks.

A simple PhoneGap example

Here is a very simple PhoneGap application that uses the PhoneGap geolocation API to get information on the device’s position. No matter what platform this PhoneGap code is executed on, this will work. That’s because the call to getCurrentPosition in line 28 calls into the underlying platform’s API. But to your code, It’s exposed as a JavaScript function.

<!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>Cordova WP7</title>

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


      <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

1:

2:

 3:       <script type="text/javascript">

4:

 5:         var getLocation = function () {

6:

 7:             // Success callback

 8:             var success = function (p) {

 9:                 document.getElementById('latitude').innerHTML = p.coords.latitude;

 10:                 document.getElementById('longitude').innerHTML = p.coords.longitude;

11:

 12:                 document.getElementById('tdAlt').innerHTML = p.coords.altitude;

 13:                 document.getElementById('tdAcc').innerHTML = p.coords.accuracy;

 14:                 document.getElementById('tdAltAcc').innerHTML = p.coords.altitudeAccuracy;

 15:                 document.getElementById('tdHeading').innerHTML = p.coords.heading;

 16:                 document.getElementById('tdSpeed').innerHTML = p.coords.speed;

17:

 18:                 setLocationStatus("Done");

 19:             };

20:

 21:             // Fail callback

 22:             var fail = function (e) {

 23:                 console.log("getLocation fail callback with error code " + e.code);

 24:                 setLocationStatus("Error: " + e.code);

 25:             };

26:

 27:             // Get location

 28:             navigator.geolocation.getCurrentPosition(success, fail, { enableHighAccuracy: true }); //, {timeout: 10000});

 29:             setLocationStatus("Retrieving location...");

30:

 31:         };

 32:         /**

 33:  * Set location status

 34:  */

 35:         var setLocationStatus = function (status) {

 36:             document.getElementById('location_status').innerHTML = status;

 37:         };

38:

</script>




  </head>
  <body>
    
    <h1>Location</h1>
    <div id="info">
        <b>Status:</b> <span id="location_status">Stopped</span>
        <table width="100%">
            <tr><td><b>Latitude:</b></td><td id="latitude"> </td></tr>
            <tr><td><b>Longitude:</b></td><td id="longitude"> </td></tr>
            <tr><td><b>Altitude:</b></td><td id="tdAlt"> </td></tr>
            <tr><td><b>Accuracy:</b></td><td id="tdAcc"> </td></tr>
            <tr><td><b>Altitude Accuracy:</b></td><td id="tdAltAcc"> </td></tr>
            <tr><td><b>Heading:</b></td><td id="tdHeading"> </td></tr>
            <tr><td><b>Speed:</b></td><td id="tdSpeed"> </td></tr>
        </table>
    </div>
    <h2>Action</h2>
    <button onclick="getLocation();">Get Location</button>
  </body>
</html>

The HTML of a PhoneGap application is a little different from the HTML you’d write for a browser application. Let’s take a look at the differences and their equivalents in Windows 8 JavaScript apps.

The DOCTYPE element

Since we’re not running in a browser of the user’s choice, but instead in a specific execution environment, we can use the standard HTML5 doctype which is simply “HTML”. This is identical in Windows 8.

The meta tag controlling the “viewport”

Because in PhoneGap, the hosting container is essentially a web browser, this tag tells it behave less like a web browser. That is, don’t allow the user to pan and pinch to zoom as if it were a web page. We don’t need this for Windows 8 apps because there is no scrolling, panning or zooming like in a web page since it’s an app.

The stylesheet reference

One of the great aspects of designing a web page is the flexibility and power of CSS. Since an app has a design as well, CSS can be used to design the app’s interface in the same way. The “master.css” here is from the template for building Windows Phone apps with PhoneGap. When you design a PhoneGap application, you’re going to want to give it a different look and feel on each platform. And swapping out CSS files when you’re building the final app for each platform is one way to do that. The CSS and overall design you use should be tailored to the platform.

Windows 8 JavaScript apps use CSS to design the UI just like a browser or PhoneGap app. In moving this code to Windows 8, we won’t need this line as there’s a default Windows 8 style for every control. You’d only need to specify styles if you want to customize the look. Later in this article I’ll show that in action.

The script reference to “cordova”

When your code is running in PhoneGap, all the standard JavaScript APIs are available to use. By bringing in this script file, you can then use the PhoneGap APIs to do more “appy” stuff like working with the file system, responding to application lifecycle events, and more.

In Windows 8 we have something similar in the form of WinJS. So it’s just a matter of learning what’s in the WinJS API like you did when you first learned PhoneGap.

The app code

The rest of the source is the code and markup for your app. There is a table in which to display the location information once we retrieve it, and an asynchronous call into the PhoneGap’s geolocation API to get the result.

The Windows 8 equivalent

Now that we have reviewed the anatomy of a basic PhoneGap application page, let’s look at the equivalent in Windows 8. When you set up a machine (physical or virtual) with the Windows 8 Release Preview and Visual Studio 2012 Release Candidate, you’ll be able to create Windows 8 apps with JavaScript and HTML. For an overview on how that works, check out this this introduction.

When you create a new Windows 8 JavaScript project, you’ll get the following basic HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SimpleLocation</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

1:

 2:     <script src="//Microsoft.WinJS.1.0.RC/js/ui.js">

 1: </script>

2:

 3:     <!-- SimpleLocation references -->

 4:     <link href="/css/default.css" rel="stylesheet" />

 5:     <script src="/js/default.js">

</script>

</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Looks a lot like PhoneGap, huh? There’s the same DOCTYPE, some CSS and JS references to intrinsic resources and some to project-specific styles and code. So let’s bring in pieces from the PhoneGap sample above and make the necessary changes to get it running on Windows 8!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SimpleLocation</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

1:

 2:     <script src="//Microsoft.WinJS.1.0.RC/js/ui.js">

 1: </script>

2:

 3:     <!-- SimpleLocation references -->

 4:     <link href="/css/default.css" rel="stylesheet" />

 5:     <script src="/js/default.js">

 1: </script>

2:

 3:         <script type="text/javascript">

4:

 5:             var getLocation = function () {

6:

 7:                 // Success callback

8:

 9:                 var success = function (p) {

10:

 11:                     document.getElementById('latitude').innerHTML = p.coordinate.latitude;

 12:                     document.getElementById('longitude').innerHTML = p.coordinate.longitude;

 13:                     document.getElementById('tdAlt').innerHTML = p.coordinate.altitude;

 14:                     document.getElementById('tdAcc').innerHTML = p.coordinate.accuracy;

 15:                     document.getElementById('tdAltAcc').innerHTML = p.coordinate.altitudeAccuracy;

 16:                     document.getElementById('tdHeading').innerHTML = p.coordinate.heading;

 17:                     document.getElementById('tdSpeed').innerHTML = p.coordinate.speed;

18:

 19:                     setLocationStatus("Done");

 20:                 };

21:

 22:                 // Fail callback

23:

 24:                 var fail = function (e) {

25:

 26:                     //setLocationStatus("Error: " + e.code);

 27:                     setLocationStatus("Error: " + e.message);

 28:                 };

29:

30:

31:

 32:                 // Get location

33:

 34:                 //navigator.geolocation.getCurrentPosition(success, fail, { enableHighAccuracy: true }); //, {timeout: 10000});

35:

 36:                 var geolocator = Windows.Devices.Geolocation.Geolocator();

 37:                 geolocator.desiredAccuracy = Windows.Devices.Geolocation.PositionAccuracy.high; //or default

 38:                 geolocator.getGeopositionAsync().then(success, fail);

39:

40:

 41:                 setLocationStatus("Retrieving location...");

42:

43:

44:

 45:             };

46:

 47:             /**

48:

 49:  * Set location status

50:

 51:  */

52:

 53:             var setLocationStatus = function (status) {

54:

 55:                 document.getElementById('location_status').innerHTML = status;

56:

 57:             };

58:

59:

</script>

</head>
<body>
       <h1>Location</h1>

    <div id="info">

        <b>Status:</b> <span id="location_status">Stopped</span>

        <table>
            <tr><td><b>Latitude:</b></td><td id="latitude"> </td></tr>
            <tr><td><b>Longitude:</b></td><td id="longitude"> </td></tr>
            <tr><td><b>Altitude:</b></td><td id="tdAlt"> </td></tr>
            <tr><td><b>Accuracy:</b></td><td id="tdAcc"> </td></tr>
            <tr><td><b>Altitude Accuracy:</b></td><td id="tdAltAcc"> </td></tr>
            <tr><td><b>Heading:</b></td><td id="tdHeading"> </td></tr>
            <tr><td><b>Speed:</b></td><td id="tdSpeed"> </td></tr>
        </table>

    </div>

    <h2>Action</h2>

    <button onclick="getLocation();">Get Location</button>
</body>
</html>

The HTML is virtually unchanged, other than swapping the PhoneGap app-specific “master.css” for the built in Windows 8 one called “ui-dark”. And yes, there is a “ui-light” if you want your app to have a light colored background. The code is only a little different because we’re using the .then syntax from the WinJS Promise object to accomplish things asynchronously. The success parameter became coordinate instead of coords (but note the properties are the same name!).

Below, I have some screen shots of the PhoneGap app running in the Windows Phone emulator, and the Windows 8 JavaScript app.

Conclusion

When you started using PhoneGap you had to design for a different rendering environment (an app) instead of a browser. And you had to learn a new set of APIs. But you still used your HTML/CSS/JS skills from creating browser applications. And so it is with Windows 8 HTML/JS development. In future articles I’ll cover a lot more aspects of Windows 8 JavaScript apps from a PhoneGap developers perspective.

A Windows 8 developer has good reason to be excited. With over 650 million licenses of Windows 7 out there, exciting new hardware coming from manufacturers, a developer friendly store with a great revenue sharing approach, and tons of resources (online and local), frankly, PhoneGap developers who aren’t targeting Windows 8 are just missing the boat.

Don't forget that we have a great program to get you from idea to Windows 8 app with our 30 to Launch program as part of Generation App. Sign up today!

Windows 8 and Visual Studio 2012 are on the way–released to manufacturing today!

2012-08-01T16:39:00Z

Today, various Microsoft team blogs joined together in announcing some huge news to the tech industry. Windows 8 has been released to manufacturing and will soon be available to download – first for MSDN and TechNet subscribers, then via other channels.

This means the Windows Store is now open, according to this single statement from the Windows Store blog’s post:

Starting today, any qualifying business in a supported market can now submit a Metro style app for Windows 8!

Visual Studio 2012 has hit RTM as well, so all the tools you need to build and submit apps will be available soon as well.

If you've been on the fence about getting started with Windows 8 development, here are some things to help you get off that fence - on the right side!

Devcamps and Hackathons

Come out to one of our imminent Windows 8 devcamps and hackathons and spend a day learning about Windows 8 development, and a day doing where you build an app, get some help, and win prizes! In the southeast, we'll be in Atlanta on August 3-4 and Raleigh on August 17-18.

Generation App

Begin your 30-day journey to create a great Windows 8 app. Get started at www.generationapp.com and receive:

Insider tips and tricks on Windows 8 application development.
Personal on-the-phone access to a Windows 8 architect.
An exclusive one-on-one Windows 8 style design consultation.
An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab.

Your new Windows 8 app could be mere days away.

Learn how to make your app succesful

My colleague Chris Bowen has just published a really useful post on The Top 10 Windows 8 Secrets of App Success. Some great tips in there on dealing with screen sizes, managing online/offline scenarios, and more. Following those tips will really help differentiate your app from the competition!