Archive

Archive for the ‘Web Development’ Category

Silverlight 4 – Getting Started Plan

July 13th, 2010

I have worked on a couple of small projects in Silverlight, but have never taken the opportunity to really understand the platform.  There is a new project at the office that will be using Silverlight to create interactive dashboards, so it is now time to dive into the deep end of the Silverlight pool. 

Here is my learning plan.

1. Watch Getting Started with Silverlight Development

2.
Silverlight QuickStart Tutorials
Start with “Beginning QuickStarts” tutorials 1 – 6 and then move on to “Working with Data QuickStarts” tutorials 1 – 3

3. Silverlight 4 Hands On Labs

I find that my best learning comes from reviewing good code.  I am looking for some sample source code that illustrates best practices and a quality Silverlight architecture.  If anyone knows of a good example please let me know.

Web Development ,

How to show an InfoWindow for multiple Markers using Google Maps v3

June 6th, 2010

Recently I have been working on an interactive map for the City of Aliso Viejo, CA using Google Maps.   I chose to use version 3 of the Google Maps API, because version 2 was deprecated on May 19, 2010.  I was happy to discover I no longer needed an API.  However, I did not anticipate how the changes to the MVC framework affected things.  My first task was to display multiple markers on a map, each marker having it’s own InfoWindow.  I found plenty of v2 examples, but could not find a really good v3 example.   Here is my solution to showing an InfoWindow for multiple markers using Google Maps v3.

In v2 GInfoWindow does not have a constructor, so an info window is displayed by calling openInfoWindow() or openInfoWindowHtml() on the GMap2 object.

GEvent.addListener(marker, 'click', function() {
    var markerPosn = new GLatLng(place["posn"][0], place["posn"][1]);
    map.openInfoWindowHtml(markerPosn ,buildPlaceInfoHtml(place),{maxWidth:275});
}); 

Things have changed significantly in Google Maps v3.  The InfoWindow now has a constructor and openInfoWindow()or openInfoWindowHtml() have been removed.  Initially I was lost trying to get each marker to show an InfoWindow with it’s own content.    I then read the following from the Google Maps v3 documentation about InfoWindow overlays.

InfoWindows may be attached to either Marker objects (in which case their position is based on the marker’s location) or on the map itself at a specified LatLng. If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).

Realizing I only needed one InfoWindow object. I refactored my code to create a single InfoWindow and then set  the InfoWindow content when a marker was clicked and then attach it to the appropriate marker.

var infoWindow = new google.maps.InfoWindow({});
var markers = new Array(); 

function setMarkers(map, locations, areaId) {
     for(var i = 0; i < locations.length; i++) {
         var location = locations[i];
         var latlng = new google.maps.LatLng(location.Location[0], location.Location[1]);
         var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             shadow: createMarkerShadow(location.MarkerShadow),
             icon: createMarkerImage(location.MarkerImage),
             shape: markerShape,
             title: location.Name
         });
         marker.set('location', location);
         google.maps.event.addListener(marker, "click", function(event) {
            var area = this.get('location');
            var infoWindowHtml = parseTemplate($("#MarkerTemplate").html(), { location : location} );
            infoWindow.setContent(infoWindowHtml);
            infoWindow.open(map, this);
         });
         markers.push(marker);
     }
}

function clearMarkers() {
     infoWindow.close();
     for(var i = 0; i < markers.length; i++) {
         markers[i].setMap(null);
     }
     markers.length = 0;
}

This new code iterates through an array of locations and creates a marker for each, attaches the location object, and adds an ‘click’ event listener to each marker.  Attaching the location object to the marker is the key to changing the InfoWindow content when the marker is clicked. 

marker.set('location', location);

This is made possible because the InfoWindow is built on the MVCObject prototype, which exposes accessor methods.  When a marker click event fires the location object can be retrieve using the ‘get’ accessor.  Now the content of the InfoWindow can be updated from the location object and attached to the marker that was clicked.

 google.maps.event.addListener(marker, "click", function(event) {
    var area = this.get('location');
    var infoWindowHtml = parseTemplate($("#MarkerTemplate").html(), { location : location} );
    infoWindow.setContent(infoWindowHtml);
    infoWindow.open(map, this);
 });

Web Development ,

Create a simple REST API for an ASP.NET page

March 23rd, 2010

I needed a simple way for one page to call an action in another page.  In the spirit of a RESTful API I wanted that interaction to be called through a simple URL. 

http://localhost/Default.aspx?action=save

I initially started using a switch statement to handle the “action” passed in on the QueryString, but really wasn’t happy with the result.  I wasn’t interested in having to maintain a switch statement for the actions.  My first pass looked like this:

protected string Action { get; set; }

protected override void OnInit(EventArgs e)
{
    Action = Request.QueryString["action"] ?? string.Empty;
    base.OnInit(e);
}

protected void Page_Load(object sender, EventArgs e)
{
    switch (Action)
    {
        "Save":
            SaveAction();
            break;
        "Load":
            LoadAction();
            break;
        default:
            break;
    }
}

private void SaveAction()
{
    Response.Write("Save action called.");
}

private void LoadAction()
{
    Response.Write("Load action called.");
}

I decided to break out the handling of the ‘action’ into a base class called ActionPage and use a event model to call the actions methods.  Following this refactoring the code behind was much easier to follow.

public partial class _Default : ActionPage
{
    protected void Page_Load(object sender, EventArgs e)
    { }

    protected override void RegisterActions()
    {
        PageActions.Add("save", SaveAction);
        PageActions.Add("load", LoadAction);
    }

    private void SaveAction()
    {
        Response.Write("Save action called.");
    }
    private void LoadAction()
    {
        Response.Write("Load action called.");
    }
}

The key was creating a ‘PageAction’ delegate that could be registered for each possible page action.  The ‘RegisterActions’ method shows the action methods being registered using the PageAction delegate.  The page is now only responsible for performing the actions and no longer has to determine what action to call.   The work of reading the action from the QueryString and calling the action have been placed into the ActionPage base class.

public class ActionPage  : System.Web.UI.Page
{
    protected delegate void PageAction();
    protected readonly IDictionary<string, PageAction> PageActions = new Dictionary<string, PageAction>();
    protected string Action { get; set; }

    public ActionPage()
    {
        RegisterActions();
    }

    protected virtual void RegisterActions()
    {
    }

    protected void HandleAction(string action)
    {
        if (PageActions.ContainsKey(action))
            PageActions[action]();
    }

    protected override void OnInit(EventArgs e)
    {
        Action = Request.QueryString["action"] ?? string.Empty;
        base.OnInit(e);
    }
    protected override void OnLoad(EventArgs e)
    {
        HandleAction(Action);
        base.OnLoad(e);
    }
}

The ActionPage starts by calling ‘RegisterActions’ in the constructor.  Register actions is the pages chance to register actions with the ActionPage.  The actions is then pulled from the QueryString it the OnInit method.  Then in OnLoad the action matching the one passed on the query string is called.  In this model if an invalid action is called nothing happens and the page renders normally.

SimpleRESTAPI_SampleSource.zip

Web Development , ,

Building DotNetNuke Modules Using Web Forms MVP

March 7th, 2010

I have been looking for a good framework that would encourage good development practices through separation of concerns and testability in my DotNetNuke modules. I was listening to Scott Hanselman’s Hanselminutes Podcast #202 and discovered Web Forms MVPTatham Oddie and Damian Edwards have developed a framework for those us of us who are using web form’s in our projects.

Web Forms MVP provides some interesting features.  A few of the features include:

  • Composite views
  • Asynchronous tasks
  • Shared presenters
  • Presenter messaging
  • Works with HttpHandlers and web services.
  • Custom presenter factories to allow IOC integration.
    To start you will need Web Forms MVP CTP 7 if you are going to be developing for DotNetNuke.   I intially struggled with CTP 6 and through Tatham’s quick responses on the Web Forms MVP Google Group found there was a fix for this in CTP 7.  CTP 7 should be released soon, however, it looks like you should be able to build it from the source until then.

The power of the MVP pattern allows for us to have clean markup in our user control and the ability to isolate and test the logic that drives the form.  Web Forms MVP uses the supervising presenter pattern with the model loosely following the presentation model pattern.

    The following example is a  simple ‘contact us’ form.   This first pass of the contact form will just display a friendly ‘thank you’ message.  Later posts will include persistence and notification features for the contact form. 

image image

Since the view doesn’t contain any logic it can be laid out using embedded code blocks (<%= Model.FirstName %>)

<%
    panelContactUs.Visible = Model.ShowForm;
    panelMessage.Visible = !Model.ShowForm;
%>
<fieldset id="panelContactUs" runat="server" visible="true" class="cssform">
    <legend>Please enter your information and we will contact you soon.</legend>
    <p>
        <asp:Label ID="lblFirstName" runat="server" Text="First name:" AssociatedControlID="txtFirstName"></asp:Label>
        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
    </p>
    <p>
        <asp:Label ID="lblLastName" runat="server" Text="Last name:" AssociatedControlID="txtLastName"></asp:Label>
        <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
    </p>
    <div style="margin-left: 150px;">
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
    </div>
</fieldset>

<div id="panelMessage" runat="server">
    <p>Dear <%=Model.FirstName %> <%=Model.LastName %>,</p>
    <p>
    Thank you for your interest in AthleticHost.  We are looking forward to working with
    you to bring your athletic department online.
    </p>
    <p>
    We will be contacting you soon to discuss your the specific needs of your athletic program.
    </p>
    <p>
    Please feel free to contact us at <a href="mailto:support@athletichost.com">support@athletichost.com</a>
    </p>
    <p>
    Sincerely,<br />
    Aaron Jackson<br />
    Athletic Host
    </p>
</div>

The code behind for the control is only responsible for binding the view to the presenter and passing along the events that occur in the view, so that the presenter can react to them.  Here is the code behind for the ViewContactUs control.

[PresenterBinding(typeof(ContactUsPresenter))]
partial class ViewContactUs : PortalModuleBase, IActionable, IContactUsView
{
    protected override void OnInit(EventArgs e)
    {
        PageViewHost.Register(this, Context);
        base.OnInit(e);
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        OnSubmit(txtFirstName.Text, txtLastName.Text);
    }

    public event EventHandler<SubmitContactUsEventArgs> SubmitContactUs;
    private void OnSubmit(string firstName, string lastName)
    {
        if (SubmitContactUs != null)
        {
            SubmitContactUs(this, new SubmitContactUsEventArgs
                                      {
                                          FirstName = firstName,
                                          LastName = lastName
                                      });
        }
    }

    private ContactUsModel model;
    public ContactUsModel Model
    {
        get
        {
            if (model == null)
                throw new InvalidOperationException("The Model property is currently null, however it should have been automatically initialized by the presenter. This most likely indicates that no presenter was bound to the control. Check your presenter bindings.");

            return model;
        }
        set
        {
            model = value;
        }
    }
}

Binding the view to the presenter is normally handled by inheriting from MvpUserControl, however the ViewContactUs control needs to work with DNN.  DNN modules need to inherit from  DNN’s PortalModuleBase and since multiple inheritance is not possible in C# we have a problem.   Thankfully we can override the OnInit method and register our view with a single line of code.

protected override void OnInit(EventArgs e)
{
    PageViewHost.Register(this, Context);
    base.OnInit(e);
}

Views that don’t have any events would be complete at this point.  Views that react to events, such as, the click event on submit button in ContactUs need to be passed to the presenter.    The presenter is responsible for subscribing to the view events when it is bound to the view.  Look at the constructor of the ContactUsPresenter below.  You can see the SubmitContactUs event on the view being subscribed to by the ContactUsPresenter. 

public class ContactUsPresenter : Presenter<IContactUsView>
{
    public ContactUsPresenter(IContactUsView view)
        : base(view)
    {
        View.SubmitContactUs += View_SubmitContactUs;
        view.Model.ShowForm = true;
        view.Model.Message = string.Empty;
    }

    public override void ReleaseView()
    {
        View.SubmitContactUs -= View_SubmitContactUs;
    }

    void View_SubmitContactUs(object sender, SubmitContactUsEventArgs e)
    {
        View.Model.FirstName = e.FirstName;
        View.Model.LastName = e.LastName;
        View.Model.Message = e.FirstName + " " + e.LastName;
        View.Model.ShowForm = false;
    }
}

Finally, a look at the unit test that was written for the presenter.  I choose to use xUnit and Moq to handle the testing.    Since the view implements the IContactUsView interface the unit test can mock the view and allow for the presenter to be tested without dependencies on DNN.   In fact, this presenter could be reused on any other web forms project.

[Fact]
public void ContactUsPresenter_Sets_Message_OnSubmit()
{
    // Arrange
    var view = new Mock<IContactUsView>();
    view.SetupAllProperties();
    var presenter = new ContactUsPresenter(view.Object);

    // Act
    view.Raise(v => v.Load += null, new EventArgs());
    view.Raise(v => v.SubmitContactUs += null,
        new SubmitContactUsEventArgs("Chester", "Tester",
            "ctester@test.com", "http://www.test.com",
            "This is a test of the emergancy broadcast system..."));
    presenter.ReleaseView();

    // Assert
    Assert.Contains("Chester Tester", view.Object.Model.Message);
    Assert.Equal("Chester", view.Object.Model.FirstName);
    Assert.Equal("Tester", view.Object.Model.LastName);
    Assert.False(view.Object.Model.ShowForm);
}

Download the ContactUs module source.

AthleticHost, Web Development ,

YUI Compressor and NAnt

February 21st, 2010

I have been working on creating a DotNetNuke Skin for AthleticHost.com.   In order to simplify deployment of the skin I wanted to add it as an extension to DNN rather that upload it via FTP.   I choose to use NAnt to build the extension install file.   In an effort to increase page performance I decided that the CSS and JavaScript files should be compressed and choose the YUI Compressor for the job.

I created two targets.  One to minify the JavaScript and another for the CSS.

<target name="JavaScript.minify">
<foreach item="File" property="filename">
  <in>
    <items>
      <include name="${temp.dir}/**/js/**/*.js"/>
    </items>
  </in>
  <do>
    <echo message="${filename}" />
    <exec program="java" workingdir="${YUICompressor.dir}">
      <arg value="-jar" />
      <arg value="yuicompressor-2.4.2.jar" />
      <arg value="--type" />
      <arg value="js" />
      <arg value="-o" />
      <arg value="${filename}.min" />
      <arg value="${filename}" />
    </exec>
    <move file="${filename}.min" tofile="${filename}" overwrite="true" />
  </do>
</foreach>
</target>
<target name="Css.minify">
<foreach item="File" property="filename">
  <in>
    <items>
      <include name="${temp.dir}/**/*.css"/>
    </items>
  </in>
  <do>
    <echo message="${filename}" />
    <exec program="java" workingdir="${YUICompressor.dir}">
      <arg value="-jar" />
      <arg value="yuicompressor-2.4.2.jar" />
      <arg value="--type" />
      <arg value="css" />
      <arg value="-o" />
      <arg value="${filename}.min" />
      <arg value="${filename}" />
    </exec>
    <move file="${filename}.min" tofile="${filename}" overwrite="true" />
  </do>
</foreach>
</target>

The “Deploy” target then calls the “Css.minify” and “Javascript.minify”

<call target="JavaScript.minify" />
<call target="Css.minify" />

Download the full NAnt script.

Resouces:
http://developer.yahoo.com/yui/compressor/
http://nant.sourceforge.net/

AthleticHost, Web Development , ,

AthleticHost.com will be using DotNetNuke

January 28th, 2010

athletichost_logo_143    DotNetNuke-Logo

I have been working on site for Timberline High School Athletics for the last four years.  The site has become an important tool for the athletic department and used by the parents and student athletes to get news and information about the schools sports programs.

Through my experience with Timberline I have discovered that many high school athletic programs do not have a website or have a very poor website that is not well maintained.   I have been working over the past several months to create a hosting service that will provide websites for high school athletic programs.  The websites will be designed to be easily maintained by athletic directors, coaches, and team parents. 

AthleticHost.com will be using DotNetNuke (DNN) as the core platform for these sites.  DNN was chosen for the following reasons:

  • The ability to have many websites (a.k.a. portals) on a single DNN installation.
  • Site templates will allow for new sites to be quickly created.
  • Built in hosting model that includes security and payment features.
  • Skinning system that allows each portal to have its own look-and-feel.   This is important because many niche web hosts sites all look the same.  I want each school to have it’s own look-and-feel.
  • A security model that will allow separate security configurations for the athletic director, coaches, and team parents.
  • A good set of core modules.

Hosting at AthleticHost.com will be available May 1, 2010.

AthleticHost, Web Development

Too cheap to hire a graphic designer

January 13th, 2010

I am donating my time to rebuild wolvesathletics.com in ASP.NET using DotNetNuke.   It will be a significant upgrade for Timberline High School’s athletics website and offer them better capabilities for editing for coaches and team parents.  Since I am donating the time I didn’t want to hire a designer, so having no formal design experience I gave it a shot.

I am very interested in getting feedback about the design and what I can do to polish it up.  Please leave comments on this with your ideas.

Review the Wolves Athletics design concepts.

Web Development , , ,

My First Silverlight Application – Document Viewer

September 9th, 2009

I spent some of my Labor Day weekend starting to learn Silverlight.  I began when BJ asked me to show him how to program a game.  We started programming a simple Space Invaders style game.  I am going to allow that project to progress at his pace, so I decided to take on a different project to experiment with, a document viewer.

I have been working on a project at work that requires a PDF be embedded in a page, but disallow printing, saving, or copying the document.  We discovered GhostScript’s ability to convert a PDF to a collection of PNG images.  It creates a single PNG file for each page in the PDF.   This allows only the pages that are viewed to be loaded and we don’t have to worry about applying any digital rights management (DRM toolkits are $$$) to the PDF.

The document viewer takes this collection of PNG’s and embeds them into the viewer, so that they can be rotated, zoomed in on, and browsed.

Check out the demo at http://www.aaronkjackson.com/dev/silverlight/DocumentViewer/.

NOTE: The zoom in feature can hide the button bar.  If that happens resize the browser window to a smaller size.  I am working on adding scroll bars to prevent this from happening.

Web Development

jQuery dialog with tabs font-size fix

June 19th, 2009

While developing AspNetInfo I ran into a styling problem when using jQuery tabs nested in a dialog.  Notice in the dialog how the tab font-size is slightly larger than the tag font-size in the page.

jquery-font-size-example 

This is because the dialog and tab widgets are decorated with the jQuery style .ui-widget, which specifies a relative font-size of 1.3em.

.ui-widget {
    font-family: Arial,sans-serif;
    font-size: 1.3em;
}

The font-size of the nested tab widget ends up being larger due to CSS inheritance and relative font-size.  The tab widget inherits the dialog widget’s relative font-size making the nested tab widget items 1.69em in size (1.3em X 1.3em = 1.69em).

This can be fixed by specifying a more specific rule for the nested tab widget to bring all of it’s items back to 1.3em.  This rule can be applied to just the tabs by specifying the tab id or to all instances of nested widgets.

Fix for email tab only:

#emailTabs.ui-widget {
    font-size: 1em;
}

Fix for all widgets:

.ui-widget .ui-widget {
    font-size: 1em;
}

Web Development , , ,

Error moving SQL Server Integration Services (SSIS) package to a 64bit server

May 23rd, 2009

This week one of our database servers was upgraded to a 64bit Windows platform.  Everything seemed fine until I went to execute an SSIS package.   I opened the package with dtexecui.exe and received the following gift after hitting the execute button.

The new connection manager could not be created.
Additional information: Exception from HRESULT: 0xC0010014
(Microsoft.SQLServer.DTSRuntimeWrap)

After much searching, installing Business Business Intelligence Development Studio (BIDS) to debug, and heartache I ended up finding a form post entitled “MS SQL 2005 SP2 x64 & SSIS Packages” about several key DLLs that may not have been properly registered at setup.  This saved my day!  I registered the problem child DLL using the following command and life was good again.

regsvr32 "\Program Files (x86)\Microsoft SQL Server\90\DTS\Binn\DTS.dll"

Web Development , ,