hdolder.com srl  

Software R&D
 

   hdc Home    |    Content    |    Blog    |    Director    |    Contact    |    mail us   

 

M&P BXaml Styles and Themes

Posted on August 22, 2013 by Herman Dolder

BXaml implements Styles (Explicit and Implicit) and Themes.

BXaml introduces the BStyle BLOCK to support the styling of BLOCKS, HTML elements and SVG elements.

The BStyle BLOCK

The BStyle BLOCKS enable you to set properties values of all kinds of visual and non-visual BXaml objects.

An BStyle BLOCK encapsulates a BXML Markup Extension (BME) expression which contains a set of property-value pairs. For example


<blkx:BStyle id='common0' 
  Style='{backgroundColor:`#000000`, fontFamily:`Arial`, fontSize:`14px`, fontWeight:`bold`, color:`#FFFFFF` }' />     
Notice that in BXaml Markup Extensions, to avoid conflicts and ambiguities, to delimit the values we use the Grave accent '`' character ( ASCII code 96) instead of using the Single quote or the Double quotes character.

Cascading: Inheritance and overriding

Styles in BXaml can be extended or inherited

BXaml styles can be based on other styles through the basedOn property in the BME. When you use this property, the new style will inherit the property-value pairs of the original style that are not explicitly overrided in the new style. For example in H5J:


<blkx:BStyle id='common0' 
  Style='{backgroundColor:`#000000`, fontFamily:`Arial`, fontSize:`14px`, fontWeight:`bold`, color:`#FFFFFF` }' /> 
<blkx:BStyle id='common1' 
   Style='{basedOn:`common0`, height:`23px`, width:`80px` , fontSize:`12px`}' />      

the style common1 inherits from stayle common0 but overrides fontSize.

Explicit Styling

We can explitly apply the above styles to, for example, a Buuton, by simply: doing:


<button BStyle='common0'  .... />        

Implicit Styling

We can implitly apply an style to, all instances of a given type by means of the TargetType property. For example:


<blkx:BStyle id='commonButton' TargetType='button' Style='{backgroundColor:`#000000`, fontFamily:`Arial`, fontSize:`14px`, fontWeight:`bold`, color:`#FFFFFF` }' />           

BXaml Hybrid styling

You can use explicit styles to oveerride implicit styles.

In H5J BXaml styles can coexist with inline CSS styles.

  • BXaml explicit styles can override inline CSS styles settings and
  • inline CSS styles can override implicit and explicit BXaml styles settings.


BXaml Themes

In BXaml a Theme is a BLOCK that contains a set of structured (interrelated) BStyle BLOCKS.

The role of a Theme BLIOCK is similar to that of an Cascade Style Sheet (CSS) in HTML.

A Theme BLIOCK can be dynamically loaded t o dynamically change the appearance and behavior of an application.

BXaml Theme example

The foolowing "BDemoTheme" BLOCK defines the Theme used to implcitly stylize the M&P H5J Demos:


module ap {
       export  class  BDemoTheme  extends  blkx.BLOCKBase  {
            constructor()  {
                  super();
                  this.CreateInnerBlocks();
            }

            CreateInnerBlocks()  {
                        var  board  =
                              obx.LoadAndStartN(this,  this.XamlCode);
            }

            BStart()  {
            }

            private  XamlCode  =
"<mpXaml   "  +
"   xmlns:mpx='mpx'      "  +
"   xmlns:blkx='blkx'   "  +
"   >   "  +
"   <blkx:BBoard>  "  +
"      <blkx:BStyle  id='sbview0'      "  +
"           TargetType='blkx.BView'  "  +
"           Style='{backgroundColor:`#161616`  }'  />  "  +
"      <blkx:BStyle  id='common0'      "  +
"           Style='{backgroundColor:`#000000`,   fontFamily:`Arial`,  fontSize:`14px`,  fontWeight:`bold`,  color:`#FFFFFF`  }'  />  "  +
"      <blkx:BStyle  id='common1'      "  +
"           Style='{basedOn:`common0`,  height:`23px`,  width:`80px`  }'  />  "  +
"      <blkx:BStyle  id='sbtn0'   "  +
"              Style='{backgroundColor:`#4A4A4A`,  width:`80px`,  height:`30px`,  color:`#FFFFFF`}'  />   "  +
"      <blkx:BStyle  id='sbtn1'   "  +
"              TargetType='button'  "  +
"              Style='{basedOn:`sbtn0`  }'  />     "  +
"      <blkx:BStyle  id='sbtn2'   "  +
"              TargetType='input.button'     "  +
"              Style='{basedOn:`sbtn1`}'  />      "  +
"      <blkx:BStyle  id='BRButton1'   "  +
"              TargetType='blkx.uic.BRButton:TitleBar'  "  +
"              Style='{diameter:`45`,  backgroundColor:`#4A4A4A`,  fontSize:`12`}'  />  "  +
"      <blkx:BStyle  id='chkb1'   "  +
"              TargetType='input.checkbox'  "  +
"              Style='{basedOn:`common0`  }'  />  "  +
"      <blkx:BStyle  id='sradio1'      "  +
"              TargetType='input.radio'      "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='sselect1'     "  +
"              TargetType='input.select'     "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='sdate1'  "  +
"              TargetType='input.date'  "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='snumber1'     "  +
"              TargetType='input.number'     "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='srange1'      "  +
"              TargetType='input.range'      "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='stxt1'   "  +
"              TargetType='input.text'  "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='pwdt1'   "  +
"              TargetType='input.password'  "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='semail1'      "  +
"              TargetType='input.email'      "  +
"              Style='{basedOn:`common1`  }'  />  "  +
"      <blkx:BStyle  id='stxtarea1'   "  +
"              TargetType='textarea'     "  +
"              Style='{basedOn:`common0`,  cols:`50`,  rows:`4`,  wrap:`virtual`  }'  />      "  +            
"      <blkx:BStyle  id='slabel1'      "  +
"              TargetType='label'      "  +
"              Style='{basedOn:`common1`,  background:`transparent`  }'  />  "  +
"      <blkx:BStyle  id='span1'      "  +
"              TargetType='span'      "  +
"              Style='{basedOn:`common1`,  fontWeight:`normal`,  background:`transparent`  }'  />  "  +
"   </blkx:BBoard>      "  +
"</mpXaml>      ";

      }  //  class
}  //  module          

and the Theme BLOCK is inserted at the beginning of the application TopBoard (the beginning of the application BLOCKTree):


    "<mpXaml " +
    " xmlns:ap='app'  " +
    " xmlns:blkx='blkx' " +
    " xmlns:mpx='mpx'  " +
    ">  " +
    " <blkx:BBoard  " +
    "  id='*TopBoard'  " +
    " > " +
    " <ap:BDemoTheme />  " + .......          

Style TargetType Subtypes

As we will explain in a forthcoming article BXaml define TargetType subtypes that are similar to the CSS 'classes'. In the example Theme above the


"      <blkx:BStyle  id='sbtn2'   "  +
"              TargetType='input.button'     "  + ...            

and


"      <blkx:BStyle  id='BRButton1'   "  +
"              TargetType='blkx.uic.BRButton:TitleBar'  "  + ....            

TargetType declarations include subtypes.

Comments

  • Implicit styles uses internally the BUS and are applied inmediately after the instantiation in BXaml of a targeted element.
  • The BStyle BLOCKS must be declared (in the BLOCKTree) before than the elements that refer to them.
  • The same styling schema is used in BXaml.NET to apply styles to WPF Windows and Windows Forms.


 

 

TBW The BLOCKS World 2015  hdolder.com srl
C30815
2015-06-26