The goal of this series will be to introduce development techniques that are either very similar to, or very different from, development with PowerBuilder. A great deal of the DNA of AppBuilder comes from PowerBuilder, and as a PB guy, this “close but not quite the same” has made the transition a bit sticky.
Tip #2: Get to know CSS (Cascading Style Sheets)
PowerBuilder developers (and to some extent, VB/C#/C++ developers as well) have always been able to set the properties of a control right in the designer. Changing any of the visible attributes of a control was as easy as point-and-click. Select the control, and the painter toolbar alters its context to show only the properties that are pertinent to that control. With a WYSIWYG designer like PB, any changes are instantly visible in the painter. Also, applying a single property change to a set of controls was just as easy – lasso-select or multi-select the desired controls, and instantly change any common property.
Figure 1 shows the Font panel of the PB datawindow painter. Look at all those individual properties! And this is just the Font panel!
This was a fantastic convenience during the development of a single screen or datawindow. Complex screens and datawindows could be constructed in a fraction of the time that traditional 3GL coding would have taken. But every convenience seems to come with a downside, and for PB, there was no “easy” way to apply simple graphic changes across the entire depth and breadth of an application.
For example, if the users said “We don’t like the Tahoma font anymore. Please change every text control on every screen and datawindow from Tahoma to Verdana.”
This meant you (or some unfortunate college intern) had to open every window and datawindow control one by one, select all the text controls, change the font face property, save the changes back to the PBL, recompile, and redistribute the compiled app to the users. There really was no facility to collect all the common visual attributes into a named “template”, and link that template to specific controls. If that had been available, then you’d have been able to make the single change to the template, and have that change ripple to every affected control across the app.
This wasn’t just a PB problem – web developers faced it too. Every time an app-wide change needed to be made, they had to resort to global edit/replace tools to change the HTML code for the web app. This is the primary reason Cascading Style Sheet (CSS) technology was invented.
CSS in AppBuilder
The AppBuilder SuperList designer utilizes CSS as well. So, if you’re a PB developer, and you’re looking for the Font dropdown list, the BackColor dialog, or the Alignment buttons, you won’t find them in AppBuilder! All graphical properties, unless they’re specifically listed in the control’s Property panel, will be changed by using CSS styles.
Every AppBuilder project comes with a default CSS file called CustomStyles.css. This file can be found by clicking the Project panel, and expanding the css folder. Figure 2 below shows the location of the CustomStyles.CSS file in the sample SuperList demo application.
Changes to custom CSS styles can either be placed directly into this file, or a new .CSS file can be created. Dropping any .CSS file into this folder tells AppBuilder to automatically include it in your project.
Double-click the file to open it in the AppBuilder editor. (You can also use any 3rd-party CSS editing tool to manage your custom styles.) Scroll down to see the custom styles that have been added into this file. They start on line 41 with the text:
This is not meant to be a full tutorial on CSS techniques, but take notice of several key differences:
- The .list-line1 style contains the font-weight:bold directive;
- The .list-line2 style changes the text color to a light gray (hex code #666666), and sets the font-size to 80%;
- There are three styles further down in the file (.Ter, .Lea, and .Act) that set different text colors (red, blue, and green, respectively)
Now go back to the Project panel, look in the View folder, and double-click the EmpDetail.slmeta file to open the SuperList painter. Select the label control named EmpName (the first one in the detail band), and examine its Classes property – it’s set to the string value ‘list-line1’. This assignment binds this control to that specific CSS style, so any changes to that style will be automatically rendered in this control and any others assigned to ‘list-line1’.
Click the little arrow next to the Classes property to open the Properties dialog (PB developers: this is the same concept behind theExpression dialog for PB control properties – it only shows up next to properties that are “expressionable”). Figure 3 below shows the Properties dialog window for the EmpName control.
The list box “Available Classes” shows the names of any CSS classes defined in the .CSS files linked to the project. To assign one to a control, just scroll down and double-click the one you want. NOTE: all expressions must evaluate to a string, so remember to wrap all class names and expressions in single quotes. The dialog does NOT put them on there for you. (Yet another usability enhancement I’ve requested…)
The second control ‘gender’ is assigned the class ‘list-line2’, and you can see that it’s font is a light gray, and slightly smaller than the default.
One neat feature of CSS is the ability to assign multiple classes to a single control. For example, let’s say you wanted to define font characteristics (face, point size, color) in one class, and dimension characteristics (height, width, float) in another. You could assign both styles in a single expression simply by separating them with a space inside single quotes. ‘fontBold alignRight’
Now select the third control – ‘status’, and open its Properties dialog.
A great deal of the functionality in the SuperList designer was borne from the PowerBuilder datawindow painter, so PB developers should see a lot of similarity there. But navigating the differences between the two can be a bit of a challenge. Just remember that you’re developing a web application now, and understanding web techniques like CSS will be crucial to your success.