For many software developers (myself included), Sybase PowerBuilder (PB) was our first introduction to graphical UI development, Object Oriented Programming, and client/server architecture. The crown jewel of PB was the DataWindow™, its data-aware graphical control that made business application development against relational databases very simple. As we all know, Sybase was acquired by SAP in 2010, and the loyal legion of PB developers that remain look for SAP to advance it well into its 3rd decade.
Meanwhile, in conjunction with the release of SAP Mobile Platform v3.0, SAP has also released a new WYSIWYG HTML5 authoring tool called AppBuilder. AppBuilder will target mobile development for the SAP Mobile Platform, using the Adobe Cordova client container for cross-platform enterprise support. The good news is that AppBuilder borrows heavily from PB technology – especially the Datawindow! Those of us that know PB will already have a headstart in working with AppBuilder. This series of articles will cover AppBuilder development, from the perspective of a PB developer. I’ll point out the many similarities and some of the key differences between the two IDEs.
The SuperList Control
AppBuilder’s version of the DataWindow is called the SuperList. This is the control that binds an OData datasource to a specific graphical implementation. If you think that sounds a lot like a DataWindow, you wouldn’t be far off. The parallels to the datawindow are immediately clear:
- You design the SuperList in a separate painter, where you bind the OData datasource to the visual field controls.
- You place the SuperList control onto the surface of the "window", assign the SuperList metadata file from step 1 above, then code the event scripts in Javascript.
Tip #1: Start Thinking in Rectangles
PowerBuilder developers are familiar with the concept of “absolute positioning”, where controls have a specific X/Y location within the Header, Summary, Detail, or Footer band. "Relative positioning" could be achieved with some simple changes, like the "Slide Up/Left" properties, or using an expression on the X and Y properties, but the default behavior was to use a static X/Y location and absolute positioning. I'm going to use a simple Recipe tracking application to illustrate the similarities and differences between the SuperList and the Datawindow.
Figure 1 above shows a typical grouped tabular datawindow. The detail band contains 5 objects: labels containing the name and description of the recipe, a count of the number of ingredients, and the estimated prep time. It also displays a bitmap image of the finished product. In a PB datawindow, these five elements are SQL query columns simply "placed" into their desired locations in the detail band. They appear in the same X/Y location within the detail band on each row retrieved from the database.
To simulate this same UI layout in HTML5 using AppBuilder, you have to place the individual label and image controls into "container" controls. The container manages their position relative to each other. In AppBuilder, this container is called the Panel control, and it can be aligned either horizontally (to place controls side-by-side), or vertically (to stack controls on top of each other). The easiest way to visualize this Panel-based approach to UI layout is to draw rectangles around the graphical elements that need to be grouped together. Let's re-examine this UI from that perspective.
The first step is to identify the detail band - the repeating group that will span the entire control from side to side. In figure 2 below, I've outlined a single row in the detail band with a green rectangle. There are three such rows in this image.
I want the recipe name field to be left-aligned with the image, so I have a "vertical" stacking of the name field, and all the other "stuff" below it. That's going to require a Panel control with a "vertical" alignment. I can drop the recipe name field into the top left corner of the panel, because it will be the only control on that "line". The remaining content of the panel will come next...
In figure 3, I've drawn blue rectangles to illustrate that vertical stacking.
Now consider the image and the group of three fields to its right. They're aligned side-by-side, so I'll need another Panel, but set to a horizontal alignment. In figure 4 below, I've drawn orange rectangles to illustrate the horizontal stacking. In AppBuilder, place a new Panel control inside the existing Panel, and change it's alignment from Vertical to Horizontal. Then place the image field in the upper left corner of the inner panel. The three remaining fields will come next.
Lastly, we need to position the three remaining label fields. Placing them inside theexisting "horizontal" panel would force them to be arranged side-by-side, across the row, which is not the effect we want. We want them stacked vertically, which means a third panel control with a vertical alignment. Drop a new panel into the space to the right of the image, and set its alignment to vertical. Then drop the three label fields, one by one, into the new vertical panel control, one on top of each other. Figure 5 below shows that arrangement, highlighted with purple rectangles.
This gives us the visual layout we're after. If you select the Outline view in the SuperList painter, you can clearly see the nesting of the panels. It's much easier to implement this nesting approach if you have it designed out ahead of time, so start "thinking in rectangles"! You'll be developing great HTML5 UI's in AppBuilder in no time.
-Paul-
- SAP Managed Tags:
6 Comments
