HeaderBar

jQuery

Description

The HeaderBar control displays a title and optional left and right buttons at the top of the form. Buttons can be text, an icon or both. When clicked, HeaderBarID_onclick(choice) is called. The name of the button which is called is in choice. If you have an icon with no name as a button, the name of the icon will be passed.

To add a control to your app, choose the control’s icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the control: usually, just onclick.

When clicked, two events are sent. Ignore the first one - it's an object. See sample code below.

When using AppStudio 4 with jQuery Mobile 1.4 on old Android devices (Android OS 2.x), the built in icons will not appear. To fix this, add the following to the manifest property of your project. If your button uses theme 'b', change 'white' to 'black'.

  nsb/images/icons-png/user-white.png

To be safe, leave a bit of space under the HeaderBar. Its height differs from device to device.

Custom Icons

There are a few steps to using your own icon instead of the built in ones.

1. In the Properties Window, put 'custom' into the icon property. (In the picker, it's the gray circle in the 4th row).

2. Add your icon to the project. Dragging into the Project Explorer is fine. The icon should be 16x16.

3. Add this code to the styleheaders property in Project Properties:

#HeaderBar1_left:after {background-image: url("icon_16x16.png")}

The first word should be the name of the control with a # in front of it.

Properties

Standard properties are supported, plus:

leftChangeForm	The name of the form to go to if the left button is clicked.
leftButtonIcon	Name of icon for left button. Design time only.
leftButtonIconPos	None, Left or notext. Use None for no icon.. Design time only.
leftButtonName	The name of the left icon. Design time only.
rightChangeForm	The name of the form to go to if the right button is clicked.
rightButtonIcon	Name of icon for left button. Design time only.
rightButtonIconPos	None, Left or notext. Use None for no icon.. Design time only.
rightButtonName	The name of the right icon. Design time only.
title	The title which appears in the center of the bar. Design time only.

Events

Standard events are supported.

Example

HeaderBar1.onclick = function(button) {
  if (TypeName(button)=="object") { return ''; }
  alert("Button '" + button + "' clicked.");
}

// Change the text in a HeaderBar. Do not leave the text blank in the design screen:
$("#HeaderBar1 h1").text("New Title");

// Change the font size in a HeaderBar
$('#HeaderBar1 *').css('font-size', 10)

Function HeaderBar1_onclick(button)
  If TypeName(button)="object" Then Exit Function
  MsgBox "Button '" & button & "' clicked."
End Function

' Change the text in a HeaderBar:
  $("#HeaderBar1 h1").text("New Title")
  HeaderBar1_left.textContent="Left Button"
  HeaderBar1_right.textContent="Right Button"

Often times it is desirable to hide or show header buttons (left or right) based on data or some programatic event. The following code shows you to hide or show a button on the HeaderBar at run time.

Hides the right button.
$("#HeaderBar1>div:last").hide()

Hides the left button.
$("#HeaderBar1>div:first").hide()

Add right button back after it has been hidden,
$("#HeaderBar1>div:last").show()

Add left button back after it has been hidden,
$("#HeaderBar1>div:first").show()

Here's how to add an icon as part of the title. Add an Image control with the image you want to the project. Then, add the following code to add the image before the text. Use .append() to add after the text.

Sub Main()
  Image1.style.top="initial"
  Image1.style.left="initial"
  Image1.style.position="relative"
  Image1.style.display="inline-block"
  Image1.style.verticalAlign="middle"
  Image1.style.marginRight="6px"
  $("#HeaderBar1 > h1").prepend(Image1)
End Sub

Output

(message box showing “Button 'left' clicked.”)