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.
DevExperience has a nice control called XtraLayoutControl. Basically it allows you to have your own form designer at run-time.
But it can easily do more than just reshuffling of existing items for the Desktop UI. You can design forms that will be rendered on Desktop and Web alike.
eXpressAppFramework team has started using its capabilities of the design management, but I believe they can go even further if they:
- Forget about pseudo-groups with custom orientation flags and keep positioning and size information of the design elements.
- Add a couple of simple layout elements that are stored in the layout only (i.e. LayoutLabel, LayoutImage).
- Use full design information for rendering detail views on the Web.
- Forget about the model and persist the design in the DB.
- Actually it is quite easy to go even further on this read and push all view schemas, data schemas and even form storage schema (if they implement Forms) to the database (thus allowing to change all that on-the-fly).
All the above items are quite easy to implement. I know that for sure since they constitute logically separate module in xLim 2 - “Record and Form Management” (Flexible Grids + Details + Forms) and that has already been done more than once.
There’s even more of that. I believe that the information generated by the XtraLayoutControl is enough to create similar interfaces not only for Web and Desktop, but for WPF and GTK# also (would not you want to have the perspective of reusing your nicely crafted forms on Linux platforms?)
Latest Comments