Wednesday, August 29, 2018

2D Transform Pattern

Intro

Today is one more of my pattern ideas. Nothing very modern today, just a problem I ran into once while developing a UI. I hope someone will find this pattern interesting.

Motivation

This pattern formally describes a subclass of problems in programming. It is very common for a program to transform data from one format to another. This pattern describes the transformation from a 1D array to a 2D tree structure. 
1D arrays often may come from the configuration or the database. It is much easier to represent data as a flat array in the configuration file or in the table. The access time is better, the data structure is simpler. Computer programs are very good at working with 1D arrays.
But that is the programming language side. For the user long 1D arrays are very hard to read even if they are sorted. Humans prefer structured data like trees. 

Here is what we have:

0 1 2 ... n
Object Object Object ... Object

And here is what we'd like to show to the user:



The folders could be themselves objects or they could represent a collection of objects.

Applicability

Use this pattern when you need to transform a one-dimensional array of objects into a tree-like structure.

Structure

In order to transform the array into a tree structure this structure must exist before the transformation. The purpose of the code is to fill it in with the appropriate objects. This structure must consist of 2 node types: 
  1. Folders. They are not objects, they contain other folders or objects as children. Within the scope of this pattern we consider only "static" folders. Folders are not created during transformation.
  2. Object-folders. These are objects that can contain other objects as children. They are selected from the initial array. 
We have 2 things in the beginning: the flat array of elements and a tree structure. Here is an example of the tree structure:
The most important part of the pattern is the way to select objects. The "rules to select objects" are represented as template nodes with one or more selector nodes. Like
public class Template {
    private List<Selector> selectors;
    ...

The selector selects some nodes from the array. Any format can be used to specify the rules for the selector. The selectors are processed in the order they are added and the nodes they select from the array are added to the template. If this is an object-folder then only one object may be selected. Here is what the tree structure should look like:

Consequences

This structure with two tiers (Template and Selector) has some important advantages:
  1. Simple rules. Complicated rules can be broken into several simple ones with one selector for every simple rule. This could be even more important if the rules are regular expressions. 
  2. Order control. The order in which the objects are selected can be controlled with proper selectors. Adding selectors in the proper order could achieve the same result as a complicated sorting procedure. In the case special sorting is required that cannot be achieved with selectors the template can use a sorting function.
  3. UI Design. The selector may specify how the selected objects should look to the user. For example the selector may add an icon to the objects or specify the background color. 

Final Thoughts

I do not claim to have invented something completely new. I tried to explain in clear terms how to solve this problem of transformation from a 1D array to a 2D tree structure.

No comments:

Post a Comment