High performance GUI design

This article comes from my experience in implementing Statistics application (2003) which is a high performance GUI, capable of displaying large amount of data (with formatting) refreshing every 1 second without flickering. The table can be very big 256 x 64.

Below are some important concepts I used:  

– The first important concept in any GUI design is separation of data and view. Never couple them together.

– Data pushing approach: it is simple and usually the 1st approach you can come up with. Once you have data, you simply poplute the view.  
Disadvantage:
1/ This approach requires the view to maintain its own buffer to store your data for drawing. Violate the 1st concept!
2/ Note that when you populate the view, you have push all data (in this case the whole 256×64 table) since you don’t know the current viewing area.
You may say. I can ask the view for current viewing area to just populate that area. The problem is that when user scrolls,  user will see nothing/bad data!

– On-demand drawing/Data pulling approach: retrieve & draw only current viewing area (let’s say it’s 10×10 area); ignore hidden view areas although those area still can be scrolled to. Data is pulled only when needed. This is done via a callback function.  At each refresh, go through all cells in current viewing area, call the callback function with coordinate as parameters. Callback function will use the coordinate to determine what data to retrieve and draw. Note that if you can even implement a dirty flag to reduce drawing. In the end, at any moment, only a 10×10 area is drawn, not 256×64. 
Note that this approach requires you to maintain data buffer 

This concept is also the core concept in AJAX.

– Dynamic formatting: as mentioned above, we have to maintain our own buffer. In this statistic app case, it is just a 2-dimensional array or a matrix. Although data can be integer, fraction (for average), status codes such ON/OFF, CONNECTED/DISCONNECTED/PARTIAL CONNECTED…, we want to maintain as simple data type as possible to save space. So I chose integer. Remembering the callback function above, we can use coordinate to look up the context of a particular cell we are about to draw. If it’s status code, return string “ON” for 1, “OFF” for 0. You implement style object, you can even make “ON” green, “OFF” red. If it’s average number w/ 2 decimal points, return number/100. You get the idea.

Advertisements
High performance GUI design

A thought on Object Pool design pattern

Object pool is not an original design pattern from Design Patterns book. Nevertheless, it is a design pattern. 

Here is definition from wikipedia:

 

In computer programming, an object pool is a software design pattern. An object pool is a set of initialised objects that are kept ready to use, rather than allocated and destroyed on demand. A client of the pool will request an object from the pool and perform operations on the returned object. When the client has finished with an object, it returns it to the pool, rather than destroying it. It is a specific type of factory object.

Object pooling can offer a significant performance boost in situations where the cost of initializing a class instance is high, the rate of instantiation of a class is high, and the number of instances in use at any one time is low. The pooled object is obtained in predictable time when creation of the new objects (especially over network) may take variable time.

 

At my old work, we ran into expensive  memory allocation/destroy problem and came up with the same thing.

I wonder how many people went thru the same problem and came up the same solution and later found out that it had already been solved.

Learning is important to shorten the development time.

A thought on Object Pool design pattern