Dynamically Generating A TableLayoutPanel

The TableLayoutPanel in .NET is a great control for organizing other controls on a Windows form.  We here at ImageSource use it all of the time.  Most developers just generate all of the rows and columns from designer and never mess with the control again at runtime.   Unlike the ListBox and ListView controls,changing the Rows and Columns at runtime is not immediately obvious in the TableLayoutPanel.

The following set of code will demonstrate will demonstrate a way to accomplish this non-intuitive task.  First, we start with a very basic form with a TableLayoutPanel added to it:

Empty TableLayoutPanel

Empty TableLayoutPanel

Next, I add the following code to the form:

private void GenerateTable(int columnCount, int rowCount)
{
   //Clear out the existing controls, we are generating a new table layout
   tableLayoutPanel1.Controls.Clear();

   //Clear out the existing row and column styles
   tableLayoutPanel1.ColumnStyles.Clear();
   tableLayoutPanel1.RowStyles.Clear();

   //Now we will generate the table, setting up the row and column counts first
   tableLayoutPanel1.ColumnCount = columnCount;
   tableLayoutPanel1.RowCount = rowCount;

   for (int x = 0; x < columnCount; x++)
   {
      //First add a column
      tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.AutoSize));

      for (int y = 0; y < rowCount; y++)
      {
         //Next, add a row.  Only do this when once, when creating the first column
         if (x == 0)
         {
            tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.AutoSize));
         }

         //Create the control, in this case we will add a button
         Button cmd = new Button();
         cmd.Text = string.Format("({0}, {1})", x, y);

         //Finally, add the control to the correct location in the table
         tableLayoutPanel1.Controls.Add(cmd, x, y);
      }
   }
}

This code, when run from our test application, will generate variable numbers of rows and columns withing the TableLayoutPanel.  Each cell will then have button inside, displaying the cell coordinates within the button text.

3 Column, 2 Row TableLayoutPanel

3 Column, 2 Row TableLayoutPanel

4 Column, 8 Row TableLayoutPanel

4 Column, 8 Row TableLayoutPanel

1 Column, 1 Row TableLayoutPanel

1 Column, 1 Row TableLayoutPanel

Making Form Screenshots In .NET

Have you ever need to take a screenshot of your .NET form from code within the form?  Some sort of print screen method?  Don’t touch that PrtSc button just yet, there is another way.

No, I’m not talking about using the gdi32.dll or the Visual Basic Power Pack.  The .NET graphics object has it’s own built in screenshot-taking ability, and ImageSource is here to help show you how to use it.

Getting a screenshot of your form is as easy as instantiating a Bitmap object (sized to your form’s width and height), creating a graphics object from that bitmap and finally calling Graphics object’s CopyFromScreen method.  The code below demonstrates how to do this:

private Bitmap GetFormScreenshot(Form frmRef)
{
   //Setup the bitmap and graphics objects
   Bitmap bmp = new Bitmap(frmRef.Width, frmRef.Height,
      PixelFormat.Format32bppArgb);
   Graphics gfx = Graphics.FromImage(bmp);

   //Take the screenshot
   gfx.CopyFromScreen(frmRef.Bounds.X, frmRef.Bounds.Y, 0, 0,
       frmRef.Bounds.Size, CopyPixelOperation.SourceCopy);

   return bmp;
}

Wow, it’s just that simple.  Enjoy the rest of your day knowing that you’ll be screenshotting your troubles away.

Distributed Capture & Document Capture

Distributed Capture & Document Capture

Capture is only a part of the ECM universe, but a crucial part nonetheless. Once a document is captured into an Enterprise Content Management system, it must be stored, perhaps put into a workflow process, archived, and made available for retrieval. Retrieval is in many ways the main thrust of an ECM system (no point putting it in there if you can’t ever see it again); retrieval is dependent on the index values associated it with it, which brings us back to capture.

Capture is the process of getting documents (and their data) into the system. Distributed Capture is the mechanism by which documents from a variety of locations (near and far) enter the system. The easiest way to do this is to utilize the file system. When different offices (or locations — work from home, anyone?) of a company are on the same network, specific locations on the shared file system can be designated for various purposes. Different directories can be used to input different kinds of documents.

I thought we were going to be paperless by now

This type of taxonomy works okay for existing electronic documents (Word files, spreadsheets, PDFs, etc); but what about hard-copy? The seemingly ubiquitous paper which exists in our so-called paperless office? Well, it needs to be scanned in. You want documents classified in a consistent manner, and the metadata (index values and other interesting info about the document) as accurate and as consistent as possible.

Consistency is key. When setting up a company-wide ECM system, it is a a key success indicator that everybody to follow the same set of procedures and guidelines involved in getting documents into the system. This can be accomplished by having a distributed capture system available.

The company I work for makes and sells a distributed capture system today. As we go through our roadmap discussions for where we want to take the product to solve customers’ future problems, we developers have have to grapple with some fundamental issues, mainly, what is the best technology to use as a platform.

It’s easy to imagine using the web to provide distributed document capture throughout your enterprise. You have centrally managed web servers. Everyone has a web browser on their computer (and cell phone, for that matter). In fact, anyone who’s ever attached a document using an html-based email program has already exercised the base technology necessary for a distributed capture system. One key advantage of Distributed Capture is that you get rid of paper at the source; take a moment to think about the implications of that. It’s okay, I’ll wait.

What else is needed…
There are two main improvements to simply uploading a document by way of a web page. One is the acquisition of the paper document, the other is the user-experience and business process to build into the hosting program. I’ll go into the physical acquisition in a later post, but the user-experience of a distributed capture system has to provide two things to be successful. It must be Dead Simple to Use and it must provide the functionality necessary to get good data into the system.

Our checking with users shows again and again that a single button is an attractive interface, with more functionality exposed as needed. One key question developers raise is what technology to build the interface in?

Technology Pros Cons
HTML Standards compliant, supported by all browsers. Primarily a static user interface. AJAX can add some Zing to the interface, but is problematical in certain situations (back-button, anybody?)
Flash Ubiquitous; Flash player in something like 90% of all browsers. Began life as an animation scripting language, although ActionScript 3.0 is more sophisticated. IDE support is poor. Hard to get my head wrapped around the timeline model.
Silverlight Microsoft integration and toolset. Microsoft has an army of developers working on tools and technologies; big changes in how Microsoft handles internet computing are emerging. Current market adoption is a little slow. Microsoft talks the big talk about cross-platform now, but has a history of embracing, extending, then co-opting technology (in my opinion)
JavaFX Ubiquitous. Many very good VM’s out there. Java itself is well suited to backend, server-side development. UI is not Java’s strong-suit; AWT ring a bell?
Platform Specific Code Leverage native functionality, look and feel. Lots of code bases to implement and maintain. Cross-platform toolkits and libraries tend to dumb-down the functionality to the lowest-common denominator.

I’m sure anybody reading this has ideas of their own about the pros and cons of the platforms listed out, and perhaps other ideas to add to the list. I welcome your comments.

Share on Twitter

A Good UI Goes a Long Way

From the model, view, control architecture of programming, the model and control aspects are the undoubtedly the most important.   Without a solid back-end code base, an application might as well not exist.  However, from an end user perspective, the view can make  all of the difference.  After all, that is always their first impression of the application.

For standard users, the User Interface is going to be their only interaction with the whole application.  It will shape their  perception of the application, how it operates and what it’s actual functionality is.  I’ve seen users refer application functions  by what is on the button icon (like the “faucet” or the “light bulb”).  If any aspect of a front-end UI is confusing, illogical or  buggy, user adoption will suffer.

During my time both working on applications and using them, I’ve seen what what works well for UI design and what doesn’t.  These  might seem like common sense, but but it is amazing how often they are overlooked.

 

Simplicity Minimalist design is useful to not overwhelm users.  Providing tons of options upfront to the users can scare them.   Buttons and textboxs all over the starting form may seem like a good idea to a developer, but it will most likely lead to  frustration for anyone actually using the system.  It can also lead to added complexity and bugs in the application, as giving the  user more things to click on can give them more things to break.

A good example of a good minimilist design is the standard Google homepage, which just provides a logo, a search box and a button,  all on a white background.  There is no confusion as to what the user should be doing from there.

A Flowing Layout Does the form flow well?  The labels, textboxes and buttons should be positioned to move the user through the form  in the same manner that they would normally read text (left to right, top to bottom, for example).  If a logo is used, it should be  placed in a location that is not obtrusive to the user, like the top left corner or on the side.  Buttons should be grouped together  and should be a uniform size with each other, not wildly different.  The order in which a user tabs through the application should  make sense, not have the user jump all over the form.  Basically, is navigating your form intuitive to the user or do the need a three week course in its basic operation?

Scalability Can your application be resized?  Does it look good maximised, or when the user starts to shrink the window below it’s  default size?  Or when the window is stretched, do all of the pieces just stay in place and leave room for a large grey blob of  nothing?  If the form controls are not supposed to move, it is always a good idea to make sure the form cannot be resized or the web  application is a static width (for a good example of static width, see the site for Nexus ECM).  Also, keep in mind how your form looks on different sized monitors.  It might look just fine on your  1680 by 1050 pixel screen, but it might be too large for someone who is running 800 by 600.

Standards This one applies a bit more to desktop applications than web sites.  When the application is open, does it blend in nicely with the rest of the operating system, or is it wildly out of  place.  While a unique color scheme and style can make an application look refreshing, it can also be a distraction to the user,  constantly reminding them that your application is different from the rest.  Good applications can integrate themselves into  whatever system they are running in, but still offer a unique look and feel to the user.

A good example of matching operating system standards is FireFox 3, which has adapted its default theme to blend in based on the user’s operating system, whether it is Windows XP, Vista, Mac OSX or Linux.

I will continue to delve deeper and explore these concepts in future blog posts, diving further into aspects of desktop and web  application UI design.

Richard Franzen
Developer
ImageSource, Inc.

Share on LinkedIn   Share on Twitter

Follow

Get every new post delivered to your Inbox.