Martín Verzilli

Introduction

Disclaimer: this section is just happy talking, if you want to get right to the beef, skip it and go right to the beef.

Yesterday was a sad day for me. It wasn’t meant to be like that.

I began the day with the intention of setting up a development environment for this amazing RoR application I’ll tell you about some other day. You know what it is like to set up a RoR environment: just a few gem installs here, a couple rakes there and voila! Two minutes after you started, you’re all set to begin coding.

Well, no. One of the required gems was RMagick, a wrapper of the arch-famous ImageMagick graphics processing library. In order to be able to install the RMagick gem, you need first to install ImageMagick.

So far so good, but this library has a whole lot of dependencies, and if you’re not a Unix and C Jedi (I’m not), it may be painful to get to a happy ending. I spent the day googling around looking for a good tutorial, and most of them recommended one of two alternatives:

• Use MacPorts: tried, no success.
• Use a script that some guy put together once. Basically it consisted of downloading, compiling and installing all the dependencies, and then ImageMagick: tried, no success.

I guess the reason why I failed with both alternatives is that at some point of the installation, I made a wrong a choice of version for any of the dependencies. By the end of the day, I still hadn’t been able to start debugging the application.

Then I spoke to my colleague Adrian Romero (who unfortunately doesn´t have a blog to point you to), and he suggested me to try with Homebrew. This is how the story ends, I used Homebrew, and was able to get back on track quite quickly.

Brewing magic

1) Install Homebrew

2) Install Ghostscript:

sudo brew install ghostscript

3) Install ImageMagick:

sudo brew install imagemagick

Ok, step 3 may not be that easy. One of the dependencies, Little CMS, may fail to install because they removed the file from the URL where Homebrew looks for it. This causes the ImageMagick installation process to abort.

I worked this issue around by replacing the URL in the Little CMS Homebrew formula with a location where at the moment of this post’s publishing it can be found.

3a) Edit the formula:

sudo brew edit little-cms

3b) Look for this line:

url 'http://www.littlecms.com/lcms-1.19.tar.gz'

3c) Replace with:

url 'http://www.imagemagick.org/download/delegates/lcms-1.19.tar.gz' (or an URL where you could find “lcms-1.19.tar.gz”)

3d) Try again to install ImageMagick (it should work now):

sudo brew install imagemagick

4) Welcome back home, just install the rmagick gem:

sudo gem install rmagick

5) Celebrate

Happy brewing!

Suppose you have to fix a bug in an ASP.NET application. You’re a TDD-guy so once you identify it, you write a test which should reproduce it. Then you run it and… null pointer exception. Your testing framework may have pointed you to the exact line, so you inspect it and see something like:

var foo = HttpContext.Current.[...];

Then you realize the guy who wrote the buggy class wasn’t a TDD-guy!

You need somehow to be able to inject an HttpContext object so you can run your tests without the need of running a web server. If you can do that, then you just mock it and… wait! HttpContext is a concrete class! So now, what?

Well, ASP.NET MVC comes with the assembly System.Web.Abstractions which adds classes to the System.Web namespace such as HttpContextBase, HttpRequestBase, and other abstractions of ASP.NET intrinsic objects.

Cool! Now you can mock HttpContextBase and inject it to the tested class.

Are you done? Not yet. HttpContextBase is of course a newer class than HttpContext, so not surprisingly HttpContext does not derive from HttpContextBase. Nevertheless, System.Web.Abstractions provides an HttpContextWrapper which does inherit from HttpContextBase and receives an instance of HttpContext through its constructor.

Now all you have to do is encapsulate or your uses of HttpContext.Current in some way that let’s you substitute it for an injected mock transparently for the user code.

In my case, it was more convenient to inject via a setter:

        private HttpContextBase context = null;
        /// <summary>
        /// Allows HttpContext injection, mainly for testing purposes
        /// </summary>
        public HttpContextBase CurrentHttpContext
        {
            get
            {
                context = context ?? new HttpContextWrapper(HttpContext.Current);
                return context;
            }
            set
            {
                context = value;
            }
        }

But it would be exactly the same to do it via a constructor. Then, you just have to replace all your HttpContext.Current calls with calls to the property CurrentHttpContext:

var foo = CurrentHttpContext[...];

When you see there’s an assembly called “Abstractions” with abstract classes and wrappers for preexisting concrete or even sealed classes, it becomes obvious that the ASP.NET MVC team has written its code with testability in mind, and that’s great! So kudos to them

I’m glad to announce the first Beta Release of Neyun has been oficially launched!

Neyun is a web application which lets you navigate and query through all your pictures, emails, messages, videos and links, no matter if they come from your RSS feeds or your Facebook, Gmail, Twitter, Flickr, YouTube, Digg or Del.icio.us accounts.

Neyun automatically imports your data and extracts tags from it. Then you can visualize it in an homogeneous way, just like if it all came from the same application. You’ll have a tag cloud where you’ll find all these extracted tags. Using them, you’ll be able to filter your data: you can select one of them to see all its elements, or intersect two of them to see which elements are tagged with both.

But these are not the only ways of filtering your data. By activating the “timeline view” you’ll be able to see the elements matching your criteria ordered above a timeline, which gives you the ability to see when an element has been added at a glimpse.

If these filters are not enough, you can do a full text search over the elements.

Neyun also extracts relations between your elements. So, let’s say you are browsing a Facebook contact’s profile (let’s call him John Doe… pretty creative I am), you can see John’s pictures, events, etc, listed in the same place. So, what if you have a picture of your boyfriend in Flickr and somebody else of your Facebook list uploaded another one? You’d like them to be related to your boyfriend, wouldn’t you? Ok, we know Neyun is not thaaaaat smart to realize of this relation (at the moment… just give us some time to look into it ), but you can manually set it.

I could spend hours talking about Neyun (I acknowledge I’m not very objective when I do), but why don’t you try it yourself?  Go get your beta at Neyun’s homepage, and let me know what you think!

Martin

For many, programming nowadays means writing some code in an object oriented programming language such as C#, Java or C++ at a lower level. Well, those are the mainstream languages nowadays and the reigning paradigm is the object oriented one.

What is a programming paradigm? It’s a philosophical and theoretical framework within which solutions to problems of algorithmic nature are formulated. What a definition! Well, to say it simpler, a paradigm represents a way of thinking, thus a programming paradigm is one way of thinking about programming.

Let’s take for example C#, Java, C++, etc. They’re all in fact imperative object oriented languages. How do you think about programming when you use an imperative language? You’re thinking in state, which is a snapshot of your machine’s memory. Can you guess what I was thinking about when John Doe asked me to write a function which adds 5 to a given parameter and I wrote this?

int Add5(int x)
{
  for (int i = 0; i < 5; i++)
  {
     x++;
  }
  return x;
}

This is what I thought: “x comes with a value, stored somewhere. I can add 1 to that value and store it again. So now I have x+1 instead. The next time I add 1, I’ll have x+2. If I add 1 five times… bingo!”

Ok, if I did think that “smoothly” it’ll take hours to write the simplest program, and I would be fired in a couple of days. I, as any imperative programmer, do it pretty naturally, but that’s because we have assumed and internalized the paradigm!

That kind of reasoning (“I have this value stored here, then I transform it in this way, then I transform the result in that way, etc”) is exactly what we do when we demonstrate correctness of an imperative program according to a specification.

And that happens in general: the mechanisms to prove correctness of a program in a given paradigm are deeply connected with the way we think when we write programs in that paradigm.

An alternative to the imperative paradigm is functional programming. This one may not be that familiar to all programmers, since it’s more rarely used in industry. Those with an academic background will know it for sure.

What are we thinking of when we program with a functional language? We are thinking in composing and applying functions. There’s no state here. If we need to repeat some task, we make use of recursion. Programs look a lot more like math equations than in imperative. Functional programming lovers, say a functional program is so much more declarative and self-evident than an imperative one. I agree, but that’s true once you got used to think “in functional”. At first, if you come from imperative programming, it’s not that easy to get it.

Let’s see our completely useless “Add5″ function written in Haskell, a functional programming language:

add5 :: Int -> Int
add5 x = addN 5 x

addN :: Int -> Int -> Int
addN 0 x = x
addN n x = 1 + addN x (n-1)

I had to use an auxiliary function called addN, which let’s me recurse over N and repeatedly add 1 five times. That’s what I meant when I said repetition is performed through recursion.

Now, have you noticed the arity of addN? Int -> Int -> Int. To simplify things, we could say the 2 first parts of it mean the function expects 2 ints as parameters, and the last one says it returns an int.  That would work. However, it would hide the power of functional programming. In functional programming, functions are first class citizens. They can be understood as operations as usual, but they can be used as values also. They can even be data structures. The way to parenthesize Int -> Int -> Int, is Int -> (Int -> Int). What does that mean? addN is a function which takes an Int and returns another function! The arity of the new function is Int -> Int. Knowing this, we could redefine add5 in a simpler way:

add5 = addN 5

See? We don’t need to use both parameters of addN at once. If we did, we would obtain an int. Instead, we just give it the first one, and we get a function! So we defined a whole family of functions by defining a single function! We can do this due to another feature of the paradigm: partial application of functions. We are partially applying addN when we just give it the first param.

This is just the top of an iceberg about functional programming. Trust me, it’s amazing.

How do we prove correctness in functional programming? Basically through induction. Since the repetition artifact is recursion, and all the statements are given as equations, this mathematical tool is all we need. That’s one of the advantages of not having to rely in state to perform our computations. And that gives us the clue of what we think of when we program in the functional paradigm: recursion and equations.

Finally, a third paradigm (there are dozens of paradigms!): the logic paradigm. It has a pretty famous language: Prolog.

What do we think when we program in the logic paradigm? Well, we think in what we don’t know and what we do know. The result we want to get is what we don’t know. The program consists in stating which are those things we don’t know and we want to know (called “goals”) and stating which things are true (called “knowledge base”).  Let’s go back to add5, now in Prolog:

nat(zero).
nat(suc(X)): - nat(X).

add(zero, X, X).
add(suc(X), Y, suc(Z)) :- add(X, Y, Z).

add5(X, Y) :- add(X, 5, Y).

I also needed to define a couple of auxiliaries. First of all, in Prolog all our statements are predicates. A program is a set of predicates and a goal. In the first 2 lines, we define the naturals. We assert to things: “zero is a natural” and “if X is a natural, then suc(X) is a natural”. Then we define the relation “add”. First we say that the result of adding zero to any number is the same number. Then we say, “if I add one to one of the operands, then the result also must be greater by one”. As in functional, repetition is expressed through recursion. Then we define add5 in terms of add.

To execute this program, we have to ask Prolog to find what we don’t know in terms of this knowledge base. We would do it like this:

? add5(10, X)

And Prolog would answer 15. If there were more than one feasible result, we could ask Prolog to return another answer. The question means: “find any X such that add5(10, X) is true”. Prolog then tries to infer X from the given knowledge base.

How do we prove correctness? Well, the answer is… we don’t! The one who proves correctness in this case is Prolog. We just state truths, then Prolog proves that the result it found is correct according to those proves.

Knowing more than one programming paradigm helps us think in different ways when it comes to solving a problem. You may not use many of them usually, but it’s a great mind exercise to at least try them a couple of times. If you didn’t yet, I hope this post encourages you to take a look at them!

Martin

We are developing a Silverlight application since some months ago. As you may know, an RTM of Silverlight 2 has been released recently, so we decided to migrate our project to it. Surprisingly, it stopped to work in IE 6 after the migration. The exception raised by Silverlight looked like:

[BrowserHttpWebRequest_WebException_RemoteServer]

Arguments:NotFound

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=2.0.31005.0&File=System.Windows.dll&Key=BrowserHttpWebRequest_WebException_RemoteServer

Pretty mysterious, isn’t it? Well, fortunately I googled it, and I found the following thread in the official Silverlight forum:

https://silverlight.net/forums/p/42908/123627.aspx

According to Vijay Devatha, from the Silverlight team:

This is a known issue that, unfortunately, currently has no workaround. We definitely plan to fix it in the following release; but like I said, for the time being, to get this scenario to work in on IE6, you’re going to have to either disable compressing the content (on the server side), or have the server not set the Cache header to no-cache.

I didn’t have the Cache-Control header field set to no-cache, so that wasn’t the problem. Then I tried disabling GZip compression and it worked!

Great but… GZip compression was there for a good reason. Having to disable it for Firefox, Safari and even IE7 just because it didn’t work with IE6 didn’t sound like a great deal… So the most reasonable workaround seemed to disable GZip just for IE6.

Using an exclusion list of user agents to disable GZip in Jetty for some browsers

In the second part of this post, I’ll show how to disable GZip compression for a fixed list of browsers. It is simple, but I had to figure it out from scratch, because I didn’t find much documentation on the subject.

If you want to implement GZip in Jetty, you just have to add a GZipFilter to the filter chain of your Jetty context. Usually, this is done as follows:

context.addFilter(GZipFilter.class, "/*", 0);

Now, we want GZipFilter to be applied just when the request comes from some browsers. There’s an initialization parameter which allows us to do that: excludeUserAgents.

So the above code now will look as follows:

GzipFilter gzipFilter = new GzipFilter();

FilterHolder filterHolder = new FilterHolder(gzipFilter);

filterHolder.setInitParameter("userAgent", "(?:Mozilla[^\\(]*\\(compatible;
    \\s*+([^;]*);.*)|(?:.*?([^\\s]+/[^\\s]+).*)");

filterHolder.setInitParameter("excludedAgents", "MSIE 6.0");

context.addFilter(filterHolder, "/*", 0);

Since we need to customize some parameters from GzipFilter, we can’t let the Jetty Context instantiate it anymore.

There’s an overload of addFilter which expects a FilterHolder object instead of a Class. The FilterHolder will act as a proxy and will set up the GzipFilter instance for us when a request has to be satisfied.

So we inject the GzipFilter instance into the FilterHolder constructor and set up the custom parameters we need. The “userAgent” parameter is mandatory, it states which user agents will be processed. The regex I’m using should match any of the main browsers out there.

Now we just need to exclude the browsers we don’t want to receive gzipped content. This is done by setting the “excludedAgents” parameter. It expects a comma separated list of user agent ids. In my case, I just needed to filter out IE6, so I set “MSIE 6.0″

This way we can have our application working on IE6 while we wait for the problem to be fixed.

Martin

Last Monday I had the opportunity to join Brian Cardiff at OneDay Santander to give a conference on ASP.NET and Ajax. OneDay Santander was an event organized by Microsoft Argentina attended by Banco Santander’s IT team.

It was a great experience, which let me learn a lot from an outstanding speaker like Brian and be in touch with colleagues from Microsoft and Banco Santander.

Thanks Miguel Sáez, Brian and Manas for this great opportunity!

PS: you’ll be able to download the conference’s slides from Brian’s blog soon…

The Google Maps API provides a number of methods to make it easier to accomplish this task. One only has to take the time to explore them and think how to combine them to get the solution.

It’s not a hard thing to do, but in case you’re a lazy guy, here goes a short snippet which given an array of GLatLng objects will zoom the map to let you see all those coordinates, and pan it so that the center matches the center of the smallest rectangle that contains all of them.

map.checkResize();

var latlngs = getLatlngs();

var latlngBounds = new GLatLngBounds();

for (var i = 0; i < latlngs.length; i++){
   latlngBounds.extend(latlngs);
}

map.setZoom(map.getBoundsZoomLevel(latlngBounds) < MAXIMUM_AUTO_ZOOM_LEVEL ?
   map.getBoundsZoomLevel(latlngBounds) : MAXIMUM_AUTO_ZOOM_LEVEL);

map.panTo(latlngBounds.getCenter());

Let’s assume “map” holds a GMaps2 instance, “getLatLngs()” returns the set of coordinates we want to use and “MAXIMUM_AUTO_ZOOM_LEVEL” is an integer.

GLatLngBounds is a class of the Google Maps API which represents a rectangle in the map, being its limits defined by GLatLng objects. This class provides a method “extend” which makes the bounds object enlarge enough to surround the given coordinates.

The method getBoundsZoomLevel in GMaps2 returns the maximum zoom level which we’d need to set in order to be able to see the complete rectangle represented by the given bounds object.

So we create a bounds object which surrounds all the coordinates, get which level of zoom we would need to see it completely, then pan to the center of it.

The constant (or variable, whatever) MAXIMUM_AUTO_ZOOM_LEVEL is to avoid zooming to much when we only have one coordinate (or few of them rather close to each other). If the point is in the middle of the sea and you don’t do this, you’ll just see the sea’s sky-blue. Of course, you may want this behavior.

Finally, the call to checkResize() in GMaps2. That shouldn’t be necessary, but I found (totally empirically) it depends on where you host the map. In the case which inspired this post, I was hosting it in an ExtJS GMapPanel inside an ExtJS Viewport. It used to work in unexpected ways, the map would stay uncentered or the zoom level would be incorrect. Then I realized that if I resized the browser’s window, it began to work. Going back to the checkResize() method, it makes the map check if there was a resize of its parent. If that’s the case, it adjusts itself to fit the new size. Adding that line at the beginning of the snippet made it work, so I guess the problem may be due to the order in which the different parts of the application are rendered (which somehow results in an inconsistent state of the map).

Martin

I know I promised a mini DEVS model for this post. But I bumped into this interesting thing and I wanted to share it.

We are currently working on a JSF web application which has a GWT component in it. To debug the app, we have to compile the GWT component and put it inside the static content folder. This is just ok to debug the JSF part of the story, but what about the GWT component?

Well, if you deploy your app with the already compiled GWT component (i.e.: just a bunch of javascript and html files) and run it, then you can also run the GWT’s hosted browser in debug mode and enter the URL of your just-deployed JSF web app.

Voila! Now you’re able to debug your GWT component as usual, putting breaks wherever you want to, inspecting values and expressions, etc. This was really surprising to me, the hosted browser knows how to go back from already compiled javascript code to our original Java source. But then I realized it’s exactly what happens when you click “Compile and Browse” in hosted mode, so it was totally reasonable.

Martin

Just to gather new tools to help me in my M. Sc. thesis, I’m taking a course on Discrete Event Simulation. This course in fact is not as general as its name may suggest. It focuses mainly on modelling with a formalism called DEVS (which stands for Discrete Event System Specification), created by Bernard Zeigler.

The choice of the DEVS formalism instead of other tools (like Petri nets or Finite State Automata, for example) was in part because the professors and teaching assistants have been doing research with it for years, but also because there are transformations from almost all the other formalisms’ models to DEVS models. Moreover, there are no transformations from DEVS models to a number of those formalisms’ models, which is a good indicator of the robustness of DEVS.

So, let’s see what a DEVS atomic model looks like:

M = < S, X, Y, internal-delta, external-delta, lambda, ta >

• M: a DEVS atomic model
• S: sequential state set
• X: external input event set
• Y: external output event set
• internal-delta: internal transition function
• external-delta: external transition function
• lambda: output function
• ta: time advance function

We relate this functions and sets as follows (I’ll mix some semantics explanations to give you a taste of the way we think about DEVS models):

• ta: S -> R+0
  Given a state in our model, ta relates it to a time value (positive real, zero or infinite). Whenever our model changes its current state, a kind of global variable (let’s call it e, for elapsed time) is reset to 0 and is incremented as events occur. When et reaches ta(currentState) the internal-delta function is “invoked”.
• Q = { (s, e) | s in S, 0 <= e <= ta(s) }
  We call Q the total state set. The variable e is the elapsed time. It’s importante to note that if e surpasses ta(s), (s, e) is not an element of our total state set.
• internal-delta: S -> S
  Given a state in our model, internal-delta relates it to another state. When
  e = ta(s), internal-delta tells us which is the new “current state”.
• external-delta: X * Q -> S
  This function depends on a state s, the elapsed time e and an external input event, and relates this triple to a state s’. Intuitively, it models the response of our model to external stimuli.
• lambda: S -> Y

Maps a state to an element of the output event set. It’s the way we let our model raise events to the “outer world”.

In the next post, I’ll try to put all this together in a tiny model, to see it “alive”.

Martín

In the first part of the article, we showed how to let a JSF bean drive a GWT module through an exposed JavaScript API. Now we’ll see how to make a GWT module raise events in a way such that a call to the server is made letting it respond accordingly.

Defining the events to be raised

We’ll start by defining which events will be raised by our GWT module. Let’s put them all together in a single interface, which as a result of hours of thinking and thinking I decided to name IHelloWorldEventHandlers.

public interface IHelloWorldEventHandlers {
	void requestHelloWorldAlert(String name);
}

Well, there will be only one event. Suppose we have a textbox containing the user name and a button which when clicked will raise the event.

Remember that one of our goals is to let JSF handle the request to the server, so the event will be implemented as a call to a JavaScript function which we’ll suppose to have already been defined somewhere. The concrete class which we’ll be called in the button’s onClick looks like the one below:

public class HelloWorldEventHandlers implements IHelloWorldEventHandlers {

	public native void requestHelloWorldAlert(String name) /*-{
		$wnd.requestHelloWorldAlert(name);
	}-*/;
}

Some things to point out about this. You’ve probably have noticed that the method is defined with the “native” modifier. Think of this just as a way of wrapping a piece of JavaScript code with a Java method definition.

The second thing to point out is the $wnd reference. This is just a name for the global JavaScript scope in the browser.

The last, but the most important is that we are following a convention in the way we write the method body. The method in JavaScript is called exactly the same as the Java event handler, and it also has the same arity. This way we’ll be able to do some useful stuff by reflection later.

Dynamically Generating JavaScript handlers for the events

Now we have to create the JavaScript functions which will be called. The first  idea that comes to mind is to write a <a4j:jsFunction> for each event. Well, that would work, but we can do better than that. There’s a common pattern between all the functions that we’ll need to write: we’ll want an action to be executed on a backing bean and we’ll have to create an <a4j:actionParam> for each parameter in the function.

We can then use reflection and the RichFaces and JSF object models to dynamically generate the functions for us. We decided to implement this through a new custom component. Again, this article does not intend to show how to write custom JSF components, but we’ll describe the basic concepts involved in the solution.

Our component we’ll need three attributes: the name of a backing bean, the name of a Map object property of the same bean and the name of an element to reRender.

We’ll override the setProperties method of our custom component CustomComponentTag class to add the dynamic generation of the jsFunction components through the following code:

FacesContext currentFacesCtx = FacesContext.getCurrentInstance();

Application application = currentFacesCtx.getApplication();

String reRenderedComponentId = (String) component.getAttributes()
				.get("reRenderedComponent");

String beanId = (String) component.getAttributes().get(
			"bean");

String functionParamsMapId = (String) component.getAttributes().get(
			"functionParams");

for (Method method : IHelloWorldEventHandlers.class.getMethods()) {

	HtmlAjaxFunction gwtEventHandler = new HtmlAjaxFunction();

	//Set the name of the a4jFunction to be the same as the method
	//name in IHelloWorldEventHandlers
	gwtEventHandler.setName(method.getName());

	gwtEventHandler.setReRender(reRenderedComponentId);

	gwtEventHandler.setAction(application.createMethodBinding("#{"
			+ beanId + "." + method.getName() + "}", null));			

	int i = 1;
	for (Class paramType : method.getParameterTypes()) {

		String paramName = "Param" + i;

		HtmlActionParameter htmlActionParam = new HtmlActionParameter();

		htmlActionParam.setName(paramName);				

		htmlActionParam.setAssignToBinding(createValueBinding("#{"
			+ beanId + "." + functionParamsMapName
			+ "['" + method.getName() + "." + paramName + "']}"));

		gwtEventHandler.getChildren().add(htmlActionParam);

		htmlActionParam.setParent(gwtEventHandler);

		//Important: we have to add this line in order to
		//pass the parameter.
		//It is not enough to add the actionParam as
		//a child of the a4j:jsFunction.
		gwtEventHandler.addActionListener(htmlActionParam);

		i++;
	}
	component.getChildren().add(gwtEventHandler);
}

Note that we only need to know the IHelloWorldEventHandlers to generate the a4jFunction components. If we refactor the handlers changing their arity or name, this stuff will go on working. The only caveat is that we are forced to write those weird native methods in the implementation of IHelloWorldEventhandlers, but we think it is possible to work around that problem using GWT Generators also.

Another thing to point out is that we are using the Map to pass parameters, where the method name concatenated with a generated param name is used as key.

Martín