Jan
18
2012

Articles

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

Parameters Explained
Parameter Name	Used for
Description	A description of your extension
Version	The version of your extension
Author	A link to the author of the extension
Priority	The priority of the extension, in relation to others.

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)

An article by Joseph Guadagno

No Comments

Jan
12
2012

Articles

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.

An article by Joseph Guadagno

No Comments

Dec
31
2011

Articles

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.

An article by Joseph Guadagno

No Comments

Dec
31
2011

Articles

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.

An article by Joseph Guadagno

No Comments

Dec
31
2011

Articles

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.

An article by Joseph Guadagno

No Comments

Oct
17
2011

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?

An article by Joseph Guadagno

No Comments

Aug
2
2011

LightSwitch Meeting for SEVDNUG

We are having a special user group meeting this month on LightSwitch on August 25th where Beth Massi, Senior Program Manager for BizApps, will present up to three sessions on LightSwitch.

The descriptions for the sessions are below. If you are interested in LightSwitch and want to attend please complete this survey.

As usual, food and drinks will be provided for this event, as well as some extra special raffle prizes. Some of the raffle prizes include new LightSwitch components from vendors like Developer Express, Infragistics, Telerik, and ComponentOne. You might even win an MSDN license or a trip with Beth, myself and others to Friday nights Diamondback game.

Introducing Visual Studio LightSwitch (100-200)

Visual Studio LightSwitch is the simplest way to build business applications for the desktop and cloud. LightSwitch simplifies the development process by letting you concentrate on the business logic, while LightSwitch handles the common tasks for you. In this demo-heavy session, you will see, end-to-end, how to build and deploy a data-centric business application using LightSwitch.

Visual Studio LightSwitch - Beyond the Basics (200-300)

LightSwitch is a new product in the Visual Studio family aimed at developers who want to easily create business applications for the desktop and the cloud. In this session we’ll go beyond the basics of creating simple screens over data and demonstrate how to create screens with more advanced capabilities. You’ll see how to extend LightSwitch applications with your own Silverlight custom controls and RIA services. We’ll also talk about the architecture and additional extensibility points that are available to professional developers looking to enhance the LightSwitch developer experience.

LightSwitch Advanced Development and Customization Techniques (300+)

Microsoft Visual Studio LightSwitch is the simplest way to build business applications for the desktop and the cloud. In the session you will see advanced techniques for customizing the client and server pieces of a LightSwitch application. You will learn how to work with the LightSwitch API, build sophisticated UI, implement middle tier application logic by customizing the data update pipeline, interact with Office applications, and much more without leaving the LightSwitch development environment. You will also see how combining Visual Studio Professional+ and your existing Silverlight and .NET skills provides even more customization opportunities by building LightSwitch extensions.

An article by Joseph Guadagno

No Comments

Aug
1
2011

News

SQL Pass Events Site Relaunched

Are you going to PASS Summit 2011 in October? If so, you might want to check out the updated site I launched called PASS Summit Events. PASS Summit Events will be your one stop shop for all of the events and after parties at PASS Summit 2011.

Anyone can create an event on the site, all you need to do is sign in with your Windows Live credentials. Once signed in a link to create an event will appear. Please note, the event will not be available until it is reviewed and approved for display by an administrator.

I added a few social media features like integration with Facebook and Twitter. A cleaner more consistent UI, bitly url shorten for sharing the event. And better support for Bing maps.

Check out the site.

Staying connected

Don’t feel like checking out the site every day to see what is happening? Here are a few resources to help you.

The site
http://www.passsummitevents.info/default.aspx

RSS Feed
http://www.passsummitevents.info/rss.ashx

GeoRSS Feed
http://www.passsummitevents.info/rss.ashx?format=geo

iCal Feed
http://www.passsummitevents.info/calendar.ashx

Map of events
http://www.passsummitevents.info/map.aspx

Flickr
http://www.passsummitevents.info/flickr.aspx

Mobile Users

You will be able to view all of the events that are happening, even filter by day. In addition, you can view the events on a Map, and check out the event info.

Mobile Site
http://www.passsummitevents.info/m/default.aspx

Mobile Map
http://www.passsummitevents.info/m/m.aspx

Windows Phone 7 App
Not available

iPhone and iPad App
http://itunes.apple.com/us/app/mvp-events/id416291827?mt=8

Bellevue / Seattle

In case you do not want to check out the events. Here are some other resources, also accessible from the site.

Bing Local - Bellevue

http://www.bing.com/local/default.aspx?q=Bellevue%2C+WA&go=&form=LLSV

Bing Local - Seattle

http://www.bing.com/local/default.aspx?q=Seattle%2C+WA&go=&form=LLSV

Transportation - Bellevue

http://www.ci.bellevue.wa.us/transportation.htm

Transportation - Seattle

http://www.seattle.gov/transportation/

An article by Joseph Guadagno

No Comments

Jun
3
2011

My TechEd Video on Community

Back in May at TechEd North America Developer Express interviewed me about INETA, Community and Desert Code Camp. Check out the video.

Thanks Developer Express for your on going support of community.

An article by Joseph Guadagno

No Comments

May
11
2011

News

INETA and TechEd

Since being elected the President of INETA North America in April, I have heard some good and bad things about INETA from several people. I want to make INETA better and more relevant for people and user groups. That being said, I will be at Microsoft Tech·Ed in Atlanta next week along with the rest of the INETA board and would like to chat with people about the good, bad and ugly of INETA. I will be

At the INETA Community Leadership Summit on Sunday
The INETA Booth in the Connect Zone on the Expo floor at 12:30pm daily for the INETA raffle.
Community Night on Tuesday
Walking through out the convention center.

If you have some compliments, complains, suggestions or just want to chat, here’s how you can get a hold of me:

Come to the INETA Community Leadership Summit on Sunday.
My TechEd contact card, contact me there or setup a meeting using that sites tool.
Hit me up on Twitter at @jguadagno.
Look for me wearing my pink INETA shirt or my blue Polo shirt.
Shoot me an email at joseph.guadagno@ineta.org to set up a meeting.

BTW, INETA is doing a lot this year at Microsoft Tech·Ed, check out the full list here.

I look forward to chatting with you.

An article by Joseph Guadagno

No Comments

Joseph Guadagno

Add Google Plus One Extension to BlogEngine.NET

Creating the extension

Handling the page and post serving

DebuggerDisplay Attribute

How to Implement

Summary

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

The jQuery Mobile ListView

Creating the ListView

The List Divider

The Items

Creating the jQuery ListView with an ASP.NET DataRepeater Control

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

Getting Started

Converting the document head

Converting the Document Body

Introduction to jQuery Mobile

Getting started with jQuery Mobile

jQuery Mobile Page Parts

Header Part

Content Part

Footer Part

40+

School

My family life

My career in technology

Community

The next 10 years...

LightSwitch Meeting for SEVDNUG

SQL Pass Events Site Relaunched

Staying connected

Mobile Users

Bellevue / Seattle

My TechEd Video on Community

INETA and TechEd

About the author

Month List

Page List

Twitter

Creating the extension

Handling the page and post serving

How to Implement

Summary

The jQuery Mobile ListView

Creating the ListView

The List Divider

The Items

Creating the jQuery ListView with an ASP.NET DataRepeater Control

Getting Started

Converting the document head

Converting the Document Body

Getting started with jQuery Mobile

jQuery Mobile Page Parts

Header Part

Content Part

Footer Part

School

My family life

My career in technology

Community

The next 10 years...

Staying connected

Mobile Users

Bellevue / Seattle

About the author

Category list

Tag cloud

Month List

Page List

Twitter