Hi Mike,
Let me do more than one. So let's take an "out the box" example, say example 2 (Basic with Menu) and let's explore some possible headers. So go ahead, and fire up that example run it, and take a look at the header. It's simple enough, a bar at the top, with some text, and a menu underneath it.
not surprisingly the header is included in the PageHeaderTag procedure. (This means the header will appear on all the generated pages.) If you go ahead and go into that procedure, into the Properties / Actions / xHtml tab. You 'll see there are actually 2 headers included there, one for desktop and one for mobile - we'll focus on the desktop one for now. If you look there you'll see;
<h1>NetTalk 6 Example 2</h1>Let's go ahead and add a session value there.
<h1>NetTalk 6 Example 2 - User: <!-- Net:s:whatever --></h1>In the above case the contents of the Session Value "whatever" will be included as well. (aside: obviously you will need to set the session value yourself when the user logs in - I'll leave that bit up to you.)
what bout an image? Well remember this is all just xHtml here. And adding images in Html is done with the <img> tag.
<img src="images/money.png" />
<h1>NetTalk 6 Example 2</h1>Note that the "source" of the image is relative to the web folder, since I wanted a png from the
\web\images folder I needed to include the images part in the file name.
This makes an image at the top right, but then the text part of the header is underneath. In Html we can "float" items around, in this case I'd like to float the text up to be next to the image. That's done using css float:left command - which NetTalk has conveniently wrapped up as
nt-left.
<img class="nt-left" src="images/money.png" />
<h1>NetTalk 6 Example 2</h1>Wanna be clever? how about positioning the image on the right;
<img class="nt-right" src="images/money.png" />
<h1>NetTalk 6 Example 2</h1>Ok, so you get the idea of the Html in the header. Remember you can add any Html you like here, including tags. (Many of my apps include the Login form in the header as a simple tag).
Let's take a look at a couple other things in this header.
First, the CSS. On the General tab you'll see the Css for the header is set to
' ui-widget-header ui-corner-top'This is what is giving the menu it's distinctive background, rounded corners and so on.
Second the menu. Notice how it's underneath the header, and distinct from it? Well if you go to the Menu extension, then to the Advanced tab, you'll see there's an option there to "
Generate Menu outside Header Div". If you tick this off, and run it again, you'll see the menu now resides "inside" the header. (Some menu types, like TaskPanel will always be outside though.)
Remember you can have multiple menus in the header as well - I've seen apps with one menu on the top, and another on the left (and another on the right). Just make sure each menu has a unique menu Id (see "Menu" tab).
This document is a good source of information on the header as well;
http://www.capesoft.com/docs/NetTalk6/NetWebHeader.htmCheers
Bruce
Topic: Example with Graphic Image header with menu buttons (Read 2890 times)