Guillermo G. Blog

Tool: Balsamiq Mockups Review

gugonzar — Mon, 31 Aug 2009 23:58:50 GMT

One of the most recurrent activities in the Software Development Process, is create prototypes to represent client’s wishes for their application’s appearance. Normally (before I know Balsamiq Mockups) I created a presentation-only solution in Visual Studio to draw the forms, then dragging and organized controls, or creating a drawing in Visio to achieve the same result.

But frequently the client forgets that this images are prototypes, and wants some functional action, because the application is “ready” and looks like a final version app, the client creates a wrong idea of that's the definitive application’s appearance.

Some days ago, a friend (Gabriel Porras) sent me a prototype of one of their applications, and requested me a short review. I asked him what kind of tool he used to create this prototypes and the answer was: Balsamiq Mockups.

Balsamiq Mockups is an Adobe Air application which you can use to quickly develop mockups using its 75 pre-built controls. It feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. When you are done with the mockup, you have the option to export your work as an image (PNG file) or an XML file.

Some Image Samples (taken from Balsamiq site):

And this is a Mockup for a real web application that I made:

In conclusion, the interface of Balsamiq Mockups is very easy to use, it has a toolbar with all the “controls” and all you have to do is just drag and drop onto the design place. You can create a lot of prototypes quickly and with a appearance of hand made mockups.

A short demo video to learn to use the tool, and quickly you can convert in a mockup master.

Thanks to Gabriel Porras for share with me this excellent tool, and special thanks to Valerie Liberty for your support!

Tool: A Free Online JavaScript Compression Tool

gugonzar — Wed, 04 Mar 2009 23:15:18 GMT

I was testing a web page using Microsoft Visual Studio 2008 Test Suite, when I saw the final report, it shows me that this page have big size (aprox. 800 Kb); wow it's a big web page, but it's a page that don't contains large images or other graphical elements, but have a lot of JavaScript code included.

Searching for a tool to minimize those javascript files, I found this site Bananascript.com, that's a free online tool to compress javascript files into very small and self extracting files.

I uploaded the biggest JavaScript file that was 600 Kb aprox, and clicked the compress button, the result .... a new compressed file of 300 Kb aprox, working without problems in my web project.

Then if you need to minimize a JavaScript file you can use this free tool, thanks to "wildcard_swe" for this work!.

Enjoy It!

Info: Running WcfTestClient Tool in a PC without VS.Net 2008

gugonzar — Mon, 23 Feb 2009 17:09:05 GMT

Microsoft Visual Studio .Net 2008 comes with a tool to test our WCF services called WcfTestClient, you can run it from "C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\WcfTestClient.exe". But what happens if you need to run this tool to test a WCF Service in a PC that don't have Microsoft Visual Studio .Net 2008 installed?

Well, you simply need to copy the listed files from the next path "C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\":

SvcUtil.exe
SvcUtil.exe.config
WcfSvcHost.chm*
WcfSvcHost.exe
WcfSvcHost.exe.config
WcfTestClient.chm*
WcfTestClient.exe
WcfTestClient.exe.config

*Files marked with an asterisk are optional.

But if you run the app shows you the next error:

Assembly Microsoft.VisualStudio.VirtualTreeGrid, Version=9.0.0.0, Culture=neutral, PublicKeyToken=b03f7f11d50a3a was not found. Reinstall the assembly or Visual Studio. The application cannot continue and will exit.

And now you need to add to the previous files the next file that resides in the GAC:

Microsoft.VisualStudio.VirtualTreeGrid.dll

Maybe you're thinking right now ... hmm? How I can get a file from the GAC? ... It's easy!

Press the Windows Key + R, and then the Run Window appears, just copy the next path:

%windir%\assembly\GAC_MSIL\Microsoft.VisualStudio.VirtualTreeGrid\

... and you will find a folder with the VirtualTreeGrid assembly inside. Copy this file to the same folder where the other files resides and you are ready to use WcfTestClient from a PC that don't have Microsoft Visual Studio 2008 Installed.

UPDATED April 27, 2009:
You can download all the files here.

Enyoy It!

Tip: System.Data.Entity and ClickOnce Deployment Issue

gugonzar — Wed, 20 Aug 2008 19:59:29 GMT

I was developing a Windows forms application in .net framework 3.5, and I needed to include ClickOnce Deployment in my solution project. Recently I downloaded and installed the last Service Pack (SP1) for Microsoft Visual Studio 2008 and .net framework 3.5, so far, everything was normal. The only application setup prerequisite was .net framework 3.5.

I published my application in a web server normally, and when I click the Install button to start the install process, I received the next error message from the ClickOnce Installer:

The funny thing is that I didn't have any reference to System.Data.Entity in my solution, so? what's wrong? Why was ClickOnce requesting this assembly?

Well, after a quick search in Google, I found and read this Post from Mat Steeples, and I understood why ClickOnce was referencing System.Data.Entity assembly, simple!, I included a new feature (Create a Desktop Icon) and that functionality requires the mentioned assembly.

Thanks to Mat Steeples for sharing it.

Article: Some Tips for Managing and Motivating Developers...

gugonzar — Fri, 01 Aug 2008 13:57:04 GMT

An interesting article wrote by Esther Schindler with some tips for Developer Management and Motivation.

Managing and Motivating Developers: Tips for Management Cluefulness
Encouraging productivity from your programming staff--at least in the developers' estimation--requires a few special techniques.

Enjoy it!

Articulo: Web Application Projects vs Web Site Projects

gugonzar — Thu, 24 Jul 2008 20:01:28 GMT

Hace algunos días (bueno un par de meses ya), un compañero de trabajo me pregunto sobre las consideraciones que debería tener, al momento de crear un nuevo proyecto de tipo Web, como saben desde la versión 2.0 del .net Framework (y Visual Studio .Net 2005) es posible crear un nuevo tipo de proyectos denominados Web Projects que a diferencia de su antecesor, tiene una serie de características que se deben considerar al momento de su elección.

Expongo algunos ítems sobre ambos tipos de proyecto; consideremos la sigla WSP para Web Site Projects y WAP para Web Application Projects:

Los WSP a diferencia de los WAP no poseen archivo de proyecto, se basan en el sistema de archivos.
Los WSP trabajan bajo un nuevo modelo de compilación diferente al utilizado por los WAP.
Ambos tipos de proyecto soportan su implementación sobre IIS o el servidor Web incorporado denominado ASP.NET Development Server.
Y muchas más...
Y otras más...
Ahhh y par de consideraciones cuando se tiene VSTS.

Como ya hay bastante sobre el tema me puse en la tarea de investigar y reunir algunos enlaces donde mencionan sus principales diferencias y cuando es mejor usar uno u otro, yo soy mas dado a utilizar Web Application Projects, cuando necesito incorporar proyectos Web a mis soluciones.

Referencias utilizadas:

ASP.NET 2.0 - Web Site vs Web Application project por Maor David
VS 2005 Web Project System: What is it and why did we do it? por Scott Guthrie
Difference between web site and web application in Visual Studio 2005 por Tony John
Web Site Projects vs. Web Application Projects por jatwood

Quote of the day...

gugonzar — Mon, 31 Mar 2008 14:16:40 GMT

(English Version)
Software and cathedrals are very similar. First we built it, then we pray.
- Anonymous

(Spanish Version)
El software y las catedrales se parecen mucho. Primero lo construimos, después rezamos.
- Anónimo.

(vía Microsiervos)

Tip: ¿Cómo depurar Windows Services?

gugonzar — Mon, 10 Mar 2008 19:46:41 GMT

Muy seguramente si has construido una aplicación de tipo Windows Service (Servicio de Windows), has tenido que hacerte la siguiente pregunta... ¿Bueno y como hago para depurarlo?, resulta que la depuración de un Windows Service no es tan "trivial" como la de otras aplicaciones de la plataforma .net, y hay que hacer uno que otro truquito para poder hacer un seguimiento paso a paso por el código del servicio.

Rodrigo Corral nos comparte un par de trucos útiles para realizar la depuración de una aplicación de tipo Windows Service.

Muchas gracias a Rodrigo por compartir este par de tips.

AJAX: How to create a "Processing" modal window using UpdateProgress and ModalPopup ASP.net AJAX controls

gugonzar — Mon, 25 Feb 2008 00:08:00 GMT

Originally posted as "AJAX: Como crear una ventana ..." in Spanish on December 13th 2007.

A few days ago I had need to implement some functionality based on AJAX technology in a Web application that I was developing. When a request is sent to the server doing click to some web control in the page, AJAX "hide" the Postback to our eyes and sometimes is so difficult to detect, that the page is processing the request based on the click event.

There is an AJAX ASP.net Control that provides status information about partial-page updates called UpdateProgress. It's very useful to "control" the user patience but permits that the user continue interacting with other controls in the application, and rare behaviors can result if the user clicks other button or does other Postback action.

// UpdateProgress Implementation Example

<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">

  <ProgressTemplate>

    <div style="position: relative; top: 30%; text-align: center;">

     <img src="loading.gif" style="vertical-align:middle" alt="Processing"/>

      Processing ...

    </div>

  </ProgressTemplate>

</asp:UpdateProgress>

Unfortunately doesn't exists an ASP.net AJAX control that "blocks" the application while a Postback request is made to the server, but fortunately we can make a powerful combination using this control in conjunction with an AJAX Control Toolkit's called ModalPopup Extender, that allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page.

//Modal Popup Extender Implementation Example

<ajaxToolkit:ModalPopupExtender ID="ModalProgress"

runat="server" TargetControlID="panelUpdateProgress"

BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />

Now, this is the interesting part, take the power of each one of this controls to create a composite functionality that shows a progress indicator to the user in a modal window way, blocking the user interaction with the application while it's processing a previous Postback request. The next code example shows how to do this:

// Include this page directives to reference ASP.net AJAX controls

// from AJAX and the Toolkit

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0,

Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI"

TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %>

// Include ScriptManager tag manages client script for Microsoft

// ASP.NET AJAX pages

<asp:ScriptManager ID="ScriptManager1" runat="server" />

// Include UpdateProgress Control inside a Panel Control

// and then the ModalPopupExtender Control

<asp:Panel ID="panelUpdateProgress" runat="server"

CssClass="updateProgress">

    <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">

      <ProgressTemplate>

        <div style="position: relative; top: 30%; text-align: center;">

          <img src="loading.gif" style="vertical-align: middle"

          alt="Processing" />

          Processing ...

        </div>

      </ProgressTemplate>

    </asp:UpdateProgress>

  </asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server"

TargetControlID="panelUpdateProgress" BackgroundCssClass="modalBackground" 
PopupControlID="panelUpdateProgress" />

It's necessary to add a pair of javasctript functions that are executed at the initial and final AJAX requests.

//JavaScript code included at jsUpdateProgress.js file

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);

function beginReq(sender, args){

    // shows the Popup

    $find(ModalProgress).show();

function endReq(sender, args) {

    //  shows the Popup

    $find(ModalProgress).hide();

You can view that the javascript functions references a variable called ModalProgress, this variable must be created in the ASP.net page's code. The next code shows how to do it:

<script type="text/javascript" language="javascript">

      var ModalProgress ='<%= ModalProgress.ClientID %>';

</script>

<script type="text/javascript" src="jsUpdateProgress.js"></script>

Finally we add a little CSS code to show a gray contour in the modal window, and a cute format to the image and text.

.modalBackground

    background-color: Gray;

    filter: alpha(opacity=50);

    opacity: 0.50;

.updateProgress

    border-width: 1px;

    border-style: solid;

    background-color: #FFFFFF;

    position: absolute;

    width: 180px;

    height: 65px;

You can download the source code from the above code examples, and include an Update Progress Modal Window in your Web applications.

Updated (Sept 02/2009): The source code includes a Visual Basic example of this implementation.

Tool: RegularExpression FSA Visualizer

gugonzar — Mon, 18 Feb 2008 19:59:00 GMT

Thanks to my friend Gabriel Porras for sharing me this excellent tool intended to demonstrate the implementation of regular expressions AKA regex. It's a graphical tool that shows how regular expressions engines use FSA (Finite State Automata) to match regex patterns against text.

This fabulous tool is called Reanimator was built by Oliver Steele. Thanks to Oliver for share this tool with us.

How many regex has built today?

Image: The only valid measurement of code quality

gugonzar — Fri, 15 Feb 2008 20:39:22 GMT

A funny image that shows a "cruel reality" of software development, and a curious form for calculate code quality.

This image was taken from Rodrigo Corral Blog and the original post it's called "Métrica de calidad de código".

How many WTFs / min have their revisions of quality control?

Tip: Hashtable vs SortedList

gugonzar — Tue, 12 Feb 2008 00:12:42 GMT

I wrote this short tip based in a question made from a workmate about a functionality that he wanted that appears in a Hashtable class.

Remember that a Hashtable represents a collection of key/value pairs that are organized based on the hash code of the key, and when a element is added to the Hashtable it's stored based on the hash code of the key, and the elements don't preserves the order based in their insertion to the Hashtable's "bag". If I want to retrieve the elements in the same order that they were placed, there's no way to retrieve them (normally).

And, if I want a collection class which can add key/value elements, and it maintains all the items sorted based in the insertion order? This class exists and their name is SortedList.

A SortedList is a collection of key/value pairs that is sorted by the keys and are accessible by key and by index.

If you want that the items contained in a collection always be "sorted" you need to use a SortedList instead a HashTable. If you don need the items sorted then use a HashTable, beacuse it's more faster than a SortedList obtaining a value from their "bag".

Updated 01-08-2008
An interesting performance test to compare four different implementations of the IDictionary interface posted by Vladimir Bodurov (IDictionary options - performance test - SortedList vs. SortedDictionary vs. Dictionary vs. Hashtable).

Artículo: ¿Documentos o Ejecutables?

gugonzar — Mon, 11 Feb 2008 15:41:49 GMT

Siempre unos de los principales "karmas" de los desarrolladores ha sido la documentación, ¿hasta que punto un proyecto de software debe contemplar un excesivo detalle de generación y mantenimiento de documentación y no perder el norte que es la elaboración de un paquete de software funcional que cumpla con los requisitos y necesidades planteados por el cliente?

A continuación les comparto un interesante post publicado por Rodrigo Corral denominado Documentos o Ejecutables en el cual hace énfasis a lo indicado en el párrafo anterior y que me parece es uno de los eternos dolores de cabeza que se presentan en un grupo de desarrollo de software .

¿Buen documentador o buen desarrollador?

Tip: DataSet.HasChanges and Windows Form Close Button Strange Behavior

gugonzar — Tue, 22 Jan 2008 14:12:00 GMT

I had to write a simple Windows Forms application that haves a form. This form contains a DataGridView control that is binded with a DataSet; this DataSet is filled with data from an XML file. This Windows Forms contains two buttons: "Accept Changes" and "Cancel Changes".

The "Accept Changes" and "Cancel Changes" buttons works greatly, the first one writes the content of the DataGridView control in a XML DataSet, and the second one simply cancel the data insertion, delete or modifying operation and shows a message indicating to the user if wants to discard or save all changes made to the DataGridView control. Both the "Cancel Changes" and the standard window close button executes the following method:

1: private void CloseWindow()

2: {

3:  dvProviders = dgvProviders.DataSource as DataView;

4:  DataSet dsProviders = dvProviders.Table.DataSet;

5:

6:  if (dsProviders.HasChanges())

7:  {

8:   DialogResult saveChanges = MessageBox.Show("¿Save Changes?",

9:   "Save", MessageBoxButtons.YesNo, MessageBoxIcon.Exclamation);

10:

11:   if saveChanges == DialogResult.Yes)

12:   {

13:    //Save the changes from the DataSet to an XML file

14:    this.SaveChanges();

15:   }

16:  }

17: }

But what happens if the user close the window using the standard window's close button and the DataGridView's DataSource (a DataSet) have pending changes?
It is expected that the button execute the CloseWindow method and detect if the DataSet has changes, but in a rare way when the code ask for the result of the DataSet's HasChanges method, it returns a false value and all the changes made in the DataGridView control are lost when the window close.

Well, Fortunately with the help of a coworker that told me that it was a "Bug" or better called "Windows Form's rare behavior". He told me that I need to move the focus of the DataGridView control to other control in the form (for example the Accept Changes button) before asking for the DataSet's HasChanges method, this way the DataGridView control apply the changes to the DataSet and the HasChanges return true (if any change is made to the DataGridView control) and the method's execution continues normally.

  5:     // Set the focus to other control

  6:      btnAcceptChanges.Focus();

7:

  8:      if (dsProviders.HasChanges())

  9:      {

 10:      ...

Thanks to Alberto Puyana for help me find the answer to this windows close button strange behavior.

Articulo: ¿Como saber quien es un buen desarrollador?

gugonzar — Mon, 21 Jan 2008 15:10:06 GMT

Un interesante post publicado por Rodrigo Corral con algunos tips planteados sobre los aspectos que él considera debe tener un buen desarrollador.

¿Que tan buen desarrollador eres?