Windows Phone Unleashed Events

There are two events Windows Phone Unleashed events coming to the Phoenix metropolitan area in May. Please register soon before the events sell out.  Registration and prerequisites can be found next to each of the events.

• Game Development by Dan Wahlin May 5th, Tempe, AZ. Register
• Business Application Development by Joseph Guadagno, May 12th, Chandler, AZ. Register

Game Developers

Introduction to XNA

XNA Game Basics

1. What is XNA
2. Game Development Tools
3. XNA Game Projects
4. XNA Game Loop
5. Debugging Games

Working with Images, Sounds and Text

1. Working with Textures
2. Playing Songs and Sound Effects
3. Drawing text with SpriteFonts

Getting User Input

1. Getting input on the phone
2. Using the Accelerometer
3. Using Touch

Game State Management

Managing Game Play

1. Keeping Score
2. Tracking Health and Lives
3. Adding Levels

Managing Screens

1. Creating Multi-Screen games
2. Loading content in the background
3. How to pause the game

Managing State

1. Phone Application Lifecycle
2. Supporting Fast Application Switching
3. Persisting and Restoring State

Silverlight and XNA Integration

1. Introduction to Silverlight
2. Silverlight and XNA Integration
3. Creating a Silverlignt and XNA Game

Advanced XNA Games

Marketplace and Advertisements

1. Understanding the Windows Phone Marketplace
2. Submitting your Game to the Marketplace
3. Adding Advertisements to your game

3D Games

1. 3D Support in XNA
2. Creating a simple 3D Game

Multi-Platform Games

1. Building Games for Phone, PC and XBOX
2. Other Multi-Platform options

Cloud Integration

1. Using Windows Azure
2. Social Gaming Toolkit

Business Applications Developers

Introduction to Windows Phone 7 Programming

In this session, we start with a discussion of windows phone, the architecture changes made from 6.5 to 7.0, the hardware specifications and then move into the beginnings of building a WP7 application including...

1. Application life cycle
2. Hardware Foundation
3. Files associated with project template
4. Splash screen and the importance of 1 second / 19 second loading
5. Application Bar
6. Panorama and Pivot controls
7. MVVM
8. Marketplace

Connecting to Services

In this session, we will discuss how Cloud Services help to bring power to the phone. We will be binding to a rest based services and show how to search and display the information received. In this session we will also talk about Navigation, passing information between screens, while working with List and detail information.

1. Navigation
2. Location
3. JSON Deserialization
4. Bing Maps
5. Isolated Storage
6. Binding Sample Data
7. Navigation

Recording Data

In this session we will be adding to our knowledge and learn the importance of live tiles. We will show you how to set up a periodic agent and how to set up and read and write to a SQL Database on Windows Phone.

1. Live Tiles
2. SQL CE
3. Background Processes and Periodic Agents
4. Launchers and Choosers

Continue Reading »

An article by Joseph Guadagno No Comments

Motivation

According to the Bing Dictionary, motivation is defined as follows:

1. giving of reason to act: the act of giving somebody a reason or incentive to do something
2. enthusiasm: a feeling of enthusiasm, interest, or commitment that makes somebody want to do something, or something that causes such a feeling
3. reason: a reason for doing something or behaving in a particular way

Motivation can be a powerful driver to move you forward in your life, goals and/or projects.  For the last few months I have be haphazardly trying to lose some weight, and by haphazardly I mean, that the intend was there just not a lot of motivation.  That changed two weeks ago at DevConnections when I had two friends of mine comment on my clothing and overall appearance.  One said to my wife, admittedly jokingly, How can you go out with this guy looking like this when you are so beautiful (paraphrasing a bit)? And another making comments while I was working the INETA booth commenting on my attire and general appearance stating (paraphrasing again), How can you represent INETA looking like that? Based on the other comments from that person made thought out the day all I heard was You look like a fat slob! And after looking at myself and hearing what some friends were saying to me, I realized that since my mother passed back in October of 09, and taking on the extra community work that I have let myself go.  I tended to wear bagger clothes that were comfortable and I wore sneakers everywhere which was not typical of my style.

Well DevConnections and some friends like Elijah Manor, loosing 46 pounds, I am now motivated again. I am, as of this morning, 238 pounds and according to most charts and sites based on my height I should be around 165 pounds although I would be happy with around 180 pounds. So that means I need to lose 58 pounds which I am capable of doing.  In a previous lifestyle change I lost around 75 pounds.

There are many ways that one can do this; surgery, really restricting my diet, going through crash diets or detox diets. I am probably going to go back to watching what I eat and drink with Weight Watchers. I was really successful with this plan in the past.

Motivation for You!

Are you looking for that push to get you to start losing weight well join me for the first leg of my weight loss journey. The #TechEd20! That’s right, I set my first goal to lose 20 pounds by TechEd North America and decided to make a little competition of it.  Join me in my our weight loss quest for some cools prizes. What the prizes are I do not not know yet, but I am sure I will be able to get some books or free software for participants.  But the biggest prize will be being able to fit into the jeans or your favorite shirt again.

So if you want to participate, leave a comment on this post and email me your target weight loss delta in pounds.  If you hit at least 20 pounds by the start of TechEd (Jun 10th), you get some sort of prize.  Everyone will most likely get something for participating.

Good luck!

Sponsorship

If you are in the software community and want to provide some of the give a ways for this contact me at jguadagno [at] sevdnug.org

Continue Reading »

An article by Joseph Guadagno No Comments

Foursquare Autocomplete jQuery Plugin

This post will go over implementing the foursquare Autocomplete jQuery plugin.  In the upcoming days (weeks) I will have a few blog posts on using the foursquare API with C#.

A few months ago I was making updates for the MVP Summit Events site, one of the features I wanted to add was foursquare integration to the site.  I was thinking that it would be cool for each of the parties listed on the site, to show how many people have checked in to that event (venue) on foursquare.  This way you could see what parties to attend and which ones to avoid :).

In order to determine who was checked in at one of the events, I needed to add the foursquare venue id to all of my venues. For the existing venues, I manually added the foursquare venue id but for new venues I was thinking of making the user experience as easy as possible, a user should enter a few characters and get venues in the area with those characters. The first thing that popped into my head was to use an auto complete control and use foursquare as the data source. So after “Googling it with Bing”  I found that there was one control that did this but no longer worked.  So what does every good developer do, re-invent the wheel :). 

Getting Started with the foursquare API

Just like most social media sites now, foursquare has a REST based API. Foursquare provides a quick start guide to get you started using their API. In order to get started with the foursquare API you will need the following:

• A foursquare account (The site does recommend you create a separate foursquare account for your applications.)
• An access token for the API
• Register your application.

foursquare does have many API end points for accessing their data.  After checking out several of them I decided to go with the Suggest Completion Venues end point even though (at the time of this writing it was an experimental feature).

Suggest Completion End Point

According to the API end point documentation for the Suggest Completion end point, the end point provides a list of mini-venues partially matching the search term, near the location.

The method uses the HTTP GET verb and has two required parameters; ll and query. The ll parameter which is the latitude and longitude of the users location (or search area) . And the query parameter is the string you want to search for.  The results that get returned is an array of mini venues (essentially an arrays without a lot of extra properties, just the minimum set required for suggestion.

This was perfect for my needs.

Creating the plugin

I decided to go with using the auto complete widget from the jQuery UI, use the suggest completion end point from foursquare and turn it into a jQuery plugin. Unfortunately I have never created a jQuery plugin before, however, I was lucky enough to run across a post from a buddy of mine Elijah Manor on How to Create Your Own jQuery Plugin.

After a few hours of fiddling around with the cost from the blog post above I eventually figured it out and got it to work. The resulting control looks like this:

In order to use the foursquare jQuery auto complete plugin you will need to include on your page, jQuery, jQuery UI, one of the jQuery UI themes and this plugin.

I’ve also included a sample page to get you started.  It has a bunch of styles to make the use of the plugin a little cleaner.

4sqautocomplete-web.html (3.27 kb)

Once you have the required files referenced on your page, you can “foursquare auto complete” a textbox by calling the foursquareAutocomplete method as shown here:

$("#venue").foursquareAutocomplete({
  'latitude': 47.22,
  'longitude': -122.2,
  'oauth_token': "your oauth token",
  'minLength': 3,
  'search': function (event, ui) {
    $("#venue-name").html(ui.item.name);
    $("#venue-id").val(ui.item.id);
    $("#venue-address").html(ui.item.address);
    $("#venue-cityLine").html(ui.item.cityLine);
    $("#venue-icon").attr("src", ui.item.photo);
    return false;
  },
  'onError' : function (errorCode, errorType, errorDetail) {
    var message = "Foursquare Error: Code=" + errorCode + 
    ", errorType= " + errorType + 
    ", errorDetail= " + errorDetail;
    log(message);
  }
});

Handling the results

Once a user selects the venue from the list, the search event is raised.  The search event has two parameters:

• Event: The event
• Item: the foursquare venue that was returned.

The item that is returned is a custom object that provides the basic address properties for the venue. The properties combined, will look like a US formatted address and will take into account fields that are not populated in foursquare.

Conclusion

It took a while for me to figure out all of the parts needed to create the jQuery plugin but overall I think it was worth it. Again this is my first venture into creating a jQuery plugin, so if it is way off, let me know.

Continue Reading »

An article by Joseph Guadagno No Comments

Add Google Plus One Extension to BlogEngine.NET

A few years ago I built my personal website using BlogEngine.NET, every once in a while I tend to pay attention to the site and “freshen it up”.  Back in December of 2011, I upgraded to version 2.5 of BlogEngine.NET and updated the theme.  Last night I added facebook like buttons to all those post and pages courtesy of isharpnote. Well I wanted to add a Google Plus One button to my site also but I could not find any BlogEngine.NET extensions for it, so what does every developer do, create one.  I started with the “Facebook Like with Google Plus Extension for BlogEngine 2.5” extension from isharpnote and tweaked it for my needs.

Creating the extension

To create a BlogEngine.NET extension you need a class and attribute it with the BlogEngine.Core.Web.Extensions.Extension attribute, like so:

[Extension(
	"Adds the Google Plus One to your blog Posts", 
	"1.0", 
	"<a href=\"http://www.josephguadagno.net/\">Joseph Guadagno</a>",
	800)]

Parameters explained

This class will need to reside in the App_Code\Extensions folder of your site.

Next step, if you want to have settings, you will need to tell the extension manager that you have settings.  You do this by executing code similar to this, in the constructor of your extension or a method that is called in the constructor of your extension.

var settings = new ExtensionSettings(ExtensionName)
  {Help = "Adds Google Plus One to your Post Home page and Post page", IsScalar = true};

  settings.AddParameter("size", "Size", 20, false, false, ParameterType.ListBox);
  settings.AddValue("size", new[] { "standard", "small", "medium", "tall" }, "standard");
  ExtensionSettings = ExtensionManager.InitSettings(ExtensionName, settings);

In my extension I call a method called InitializeSettings in the constructor

public GooglePlusOne()
{
  InitializeSettings();
  Post.Serving += ServingHandler;
  Page.Serving += ServingHandler;
}

You'll notice that I attached two events, Post.Serving and Page.Serving, to the ServingHandler method. This will tell BlogEngine.NET that I want to know when it is serving up pages or blog posts.

Handling the page and post serving

void ServingHandler(object sender, ServingEventArgs e)
{
  if (!ExtensionManager.ExtensionEnabled(ExtensionName)) return;
  if (e.Location == ServingLocation.Feed) return;

  HttpContext context = HttpContext.Current;
  if (context != null)
  {
    System.Web.UI.Page page = context.CurrentHandler as System.Web.UI.Page;
    if (page != null)
    {
      ScriptInject(page);
    }
  }
  var post = sender as Post;
  if (post != null)
      e.Body += GetButton(post.AbsoluteLink.AbsoluteUri);
}

On line 3 you'll not the check to see if the extension is enabled.  Believe it or not, people might turn off your extension.

Line 4 checks to see if this is in a feed, if so, we do not want to apply the button to the page or post.

Line 6 - 10, I get a reference to the page so that I can inject the required JavaScript for the Google Plus One button.

public static void ScriptInject(System.Web.UI.Page page)
{
  HtmlGenericControl googleScript = new HtmlGenericControl("script");
  googleScript.Attributes["type"] = "text/javascript";
  googleScript.Attributes["src"] = "https://apis.google.com/js/plusone.js";
  page.Header.Controls.Add(googleScript);
}

Next, I get a reference to the post and append to the body of the post the Google Plus One button.

public static string GetButton(string url)
{
  string size = ExtensionSettings.GetSingleValue("size") jQuery152015469422082135964_1326909846817 "standard";
  string googlebutton = string.Format("<g:plusone size=\"{0}\" href=\"{1}\"></g:plusone>", size, url);
  return googlebutton;
}

That's it. You can download the complete extension here GooglePlusOne.cs (2.13 kb)

Continue Reading »

An article by Joseph Guadagno No Comments

DebuggerDisplay Attribute

Have you ever tried to debug an application and wish the Visual Studio debugger did not display {Namespace.ObjectName} when you wanted to see some of the details of the objects?

Visual Studio has an attribute that you can add to a class to inform the debugger what to display when it is displaying that class in the debugger.  As you probably guessed the attribute is called DebuggerDisplay.

How to Implement

Let’s say we have a simple class called Person, the Person class has 4 properties; FirstName, MiddleName, LastName and FullName. Here is the definition:

public class Person

{

  public string FirstName { get; set; }
  public string MiddleName { get; set; }
  public string LastName { get; set; }    
  public string FullName
  {
    get
    {
      return string.Format("{0} {1}{2}", FirstName,
        (string.IsNullOrEmpty(MiddleName)) ? string.Empty : MiddleName + "", 
        LastName);
    }
  }
}

Next, let’s assume we want to display the first and last name of the person when debugging.  We first need to add the DebuggerDisplay attribute to our class.  The DebuggerDisplay attribute can be found in the System.Diagnosis class of the .NET framework. The DebuggerDisplay works almost like the string.Format method, except you replace the numbers with the property / method names you want to display.

Example:

[DebuggerDisplay("FirstName={FirstName} LastName={LastName}")]

This will tell the debugger to display the string FirstName= with the value of the FirstName field in double quotes followed by LastName= with the value of the LastName field in double quotes every time it needs to display a person object.  Here is our new class:

[DebuggerDisplay("FirstName={FirstName} LastName={LastName}")]
public class Person
{
  public string FirstName { get; set; }
  public string MiddleName { get; set; }
  public string LastName { get; set; }    
  public string FullName
  {
    get
    {
      return string.Format("{0} {1}{2}", FirstName,
          (string.IsNullOrEmpty(MiddleName)) ? string.Empty : MiddleName + "", 
          LastName);
    }
  }
}

This will display like so:

You’ll notice this makes it easier to see what you are looking at.  It also works in the immediate window.

Summary

You can use more than just field names.  Method calls can be done (although probably not the best) and some calculations.  Take a look at the MSDN documentation for the DebuggerDisplay attribute for more information.

There is also an article titled DebuggerDisplay attribute best practices that you should read also.

Continue Reading »

An article by Joseph Guadagno No Comments

Using an ASP.NET DataRepeater ItemTemplate to create a jQuery Mobile Nested List with List Dividers

The jQuery Mobile framework has a list view widget that displays unordered lists in several different ways.  In the process of converting the Microsoft Global MVP Summit mobile site to use jQuery Mobile I wanted to change the way I displayed the events.  The idea was to have a header for each date that there was an event along with some of the details of the event.  Clicking on the event would take you the to event details page.

To accomplish this I used the count bubble, list dividers, content formatting and the search filter bar features of jQuery Mobile.

First let’s look at the HTML, for the sake of brevity I removed the ID fields from the HTML.

  1: <ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
  2:     <li data-role="list-divider">2/25/2012<span id="EventCount_0" class="ui-li-count">1</span></li>
  3:     <li>
  4:     <a href="/m/e.aspx?Id=45">
  5:         <h3><span>Northwest Harvest at MVP Summit 2012</span></h3>
  6:         <p><strong><span>Northwest Harvest Warehouse</span></strong></p>
  7:         <p class="ui-li-aside"><span>from 11:30 AM to 5:00 PM</span></p>
  8:     </a>
  9:     </li>
 10:     <li data-role="list-divider">2/27/2012<span class="ui-li-count">2</span></li>
 11:     <li>
 12:     <a href="/m/e.aspx?Id=48">
 13:         <h3><span>Consumer Camp: Bellevue</span></h3>
 14:         <p><strong><span id="VenueName_0">Microsoft Store: Bellevue</span></strong></p>
 15:         <p class="ui-li-aside"><span>from 5:00 PM to 8:00 PM</span></p>
 16:     </a>
 17:     </li>
 18:     <li>
 19:     <a href="/m/e.aspx?Id=46">
 20:         <h3><span>First Time MVPs Event</span></h3>
 21:         <p><strong><span>Rockbottom - Top of the Rock</span></strong></p>
 22:         <p class="ui-li-aside"><spa>from 6:00 PM to 9:00 PM</span></p>
 23:     </a>
 24:     </li>
 25: </ul>

From this HTML markup the jQuery Mobile framework will generate a view that looks like this:

The jQuery Mobile ListView

Creating the ListView

The start of the unordered list, Line 1, has 4 attributes:

  1: <ul data-role="listview" 
  2: data-inset="true" 
  3: data-theme="d" 
  4: data-filter="true">

The data-role of listview tells the jQuery Mobile framework to use the jQuery Mobile Listview widget. Setting the data-inset attribute to true tells the jQuery Mobile framework to indent the list view and add the rounded edges. The data-theme attribute tells jQuery Mobile to use the d theme. Setting the data-filter equal to true tells the jQuery Mobile framework to add the filter items text box up top. No additional work is needed to add the filter, it will search all of the ListItems that are part of this unordered list who’s data-role attribute is not set to list-divider for the text entered.

The List Divider

Adding the data-role of list-divider (Line 2 of the initial example) will make that list item appear as a divider.  You can use this attribute to group items, in my case, I grouped by date.

To establish the count bubble you will need to wrap the count of item around a span tag and give it the class of ui-li-count, as shown in Line 2.

Here’s an annotated image with markup.

The item in red is the individual list item which will be discussed in the next section.

The Items

Each sub item under the list divider needs to be it’s own Anchor element ( A )  wrapped in a ListItem (LI) tag as shown in lines 3-9 and 11-24 above.

  1: <li>
  2:     <a href="/m/e.aspx?Id=45">
  3:         <h3><span>Northwest Harvest at MVP Summit 2012</span></h3>
  4:         <p><strong><span>Northwest Harvest Warehouse</span></strong></p>
  5:         <p class="ui-li-aside"><span>from 11:30 AM to 5:00 PM</span></p>
  6:     </a>
  7: </li>

Each LI formatted above will generate a “row” as highlighted in the red boxed image above within your browser.  Clicking on one of those links will take you to the page specified in Anchor tag. In order to get the times to “float” to the left, you will need to use the ui-li-aside class.  Note, the > image will get added automatically by the framework.

Creating the jQuery ListView with an ASP.NET DataRepeater Control

In order to accomplish this, I went with a DataRepeater within a DataRepeater .  The first, or outside, DataRepeater (DateRepeater)will get a list of distinct dates from the data store in order to create the List Dividers. The second, or inner, DataRepeater (EventRepeater) will list all of the events for the day specified by the DateRepeater.

Let’s take a look at the code:

  1: <asp:Repeater runat="server" ID="DateRepeater" DataSourceID="EventDatesDataSource" OnItemDataBound="DateRepeaterOnItemDataBound">
  2:     <HeaderTemplate>
  3:         <ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
  4:     </HeaderTemplate>
  5:     <ItemTemplate>
  6:         <li data-role="list-divider"><%# Container.DataItem %>
  7:             <asp:Label runat="server" ID="EventCount" class="ui-li-count"></asp:Label>
  8:         </li>
  9:         <asp:Repeater runat="server" ID="EventRepeater" OnItemDataBound="EventRepeaterOnItemDataBound">
 10:             <ItemTemplate>
 11:                 <li>
 12:                 <asp:HyperLink runat="server" ID="EventUrl">
 13:                     <h3><asp:Label runat="server" ID="EventName" /></h3>
 14:                     <p><strong><asp:Label runat="server" ID="VenueName"></asp:Label></strong></p>
 15:                     <p class="ui-li-aside"><asp:Label runat="server" ID="EventDate"></asp:Label></p>
 16:                 </asp:HyperLink>
 17:                 </li>
 18:             </ItemTemplate>
 19:         </asp:Repeater>
 20:     </ItemTemplate>
 21:     <FooterTemplate>
 22:         </ul>
 23:     </FooterTemplate>
 24: </asp:Repeater>

In lines 2-4, using the HeaderTemplate property of the DateRepeater DataRepeater control I create the initial ListView. It is then closed in the lines 21-24 using the FooterTemplate of the DateRepeater DataRepeater control. Next in the ItemTemplate property (Line 6-8) of the DateRepeater DataRepeater control, I create a list divider by adding a ListItem (LI) with the data-role of list-divider with a label for the date.  Line 7 has a label control with a class of ul-li-count that holds the count of events that date.

Now within the ItemTemplate property of the DateRepeater DataRepeater control I also have another DataRepeater, EventRepeater. This DataRepeater will iterate through all the events for a day and create the individual ListItems (LI) for each event on that day (Lines 11-17). Notice how the ListItem is wrapped in an ASP:HyperLink control.  This will provide the hyperlink to the event details page.

That sums up creating jQuery Mobile listview using an ASP.NET DataRepeater control.

Continue Reading »

An article by Joseph Guadagno No Comments

Converting an ASP.NET “Mobile” site to use jQuery Mobile

Building upon my previous post Introduction to jQuery Mobile, I wanted to share how I converted the Microsoft Global MVP Summit mobile site to use jQuery Mobile.

Getting Started

The first step was to look at the existing ASP.NET Master Page that the site was using and see where I had to make changes.  I included the skeleton mobile master page, prior to jQuery Mobile below.  Please note, I removed parts of the page that do not relate to the blog post.

  1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="MVPSummitEvents.Website.Mobile" %>
  2: 
  3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4: <html xmlns="http://www.w3.org/1999/xhtml" >
  5: <head runat="server">
  6:     <title>MVP Summit Events - Mobile - </title>
  7:     <asp:ContentPlaceHolder ID="head" runat="server">
  8:     </asp:ContentPlaceHolder>
  9: </head>
 10: <body>
 11:     <form id="form1" runat="server">
 12:     <div id="mHead"><h1>MVP Summit Events</h1></div>
 13:     <div id="mMenu">
 14:         <asp:HyperLink runat="server" ID="hlMain" NavigateUrl="~/m/default.aspx" Text="Home" ToolTip="Home" /> | 
 15:         <asp:HyperLink runat="server" ID="hlMap" NavigateUrl="~/m/map.aspx" Text="Map" ToolTip="Map" /> | 
 16:         <a href="http://tinyurl.com/4e5mp5p" title="Windows Phone 7 App">Window Phone 7</a> App. |
 17:         <a href="http://itunes.apple.com/us/app/mvp-events/id416291827?mt=8">iPhone</a> App.
 18:     </div>
 19:     <div id="mBody">
 20:         <asp:ContentPlaceHolder ID="CphBody" runat="server">
 21:         
 22:         </asp:ContentPlaceHolder>
 23:     </div>
 24:     </form>
 25:     <div id="mFoot">Copyright ©2009-2012, <a href="http://www.josephguadagno.net" title="Joseph Guadagno">Joseph Guadagno</a> | <a href="http://twitter.com/jguadagno" title="Follow jguadagno">@jguadagno</a> | <a href="mailto:jguadagno@sevdnug.org">Contact</a></div>
 26: </body>
 27: </html>

Converting the document head

The first thing I needed to do was to update the DOCTYPE on line 3 to

  1: <!DOCTYPE HTML>

Next was to include the jQuery Mobile scripts and css files, after that my head section looked like this:

  1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="MVPSummitEvents.Website.Mobile" %><!DOCTYPE html> 
  2: <!DOCTYPE html> 
  3: <html xmlns="http://www.w3.org/1999/xhtml" >
  4: <head runat="server">
  5: 	<title>MVP Summit Events - Mobile - </title>
  6: 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  7: 	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  8: 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  9: 	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 10: 	<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
 11: 	<link id="Link1" rel="stylesheet" runat="server" href="/css/m.css" />
 12: 	<script type="text/javascript" src="../js/analytics.js"></script>
 13: 	<script type="text/javascript" src="../js/analytics.jqmobile.js"></script>
 14: </head>

Again, I removed parts that are not required for this post.

You should notice that line 2 is now different and I added lines 6, 7,8,9 and 13.  Line 6 contains the viewport meta tag, the description from the jQuery Mobile docs is …

Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen.

Lines 7, 8, 9 contain the references to jQuery Mobile style sheet, the jQuery library and the jQuery Mobile library. Line 13, is a work around for using Google Analytics which is described here.

Converting the Document Body

Looking at the body of the Master Page, I was almost ready for the jQuery Mobile conversion.

  1: <div id="mHead"><h1>MVP Summit Events</h1></div>
  2:     <div id="mMenu">
  3:         <asp:HyperLink runat="server" ID="hlMain" NavigateUrl="~/m/default.aspx" Text="Home" ToolTip="Home" /> | 
  4:         <asp:HyperLink runat="server" ID="hlMap" NavigateUrl="~/m/map.aspx" Text="Map" ToolTip="Map" /> | 
  5:         <a href="http://tinyurl.com/4e5mp5p" title="Windows Phone 7 App">Window Phone 7</a> App. |
  6:         <a href="http://itunes.apple.com/us/app/mvp-events/id416291827?mt=8">iPhone</a> App.
  7: </div>
  8: <div id="mBody">
  9:     <asp:ContentPlaceHolder ID="CphBody" runat="server">
 10:     </asp:ContentPlaceHolder>
 11: </div>
 12: <div id="mFoot">Copyright ©2009-2012, <a href="http://www.josephguadagno.net" title="Joseph Guadagno">Joseph Guadagno</a> | <a href="http://twitter.com/jguadagno" title="Follow jguadagno">@jguadagno</a> | <a href="mailto:jguadagno@sevdnug.org">Contact</a></div>
 13: </form>

I have my Master Page broken up into a header, menu, body, and footer. All I had to do was assign the jQuery Mobile data-role attributes and I was done.  However I took this time to “tweak” the layout of the mobile site look more like it would on the iPhone and other mobile devices.  I still keep the header, but moved the menu to the footer section and moved the existing footer to an about page.  The new body of the mobile Master Page looks like this.

  1: <div data-role="page">    
  2:   <div data-role="header" data-theme="b"><h1><asp:Label runat="server" ID="HeaderLabel"></asp:Label></h1></div>
  3:   <div data-role="content" data-theme="b">
  4:     <asp:ContentPlaceHolder ID="BodyContent" runat="server">
  5:     </asp:ContentPlaceHolder>  
  6:   </div>
  7:   <div data-role="footer" data-theme="b">
  8:     <div data-role="navbar">
  9:       <ul>
 10:         <li><asp:HyperLink runat="server" NavigateUrl="~/m/default.aspx" data-icon="home">Home</asp:HyperLink></li>
 11:         <li><asp:HyperLink runat="server" NavigateUrl="~/m/map.aspx" data-ajax="false">Map</asp:HyperLink></li>
 12:         <li><asp:HyperLink runat="server" NavigateUrl="~/m/Apps.aspx">Apps</asp:HyperLink></li>
 13:         <li><asp:HyperLink runat="server" NavigateUrl="~/m/About.aspx" data-icon="info">About</asp:HyperLink></li>
 14:       </ul>
 15:     </div>
 16:   </div>
 17: </div>

To me this seems quite readable and clearly identifies what each section (div) is responsible for.

Let’s break it down.

First all the previous DIV’s in between the FORM tags where placed within a

  1: <div data-role="page"></div>

tag. The next step was to convert each of the DIV’s that I had into a jQuery Mobile DIV. There is really no ‘jQuery Mobile DIV’ just an attribute that tells jQuery what “section” of the document this div is for.  I added the data-role=”header” to the DIV with the ID of mHead, I added the data-role=”content” to the DIV with the ID of mBody and I added the data-role=”footer” to the DIV with the ID of mFooter.

“Ok but what happened to the mMenu DIV” you ask.  Take a look at line 8 in the code sample above.  I moved the “menu” to the footer of the new document and assigned it a data-role of navbar. This is a jQuery Mobile widget that creates a simple menu of buttons out of all of the listitem elements of the unordered list. The data-icon attribute is an attribute that allows you to indicate one of the 18 built in icons for any jQuery Mobile button.

After this, I was done.  I now have a jQuery Mobile version of the Microsoft Global MVP Summit site that looks the same on virtually every mobile browser with little to no work.

Up next, how to convert other elements of an ASP.NET mobile site to use jQuery Mobile widgets.

Continue Reading »

An article by Joseph Guadagno No Comments

Introduction to jQuery Mobile

Back in November I sat in on a session by Scott Hanselman on creating a mobile site on ASP.NET using jQuery Mobile.  While I was watching this session I could not stop thinking how easy is this, I can do this for the mobile version of the Microsoft Global MVP Summit mobile site. So like most of us, it took me a month to get to it.

A few days ago while on vacation and every one was asleep, I started to play around with jQuery mobile and in about an hour I had a sample site created.  Here’s how you can get started.

Getting started with jQuery Mobile

According the jQuery Mobile website, jQuery Mobile is…

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design

To get started with jQuery Mobile you can head over to their Quick Start Guide.  Here is the minimum HTML document that you need for jQuery Mobile.

  1: <!DOCTYPE html> 
  2: <html> 
  3: 	<head> 
  4: 	<title>My Page</title> 
  5: 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  6: 	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  7: 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  8: 	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  9: </head> 
 10: <body> 
 11: <div data-role="page">
 12: 	<div data-role="header">
 13: 		<h1>My Title</h1>
 14: 	</div><!-- /header -->
 15: 	<div data-role="content">	
 16: 		<p>Hello world</p>		
 17: 	</div><!-- /content -->
 18: </div><!-- /page -->
 19: </body>
 20: </html>

The first this you will notice is the simple DOCTYPE.

<!DOCTYPE html>

Next you will need to include a reference to the jQuery Mobile scripts and css files in the HEAD section of the document.

  1: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  2: <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  3: <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

And then finally in your HTML Body, you need to create a “page”. You do this by creating a DIV and an assigning the role of page to it.

  1: <div id="#default" data-role="page">
  2: ...
  3: </div>

The id is optional and can be used to have more than one page within a document.  For more on the page structure, check out the Anatomy of a Page in the jQuery Mobile docs.

That’s all you need for the bare minimal jQuery Mobile page.

jQuery Mobile Page Parts

jQuery Mobile pages are made up of potentially 3 parts; the header, the content (body) and the footer.  These parts are outlined by creating a div and assigning a role to it.  The roles are data-role=”header”, data-role=”content”, and data-role=”footer”.

  1: <div data-role="page"> 
  2: 	<div data-role="header">...</div> 
  3: 	<div data-role="content">...</div> 
  4: 	<div data-role="footer">...</div> 
  5: </div> 

Header Part

Is defined by following markup.

  1: <div data-role="header">...</div>  

The header part of the document is where you place content that you want as the head or beginning part of the page. This is typically page titles and toolbars.

Content Part

Is defined by following markup.

  1: <div data-role="content">...</div>  

The content part of the document is where you place the page content.

Footer Part

Is defined by following markup.

  1: <div data-role="footer">...</div>  

The footer part of the document is where you place the footer content. This is typically navigation, copyright information, etc.

Hopefully, I armed you with enough information to get started with jQuery Mobile.  In the next few posts I will talk about how I converted the Microsoft Global MVP Summit mobile site to use jQuery Mobile.

Continue Reading »

An article by Joseph Guadagno No Comments

40+

So this blog post has been pending for over 4 months. I originally had the idea on June 1st, the day after I turned 40. It was to be titled 40 + 1. The intent is for me to summarize the first 40 years of my life and outline what I am thinking about for the next 10. Here I (we) go ...

Most of my life has been spent in New York in the New York City, aka "The City". I was born in Brooklyn, NY, raised in Queens, NY, moved to Long Island, NY when I was 22 then moved to Chandler, AZ when I was 35.

School

I attended a few different Elementary schools. One of which I qualified and participated for the City-wide spelling bee. I attended 1 Junior High School, where I was part of a program calls Stars, which was geared to "smarter" kids. This program allowed me to complete 3 school years in 2 (7th, 8th, and 9th grades). I then moved on to Richmond Hill High School where I was...

• on the student council
• in charge of the student store
• coached the Junior Varsity Girls Basketball Team. We finished in 2nd place.
• swan on the school's Varsity swim team.
• played on the Varsity Volleyball team. We made it to the City Championship but got elimated. I did set a record for the most consecutive aces, 30.
• was a student counsoler for troubled kids
• graduated with Cindy Lauper, out school gave her an honorary diploma since it was our 90th anniversary and she attended the school.
• graduated in the top ten of 400+.

I attended both City College of New York (CCNY) and Long Island University. I did not graduate from either of team.

My family life

In July of 1994, I met Deidre Faude, after 2 years of dating we tied the knot. Our wedding was happiest moment of my life... that was until I had my first child Joseph (JJ) and my second Emily. Having kids and watching them grow up and being active in their life and keeping Dee happy is what I live for. Which leads me to my first life motto... I work to live, I don't live to work.

For my kids, I am there when them need me, I have been a soccer coach for my son for 6 years and a baseball coach for 4. I have even coached his Chandler National All Star team last year. For my daugther, I have coached 4 of her softball teams, including her Chandler National All Star team.

In the last two years, both of my parents have died. Yes, I used the word died and not lost, I know exactly were they are :)

My career in technology

I attended college to become a High School Math teacher. Unfortunately, attending college and working full time both turned me off from the "education" system and turned me on to making money. My first job in technology was working as Sales Person in a local Radio Shack. I then moved on to a manager position in an inventory company named RGIS. My first exposure to a technology job was when I worked for a store called ComputerWorld, which was a store that sold computers and software. One day a customer walked in and asked if I knew anyone that could write them some software for their real estate company. I said, that I could even though I knew nothing about programming at the time. :)

At this time, I went to my girl friend's, at the time, college library and got a book on computer programming. It was small blue book about QuickBasic. I started with the samples in this book and ended up building a quite large application in QuickBASIC for DOS. For this application I had to write the user interface, the data base (each table was a file), the database indexes, rountines for rebuilding indexes, rountines for printing and networking. Anyway, I eventually moved on to work for a real IT shop and quite a few other IT shops.

Community

I strongly believe in giving back to to the world (see my life motto #2 below). In high school, I was a student peer counselor. At one point in college I was actively participating on the MSN Board (yes MSN boards) where I got my first Microsoft MVP in Visual Basic (for DOS) back in 1996. It was not until I got married and had kids that I got back into community. As I mentioned above, I coached both of kids teams in a few different sports. I even coached a soccer team when I first moved to Arizona for a friends of mines kid's team. When I started working for my current company I wanted to give back even more. At this point I joined the Big Brother Big Sister program where I was a big, both in age and weigth :) for three different kids. It is definately something I recommend everone do at least once.

I got into the technology community back in 2008 when I started the Southeast Valley .NET User Group. I presented a times, helped out with other events which lead me to my second Microsoft MVP award. However, that apparently was not enough and I joined the INETA, International .NET Association Board of Directors where I became the Director of Marketing. After almost a year of service to INETA I became the President for North America. Geez that was alot.

The next 10 years...

In the next 10 years, both of my kids should attend and graduate college. I will hopefully make INETA relavent again. I will make it to my 20 year wedding anniversary, if Dee can continue to put up with me :).

No matter what, I will continue to live by my 2 mottos

• I work to life, I don't live to work
• Leave this life better than it was when you entered it.

Where should go next? What should I do?

Continue Reading »

An article by Joseph Guadagno No Comments