I was sitting on an empty beach last weekend watching the surf roll in, when all of a sudden five guys came to the water's edge right in front of me with skim boards. The youngest was about 10 years old and the oldest was his father. One by one they ran down the beach at full speed and dropped their boards onto the skinny water retreating back to sea and then jumped aboard, sliding along precariously until they flopped into the water. They were really having fun. I thought it looked easy and wanted to give it a try but I didn't know the first thing about how to get started. No sooner had that thought run through my mind, I saw another guy walk up to one of the surfers and ask if he could give it a try.
"So I just jump on it, right?" he asked. "Well, yeah, that's pretty much it" the skim board owner replied. I then watched the new guy run three steps, drop his borrowed board onto a thin layer of water, jump on it and then immediately fly over the front of the fully stopped board and tumble over the sand and into the water. He looked up from the frothing surf and said "I guess it's a little harder than it looks...I better quit before I bruise more than my ego." He gave the board back, thanked the guy and then continued his walk on down the beach. I started thinking that if he would have had a better understanding of the basic principles of skim boarding before he got started, it would have helped him tremendously.
In order to help you understand how to build Rich Internet Applications with General Interface, I want to open this segment with a few of the basic principles of web page construction and how they apply to GI.
The first thing to remember is that our goal is to put marks on the browser display. To do that without GI, we will need to create a page with a few lines of text written with formatting rules used by the browser to interpret our text and display it properly. The screen layout is described to the browser by following the Hypertext Markup Language (HTML) definition. The language is made up of symbols recognized by the browser and enclosed in angled brackets. The combination of angled brackets and keywords is called a "tag" and surrounds the text that we want to format. For instance, to make text bold, just add the "<b>" tag in front of the text element and "</b>" behind it to turn it off.
We start the formatting process with the <HTML> tag and close it with the </HTML> tag. We can organize the page by enclosing the content into sections. The main section is the "BODY" and is tagged with that same name.
<HTML>
<BODY></BODY>
</HTML>
We can create as many sections as we need inside the BODY and can use a variety of tags to denote the start and end of each section. The <div> tag will divide a logical group in the same way that you would use a paragraph to logically divide text. The <div> and <span> tags have no pre-defined formatting and are strictly there as a parent container for your other elements.
The formatting definitions also allow us to group characteristics into a property collection called a "style". By including the style property inside a tag we are instructing the browser to follow a standard definition called the Cascading Style Sheet (CSS). The CSS definition also allows us to position elements on the screen in an "absolute" placement from the top and left sides of the current container. For instance, if we want to place a "block" of text to start 10 pixel units from the top and 12 pixel units from the left we can define it in the style property in the tag that goes with the text.
Example:
<div style="position:absolute;top:10px;left:12px;">Hello</div>
By using a style "position" property value set to "absolute", the element can be placed anywhere on a page. The tag style can be further enhanced with the size of text, the font weight (bold, italics), color and many other choices. Storing these style properties gives you the ability to call them when needed and can help to unify multiple pages with the same type of formatting.
When you use General Interface Builder to create your page you are provided a pre-defined set of styles to format the components that you insert into the page. The style choices are exposed as a list of properties in a panel editor that changes according to the GI component you've selected. Most of the property fields have drop-down choices for you to pick from a set of values. For example, the "text-align" style property has "left", "center" and "right" alignment choices.
Builder saves your property choices and then converts them to the HTML tags for the browser to display. To demonstrate, I'll create a simple GI page with the "Block -Absolute" component picked from the Component Libraries palette and drop it into a blank page. A square grey box is displayed on the screen. At the bottom of the design area, a row of icons allows me to see the HTML that will be created at run-time. It shows as:
<span id="_jsx_1_5d" label="block" class="jsx30block" style="position:absolute;width:100px;height:100px;left:0px;top:0px;background-c olor:#e8e8f5;overflow:auto;"/>
The process of converting the saved property values to HTML tags is just one of the functions GI Builder provides. Builder will also store your favorite property settings by a name that you give it and will lookup values assigned to that name when the page is displayed. This feature is called the "Dynamic Properties File" and has a nickname of JSS in homage to the CSS property idea. So instead of typing "Tahoma" as the font family name in the property editor field, you can use "appFont" as the name you assign to "Tahoma" in the dynamic properties file. When the page is displayed, GI will lookup the "appFont" name in the dynamic properties file and exchange it with the value you've assigned it.
Furthermore, each property editor field has a type associated with it and can be part of the dynamic property information. In the "appFont" example, the type of "jsxfontname" can also be assigned to the entry so that a right-mouse context menu can be called from the "Font Name" property editor field to filter all the dynamic property records that are of the same type. The resulting drop-down menu will display them for use along with system defined styles that usually have a "@" symbol as part of the name.
The benefit to using dynamic property values becomes clear if you change your mind often. For example, you might have created a text field for data entry and you want to put a label next to it. To make sure that it has a little breathing room between the components, you use the dynamic lookup for the margin property that uses "2px" but later change your mind to make it "4px" instead. All you need to do is change the single JSS entry and all the fields rebuild when they are repainted on the screen.
We now know that GI can help insulate us from having to write HTML tags with elaborate style properties to create a Rich Internet Application. And we know that by using the Properties Editor we can make the formatting changes we want use in our application, yet we don't know too much about those properties. In our next discussion, each one of the property elements will be covered so that we will have a better understanding of how to combine them for the exact look we want to achieve.
