Some Controls in depth: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
(Undo revision 4451 by Ghenne (talk))
Line 1: Line 1:
Controls make the visual elements of your app.
= Label =


An app will have one or more forms. Each form will have a collection of controls on it, customized by you with different sizes and appearances.
Controls are defined by their properties. The Label control is a simple control. Most of the properties for a control are set to default values when the control is created, so it is usable right away. Let's look at the options for customizing it.


In this section, we will see how to add controls and forms to an app.  
[[File:Labelcontrol.JPG|right]]
* align: left, center, right
* alignVertical: top, center, bottom (no % or multiline)
* backgroundColor: colors can be a name, #RRGGBB, rgb(R,G,B) or transparent
* borderColor
* borderStyle: solid, dotted, dashed, etc.
* borderWidth: pixels
* bottom: pixels, percent, auto
* class: grayTitle default. Can be custom css.
* color: Of the text
* fontFamily: helvetica is default
* fontSize: in pixels. 16 is the default.
* fontStyle: normal, italic or oblique
* fontWeight: normal, bold or a number
* height
* hidden: true or false
* id: The name of the control.
* left
* onclick, etc: names of functions to be called when these events happen.
* right
* style: css style
* textContent: The content of the label. HTML is OK!
* top
* width


Add controls to your app by dragging and dropping them into place. Then, resize and set the properties.
= TextBox =
 
= Button =
Let's look at some controls.
= HeaderBar =
= List =
= Form =

Revision as of 21:28, 9 December 2013

Label

Controls are defined by their properties. The Label control is a simple control. Most of the properties for a control are set to default values when the control is created, so it is usable right away. Let's look at the options for customizing it.

  • align: left, center, right
  • alignVertical: top, center, bottom (no % or multiline)
  • backgroundColor: colors can be a name, #RRGGBB, rgb(R,G,B) or transparent
  • borderColor
  • borderStyle: solid, dotted, dashed, etc.
  • borderWidth: pixels
  • bottom: pixels, percent, auto
  • class: grayTitle default. Can be custom css.
  • color: Of the text
  • fontFamily: helvetica is default
  • fontSize: in pixels. 16 is the default.
  • fontStyle: normal, italic or oblique
  • fontWeight: normal, bold or a number
  • height
  • hidden: true or false
  • id: The name of the control.
  • left
  • onclick, etc: names of functions to be called when these events happen.
  • right
  • style: css style
  • textContent: The content of the label. HTML is OK!
  • top
  • width

TextBox

Button

HeaderBar

List

Form

Retrieved from "https://wiki.appstudio.dev/index.php?title=Some_Controls_in_depth&oldid=4690"