HeaderBar: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
 
(22 intermediate revisions by 5 users not shown)
Line 1: Line 1:
'''jQuery'''
'''jQuery'''


[[file:HeaderBar.jpg]]
[[file:HeaderBar.png]]


== Description ==
== Description ==
Line 8: Line 8:


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 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'.
<pre>
  nsb/images/icons-png/user-white.png
</pre>


To be safe, leave a bit of space under the HeaderBar. Its height differs from device to device.
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 [[Properties Window|Project Properties]]:
<pre>
#HeaderBar1_left:after {background-image: url("icon_16x16.png")}
</pre>
The first word should be the name of the control with a # in front of it.


== Properties ==
== Properties ==
Line 16: Line 37:
{| class="wikitable"
{| class="wikitable"
|-
|-
| 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.
| 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.
| 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.
| 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.
| rightButtonName || The name of the right icon. Design time only.
Line 33: Line 62:
== Example ==
== Example ==


<pre>
<tabber>
JavaScript=
<syntaxhighlight lang="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)
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
Function HeaderBar1_onclick(button)
Function HeaderBar1_onclick(button)
   If TypeName(button)="object" Then Exit Function
   If TypeName(button)="object" Then Exit Function
   MsgBox "Button '" & button & "' clicked."
   MsgBox "Button '" & button & "' clicked."
End Function
End Function
' Change the text in a HeaderBar:
  $("#HeaderBar1 h1").text("New Title")
  HeaderBar1_left.textContent="Left Button"
  HeaderBar1_right.textContent="Right Button"
</syntaxhighlight>
</tabber>
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.
<pre>
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()
</pre>
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.
<pre>
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
</pre>
</pre>


Line 43: Line 122:


<pre>
<pre>
(message box showing “Button ‘left’ clicked.”)
(message box showing “Button 'left' clicked.”)
</pre>
</pre>



Latest revision as of 15:46, 24 July 2019

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.”)