B4J Tutorial [ABMaterial] Themes Quick Reference

Ola there

I have been thinking of a name for the ABMaterial framework fans. ABMaterialians! ha ha ha! That's long. ABMatians, sounds cool, I could be wrong though...

Anyway, as part of my learning curve and the idea to master the ABMaterial framework, whilst I was working on MyMaterial.Show, I tried a theme builder, what I later realized was that mine theme builder was all over the place as I did not fully understand what each theme meant and which properties it had. In my hurry to know and develop an ABMaterial WebApp quickly, I greatly focused on the demo themes and I later had questions in terms of what now. I dont want lightblue, I want orange!

The whole ABMaterial framework is mostly based on a default light-blue theme it seems. I have learned to put some variances to my app that I was working on, so far the experiement has been good.

As part of my experiment, I had to go through each theme with a fine comb. So this collection will be based on each of the themes I have used so far and what you can do with them.

Apparently, some themes have more than one property besides the ForeColor and BackColor. When you change just one property, the rest of the built in default theme properties will be used. You can then apply any theme property you want but more especially all of these deal with colors and their intensities.

As a newbie to this framework, do expect mistakes and please advise where you can. I'm just sharing what I have learned.

As you have picked in the demo, in some instances, only just one theme property is changed, but there is a whole lot more. As indicated by alwaysbusy, mastering themes is the first thing before mastering the grid and thus the framework itself.

ABMaterial has been well documented here for reference.

From what I have learned, the intensity darkens or lightens your color depending on what you have selected, when left blank, the actual nice color is left as is.

PS: The attached document and further upcoming ones have been generated with jPDF, what a find. Only if I can figure out removing last empty page..

Enjoy fellow ABM's

 

[Mashiane]

These will be based on ABMaterial 1.22 as that is what I'm trying to master before I move to ABMaterial 2. The perks of being a donator!

 

[Mashiane]

The CellTheme,

uses these variants for alignment

    VerticalAlign.Add("ABM.TABLECELL_VERTICALALIGN_TOP")
    VerticalAlign.Add("ABM.TABLECELL_VERTICALALIGN_MIDDLE")
    VerticalAlign.Add("ABM.TABLECELL_VERTICALALIGN_BOTTOM")
    
HorizontalAlign.Add("ABM.TABLECELL_HORIZONTALALIGN_LEFT")
HorizontalAlign.Add("ABM.TABLECELL_HORIZONTALALIGN_CENTER")
HorizontalAlign.Add("ABM.TABLECELL_HORIZONTALALIGN_RIGHT")

 

[stanmiller]

Another tip on using themes...

We use constants for all theme names and substitute the constant in argument lists.

This not only leverages the compiler as a spell checker (imagine misspelling a theme name and scratching one's head trying to find where) it also allows optimizing theme operations in the release build.

In the debug build you might use the full theme name whereas in the release build something short.

Sub Class_Globals

    ' Input component text area qualifier
    Private Const INPUT_TEXT     = False As Boolean   'ignore
    Private Const INPUT_TEXTAREA = True As Boolean    'ignore

    ' Page themes
    #if DEBUG
        Private Const COMBO_THEME          = "combo_theme" As String
        Private Const INPUT_THEME          = "input_theme" As String
        Private Const CELL_THEME           = "cell_theme" As String
        Private Const CELL_THEME_AMOUNT    = "cell_theme_amount" As String
        Private Const CELL_THEME_CALCULATE = "cell_theme_calculate" As String
        Private Const HEADER_THEME         = "header_theme" As String
    #else
        Private Const COMBO_THEME          = "t1" As String
        Private Const INPUT_THEME          = "t2" As String
        Private Const CELL_THEME           = "t3" As String
        Private Const CELL_THEME_AMOUNT    = "t4" As String
        Private Const CELL_THEME_CALCULATE = "t5" As String
        Private Const HEADER_THEME         = "t6" As String
    #end if

End Sub

   ' ...

   ' Add input theme
    theme.AddInputTheme( INPUT_THEME )
    theme.Input( INPUT_THEME ).ForeColor               = ABM.COLOR_GREY
    theme.Input( INPUT_THEME ).ForeColorIntensity      = ABM.INTENSITY_DARKEN2
    theme.Input( INPUT_THEME ).FocusForeColor          = ABMShared.COLOR_ACCENT_BLUE
    theme.Input( INPUT_THEME ).FocusForeColorIntensity = ABM.INTENSITY_DARKEN4
    theme.Input( INPUT_THEME ).InputColor              = ABM.COLOR_BLACK
    theme.Input( INPUT_THEME ).InputColorIntensity     = ABM.INTENSITY_DARKEN4
    theme.Input( INPUT_THEME ).ValidColor              = ABM.COLOR_GREY
    theme.Input( INPUT_THEME ).ValidColorIntensity     = ABM.INTENSITY_NORMAL

    '...

    ' Length
    Dim inpLength As ABMInput
    inpLength.Initialize(page, "inpLength", ABM.INPUT_NUMBER, "Length (feet)", INPUT_TEXT, INPUT_THEME)
    inpLength.PlaceHolderText = ""
    inpLength.IconName = "fa fa-pencil"
    page.Cell(4,1).AddComponent(inpLength)


   '...

.

 

[Mashiane]

Theme Changes in ABMaterial Version 2: NavigationBarTheme

Attached is the quick reference for the theme, 2 new properties have been added.

 

[Mashiane]

Hi again

Due to the fast movement of time and the very interesting developments in relation to ABMaterial, one has to with God speed grasp as much as they can. The two attached files are based on the updates to the themes in version 2.17 of the framework.

 

[Mashiane]

ABMaterial 3.75 Theme definitions with default values for quick reference...

https://www.dropbox.com/s/pfdwaff9bs427tj/ABMaterial 3.75 Theme Definitions.zip?dl=0