Why use ejabberd which is written in a wacky language called Erlang? Well… you will have to decide for yourself. Erlang is a functional programming language which is known for concurrency and high reliability. Also, it’s the 24th most popular language on GitHub as of writting this so it can’t be that bad. :)

If you don’t have ejabberd setup yet see my previous post on getting strophejs, ejabberd, and IIS all working together.

Step one, take a deep breath and get up to speed on XMPP, ejabberd, and Erlang. Easy right? Don’t worry, it will all come together by the end of this post. Well, at least you will write some Erlang by the end of the post. Here are some resource to have handy.

Books:

1. Learn You Some Erlang
2. XMPP, the definitive guide

Let’s start with getting the Erlang environment up and running. You need Erlang to compile the new module. The Erlang version is important because it should match the one used in the installed ejabberd server. What version of Erlang was used with your installed ejabberd? You can find that information here using your ejabberd version number (if you don’t know the version number skip ahead to the next section before following this link): http://www.ejabberd.im/erlang.

If you don’t know your ejabberd version here is how to get it.

Go to start, run, and type cmd to open a command prompt. CD to your ejabberd\bin folder. Mine in “D:\Program Files (x86)\ejabberd-2.1.9\bin”. Then run the following command:

You should see something like this “The node ejabberd@localhost is started with status: started ejabberd 2.1.9 is running in that node”

If you you get an error like the following “Failed RPC connection to the node ejabberd@localhost: nodedown” Try to run the start command:

If you get the same error when trying to start you might have a “.erlang.cookie” mismatch. On my box ejabberd runs using the erlang cookie from “C:\Windows\.erlang.cookie”. This needs to match the one in your user folder. My Erlang cookie is located here: “C:\Users\rowej\.erlang.cookie”. If you are getting the error mentioned, copy your erlang cookie from the windows folder into your user folder.

Now that you have the ejabberd version go to ejabberd official site and see which version of erlang was used. This is important so you are using the same version when you compile your module.

Now open your favorite text editor. I recommend Sublime Text 2 with Erlang syntax highlighting turned on. Also, there are several choices of plugins for NetBeans or Eclipse. The officially recommended IDE is Erlang mode for Emacs.

The next step is to get a basic module installed and make sure it is working. Lets start with a very simple module that does nothing but logs out information. Finally, time to start coding!

Create a file named mod_http_offline.erl.

Lets start with a very simple module that just does logging. This should give us a good idea of how ejabberd handles modules. Fill in the file you created “mod_http_offline.erl” with the following code:

%% name of module must match file name
-module(mod_http_offline).

-author("Earl The Squirrel").

%% Every ejabberd module implements the gen_mod behavior
%% The gen_mod behavior requires two functions: start/2 and stop/1
-behaviour(gen_mod).

%% public methods for this module
-export([start/2, stop/1, create_message/3]).

%% included for writing to ejabberd log file
-include("ejabberd.hrl").

%% ejabberd functions for JID manipulation called jlib.
-include("jlib.hrl").

start(_Host, _Opt) -> 
		post_offline_message("testFrom", "testTo", "testBody"),
		?INFO_MSG("mod_http_offline loading", []),
		ejabberd_hooks:add(offline_message_hook, _Host, ?MODULE, create_message, 50).   



stop (_Host) -> 
		?INFO_MSG("stopping mod_http_offline", []),
		ejabberd_hooks:delete(offline_message_hook, _Host, ?MODULE, create_message, 50).



create_message(_From, _To, Packet) ->
		Type = xml:get_tag_attr_s("type", Packet),
		FromS = xml:get_tag_attr_s("from", Packet),
		ToS = xml:get_tag_attr_s("to", Packet),
		Body = xml:get_path_s(Packet, [{elem, "body"}, cdata]),
		if (Type == "chat") ->
			post_offline_message(FromS, ToS, Body)
		end.



post_offline_message(From, To, Body) ->
		?INFO_MSG("Posting From ~p To ~p Body ~p~n",[From, To, Body]),
		?INFO_MSG("post request sent (not really yet)", []).

Now lets get the necessary include files to compile the code. You will have to go to the ejabberd site and download the src.

select “source code” from the drop down list. Then use a tool like TarTool to unzip it. Copy jlib.hrl and ejabberd.hrl into the same folder where where you created the module source mod_http_offline.erl

Now open the erlang shell (programs > Erlang), type in:

Remember you must use a slash (forward slash). If you cut and paste from windows explorer you will get back slashes and you won’t be able to change directories.

Then compile by doing the following:

You should see this result and a .beam file now created in the directory:

Shut down ejabberd server and copy the resulting .beam file to the directory where all the other ejabberd .beam files are. \ejabberd-2.1.9\lib\ejabberd-2.1.9\ebin

Configure ejabberd to enable this module via the ejabberd.cfg. Add it to the list of modules in the Module section.

Start up eJabberd.

After it starts lets examine the log files to see if our module loaded. example\path\ejabberd-2.1.9\logs\ejabberd.log

You should see the following log entries:

Now we can have fun and send some offline messages. Get two XMPP clients running logged in with two different users. I used my admin account created during the ejabberd setup and a new test account created via the ejabberd Web Admin. I used the agxXMPP client to send messages back and forth but you can use which ever XMPP client is easier for you. You can find a list of them on the official XMPP website client list. Send a few message to a user who is not connected (offline) and check your ejabberd.log file.(example\path\ejabberd-2.1.9\logs\ejabberd.log). Here is what mine looks like after sending a Hello world message.

Shut down ejabberd and setup a page to handle HTTP POST’s via Erlang. use your favorite web framework for the page it really doesn’t matter. If you are using MVC .Net it might look somethign like this.

 [HttpPost]
        public ActionResult Process()
        {
            var formValues = Request.Form;

            string from;
            string to;
            string body;

            if (!string.IsNullOrEmpty(formValues["From"]))
            {
                from = formValues["From"];
            }

            if (!string.IsNullOrEmpty(formValues["To"]))
            {
                to = formValues["To"];
            }

            if (!string.IsNullOrEmpty(formValues["Body"]))
            {
                body = formValues["Body"];
            }

Then from the Erlang console send a post to make sure everything is working with this command:

If you see a response starting with this you are good to go.

Now lets change the module to send the post adding in a few more lines of code.

%% name of module must match file name
-module(mod_http_offline).

-author("Earl The Squirrel").

%% Every ejabberd module implements the gen_mod behavior
%% The gen_mod behavior requires two functions: start/2 and stop/1
-behaviour(gen_mod).

%% public methods for this module
-export([start/2, stop/1, create_message/3]).

%% included for writing to ejabberd log file
-include("ejabberd.hrl").

%% ejabberd functions for JID manipulation called jlib.
-include("jlib.hrl").

start(_Host, _Opt) -> 
		?INFO_MSG("mod_http_offline loading", []),
		inets:start(),
		?INFO_MSG("HTTP client started", []),
		post_offline_message("testFrom", "testTo", "testBody"),
		ejabberd_hooks:add(offline_message_hook, _Host, ?MODULE, create_message, 50).   



stop (_Host) -> 
		?INFO_MSG("stopping mod_http_offline", []),
		ejabberd_hooks:delete(offline_message_hook, _Host, ?MODULE, create_message, 50).



create_message(_From, _To, Packet) ->
		Type = xml:get_tag_attr_s("type", Packet),
		FromS = xml:get_tag_attr_s("from", Packet),
		ToS = xml:get_tag_attr_s("to", Packet),
		Body = xml:get_path_s(Packet, [{elem, "body"}, cdata]),
		if (Type == "chat") ->
			post_offline_message(FromS, ToS, Body)
		end.



post_offline_message(From, To, Body) ->
		?INFO_MSG("Posting From ~p To ~p Body ~p~n",[From, To, Body]),
		 http:request(post, {"http://localhost/OfflineDemoWebhost/Message/Process",[], 
		 "application/x-www-form-urlencoded",
		 lists:concat(["From=", From,"&To=", To,"&Body=", Body])}, [], []),
		?INFO_MSG("post request sent", []).

Shut down ejabberd again and recompile. Copy the beam file overitting the old version. Now start up the server and you should have offline messages posting to your web application.

Step 1: Download and install ejabberd. The install is straight forward and the default configuration has everything you need. During the install it will ask you for a domain. I would recommend setting up a host alias “localhost.demo.com” because it looks nicer and easier to use but you could also just use localhost. After install check to make sure the http-bind endpoint is working http://localhost:5280/http-bind/. You should see a simple page that has “ejabberd mod_http_bind” at the top

Step 1.5: Setup a host name if needed. If you used localhost you can skip this step. You can do this in Windows 7 via the host file which should be located “C:\Windows\System32\drivers\etc\hosts”. Add a line at the bottom with your IP and new local DNS.

Step 2: Setup new IIS application and copy in strophe.js examples. Go into IIS manager and create a new application named “xmppExample”. Then download the latest strophe.js and copy the contents to your new site. You should be able to access the following now. http://localhost.demo.com/xmppExample/strophejs/examples/basic.html. You will have to change the first line in basic.js to setup your endpoint. It should look like this BOSH_SERVICE = ‘http://localhost.demo.com/http-bind’

Step 3: Setup proxy for ejabberd http-bind endpoint. To make things simple we need everything on the same domain. Right now, the bosch http-bind endpoint is this http://localhost:5280/http-bind/ and we need it to be this http://localhost.demo.com/http-bind. Download and install the Application Request Routing for IIS. Once installed follow these steps to enable proxy.

1. Open IIS Manager
2. Select a server node in the tree view on the left hand side and then click on the “Application Request Routing…” the full name shows up as “Application Request Routing Cache”
3. Then on the far right side click on “Server Proxy Settings…
4. check the box next to Enable proxy and apply settings (keep everything else default)

Finally, add a rewrite rule to the web.config file in your inetpub root dir. For example, mine is located “C:\inetpub\wwwroot\web.config”. Here is my full XML configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
	<rewrite>
    		<rules>
          		<rule name="ejabberd.BOSH" stopProcessing="true">
               			<match url="^http-bind" />
               			<action type="Rewrite" url="http://localhost.demo.com:5280/http-bind/" />
          		</rule>
    		</rules>
	</rewrite>
        <validation validateIntegratedModeConfiguration="false" />
    </system.webServer>
</configuration>

Now you should be able to run the demo at http://localhost.demo.com/xmppExample/strophejs/examples/basic.html. You will need to login with admin@localhost.demo.com (if admin is the username you selected during install) and the password you selected during install.

I can also be found on Google+ Jason Rowe and twitter @jsonrow

Note: Here is a quick overview of JavaScript that is as short as possible, but explains every major feature. I would also recommend following the 2ality website

Today JavaScript projects have the complexity, size, and structure of projects written in languages like C# and Java. Thankfully, the developer tools for debugging and logging are solid across browsers. *Opera is still a little funky about logging using “opera.postError.apply(opera, arguments);”. Looking particularly good, Google’s version of the webkit dev tools and some API’s they have in beta. I’ve started to use quint for unit testing. I’ve also been looking leveraging these frameworks: underscore.js, coffee script, raphaeljs, and closure compiler.

It’s amazing how much has changed. Now examples of good JavaScript are much easier to find. Hell, here is a step by step walkthrough of how to build your very own JavaScript framework.

So to get some practice I went and found some JS that needed cleanup. I wanted to focus on structure and namespaces and this script needed some love. View source on that page and you will notice global variables and one big pile of code.

The first thing I did was break up the logic into separate functional script files that will later be compiled and minified into one. You can see the python script I use to minify here.

1. animation.js
2. builder.js
3. core.js
4. pie.js
5. rendering.js
6. styles.js

I then added a test folder and setup the same file names but which had test cases for each script. Then an index.html file to display the test groups or “modules” as they are called in QUnit. Here is an example of a test that always passes

module("sample test");

test("a sample qunit test", function () {
    ok(true, "always fine");
});

The next thing I worked on was getting a namespace around the code. I went with the following which seems to work for my needs.

var MYAPP = MYAPP || {};

MYAPP.namespace = function (ns_string) { var parts = ns_string.split('.'), parent = MYAPP, i; // strip redundant leading global 

if (parts[0] === "MYAPP") { parts = parts.slice(1); } for (i = 0; i < parts.length; i += 1) { // create a property if it doesn't exist 

if (typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; 

} parent = parent[parts[i]]; } return parent; }; 

Stefanov, Stoyan (2010). JavaScript Patterns (pp. 89-90). OReilly Media – A. Kindle Edition.

So after refactoring, I’ve got the pie chart setup code to the following.

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');

var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData);

$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

To customize the style I allow passing in a custom style object to override the defaults.

var customStyles = {
    chartSizePercent: 49,
    maxPullOutDistance: 10,
    pullOutFrameStep: 4,
    pullOutFrameInterval: 40,
    pullOutLabelPadding: 42
};

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');
var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData, customStyles);
$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

If you are curious about how the other parts of the chart were organized you can see the source code on github.

I can also be found on Google+ Jason Rowe and twitter @jsonrow

  
kernel.Register(
    Component.For<IMyImageComponent>()
        .ImplementedBy<MyImageComponent>()
        .Named("SomeImage"));

  
Interface example:

    public interface IMyImageComponent
    {
        Bitmap BuildImage();

        string GetFileName();
    }

  
var type = typeof(IMyImageComponent);
            var styles = AppDomain.CurrentDomain.GetAssemblies().ToList()
                .SelectMany(s => s.GetTypes())
                .Where(type.IsAssignableFrom);

            //find all classes that implement IMyImageComponent and register using name from GetFileName()
            foreach (var style in styles)
            {
                if (!style.IsClass || style.IsNotPublic || style.IsAbstract)
                    continue;

                object o = Activator.CreateInstance(style);
                var propertyInfo = style.GetMethod("GetFileName");
                var name = (string)propertyInfo.Invoke(o, null);
                container.Register(Component.For<IMyImageComponent>().ImplementedBy(o.GetType()).Named(name));

  
            container.Register(Component.For<ITypedFactoryComponentSelector>().ImplementedBy<ImageStyleFactorySelector>().Named("ImageStyleFactorySelector"));

            container.Register(Component.For<IMyImageTemplateFactory>()
                .AsFactory(c => c.SelectedWith("ImageStyleFactorySelector")));

  
public class ImageStyleFactorySelector : DefaultTypedFactoryComponentSelector
    {
        protected override string GetComponentName(MethodInfo method, object[] arguments)
        {
            if (method.Name == "GetByFileName" && arguments.Length == 1 && arguments[0] is string)
            {
                return arguments[0].ToString();
            }
            return base.GetComponentName(method, arguments);
        }
    }

  
var imageComponent = _ImageTemplateFactory.GetByFileName(fileName);

I frequently get asked how to create a chart in JavaScript that shows a different line color above and below the previous close price. Here is a example of what I mean.

View this test page if you want skip the details and see a working example in JavaScript/SVG

At first glance, I’ve always thought this would be very easy and instructed them to create a new path depending on if the line is above or below the previous close line (the blue line in the image above). Simple enough right?

It turns out I was missing a crucial step that might go unnoticed if you are using many data points. The problem turns up when using sparse data like the example shown above.

Here is what it looks like if you do what I said literally.

That missing step I mentioned is connecting the new lines. Seems obvious now that I look at an example. So how will this be done? Here is an image showing the paths with labels for easy reference.

What I have found works best is to find the intersection point between the paths and the previous close line. So you would create one line using the last point from path 1 and the first points from path2. The second line would just be the previous close line points. Unfortunately, just having the points is not enough to calculate the intersection.

Below is the needed format and calculation. I created a function to do this in JS which is provided below but I wanted to include the full explanation.

Say we are given two different points, (x1, y1) and (x2, y2), and want to find A, B and C for the equation above. We can do so by setting A = y2-y1 B = x1-x2 C = A*x1+B*y1 Regardless of how the lines are specified, you should be able to generate two different points along the line, and then generate A, B and C. Now, lets say that you have lines, given by the equations: A1x + B1y = C1 A2x + B2y = C2 To find the point at which the two lines intersect, we simply need to solve the two equations for the two unknowns, x and y. double det = A1*B2 – A2*B1 if(det == 0){ //Lines are parallel }else{ double x = (B2*C1 – B1*C2)/det double y = (A1*C2 – A2*C1)/det }

Here is the full function in JS to create this format and find the intersection.

  //Line-Line Intersection
        var getXCrossing = function(p1x, p1y, p2x, p2y, marker, markerMaxX) {
               
                var retValX = 0;
                var retValY = 0;
               
                //graph lines
                var a1 = p2y - p1y;
                var b1 = p1x - p2x;
                var c1 = a1 * p1x + b1 * p1y;
                
                //marker line is always horizontal
                var a2 = marker - marker;
                var b2 = 0 - markerMaxX;
                var c2 = a2 * 0 + b2 * marker;
                
                var det = a1 * b2 - a2 * b1;
                
                if(det === 0)
                {
                    //Lines are parallel
                }
                else
                {
                    retValX = (b2 * c1 - b1 * c2) / det;
                    retValY = (a1 * c2 - a2 * c1) / det;
                }   
                
                return {
                        x: retValX,
                        y: retValY
                    };
                };

Here is a test page which shows a working example in SVG using gRaphaël JavaScript library.

A recent post and talk on twitter about host providers got me interested in building a blog using Google App Engine (GAE). It’s free to use and would eliminate having to pay for a hosting provider for a small site. My blog turned out like this jsoncharts. I’m pretty happy with it so far.

I got started with Python and GAE by reading the documentation and using the examples on the Google App Engine site. Then I used this article and framework for the base of my blog. The major changes I made were adding commenting and friendly URL’s. I can have URL’s like this (http://jsoncharts.appspot.com/blog/force-directed-graph-with-raphael) and comments on the articles (http://jsoncharts.appspot.com/blog/force-directed-graph-with-raphael#respond).

Adding friendly URL’s was easy enough. Following Bret Taylor’s example here is what my WSGIApplication instance looks like.

 
application = webapp.WSGIApplication(
    [('/', FrontPageHandler),
     ('/tag/([^/]+)/*$', ArticlesByTagHandler),
     ('/date/(\d\d\d\d)-(\d\d)/?$', ArticlesForMonthHandler),
     ('/'+ defs.ARTICLE_URL_PATH +'/(\d+)/?$', SingleArticleHandler),
     ('/'+ defs.ARTICLE_URL_PATH +'/([^/]+)', SingleArticleHandlerBySlug),
     ('/archive/?$', ArchivePageHandler),
     ('/rss2/?$', RSSFeedHandler),
     ('/.*$', NotFoundPageHandler),
     ], 

The following line routes incoming request to a class handler named “SingleArticleHandlerBySlug”.

 
('/'+ defs.ARTICLE_URL_PATH +'/([^/]+)', SingleArticleHandlerBySlug),

The handler looks like this:

 
class SingleArticleHandlerBySlug(AbstractPageHandler):
    """
    Handles requests to display a single article, given its unique ID.
    Handles nonexistent IDs.
    """
    def get(self, slug):
        article = Article.get_for_slug(slug)
        comments = None
        if article:
            comments = Comment.get_all_by_articleId(article.id)
            template = 'show-single-article.html'
            articles = [article]
            more = None
        else:
            template = 'not-found.html'
            articles = [] 

        self.response.out.write(self.render_articles(articles=articles,
                                                     request=self.request,
                                                     recent=self.get_recent(),
                                                     template_name=template,
                                                     comments=comments)) 

To add the commenting I had to create a new model class for storage. This was very simple.

 
class Comment(db.Model): 

    name = db.TextProperty()
    email = db.TextProperty()
    website = db.TextProperty()
    body = db.TextProperty()
    commented_when = db.DateTimeProperty(auto_now_add=True)
    id = db.IntegerProperty()
    articleId = db.IntegerProperty()
    gravatar_url = db.TextProperty() 

Then I added a few functions for finding and deleting and then added them in. I can’t remember ever doing something with storage this fast. I don’t miss SQL at all. GAE really hides all the storage implementation details for you. Here is an example of the functions used to access the data store.

 
@classmethod
def get_all(cls):
    q = db.Query(Comment)
    q.order('-commented_when')
    return q.fetch(FETCH_THEM_ALL)
@classmethod
def get_all_by_articleId(cls, articleId):
    q = db.Query(Comment)
    q.filter('articleId = ', articleId)
    q.order('-commented_when')
    return q.fetch(FETCH_THEM_ALL) 

That’s all it takes and you are ready to go.

Overall I was very impressed with the experience. In the future I’ll probably look into using Django’s form validation framework for comments and figure out how backups would work.

• JsonChart Fork on GitHub
• PicoBlog on GitHub
• Writing Blogging Software for Google App Engine

To try out F#I decided to make a function to calculate  simple moving average (SMA) and exponential moving average (EMA).  The SMA and EMA have enough math to try many of the features of F# and functional programming.

The first thing I learned was F# has a way to quickly execute code. If you haven’t played with F#’s Interactive it’s sort of like a REPL loop. While coding you can highlight the code and do a Alt-Enter to execute it. It’s very convenient.

To keep with the functional style of programming I put the SMA and EMA into a type. In OO this would be the equivalent of using a base class for moving averages and then creating classes for SMA and EMA. As you can see in F# this is a very small amount of code using type declaration / discriminators. You can see comments in my code below for things I learned and picked up while doing this exercise.

 

type movingAverage =
  | Simple of int * seq<float>
  | Exponential of int * float list



// sma is an example of using a private / utility function
// pipelining operator |> allows execution of a series of operations
let sma(size, seq) =                                  
    Seq.windowed size seq
    |> Seq.map Array.average  



// example of Matching on discriminated unions
let calculate(movingAverage) =
    match movingAverage with

    |Simple(size, seq) -> sma(size, seq)

    |Exponential(period, data) -> 

            let multiplier =  2.0 / (1.0 + (float period))
            
//Calc a sum to use in the SMA to prime the EMA calculation
//http://bit.ly/bG73sx Slice like functionality from a List
            let iniSum =  
                data 
                |> List.toSeq 
                |> Seq.take (int period) 
                |> Seq.sum

//first float from list using period as the start
            let firstItem = 
                data 
                |> List.toSeq 
                |> Seq.skip (int period)  
                |> Seq.head 

//setup first ema with sma
            let firstEma = (iniSum / (float period))

            let out : float array = Array.zeroCreate (List.length data)

//setup initial Ema to previous day
            out.[period - 2] <- firstEma

//calculate the rest of the Ema's
            for i in period - 1 .. (List.length data - 1) do
                let close = data.[i]
                let prev = out.[i - 1]
                out.[i] <- multiplier * (close - prev) + prev

            Array.toSeq out

// F# Note - intrinsic type extensions adds the calculate member to the movingAverage type
type movingAverage with                                                
   member x.calculate() = calculate(x)  


//Test Simple
let simpleMovingAverage = Simple(10, (Seq.map float [|1..30|]))

let avgs = simpleMovingAverage.calculate();

for avg in avgs do
    printfn "%f" avg

//Test Exponential
let expMovingAverage = Exponential(10, [1.0..30.0])

let expAvgs = expMovingAverage.calculate();

for e in expAvgs do
    printfn "%f" e

Last week in the office I thought to my self, “Holiday weekend coming! I’ll have time to play with WP7 or maybe I’ll play with HTML5”. Then I saw this tweet on twitter.

We as developers spend too much time playing with baubles and shiny new tools and not enough time on core skills and fundamentals

I thought well, instead of using some free time this holiday weekend to build something why not do a little research. I happened to have a problem at work which someone suggested using the Visitor Pattern. So I spent some time looking over a few resources and Wikipedia has a great explanation. I won’t try to repeat that. One area I was stuck on though was the concept of double dispatch. I found this example on StackOverflow.com which solidified the concept. For some reason learning by spaceship and rebel alliance works for me.

So now that I had a good understand all I needed to was implement it right? I thought about it and figured that could wait. Now is an opportunity to work on my fundamentals. The Wikipedia article mentioned Common Lisp and how the Visitor Pattern simplified when using dynamic languages. This got me to thinking what would this look like in F# or a functional language?

While looking into functional languages I came across this Stack Overflow question “I am a C# developer, Should I start looking more on F# [closed]”.  Jon Skeet’s answer influenced me and I figured I would pick up a book Real World Functional Programming. It fits into the category of fundamentals because it’s using C# and F# to teach functional programming. Which I haven’t used in many years.

So I start reading with the goal in mind that I would make a quick example of the visitor pattern in F#. Don’t think I am a super geek (not that you would be confused because of my skills). I did take time to drink a few of these and go to the Crowded House concert this weekend. By the fourth chapter or so things started to sink in with F# and functional programming.

If I were using a declarative functional style of programming, I wouldn’t even need the visitor pattern at all!  I don’t have objects that would need to be separated from the algorithm. I would only have types and could use pattern matching and discriminated unions to perform my algorithm. The visitor pattern is needed in my current project because I’m using an implicit OO coding approach.

It was really shocking to me that this wasn’t obvious right away. I’ve been doing OO for so long now I’ve completely become accustomed to dealing with objects and state. A programming world without objects had completely slipped from my mind. Glad I took the time to get started on this book as it’s already giving me new ideas and techniques I can use in my daily C# and OO programming. Now to start working on some of the other programmer competencies.

Today I went to the WP7 boot camp in Minneapolis. Not many people have actually seen a Windows Phone 7 yet. I was hoping to see the real thing but it wasn’t available. Although, the dev tools are ready and very robust.

Getting started is easy using the developer tools and developer training kit. After downloading and playing around I really hope WP7 is a success. The development experience is slick if you are willing to embrace XAML or XNA.

A note about the install. If you have a full version of Visual Studio it will integrate with that. Otherwise it will install Visual Studio express. A few people in the group were confused when they opened express and the tools were not available as they already had VS2010 installed. (Note, it might be safer to use VS Express for now with this beta if you can. The presenter was having issues adding service references with VS Pro but it works in express.)

Below are a list of notes that caught my attention during the talk. This is all based on a beta product so some of this may change. For the latest information download the WP7 Training Kit and visit the wp7 developer site.

Basics

• $100 fee to upload apps to market place. You get paid after you make the first $100 but Microsoft will take a cut for each sale.
• Has ability to upload app in trial mode
• Silverlight capabilities is basically Silverlight 3 plus additional features.

Known Issues with Emulator:

• Sometimes Emulator will not change from portrait to landscape if keyboard is enabled to be used. Hit PageDown to disable it
• When using VS Pro some users have not been able to add service references correctly. They didn’t generate the full proxy.

Tips and Tricks:

• Use PageUp and PageDown keys to enable keyboard in emulator.
• Emulator can be kept running and will store all opened apps.
• Blend can be used to test light and dark template available to phone users.

Tooling

• Code from Silverlight 3 should work on the phone with maybe only small tweaks for things like navigation and UI sizes.
• List Application (list and details page paradigm)
• Binding works just like in Silverlight
• DataContext works like Silverlight
• Input scopes “TelephoneAreaCode” and “EmailSMTPAdress”  allow you to change keyboard layout. Developer Note: You can use Verbose XAML syntax for intellisense. You can’t create your own input scopes right now. Demo in SDK uses reflection to explore input scopes.
• Accelerometer – can be used with emulator if laptop that has one built one in. Otherwise you can use accelerometer emulator using RX.
• Audio – leverage raw data override BufferReady event at regular intervals save and manipulate audio. About a 10ms delay. All available in SDK.
• Video elements – Media support is on the hardware – video decoding is down on the hardware. Only one media element on the page at the time. No video media brush. DRM
• XNA API can be used to bring in sounds and background sounds.
• JavaScript can talk to Silverlight in control – Silverlight to script wb.InvokeScript  – script to Silverlight wb_ScriptNotify. Window.external.Notify(string)

3rd Party Tools and Links

• MVVM light for wp7. Design Pattern.
•  Developer Note: Bing Maps Control not yet available but being developed.

Design

• All elements can be animated
• Elements can be projected onto 3d plane
• Templating – taking a control and laying a XAML rendering over the code base. Microsoft encourages using the metro theme but they did show a puzzle application that used templating to change buttons and panels.
• Styling can be set in the Application XAML resources or page resources.
• Two screen resolutions will be available.
• User can change the Theme
• Blend can be used to test dark and light themes available to users. Would only need to be done if you go off and build your own template. But if you use the metro theme you get the changes for free. For example, your applications buttons and backgrounds would be updated.
• App bar should be used to create consistent navigation and controls. How to: Add an Application Bar to Your Application on MSDN.
• App bar Icon set can be downloaded here.

Application Components

• Host (TaskHost)
• XAP file
• Pages (Silverlight)
• Content (Silverlight)
• Games (XNA)

Application Structure

• Apps are built like web sites
• Functionality is split into pages
• Forward navigation via links
• Backward navigation via Back (should use hardware button).
• Users can navigate across different applications
• Previous app (pages) are in the back stack. No multi tasking for third party apps. The back stack means your app is shut down.

Hardware buttons

• Back (only one you can inject into when it fires right now)
• Start
• Search
• Volume
• Camera

Feels like web design.

• Application state can be passed between pages by querystring and frame context.
• hyperlinks can be used to navigate to other pages.
• UriMapping which is similar to MVC URL routing.

Push Notification Service via the cloud (Microsoft Notification service)

• Developer Note: When the emulator starts it takes 30 seconds to instantiate notification service.
• Phones subscribe to a service on your server for events via a Uri.
• All communication pushed to phone is via Microsoft.
• Events are sent from a server to Microsoft push service.

Location Service:

• Developer Note: No Emulator Support – MSDN RX emulator can be created.
• Cell Tower, Satellite GPS, or WIFI can be used
• Developer Note: Use cell tower to save battery but less accurate

Types of Notifications on the Phone

• Tile Notifications –  Tile on homepage which has an image, number, and simple text.
• Toast – pop-up will link back to app.
• If the app is running raw data can be accessed and displayed.

Handling Life Time Events: Obscure VS Deactivated

Hidden By Shell UI: Obscured

• On Obscure you need to handle it gracefully then when un obscure you need to start.

Moved to background: Deactivated

• Deactivate event fires
• Your app becomes suspended (you have a limited time to handle but not specified yet)
• State will be destroyed eventually if user doesn’t go back. Assume your app is killed.
• If user goes back to application Activate event will be fired
• You can load state via isolated storage and resume where you left off

Interesting Questions asked during the presentation:

• Question: Are ODBC drivers available or ported? Answer: Someone suggested using isolated storage for this instead.
• Question: Does page Navigation come with default animation? Answer: It doesn’t come with a default animation. But you can add them in by intercepting the navigation event.
• Question: How is back stack clean up done and can it be prioritized? Answer: Presenter guessed that it might be resource based but not sure yet.
• Question: Can you control the Antenna for GPS? Can you turn it off or on and receive notifications when it is ready? Answer: Start and Stop service might be used for this but not sure. It looks like the API only tries to use it if available. Look at Location example in SDK.

Links

• http://www.silverlight.net/
• http://developer.windowsphone.com/
• http://slickthought.net/ Jeff Brand’s Site
• Programming Windows 7 Phone