Error logging!  An unfortunate side effect of developing apps in Javascript in mobile IE9 is that there doesn’t appear to be any error dialogs.

Try the following Javascript:

// provide our own console if it does not exist, huge dev aid!
if (typeof window.console == “undefined”) {
window.console = { log: function (str) { window.external.Notify(str); } };
}

// output any errors to console log, created above.
window.onerror = function (msg,url,linenumber) {
console.log(“Error ::” + msg + ” in ” + url + ” at line ” + linenumber);
};

console.log(“Installed console ! “);

This also gives you a “console.log” for free.

Enjoy!

In designing javascript for modularity and “separation of concerns”, I was pleasantly surprised to discover a way of implementing AOP (Aspect Oriented Programming) in Javascript.

AOP can be useful for automatically “wrapping” methods to provide tracing, error logging or caching.

In this example, we are “wrapping” a method to show an alert when a method starts and finishes:

$.aop.around({ target: homelinksModel, method: 'get' }
 , function (invocation) {

alert("Method Call");

var ret = return invocation.proceed(); // This line calls the original method

alert("After Call");
return ret;
});

I used it for caching using Lawnchair  (an abstraction around local storage on client browsers).  It is designed to cache the result of data calls to the server.

$.aop.around({ target: homelinksModel, method: 'get' }
 , function (invocation) {

var lc = new Lawnchair(function () { });

var keyName = 'homelinksModel' + invocation.method;

var rec;

lc.get(keyName, function (ret) {

if (ret == null) {
    res = invocation.proceed()
    lc.save({ key: keyName, value: res });
    rec = res;

 }
 else {
 rec = ret.value;
 }

});

return rec;
}); // </aop>

I’m still learning Lawnchair, so there’s probably better ways of implementing this, but I thought a “useful” example might be helpful.

Peter Chung has an excellent article about Jquery AOP if you’d like to learn more.

There’s not alot of recent “action” around AOP in the Javascript space (Google Search).   I suspect that either some of it’s functionality is automatically part of jQuery or that the Javascript world isn’t mature enough yet to care much.    Perhaps it’s the former.

Over the past few days I’ve had a marvelous time implementing the MVVM pattern in Javascript.  I’m discovering all my favourite technologies are there, such as object databases (Lawnchair), binding (Knockout) and much more.  I hope to be blogging more about some of these soon.

Links

• JQuery AOP Plugin - http://code.google.com/p/jquery-aop/
• http://unitstep.net/blog/2009/03/31/aspect-oriented-programming/
• Using JQuery AOP Plugin to stop WordPress Tracking on DOM objects - http://blog.futtta.be/2011/11/16/applying-javascript-aop-magic-to-stop-3rd-party-tracking-in-wordpress/
• List of Javascript AOP Frameworks - http://stackoverflow.com/questions/1005486/javascript-aop-libraries

In order return data from an MVC method, Microsoft provide a useful ActionResult object called JSONResult.  JSONResult exposes a convenient Data property that you can use to serialize an object to JSON.

Here’s how it can be used:

var res = new JsonResult();
res.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
res.Data = someObject;
return res;

Pretty easy to use.   Unfortunately there’s no matching XMLResult class if you want to return a scrap of XML instead.  In the MVCContrib project on codeplex there’s an XMLResult, but it’s event signature is slightly different.

I’ve modified this class to provide the same signature. 

Here’s the usage:

var res = new XmlResult();
res.Data = someObject;
return res;

Here’s the class:

using System.Web.Mvc;
using System.Xml.Serialization;

namespace Sample
{
    /// <summary>
    /// Action result that serializes the specified object into XML and outputs it to the response stream.
    /// </summary>
    public class XmlResult : ActionResult
    {
        private object _objectToSerialize;
        private XmlAttributeOverrides _xmlAttribueOverrides;

        /// <summary>
        /// Creates a new instance of the XmlResult class.
        /// </summary>
        /// <param name="objectToSerialize">The object to serialize to XML.</param>
        public XmlResult()
        {
      
        }

        /// <summary>
        /// Creates a new instance of the XmlResult class.
        /// </summary>
        /// <param name="objectToSerialize">The object to serialize to XML.</param>
        public XmlResult(object objectToSerialize)
        {
            _objectToSerialize = objectToSerialize;
        }

        /// <summary>
        /// Creates a new instance of the XMLResult class.
        /// </summary>
        /// <param name="objectToSerialize">The object to serialize to XML.</param>
        /// <param name="xmlAttributeOverrides"></param>
        public XmlResult(object objectToSerialize, XmlAttributeOverrides xmlAttributeOverrides)
        {
            _objectToSerialize = objectToSerialize;
            _xmlAttribueOverrides = xmlAttributeOverrides;
        }

        /// <summary>
        /// The object to be serialized to XML.
        /// </summary>
        public object Data
        {
            get
            { return _objectToSerialize; }
            set
            {
                _objectToSerialize = value;
            }
        }

        /// <summary>
        /// Serialises the object that was passed into the constructor to XML and writes the corresponding XML to the result stream.
        /// </summary>
        /// <param name="context">The controller context for the current request.</param>
        public override void ExecuteResult(ControllerContext context)
        {
            if (_objectToSerialize != null)
            {
                var xs = (_xmlAttribueOverrides == null) ?
                    new XmlSerializer(_objectToSerialize.GetType()) :
                    new XmlSerializer(_objectToSerialize.GetType(), _xmlAttribueOverrides);
                context.HttpContext.Response.ContentType = "text/xml";
                xs.Serialize(context.HttpContext.Response.Output, _objectToSerialize);
            }
        }
    }
}

Currently I’m investigating ways of using  UIWebView to render a user interface.  

I’d like to re-purpose some server side html form rendering logic so that it can be resused on the iPhone, Android and Windows Phone. 

Modern forms incorporate more than simple form elements however.  They may include data, such as images.

By default, the UIWebview supports images in the “bundle” and images in the documents area. 

What if I want to create images in memory, then display these in the HTML?

An little known feature of many modern web browsers (including Webkit) is datauris.  A datauri allows data to be embedded in a webpage where a url would usually be.

Here’s an example:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

There are disadvantages however, which are the obvious effect this will have on caching and pagesize.

The Stackflow article Display Local UI Image On a UIWebView shows how to this, replicated here for your convenience.

This code demonstrates reading a file from the local bundle, then embedding into the background image, in the html dom of a UIWebView:

To set the default browser used for debugging in an ASP.Net web application you need to bring up the “Browse With…” option on an aspx web page.  In a default MVC application you won’t have this option.

To do this temporarily add a “default.aspx” form to the root of your project, then the “Browse With…” context menu option will appear.  Choose your favourite browser, then remove the “default.aspx”.

In my previous article I showed how to update a twitter status, prior to the twitter decision to remove the basic authentication api.  This article shows a way of getting around this.  The SuperTweet service allows you to continue to use basic authentication.  This is particularly useful for non-visual processes that use VBA.

I am currently using Twitter to update a private tweet-stream of my activities (such as sending email) from an Outlook 2010 macro.  This stream is then fed into the iPhone application Momento, which provides me with an “autodiary” based on my various twitter feeds and online services.

To use the SuperTweet, there are just three steps:

1. Sign In with OAuth to the SuperTweet.net  (Sign-Up/Sign-In Now)
2. Create a password for your applications to use with the SuperTweet.net API when they want to Tweet: Learn more.
3. Change your application to use http://api.supertweet.net instead of Twitter.com.  See the sample below on how to do this using WinHttp in VBA. ( Learn more.)

The VBA code below will allow you to do an update to Twitter.  The UrlEncode implementation came from this StackOverflow post.

Function PostToTwitter(statusUpdate As String, username As String, password As String) As Boolean
    Const HTTPREQUEST_SETCREDENTIALS_FOR_SERVER = 0 
    On Error GoTo error_handler
   
    Dim WinHttpReq As New WinHttpRequest
 
     ' Assemble an HTTP Request.
    WinHttpReq.Open "POST", _
      "http://api.supertweet.net/1/statuses/update.xml", False
    WinHttpReq.SetCredentials username, password, HTTPREQUEST_SETCREDENTIALS_FOR_SERVER
    ' Send the HTTP Request.
    WinHttpReq.SetRequestHeader "Content-Type", "application/x-www-form-urlencoded"
    WinHttpReq.Send "status=" & URLEncode(statusUpdate)
    If WinHttpReq.Status <> 200 Then
      
       GoTo error_handler
    End If
    DoEvents
    Debug.Print "Posted - " & statusUpdate
   
    PostToTwitter = True
   
    Exit Function

It’s surprising that there’s very little information available about bringing another windows application to the foreground.

The SetForegroundWindow api call can be useful in this regard, but it can’t be used unless you know the windows handle of the main window of the application you’re activating.  If the application you’re activating has many child windows, simply using the “MainWindowHandle” property on the Process object is not enough.

The code fragment and sample will show how to find a process, enumerate it’s child windows, then send these the foreground.

BringAppToForeground(“notepad”)


………


using System.Diagnostics;

using System.Runtime.InteropServices;


……….


[DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr hWnd);

[DllImport("user32.dll")]


public static extern IntPtr FindWindowEx(IntPtr hwndParent, IntPtr hwndChildAfter,

 string windowClass, string windowTitle);



private void BringAppToForeground(string appName)

{


           // Find Parent 

           IntPtr parenthWnd = GetProcessWindowHandle(appName);

           if (parenthWnd == IntPtr.Zero) return;


           // Get list of child windows 

           List<IntPtr> loChildWindows = GetChildWindowHandles(parenthWnd);


           // Bring Windows to Front 

           BringWindowsToFront(loChildWindows.Reverse<IntPtr>());


}


private static IntPtr GetProcessWindowHandle(string processName)

{

           IntPtr parenthWnd = IntPtr.Zero;

           foreach (Process loProcess in Process.GetProcessesByName(processName))

           {

               parenthWnd = loProcess.MainWindowHandle;

               if (parenthWnd != IntPtr.Zero) break;

           }

           return parenthWnd;

}


private static void BringWindowsToFront(IEnumerable<IntPtr> windows)

{

           // Go through each and bring to front 

           foreach (IntPtr fronthWnd in windows)

           {

               SetForegroundWindow(fronthWnd);

           }

}


private static List<IntPtr> GetChildWindowHandles(IntPtr parenthWnd)

{

           IntPtr hWnd = IntPtr.Zero;

           List<IntPtr> loChildWindows = new List<IntPtr>();

           do

           {

               hWnd = FindWindowEx(parenthWnd, hWnd, null, null);

               if (hWnd == IntPtr.Zero) break;

               loChildWindows.Add(hWnd);

           }

           while (hWnd != IntPtr.Zero);

           return loChildWindows;

}

To understand how to use this in a winforms project, take a look at the sample project.

Download Sample Project

The optimisation of the iPhone and the iPad for touch has contributed to it’s success. 

One example of this kind of optimisation is “drop down combos”.  Rather than sticking with the traditional touch UI of a big combo with a fat scrollbar (that would mess up web pages), they do something completely different.  As shown above a neat “roller” control is shown which makes combos a pleasure to use.

On the iPad the experience is more like a traditional combo, but it is not the same.

In the creation of Windows 7 Tablet user interfaces I am sure our users would prefer this kind of experience.

In Winforms it turns out that it’s possible to improve the touch experience markedly using the “OwnerDrawVariable” style on comboboxes.

As you can see, when the combo box looks relatively normal, not taking up much screen real estate….

Yet when it’s clicked, the control becomes bigger, so the normal flick scrolling features of Windows 7 tablet can work better.

The following code sample is a class called TouchCombo that can be used to cause combos to take on the new style.  Here’s the code for the sample form:

Public Class Form1
    Private Sub mPopulate(ByVal combo As ComboBox)
        combo.Items.Add("Alpha")
        combo.Items.Add("Beta")
        combo.Items.Add("Gamma")
        combo.Items.Add("Delta")
        combo.Items.Add("Epsilon")
        combo.SelectedIndex = 0

Here’s the code for the TouchCombo class:

Public Class TouchCombo

Download the project.

Recently I read the “Agile Samurai” a great introduction to Agile software development.

The first part of the book talks about an artefact called the “Inception Deck”, a number of cards or powerpoint presentation that is used to help understand and scope a software project.

The inception deck elaborates on:

1. Why are we here?
2. Create an elevator pitch
3. Product Box
4. Create a NOT list
5. Meet your neighbours
6. Show the solution
7. What keeps us up at night
8. Size it up
9. Be clear on what’s going to give
10. Show what it’s going to take

I couldn’t find a powerpoint template to start me off, so I created one for anyone who is interested.  It’s pretty basic, but it’s nice to start somewhere.

Download here.

Links

Learn more from the Agile Warrior himself here:

http://agilewarrior.wordpress.com/2010/11/06/the-agile-inception-deck/

What if you want to capture a single image from a webcam?  It turns out that this is quite straight forward to do using a couple of Win32 api calls to the avicap32.dll library.

I encapsulated these api calls in a simple class.

To write a file called “snapshot.jpg” out to the desktop from a single webcam, simply declare the class and call a the TakePicture method.

Dim loSnap As New WebcamSnap
loSnap.TakePicture(0)

The devices collection shows a list of all webcam devices on your machine so you can populate a combo with them.

Note: This example has no decent error handling, which I suspect will be needed in the “real world” of multiple devices.

Here’s the WebcamSnap class:

Option Explicit On
Imports System.IO
Imports System.Runtime.InteropServices
''' <summary>
''' This class takes a snapshot from any or all attached webcams
''' </summary>
''' <remarks></remarks>
Public Class WebcamSnap
    Const WM_CAP As Short = &H400S

Links

I found the original code sample here:

http://www.experts-exchange.com/Programming/Languages/.NET/Visual_Basic.NET/Q_22482234.html

(Although I’ve seen it all over the web in various guises)