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.

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

Properties

Standard properties are supported, plus:

leftButtonIcon	Names of icon for left button. Use false for no icon, or alert, arrow-d, arrow-l ,arrow-r, arrow-u ,back, check, delete, forward, gear, grid, home, info, minus, plus, refresh, search, star. Design time only.
leftButtonName	The name of the left icon. Design time only.
rightButtonIcon	Names of icon for right button. Use false for no icon, or alert, arrow-d, arrow-l ,arrow-r, arrow-u ,back, check, delete, forward, gear, grid, home, info, minus, plus, refresh, search, star. 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 (Basic)

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.children[0].children[0].children[0].innerHTML="Left Button"
  HeaderBar1.children[2].children[0].children[0].innerHTML="Right Button"

Example (JavaScript)

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)

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()

Output

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