B4J Tutorial PropertySheet

Discussion in 'B4J Tutorials' started by Erel, Feb 18, 2015.

  1. Erel

    Erel Administrator Staff Member Licensed User

    jControlsFX library v1.20 includes a control named PropertySheet. With this control it is very simple to create forms with many fields.

    The data for these fields comes from a custom type instance.
    The editor type used by each field is determined from the field type.


    The PropertySheet Set method expects two parameters: the type instance and a metadata map that describes the fields.

    The above screenshot was taken from this program:
    Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private sheet As PropertySheet
    Type Record(Text As String, Number As Double, _
    As Paint, Fnt As Font, Choices As String, YesNo As Boolean)
    Private cutils As ControlsUtils
    End Sub

    Sub AppStart (Form1 As Form, Args() As String)
       MainForm = Form1
    Dim rec As Record
    Dim meta As Map = CreateMap("Text": sheet.CreateMeta("Text""Category1""Text Text"), _
    "Number": sheet.CreateMeta("Some Number""Category1""Number Number"), _
    "Color": sheet.CreateMeta("Nice Color""Category2""Nice color"), _
    "Fnt": sheet.CreateMeta("Favorite Font""Category2"""), _
    "YesNo": sheet.CreateMeta("Yes?""Category2"""), _
    "Choices": sheet.CreateMeta("Choose one""Category3", _
    "choose one from the list").SetChoices(Array("Choice 1""Choice 2""Choice 3")))
       sheet.Set(rec, meta)
    End Sub

    The property editor is derived from the field type:

    String - Text field.
    Numbers (other than Long) - Numbers field.
    Paint - Color picker.
    Long - Date picker.
    Font - Font picker.

    You can also set the possible values by calling PropertyMetaData.SetChoices.


    The metadata map, maps between the fields names, which are case sensitive, and PropertyMetaData objects which are created with PropertySheet.CreateMeta.

    The metadata includes:
    Name - The text that appears at the left side of the property.
    Category - The property category. This is used when the sheet is in category mode to categorize the properties.
    Description - The property tooltip.
    You can also call SetChoices to define the possible values.


    Whenever the user modifies a value, the value is automatically updated in the type instance.



    The attached short example creates 10 records and uses RandomAccessFile.WriteB4XObject to save and later load the data from a file.

    Attached Files:

    Last edited: Jul 9, 2017
    amaxco, Mashiane, jmon and 6 others like this.
  2. alwaysbusy

    alwaysbusy Expert Licensed User

    Is there some kind of way to send a Map instead of a Type object in sheet.Set(rec, meta)?

    I have a bunch of propertysheets to make and it would be a lot easier if I could just load the structure from a JSON file and dynamically create the PropertySheet from it.

    e.g. the JSON would look something like this:

    {"view": {
    "properties": {
    "property": [
    "choices": [
          {"name": "Parent", "type": "text", "value": "Page",
            "choices": [
          {"name": "ButtonType", "type": "combo", "value": "RAISED",
            "choices": [
          {"name": "Enabled", "type": "checkbox", "value": "TRUE",
            "choices": [
          {"name": "IconName", "type": "text", "value": "",
            "choices": []
          {"name": "IconAlign", "type": "combo", "value": "ICONALIGN_LEFT",
            "choices": [
          {"name": "Size", "type": "combo", "value": "BUTTONSIZE_NORMAL",
            "choices": [
          {"name": "Text", "type": "text", "value": "",
            "choices": []
          {"name": "ThemeName", "type": "text", "value": "",
            "choices": []

    Or can I somehow create a Type object at runtime?
    rboeck likes this.
  3. Erel

    Erel Administrator Staff Member Licensed User

    Currently it is not possible. It is also not possible to create a type object at runtime.
  4. Erel

    Erel Administrator Staff Member Licensed User

    @alwaysbusy if you need this feature for the new tool you develop then I can add it.
    amaxco and Cableguy like this.
  5. alwaysbusy

    alwaysbusy Expert Licensed User

    Thanks for the offer @Erel! I'm checking out several possible ways to write the tool (B4J, Javascript). However, it may be usefull to be able to use sheet.Set(rec, meta) somewhat more flexible instead of using a Type like with a Map. I do love your implementation with the 'record' Type as it is very easy to use (setting, getting values). It's just in my situation, it means a lot of typing :)

    Just a thought:

    Expanding meta so it can hold the 'field type'
    Then a Map with the key being the 'field name' (maybe concatenated with the category e.g. category_fieldname), value is the actual value.

    So I could use: sheet.set(Mapwithvalues, metawithfieldtype).

    On a side note (not sure it is possible). Maybe an event that is raised if a property is changed. Now I have to run a timer (300ms) that checks if anything is changed.

    But if you have another idea that can do the same, please implement it your way!
  6. Erel

    Erel Administrator Staff Member Licensed User

    JakeBullet70 and alwaysbusy like this.
  7. m4.s

    m4.s Member

    @Erel or @alwaysbusy

    Was B4J support ever implemented for the functionality requests discussed in this very old thread (i.e. using [JSON] Map and/or trapping property change event)? Or maybe now there is a better alternative to Property Sheets, possibly via some available user/custom controls?
  8. Erel

    Erel Administrator Staff Member Licensed User


    You can dynamically build a similar layout with the standard controls.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice