• Don't spend unproductive time maintaining different versions of the same spreadsheet
• Preserve data integrity and security in multi-user environments
• Create reports in minutes INSIDE Notes
• Get freedom from iterative report requests, deliver self-serve capabilities

Experience Reporting, Dashboards, and Analysis INSIDE Notes!

Try IntelliPRINT NOW!

Yesterday I talked about how and why I'd used a small downward arrow on the navigation on the website below in order to add a little finishing touch to it.

Today I'll talk about how I did it.

Creating The Site in Fireworks

First thing we need to do is create a new document in Adobe Fireworks (you can use any graphics editor, as the principles are the same) and choose a custom canvas/background colour.

Then, on the new document, add two rectangles - a white one in the centre which is the full height of the canvas and another one at the top which is the full width.

Then add some text to act as the content - a title, the menu items and the body. You should end up something like below. It looks a bit like a website. But it's very boring.

To make it a little bit more interesting we're going to add an arrow.

Creating The Arrow

First thing to do is add a small square of the same colour as the header area. To make a square you just use the rectangle tool and hold down shift while drawing the shape on screen to make the sides of equal size.

Now we need to rotate the square by 45 degrees, which we do using teh Numeric Transform tool from the Modify -> Transform menu or pressing Ctrl+Shift+T.

Choose Rotate and enter 45 in the angle box and press OK. You can then drag the rotated square up to the menu area and align it with a menu item and move it about until you have it looking just so.

Now we need to select both the header rectangle and the small square by holding down shift as we click on each. With both selected you can merge the two shapes by choosing Modify -> Combine Paths -> Union from the menus. You'll then have a single vector-based shape like the one below:

Any change to the colour or fill of this single shape will now affect both the arrow and the rectangle. More importantly though we merged the two shapes so that the drop shadow applies correctly, as you can see below:

What we end up with is a design like this. Still a bit boring, but not half as boring as the design without a shadow or arrow!

Once you've played with the colours and maybe added a gradient fill to the header you'll end up with something you're happy with, like this:

Now we need to export the images we'll need to use with the CSS to achieve this look. Add three export slices as below:

The two thin slices will make the repeating background image of the body and the header area. The larger slice will become the background to the menu items.

The three images should look like this:

1. 2. 3.

Tomorrow I'll show you how to use these three images with a sprinkling of CSS to create the design above in HTML. I was hoping to do that all today but this is taking too much of my morning up already...

If you fancy a tinker in the mean time here's the editable Fireworks PNG file which will show you how I did what you see above.

Love or loath data-grids they're a quick and useful way to show a view on the web. They have to be used with caution though and whether you use them at all or not is down to the requirements of each application.

One shortcoming of data-grids is in dealing with really big views of data. Say, like 40,000 documents, as in the Fake Names address book. Here we wouldn't want to load all that data in one go.

One option for large datasets is to use paging - where the user see a "Page X of Y" message and navigational buttons. Solves the problem but not particularly user-friendly are they.

A much better option is to use "lazy loading", which is what the following Flex DataGrid demo does. As you can see from the scrollbar it's a large view (it's feeding off the 40,000 docs in the NAB I mentioned earlier). However, it has only actually loaded the first 100 documents.

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

If you use the scroll-bar arrow (avoid dragging the scrollbar for best results) to move to the end of the first 100 documents you should then see a flicker as the next set of 100 documents loads from the server. Then drag the scrollbar right down to the very bottom and see the very last set load (all those in-between won't load - until needed).

Cool, no?

It uses Flex 4's new AsyncListView, which James Ward talked about here. What you see above is his code re-worked to adapt to use with Domino's URL rules and using XML rather than AMF, which is something I'd like to look in to using with Domino at some point if I get the chance.

Shortcomings

As with any paged set of data it all falls down when you try and sort a column or filter the data. In both cases you'd need to over-ride the defaults for these events to force a trip back to the server. Probably possible, but I don't have time to look in to it.

The Code

The Flex code used is exactly the same as on James Wards' site but I replaced the RemoteObject with an HTTPService, like this one:

<s:HTTPService url="http://www.codestore.net/fakenames.nsf/PeopleXML?OpenView" resultFormat="e4x" id="ro" method="GET"/>

And I modified the code that handle sending/processing date requests to look like this:

var asyncToken:AsyncToken = ro.send({'start':startIndex+1, 'count':numItemsToFetch}); asyncToken.addResponder(new AsyncResponder(function result(event:ResultEvent, token:Object = null):void { var people:XMLList = event.result.person as XMLList; for (var i:uint = 0; i < people.length(); i++){ items.setItemAt(peoplei, token + i); } }, function fault(event:FaultEvent, token:Object = null):void { trace(event.fault.faultString); }, startIndex)
);

The rest of the code you can get from James' site. Enjoy.

Yesterday we looked at the how, using Fireworks, we can create arrow-like images to add to our web site's main navigational menu. What we're aiming for is a site that looks like this:

Where the current menu item is highlighted by an arrow (ignore the fact it's on the wrong "tab" in the image above). To do this we exported three images from our Fireworks mockup, which look like this:

There's nav_li_bg.png and header_bg.png  and body_bg.png . That's all we'll need.

Creating The Webpage

The HTML for our page is structured simply like this:

<div id="container"> <div id="header"> <div id="navbar"> <ul></ul> </div> </div> <div id="content"> </div>
</div>

With some content in place, but no CSS it looks like this:

Now, let's start adding some CSS. First we're going to center the container and give the main body a background.

body{ background:#C0C0C0 url(body_bg.png) repeat-x top left;
} #container{ width:829px; margin:0px auto; background-color:#fff;
}

The page then looks like this:

Now we need to continue the dark grey bar across the page and align the header items. To do this we use the following CSS:

#header{ padding:0px; margin:0px; height: 145px; background:#666 url(header_bg.png) repeat-x top left;
} #navbar{ overflow:hidden; position:absolute; top:109px; height:70px;
} #navbar ul li{ background:none; padding: 0 12px; list-style-type:none; float:left;
}

Notice the header has a fixed height of 145px which is the same height as the background repeater image we created for it. Notice also that we've positioned the navbar div using absolute positioning so that it sits at the bottom of the header div. I've missed a few bits out, but you can see all the CSS later. The site now looks like this:

All that's left to do is add the arrow to the selected list item in the menu. The HTML for the selected item looks like this:

<li class="selected"><a href="/">About</a></li>

Now, bear in mind that the background image we created looks like this:

The CSS we need to add to place this image on the selected link looks like:

#navbar ul li.selected a{ background:transparent url(nav_li_bg.png) no-repeat scroll center bottom; padding-bottom:25px; }

There are a couple of tricks in use. Firstly that we've aligned the arrow image with the bottom and the centre of the <A> tag. No matter how wide (or tall) the link is the fact the image itself is quite wide should mean the arrow is always in the centre. Even with a wider link the background of the header itself should bleed through. If not then just make the background image much wider.

The second pivotal trick is to add some extra padding to the bottom of the selected link. This pushes the background image downward, as it's aligned with the bottom of the link tag, while leaving the actual link text where it needs to be. That's all there is to it really. Just one clever little trick to make the selected link appear taller than the others.

The height of 25px isn't some magic number. It just happens to be the height needed for the image I created. In practice getting everything to align properly is a matter of trial and error while notching the height up and down a few pixels at a time. A bit fiddly, but worth it!

You can see the final HTML page here and you can download the necessary CSS from there. Happy styling!

For you Domino lovers, sorry it's not in an NSF file. You'll just have to work that bit out for yourself.

First, management told us we were to completely stop looking at Facebook and Twitter. Then, three weeks later, they got a whole social networking bug up their bums and insisted we implement something on our servers.

Now what?

It's always fun when management has a Dilbert moment, but we also always feel for the IT people on the ground who have to deal with the problem.

As it turns out, we ran a short news item on this very topic about a year ago.

According to the IBM synch.rono.us blog, you can now download Facebook and Twitter (and, yes, MySpace, too if you possibly care) straight to your server, install them, and be up and running in less time than it takes to tweet about the last food item you injested.

Good luck, and enjoy!

Joe is a ZATZ associate editor. Prior to this job, he was customer support manager for the FileFlex database engine.