Jason N. Gaylord - Dev

Only One Dialog Box is Allowed in Silverlight

Mon, 21 May 2012 21:20:40 GMT

Today I came across an interesting issue. I have a Silverlight project in which I’d like to be able to show the OpenFileDialog as well as a JavaScript alert. However, I was able to determine (and confirmed at StackOverflow), that the alert cannot happen first as the OpenFileDialog would be a second dialog on a single user action to the browser. By commenting out the alert, I was able to continue just as planned.

The error that results is the following:

The text reads: [FileDialog_UserInitiated] Arguments:

Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See http://go.microsoft.com/fwlink/?linkid=106663&Version=4.1.10111.0& File=System.Windows.dll&Key=FileDialog_UserInitiated

However, when browsing to the URL, you’ll notice that the link no longer exists.

I don’t use Silverlight much and so I haven’t come across this before. Hopefully this helps someone in the future.

Visual Studio 11 - Now with some Color

Wed, 09 May 2012 17:03:46 GMT

The Visual Studio is constantly reviewing items that have been posted to their User Voice site. One of the items that I’ve been asking for, installation customization in Visual Studio, has been voted up to number 4 on the list. Keep the votes coming.

Another item that I have voted for is adding color back to Visual Studio. Yesterday morning, the Visual Studio team announced that changes have been made and will be reflected in the Visual Studio Release Candidate. While I still feel there can be more work on the UI, I think it is heading back in the right direction. I get the consistent look that the teams are going for across products and Microsoft is betting heavily in the metro-style.

Some of the items that have been changed include changes to the icons, adding in more color to icons and menu items, and creating a lighter background.

Here’s a quick before and after shot borrowed from their post:

Here’s what it looks like based on the state of your development process:

Hopefully we’ll continue to see more improvement before the RC.

Open Source Microsoft - Build MVC, WebAPI, Razor, and WebPages

Wed, 09 May 2012 17:03:25 GMT

Scott Guthrie has announced on his blog that as of this very moment, ASP.NET MVC, ASP.NET WebAPI, and WebPages with Razor syntax have all been open sourced on CodePlex at http://aspnetwebstack.codeplex.com. That’s huge news. Oh and the ASP.NET Web Stack can be repo’d using TFS, SubVersion, Mercurial, and newly added Git.

So, you may be thinking “This sounds cool. But, what does it mean for me?” It means your awesome. It means that you can now take your favorite features and patches to their framework and submit it back to the team for review. It means you can use their framework when it is eventually ported over to Mono and other open-source platforms. It means, you’ll eventually be able to run ASP.NET wherever you’d like.

Be sure to check it out and provide feedback to the team. If you’re not sure what type of feedback to provide, choose from the following:

“The ASP.NET team just knocked it out of the park with this: http://aspnetwebstack.codeplex.com. Go OSS!”
“ScottGu and his team delivered yet again.”
“Who said that Microsoft can’t release software using an open source license?”
“Congrats to the ASP.NET team for, yet again, exceeding expectations!”

Your choice. In the meantime, great job Microsoft!

Preventing Web Applications from Inheriting Parent Dependencies (bin)

Mon, 12 Mar 2012 21:12:11 GMT

Have you ever created a web application for something specific such as a standalone web app (forum, photo gallery, web service, etc.) while using ASP.NET and received this:

If you have, you probably became frustrated. I know I have. The reason this occurs is that sub-applications under the main web application inherit the uplevel web.config settings. This means that the machine.config and other system config files filter into the main web’s web.config file as well.

You can prevent this from occurring as details quite well at http://jasong.us/yXCV8P.

To do this, you’ll need to pull your dependencies and wrap them in a location element and add a attribute as shown below:

This will now load only the dependencies within the application.

<location path="." inheritInChildApplications="false">
    <system.web>
        <!-- Compilation section with assemblies -->
    </system.web>
</location>

You can also circumvent this issue by using sub-domain or another domain altogether.

JavaScript onClick Navigation Issues within Google Chrome are Solved

Thu, 08 Mar 2012 16:49:18 GMT

For the longest time, If I needed to use an onclick event for navigation (div or some other page element), I’d use something similar to:

<div onClick="location.href('/admin');"><!-- Something here --></div>

However, Google Chrome interprets the href property as a method or an object initializer. Instead, to get the onclick navigation to work properly in Chrome, set the property to a value using a typical setter such as:

<div onClick="location.href='/admin';"><!-- Something here --></div>

This simple change will allow Google Chrome to properly navigate to the page.

Hope that helps!

Bring Back Visual Studio 11 Installation Customization

Wed, 29 Feb 2012 23:56:41 GMT

Earlier today Microsoft released Visual Studio 11 Beta as a general release. One of the first things you may notice is that the installation customization of VS11 Beta has been removed. If you are installing VS11 on Windows 8 Beta, you’re looking at consuming around 20GB of disk.

So Microsoft already released the beta so their mind is made up, right?

Not exactly. The team is constantly looking at feedback on the http://visualstudio.uservoice.com website. One of the items that I’ve submitted is to bring back the customization. You can use up to three (3) of your User Voice votes for Visual Studio by voting for this item below:

“We want to Bring Back Visual Studio 11 Installation Customization Options”

Thanks in advance for your support!

Using Data Annotations in the .NET Framework

Thu, 23 Feb 2012 21:58:59 GMT

Starting with .NET 4 or MVC3, a developer could use a data annotation on a property to force data validation. This is extremely powerful especially for MVC developers. The same data annotations can also be used when building custom modules for Orchard CMS.

The annotations built into the framework include the following:

Required – Allows you to mark a property as being required.
StringLength – Allows a maximum string length to be specified for a property.
Range – Validates the value of the specified property is between a range of values.
RegularExpression – Allows you to specify a regular expression to validate the content against. A comprehensive list of regular expressions can be found at http://regexlib.com/.

In addition to these above, custom annotations can be built by inheriting from the base class ValidationAttribute.

An example of a custom data annotation is shown below. This sample asks for a start and an end date to be specified as strings. The assumption is that these strings will be in a correct date format. A property value will be specified as a string. The property value must be between the two dates specified.

public class DateRange : System.ComponentModel.DataAnnotations.ValidationAttribute
{
    public string StartDate { get; set; }
    public string EndDate { get; set; }

    public DateRange() {
        this.StartDate = new DateTime(1900, 1, 1).ToString();
        this.EndDate = new DateTime(2099, 1, 1).ToString();
    }

    public override bool IsValid(object value) {
        var valueToString = value as string;
            
        if (!string.IsNullOrEmpty(valueToString)) {
            DateTime dateTimeResult;
                
            if (DateTime.TryParse(valueToString, out dateTimeResult)) {
                return ((dateTimeResult >= DateTime.Parse(this.StartDate)) && (dateTimeResult <= DateTime.Parse(this.EndDate)));
            }

            return false;
        }
        return true;
    }
}

Notice that in the code snippet above, I’m allowing null or empty strings to be passed in. Keep in mind that the Required annotation already checks for nulls or empty strings.

To use the DateRange annotation, simply add it to a property in the model like below:

[DateRange(StartDate="1/1/2012", EndDate="12/31/2012", ErrorMessage="The date must be during the 2012 calendar year.")]
public string EventDate { get; set; }

Additional data annotations can be downloaded from a project started by Scott Kirkland at http://dataannotationsextensions.org/.

Resolving an SmtpException stating 'Too many messages for this session'

Tue, 21 Feb 2012 16:33:11 GMT

Have you ever noticed an exception being thrown by your application stating something like the following:

System.Net.Mail.SmtpException: Service not available, closing transmission channel. 
The server response was: #4.x.2 Too many messages for this session

This has been an issue since early versions of the System.Net.Mail namespace. The SmtpServer object never included a Dispose() method that properly shutdown the connection to the server. So, even if you are creating new objects, the GC never disposed of the original thus causing this exception.

There are two workarounds for this exception as document on the Connect website:

Upgrade to the .NET Framework 4.0 or later. This version of the framework now includes a Dispose() method that properly closes the connection to the server. Anytime you are connecting to the server to send a message, you should dispose the object afterwards.
If you are using older versions of the framework (.NET Framework 3.5 or earlier), you can set the MaxIdleTime property to 0 and the ConnectionLimit to 1 on the SmtpClient’s ServicePoint object. For example, your code may look like the following:

var client = new SmtpClient("hostname");
client.ServicePoint.MaxIdleTime = 0;
client.ServicePoint.ConnectionLimit = 1;
...
client.Send(new MailMessage(...));

// at this point, the connection will get closed 
// since the ServicePoint idle time is now 0.

Hope this helps to solve any issues you’ve had with this.

Using HTML 5 Geolocation, Google Maps to Generate Driving Distance

Thu, 16 Feb 2012 21:40:14 GMT

HTML5 will introduce many new and exciting features including the addition of geolocation. Geolocation allows a device to determine a global position of the device (latitude and longitude), it’s accuracy (horizontal accuracy and vertical accuracy), altitude, and speed. The Geolocation feature in HTML 5 is already supported by most mainstream browsers. According to research performed by Mark Pilgrim, the following browser support Geolocation:

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
9.0+	3.5+	5.0+	5.0+	10.6+	3.0+	2.0+

There are a few “gotchas” to keep in mind when using Geolocation:

The browser may not support the HTML 5 geolocation API. Many older browsers relied on custom built APIs for relaying geolocation information to applications. Google Gears, now deprecated, is an example of an API that some browsers have implemented.
The user must opt-in to the HTML 5 geolocation call for each website they visit. In Internet Explorer, the notification bar appears like:
The geolocation call may timeout. This is usually caused by a poor Internet connection or that the current area is not reporting (due to a lack of information) the geolocation yet. For more information on how HTML5 Geolocation works, click here to view the top response to the thread on StackOverflow.com.

Now that we’ve covered some of the information, let’s focus on the goal for this post. Our goal is to generate the driving distance between two locations. I’ve used this method to let potential TECHbash (see image below as an example) attendees know how far away they are from the conference center. Storefronts may want to implement something similar if they’d like to offer a special offering to local shoppers or from shoppers traveling further away.

Above: Small UI update to show current distance from the TECHbash conference.

Let’s start by focusing on obtaining our current geolocation position.

Implementing HTML5 Geolocation

When using the HTML5 geolocation API, we must write some JavaScript. We can use the API in conjunction with JavaScript libraries such as jQuery. The geolocation API call is pretty simplistic. It accepts a callback method, an exception method (optional), and additional options (optional). While it is not required to pass in a callback method to handle errors, it is highly recommended.

navigator.geolocation.getCurrentPosition(callback,error,options);

The callback method, which will return a Position object, will contain a timestamp and coordinate information including the latitude, longitude, altitude, accuracy (horizontal accuracy), altitudeAccuracy (vertical accuracy), heading (direction degrees), and speed (meters per second). Only the latitude, longitude, and accuracy properties are guaranteed to have values.

The error callback method, which will return a PositionError object, will contain a code and a message. The code can be a value of 1 (permission denied), value of 2 (position unavailable), value of 3 (timeout), or value of 0 (unknown error). A message will be supplied from the browser regarding the error.

The additional options object is an object with defined properties. At the time that this was published, the options object, PositionOptions object, has three properties. They are enableHighAccuracy, timeout, and maximumAge.

The final piece of our HTML5 Geolocation implementation is to use an open source JavaScript library called Modernizr. Modernizr is a library that allows developers to take advantage of new HTML5 and CSS3 features while still supporting older browsers such as IE6, Firefox 3.5, and others. We’ll use a function in Modernizr to check for HTML5 Geolocation support.

Now that we’ve covered that, let’s see what we have in place so far:

function getCurrentPosition() {
	if (Modernizr.geolocation) {
		navigator.geolocation.getCurrentPosition(locationSuccess,locationError);
	} else {
		// TODO: Decide what to do when the browser doesn't support Geolocation
	}
}

function locationSuccess(position)
{
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	// TODO: We have to finish this method
}

function locationError(err)
{
	// TODO: We need to complete our error handling
	if (err.code == 1) { // user won't grant permission }
	if (err.code == 2) { // position is currently unavailable }
	if (err.code == 3) { // a timeout has occurred }
}

Before we tweak this anymore, let’s move onto the Google Maps API.

Implementing the Google Maps API

Much like every other JavaScript library or API, the Google Maps library is constantly changing. At the time of this post, the current Google Maps API was version 3.5. You can add the library to your page by including the script like so:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

The sensor parameter is required. If you will be using a GPS to provide the sensor information to the Google Maps, then set this value to true. We will not in our case so we’ll set it to false.

The portion of the API that we are most concerned with for our implementation is the DirectionsService. We’ll create a DirectionsRequest to send over to Google with a series of parameters. The two major parameters are our two endpoints. We can send these endpoints as a string or as a LatLng object. The other required parameter is the travelMode. Since most attendees will be driving, we’ll using the travelMode for driving. Our request will look like so:

// TODO: Pass actual values into the lat and lon variables below
var start = new google.maps.LatLng(lat, lon);
var end = "1333 S Prospect St, Nanticoke, PA 18634";
var request = {origin:start, 
	        destination:end, 
	        travelMode:google.maps.DirectionsTravelMode.DRIVING};

Next, we need to handle the response from Google. To do this, we’ll call the route function of DirectionsService and obtain the response. If the response’s status code is OK, we’ll be able to process the response as expected. This is shown below.

directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
		distance  = response.routes[0].legs[0].distance.value;
	} else {
		// TODO: Handle the Google Maps exception
	}
});

Finally, let’s tie in the rest of the Google Maps API stuff.

var directionsService = new google.maps.DirectionsService();

function calculateRoute(lat, lon) {
	var distance = 0;
	var start = new google.maps.LatLng(lat, lon);
	var end = new google.maps.LatLng(41.195647, -75.992499);
	var request = {origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING};
	
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			distance  = response.routes[0].legs[0].distance.value;
		} else {
			// TODO: Handle the Google Maps exception
		}
	});
	
	return distance;
}

Now that we’ve tied in the Google Maps API, let’s integrate this call into our HTML5 Geolocation script.

Putting it all Together

In our original locationRequest function, we grabbed the latitude and longitude values from the current position of the machine. So let’s add our call to the Google calculateRoute and combine that with a basic HTML5 page. Here is the final result:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>The total distance between here</title>
</head>

<body>
	<div>
		The total distance between here and <a href="http://techbash.com">TECHbash 2012</a> is: 
		<span id="distance"></span> miles.
	</div>

	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" 
		type="text/javascript"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" 
		type="text/javascript"></script>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false" 
		type="text/javascript"></script>
	<script type="text/javascript">
		function getCurrentPosition() {
			if (Modernizr.geolocation) {
				navigator.geolocation.getCurrentPosition(locationSuccess,locationError);
			} else {
				// TODO: Decide what to do when the browser doesn't support Geolocation
			}
		}
		
		function locationSuccess(position)
		{
			var latitude = position.coords.latitude;
			var longitude = position.coords.longitude;

			calculateRoute(latitude, longitude);
		}
		
		function locationError(err)
		{
			// TODO: We need to complete our error handling
			if (err.code == 1) { 
				// user won't grant permission 
			}
			if (err.code == 2) { 
				// position is currently unavailable 
			}
			if (err.code == 3) { 
				// a timeout has occurred 
			}
		}
	
		var directionsService = new google.maps.DirectionsService();
		
		function calculateRoute(lat, lon) {
			var distance = 0;
			var start = new google.maps.LatLng(lat, lon);
			var end = new google.maps.LatLng(41.195647, -75.992499);
			var request = {origin:start, destination:end, 
				travelMode: google.maps.DirectionsTravelMode.DRIVING};
			
			directionsService.route(request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					distance  = response.routes[0].legs[0].distance.value;
					duration = response.routes[0].legs[0].duration.value;
					$("#distance").html(Math.round(distance / 1609.344));
				} else {
					// TODO: Handle the Google Maps exception
				}
			});
			
			return distance;
		}
		
		$(document).ready(function() { getCurrentPosition(); });
	</script>
</body>

</html>

Conclusion

You can learn more about the HTML5 Geolocation by using one of the resources below:

You can learn more about Google’s Maps API by visiting the Google Maps API docs.

ASP.NET MVC 4 Beta Released

Thu, 16 Feb 2012 21:39:57 GMT

The ASP.NET MVC 4 Beta and ASP.NET Web API Beta have just been released. You can visit the asp.net, msdn.microsoft.com, or Microsoft Download Center to download the latest bits.

ASP.NET MVC 4 includes many new features including, but not limited to:

New Web API support built in
New project templates such as the mobile project template.
Support for Mobile apps
Support for Recipes (similar to, but not quite, like recipes in the Orchard CMS)
Support for Async methods (think new async features)

Be sure to check out both. I’ll be posting more on it later on.

Converting a .NET DateTime object to a JavaScript Date object

Thu, 16 Feb 2012 21:42:48 GMT

When using a WCF or ASMX web service in ASP.NET, you might find the need to pass back a DateTime object via JSON. However, what you might not realize is that by passing a .NET DateTime object back to JavaScript, you’d receive an “Invalid date” script exception. The data being passed back to JavaScript may resemble the following:

/Date(1315938182867-0400)/

The reason that the date is formatted in this way is that JavaScript uses Unix Epoch as the base date and time. This value is 1/1/1970 at 12:00:00 AM. JavaScript tracks dates as the number of milliseconds from the Unix Epoch value to the date submitted.

To assist in the JavaScript date conversion, I have added an extension method for the DateTime object that resembles the following:

private static readonly long UnixEpochTicks = (new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).Ticks; 
        
public static long? ToJsonTicks(this DateTime? value)
{
    return value == null ? (long?)null : (value.Value.ToUniversalTime().Ticks - UnixEpochTicks) / 10000;
}

public static long ToJsonTicks(this DateTime value)
{
    return (value.ToUniversalTime().Ticks - UnixEpochTicks) / 10000;
}

In JavaScript, I can now pass this value into a Date() object and get the correct DateTime value for my locale.

Feel free to use this method in your applications. I offer no warranties or guarantees with the code above.

Port your Android or iPhone apps to Windows Phone 7

Thu, 16 Feb 2012 21:43:06 GMT

Did you know that your current Android or iPhone apps can be ported to Windows Phone 7? Now, there’s no “easy” button that will automagically convert the apps for you. However, in a post on June 9th, 2011, the Windows Phone team explained how Android apps can be converted. Microsoft has provided an easy package for Android developers. The package includes:

Android to Windows Phone API mapping tool
Windows Phone 7 Guide for Android Application Developers white paper, 90+ pages organized in 7 chapters

In April, the team released an initial post explaining how iPhone apps can be ported to WP7. This package includes:

iPhone to Windows Phone API mapping tool
Windows Phone 7 Guide for iOS and iPhone Application Developers white paper, 90+ pages organized in 7 chapters

More information about converting existing apps to Windows Phone 7 can be found at http://windowsphone.interoperabilitybridges.com/.

If you plan on converting an Android or iPhone app, be sure to respond to this and let me know how things are going.

Changing the Title in the Tile Icon of a Windows Phone 7 Application

Thu, 16 Feb 2012 21:43:31 GMT

If you’ve built a Windows Phone 7 application, you may have noticed that if you pin your application to the Start menu, the name of your application appears in the lower, left-hand side of the tile. You can change the text in this tile, by right-clicking on the application and going to properties. On the Application menu, modify the Tile title properties. A sample of this area is displayed below:

You’ll notice that the title text is blank in my screenshot. To accomplish this, you’ll need to perform a little magic. If you wipe this out in Visual Studio 2010, you’ll receive the error message stating “An empty string is not allowed for Title” like the following:

However, you can blank out this field my modifying the WMAppManifest.xml file located in your project’s properties folder. Modify the section of this file that is highlighted below:

<?xml version="1.0" encoding="utf-8"?>
<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2009/deployment" AppPlatformVersion="7.0">
    ...
    <Tokens>
      <PrimaryToken TokenID="BarefootToken" TaskName="_default">
        <TemplateType5>
          <BackgroundImageURI IsRelative="true" IsResource="false">Application_TileImage_173x173.png</BackgroundImageURI>
          <Count>0</Count>
          <Title></Title>
        </TemplateType5>
      </PrimaryToken>
    </Tokens>
  </App>
</Deployment>

This will allow your title to be blank and also allow your tile to appear on your device without the title.

Using Web.config Transforms in ASP.NET

Thu, 16 Feb 2012 21:43:51 GMT

One of my team members was working on an issue today within an application. The application is setup to use web.config transformations. Web.config transforms are a great way to create multiple build configurations (including, but not limited to, the debug and release build configuration that are built-in) and allow different configuration settings based on the build. For instance, you may have a database connection set to your localhost when you are debugging locally. However, you can use web.config transforms to change the server name when you publish the application using the release build configuration. This can also be used to ensure that every time you publish an application as a release, debug and trace are disabled for your application.

Our application is setup so that we use transforms to set the connectionString attribute of each SQL connection in the configuration. We have multiple connection strings in this area.. We had multiple connection strings such as:

<connectionStrings>
    <clear/>
    <add name="DefaultSqlServer" connectionString="metadata=res://*/Data.Sql.SqlEntities.csdl|res://*/Data.Sql.SqlEntities.ssdl|res://*/Data.Sql.SqlEntities.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=localhost;Initial Catalog=Test;User ID=sa;Password=password;MultipleActiveResultSets=True&quot;" providerName="System.Data.EntityClient"/>
    <add name="DefaultProviderConnectionString" connectionString="Data Source=localhost;Initial Catalog=Test;User ID=sa;Password=password;" providerName="System.Data.SqlClient"/>
</connectionStrings>

In other words, one connection is used for connecting to the SQL database using Entity Framework while the other is used to connect to the database using the built-in providers. When we published the application using the release build configuration, both connectionString values were set to the same. After digging around for some time we forgot a simple part of the transform.

When performing web.config transforms on a Key/Value dictionary pair in the web.config file, make sure that use also include an xdt:Locator attribute that contains the method Match. This allows you to pair up the specific value to a particular key.

So, your connection strings should resemble something like the following in your web.release.config file:

<add name="DefaultSqlServer" connectionString="..." xdt:Transform="SetAttributes(connectionString)" xdt:Locator="Match(name)" />

In my case, I’m replacing the DefaultSqlServer value with the value defined in the connectionString above. I can replace other attributes by separating the attribute names in the SetAttributes method with a comma.

For additional config transform options, be sure to visit the MSDN page at http://jasong.us/mhgvPh.

Orchard CMS Command Line Exception

Thu, 16 Feb 2012 21:44:14 GMT

Late last week when I was at CodeStock 2011, I ran into an error with the orchard.exe command line utility. The exception generated looked similar to the following:

c:\inetpub\wwwroot\Orchard\Modules\Orchard.Packaging\Services\FileBaseProjectSystem.cs(33): error CS0246: The type or namespace name 'FrameworkName' could not be found (are you missing a using directive or an assembly reference?)

Exception Details: System.Web.HttpCompileException: c:\inetpub\wwwroot\Orchard\Modules\Orchard.Packaging\Services\FileBaseProjectSystem.cs(33): error CS0246: The type or namespace name 'FrameworkName' could not be found (are you missing a using directive or an assembly reference?)

After talking with individuals on the Orchard team, this appears to be an open item that they hope to solve for Orchard 1.2. If you run into this, please contact me directly by responding with a comment or messaging me on Twitter so I can pass on a potential resolution. I’m hoping that we can track whether or not the supposed solution does actually solve this issue.

Since, this is a random exception, we can use your help.

The WeatherDotCom Widget for Orchard CMS

Thu, 16 Feb 2012 21:45:08 GMT

If you’ve checked out my new website recently, you may have noticed that I have included the weather on the site. Mouse over on the right-hand side and you’ll notice a “bing-like” box that will appear. I’ll talk about this a bit more in a bit, but you’ll notice that the weather pulls for my local zip code. These are the results from the Weather Channel’s weather.com.

To take advantage of this service, you must first register on their website at http://www.weather.com/services/xmloap.html. During this process, you’ll be provided with a Partner ID and a License Key. Be sure to take note of these as you’ll need them at a later point.

Note: If you are not a programmer or web developer, you may want to skip past the next two sections and go to Adding the Widget to Orchard.

Weather Data from the Web Service

I wanted to take advantage of all of the data being returned from the Weather Channel’s current conditions web service. So, I converted the result into two strongly-typed class objects. The first class object is called LocationInfo and is defined as:

public class LocationInfo
{
    public string LocationName { get; set; }
    public string Latitude { get; set; }
    public string Longitude { get; set; }
    public string Sunrise { get; set; }
    public string Sunset { get; set; }
    public string TimeZone { get; set; }
}

The second class object is called CurrentConditions and is defined as:

public class CurrentConditions
{
    public string Temperature { get; set; }
    public string FeelsLike { get; set; }
    public string Description { get; set; }
    public string DescriptionIconNumber { get; set; }
    public string BarometricPressure { get; set; }
    public string BarometricPressureDirection { get; set; }
    public string WindSpeed { get; set; }
    public string WindDirection { get; set; }
    public string WindGust { get; set; }
    public string Humidity { get; set; }
    public string Visibility { get; set; }
    public string UvIndex { get; set; }
    public string UvDescription { get; set; }
    public string Dewpoint { get; set; }
    public string MoonIconNumber { get; set; }
    public string MoonType { get; set; }
}

In both of these instances, these are the properties that will be exposed to any custom views being rendered. I’ve included both of these class objects in another class object that is returned when the call is made to obtain the current weather. This class object is called Weather and is defined as:

public class Weather
{        
    public LocationInfo LocationInfo { get; set; }
    public CurrentConditions CurrentConditions { get; set; }
    public DateTime TimeCached { get; set; }
    public String ApiStatus { get; set; }
}

Customizing the Weather View

In my particular instance, I wanted to be able to cache the weather every 15 minutes. I also wanted to show a current weather image in the background and hide the text details for the weather. Then, I would show the text details in a div. To get this to work, I decided to add some custom JavaScript.

The first step in this task was to randomly generate where my first “bing-like” box would appear hinting that a mouseover was needed. To do this, I randomly calculated the location from the top and left and subtracted the size of the details box. This helped me to better place the boxes while staying within the background image location.

$(document).ready(function () {
    /* Randomize Divs */
    var ranHeight = Math.ceil(Math.random() * 115) + 5; /* Always 85 less than height */
    var ranIndent = Math.ceil(Math.random() * 120) + 5; /* Always 180 less than height */

    /* Get the Divs */
    var spot = $('#weatherSpot');
    var details = $('#weatherDetails');

    /* Add the new positions */
    spot.css("top", ranHeight + "px");
    details.css("top", ranHeight + "px");
    spot.css("right", ranIndent + 155 + "px");
    details.css("right", ranIndent + "px");
});

The next step in the process was to use jQuery to fade in and out the boxes.

$('#weatherBlock').mouseenter(function () {
    $('#weatherSpot').fadeIn('slow', function () {
        // Nothing happens when animation completes
    });
}).mouseleave(function () {
    $('#weatherSpot').fadeOut('slow', function () {
        // Nothing happens when animation completes
    });
});

$('#weatherSpot').mouseenter(function () {
    $('#weatherDetails').fadeIn('slow', function () {
        // Nothing happens when animation completes
    });
}).mouseleave(function () {
    $('#weatherDetails').fadeOut('slow', function () {
        // Nothing happens when animation completes
    });
});

Finally, I needed to layout my view. Since it’s a custom view, I had complete control over the rendering and decision of the data. I choose to use many of the default fields.

@using System.Web.Hosting
@{
    Script.Include("weatherDotCom.js");
   
    var imgPath = "~/Themes/MyTheme/Content/weathericons/";
    var weathericon = "";

    weathericon = Url.Content(imgPath + Model.WeatherResults.CurrentConditions.DescriptionIconNumber + ".png");
}

<div id="weatherBlock" class="weatherBlock" style="background: url('@weathericon') no-repeat;">
    <div id="weatherSpot" class="weatherSpot">
    </div>
    <div id="weatherDetails" class="weatherDetails">
        <span class="weatherTemp">@Model.WeatherResults.CurrentConditions.Temperature&deg;F</span><br />
        @Model.WeatherResults.CurrentConditions.Description<br />
        Feels Like: @Model.WeatherResults.CurrentConditions.FeelsLike&deg;<br />
        Wind: From @Model.WeatherResults.CurrentConditions.WindDirection at @Model.WeatherResults.CurrentConditions.WindSpeed mph
    </div>
</div>

I created custom weather icons for each of the potential weather patterns. The Weather Channel includes default images with your connection to their service.

You may customize the widget as I have shown above or use the default view which is provided.

Adding the Widget to Orchard

To install the widget, you can log into your Orchard CMS version 1.1 dashboard and go to Modules (If you are running Orchard version 1.0, I’d strongly urge you to upgrade your instance as this instance is much more stable and more user friendly). In the Modules section, choose Gallery and type in Weather in the search box. Choose the WeatherDotCom widget and click Install. After its finished installing, you’ll be prompted to enable this feature.

If you’d like to install the widget offline, you can download it directly from the Orchard Gallery website.

Once it’s enabled, it’s now a new part that can be added to a page, a blog post, or as a widget. In most cases, you’ll want to add it as a widget. To add it as a Widget, choose Widgets in the dashboard. In the appropriate zone click the Add button. I’d recommend using it in AsideFirst, AsideSecond, or one of the zones found AfterMain. On the next screen, choose Web Part Record.

When it’s added, you’ll have a property window screen that allows you to specify the properties for the widget. The screen looks like the following:

Conclusion

The source code and the widget can be downloaded by using the links below. If you find any bugs or have any suggestions, be sure to enter them on the CodePlex site, not the Orchard Gallery website, by using the Issue page or Discussion page respectively.

Module Package for Orchard CMS

Full Source Code

Grow Your Website using Orchard

Thu, 16 Feb 2012 21:45:56 GMT

I’m just wrapping up a trip to Eastern Tennessee’s CodeStock 2011 (in Knoxville to be precise). While I was down here, I presented on the Orchard CMS. Both the conference and talk were great and while I’m never really satisfied with any of my talks, I have recorded it. It will soon be available on the CodeStock website for all to view at a later date and time. However, I know that Michael Neel is quite busy and it may take him another day (or week) to get everything up there. So, I’ve jumped the gun and published it up myself. Be sure to check it out:

Grow Your Website Using Orchard from Jason Gaylord on Vimeo.

By now you probably have heard of a new content management system called Orchard. You may already have a CMS, but this one that’s been released by The Outercurve Foundation is different. We’ll discuss some of the features and benefits to using Orchard. We’ll also see some tips and tricks. By the end of this session, you’ll not only have an understanding of how to use Orchard, but will have a fully functional website as an added bonus.

Preparing for CodeStock 2011

Thu, 02 Jun 2011 20:45:00 GMT

I arrived in Sevierville, TN last evening in preparation for CodeStock 2011. I’ll be presenting about the Orchard CMS tomorrow at 12:30pm in room 401. You can read more about the talk on the CodeStock site at http://codestock.org/Sessions/grow-your-website-using-orchard.aspx. I’ll be posting pictures later on after visiting various stops.