This week we will be covering WebDev Advanced Positioning and Zoning. We will start with a Primer of Zoning, and then go through the process of modifying one of the supplied templates to add advanced zoning, including a fix “Power Bar” at the top of the page like Google, Paypal and others are doing these days. We will also discuss the challenges of editing zones, and I will show you a few of my black magic tricks to getting it done. This will be another two part article, in Part 1 will be discuss what the end result will be, introduce some of the zoning concepts and then create the Power Bar zone. Next week we will wrap up the rest of the zones and cover a few special tricks of editing zones.

So lets take a look at the end result first. Here is a screen show from a clients site that I created a Power Bar template for.

The target size of the website is 1024 x 768. The page is centered in the browser, with a parchment paper background. The Power Bar spreads across the entire browser, however the controls on the Power Bar stay centered with the page. We then have a page header zone, that stays the same size, then we have a left hand navigation zone and main page content section that grow in height based on content, and finally a page footer zone.

The “fancy” part of the power bar is that it always remains on the page, so even if the page content is taller than what can be displayed, when you scroll down the power bar remains. As you can see in this screen shot of the same page after scrolling.

So lets create a project and setup a page template to duplicate that interface.

Go through the normal steps of creating a project, for this example we will use the iStyle skin.

Once the project is created, right click on “Templates of Pages” in the Project Explorer and choose “New page template”

Next you will be given a choice of several predefined templates for the skin. The one that matches our desired layout is “Inset to the left” so select it.

If we test the template by pressing the “Run page test” button

We see that the current look sure is a far cry from what we are going for.

Let’s start with a few simple things. On the style tab of the Page Description, chose the Browser background element. Set the background color to undefined, the background image to the parchment paper image. If you are looking for graphics to use for backgrounds there is no better place than Subtle Patterns, which is where this image came from. And set the image to be Tiled.

Next select the Page border/background element. Set the border and background color to Undefined and the Shape to None.

And finally choose the Margins Element and set all the margins to 0

Now it is time to work on the zones. In the top left of the IDE, you will see there are to tabs, select the zoning tab to edit Zones.

Now the page elements are dimmed slightly and we see red lines representing the zones.

We need a total of 5 zones. Power Bar, Page Header, Left Navigation, Page Content, Page Footer. We are lucky that this template already has 5 zones, they just are not configured the way we need them. Later we will discuss adding and deleting zones, but for now lets just change the existing zones to get what we need.

The first thing you will notice is that editing zones is similar to editing cells (with the big exception being the inability to move them around). Lets start with the top zone and turn it into our Power Bar. Right click on the zone area and chose description.

On the general tab, lets start with renaming it.

On the GUI tab we will set it to Fixed with a Mode of always fixed + anchor and we will set the anchor to adapt width to the browser. This will cause the power bar to cover the entire width, and stay visible even when scrolling the page.

Now on the Style tab, chose the Border/Bckgrd element, set the Border Color to Undefined, the Background color to Negative (Bckgrd 3) which is dark gray, and the Shape to Solid background.

Now if you go back and look at our first test run of the Page you will notice that the Header has a Silver box and then a couple of swooshes under it.  If you select the Background image element, you will see that there is a background image defined, that is what is generating that on the page. So Clear the image file name, and set the rest of the options to undefined.

If we run another test of the page we will see that we are getting closer, but still got a ways to go. Notice that zone is using the entire browsers width now, but the controls are also getting spread out. We also need to make the power bar smaller and move the logo etc. into the page header instead of the power bar.

Lets start by fixing the size of those two zones, and move the controls to the correct zone. So back to zone editing. Click on the Power bar zone, in the bottom right of the IDE you will see the dimensions of the zone.

Currently it is 96. Let’s make it 35 for the Power Bar. This is a handy short cut in the IDE, you can actually click in that area and edit it directly.

While we are at it lets modify the size of the next zone, that will eventually become the Page header. So click on it, and set the height to 80.

Now switch back to Page editing mode, so we can move the controls into their correct zones.

Let’s drag the search box and button into the Power Bar. Move the Navigation menu to the right side of the Page Header zone. And move the logo and company name into the Page Header, we have to adjust the height of these controls so they will fit properly as well. Be sure to move the Link controls up so they correctly fit into the Power bar.

So now the Page should look similar to this at design time.

Another test reveals we still have some work to do

So how do we get the controls in the Power Bar to stay centered with the page, but also have the Power Bar stretch to the entire size of the browser? A cell will come to our rescue! So from the creation tab, select cell.

For now just drop it on the page anywhere. Now edit the description of the cell. Start by renaming it on the General tab. We also need to add the controls that are on the Power Bar to the cell, by pressing the Add button and selecting them.

On the GUI tab select the Anchoring drop down and select Horizontally Centered.

While still on the GUI tab set the X and Y Position to 0, the width to 1016, and the height to 35. These dimensions match the Power Bar so the cell will occupied the same location as the Power Bar.

On the style tab, chose the Border/Bckgrd Element, and set the Border and Background Color to Undefined and the Shape to None. This creates an “invisible cell”

If we run another test page, we see that our controls have disappeared all together. What gives!!! We have just learned our first lesson on the pitfalls of zones.

If you hover over the cell in the IDE, you will see that it is actually contained in one of the other zones, even though it is located in the Power Bar cell.

This happened because we “moved” it into the zone by editing the positions, instead of dragging it with the mouse. If the zone interface worked like the cell interface we could just go add cellPowerbar to the Power Bar Zone. But you will notice that the General Tab of the Zones does not have an Add button.

So the trick I have found to get it into the correct zone is to drag and drop the cell to another zone of the page, then drag and drop it back on the Power Bar zone, you will notice that the zones borders turn green indicating which zone will contain the control when it is dropped.

Now if you hover over the cell, you will see it is in the correct zone.

Another test of the page, finally reveals that we have the Power Bar formatted the way we wanted. You can test the scrolling if you want by re-sizing your browser to be shorter than the page.

One last tweak and we will move on to the Page header. Those links are sure hard to see on the Power Bar so lets edit the style for them. From the Style tab of the description of the link, Choose the Caption Element and set the color to Negative Text 1.

Then select the Border / Bckgrd Element and set the Border color to Negative Text 1 as well.

Go ahead and update the rest of the links the same way. Note: Normally I would do this by Creating a new style and applying it to all the links, but editing styles is outside the scope of this article, and I also found an bug with editing styles on a project not part of the SCM. So finally another test of the page and finally we have the Power Bar the way we want it.

Next week we will wrap up the rest of the zones and cover a few special tricks of editing zones.

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday, to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

 

• WEBDEV