In the past post on using XtraLayout component by DevExpress as a simple but powerful run-time designer I’ve mentioned rendering designs into Web UI. Here’s simple recipe for the matrix algorithm that is actually used to render XtraLayout-generated form designs in web UI of xLim 2 implementation.
This implementation does not require creating groups for every logical section like it has been done in XAF Web UI (and defining some custom orientation direction there) - all group contents sit within one table. Additionally this makes the designs reusable for WPF, Windows.Forms and Silverlight UI rendering (xLim 2 compatible renderer prototypes already exist for the first two).
Basically the UI rendering process happens in two steps. First, we check out every single control in the group and register its coordinates. We are only interested in unique X and Y values at this step.
Then, we count number of unique non-zero X values (that’s the number of columns in our table) and number of unique non-zero Y values (that’s the number of rows in our table). After that we calculate the sizes of these columns and rows (derive them from actual X, Y values). Widths will get sizes in percentages, since normally we want our forms to resize with the browser window.
In second pass we simply render all the controls into cells of the HTML table, while assigning appropriate RowSpan and ColSpan to these cells.
Latest Comments