I'm a big fan of the various food network presentations that provide people new to cooking with simple recipes that introduce important concepts. And I also enjoy the way the presenters make elegant meals evolve from basic ingredients found in most kitchens. That got me to thinking about General Interface as the professional kitchen for cooking up tasty web applications and about how the GI Properties Editor is a way to display a collection of available ingredients for each of the on-screen components. I told you that I'm addicted to GI; even a cooking show can't keep me from thinking about it. In this segment, I'll review the various properties that relate to a core component of any GI application: the Block.
The official name of the Block component is the "jsx3.gui.Block" and I've picked it as our starter course because many of the other GI components base their characteristics on it through a scheme called inheritance. But inheritance is a topic better covered in another segment. The Properties Editor will change the list of available settings based on what is currently selected in the Builder Component Hierarchy and because I've added a Block to my new page, the Properties Editor starts right off with showing us that the "Object Type" is in fact the "jsx3.gui.Block". Having the object type prominently displayed is really helpful if you are looking at an application created by someone else and you are unfamiliar with how things are organized.
Gazing down the Properties Editor rows, the next item is the "ID". This is assigned by the system and is unique for all the items in your project. If you've done any web design without a tool like GI, you might have named one of your html tagged items in a similar fashion. Such as:
<span id="span_1">The Text</span>
GI's Integrated Development Environment, GI Builder, is doing the same thing under the hood. It is giving the newly created element an individual identification property so that it can be located without ambiguity.
The next property in the list is the new block instance's "Name". This is under your control and can be anything within reason. It can contain spaces and dashes and other characters, but I wouldn't get too wild with the names; just try to name it something that makes sense and follow a theme. My theme is making the first part a lower-case word and then make all the words after it with an initial capital letter and then lower-case, but without spaces. I think this is called Hungarian notation or Camel Case. My names look like "folderBlock" or "upperRightBlock" and are much more informative to me than names like "block" or "label".
Positioning
"Relative XY" is the next item in the property list. It isn't referring to a family member's chromosomes; it is a way to layout items contained within a block. If you choose "Relative", and there are multiple items contained within the block, they get adjusted from the left or top depending on how much space is allotted. Simply, if you have a block that is 300 pixel units by 300 pixel units (300px) as the container block, a.k.a. the parent, and you have 3 blocks within it that are all 100px wide and 100px high and each one's layout is set to "Relative", then you will see all three side-by-side. But should the parent block width be reset to 250px, you will instead see two blocks side-by-side and one all by itself on the next row down.
In contrast, if you change the property of each child block to "Absolute" then you'll notice that all three children are right on top of each other and all crowded into the top left of the parent block. To correct this pileup, set the "Left" and "Top" property values to make each one respect its sibling's personal space. The values can either be a percentage of the parent's width, as in 15%, or the value can be a number written in pixel units, such as 100. By setting the first Block with a "top" property of 100 and the "left" property to 100, you'll notice it move to that exact coordinate. The "Z-Index" property will adjust the other two components above or below the other one like a stack of pancakes. The higher the z-index, the higher the component will be positioned in the stack.
I find it easier to design forms by using the relative property setting and let the layout flow naturally rather than absolutely positioning the elements. I usually nest the form fields inside a 100% wide parent block that has a 30px height and then position a label with a 30% width and a textbox with a 70% width. I then copy that structure within the same parent and the rows fall below each other nicely. If I move one of the rows to another position in the group, I won't need to recalculate the top and left properties of every component group affected by the change as I would need to do if I used "absolute" positioning.
Block
The next grouping of properties is under the heading of "Block" and contains a frequently used setting called "Text/HTML". This setting allows you to type text into the field for on-screen display. Because displaying text is the bread and butter of most applications, this property field has a few other features worth noting. First, not only can you just display simple text, you can use HTML in the entry and it will be used exactly as you enter it. This enables you to use specialized tags in the application such as java applets or Vector Markup Language (VML) for graphics.
Second, GI Builder provides a way to associate a name with text and can store it in a separate file. When you enter the identifying name in the field and touch the TAB key, the Block displays the text from the lookup.
The lookup file is called a "Properties Bundle" and is much like a spreadsheet table where the left hand column is for the lookup name and has one or more adjacent columns to resolve the text associated with the name. The first adjacent column, named "Default", holds the text that you want to use if no other columns are present. You can then add other columns based on the short-cut name for browser supported languages; English is "en_EN" and Spanish is "es_ES" to name a few. To create the "Properties Bundle", use the File/New/Properties Bundle menu commands in GI Builder. Make sure to save it and set it to load when the project starts by selecting it in the Project Files palette with a right mouse and picking the "Auto Load" menu option.
By using the Properties Bundle file you've now separated the text from residing directly within the Block "Text/HTML" property, but it will still show up just as if you typed it right into the property field. One advantage of using this name/value lookup technique is that if you decide to make changes to the text, you only need to modify the Properties Bundle file rather than visiting each of the "Text/HTML" fields individually; it's a real time saver.
Finally, if you want your application to work in Montreal and you need to have all the text in French, just create another resolution field associated with the lookup name and have someone translate the values into the French language. When your application runs, the browser's language setting is inspected and if it matches the resolution column type, voila, Bob est votre Oncle!
The other property in this section is the "Tag" field and it sets the HTML tag name when rendering the on-screen markup. I've used this in the past to force a Block to render as a SPAN tag instead of a DIV by just typing the word "span" into the property field.
There are more properties to discuss, but I'll leave that for the next segment because I hear my oven timer buzzing in the kitchen. Or is that the smoke detector?
