B4J Library [BANano] SDcomponent

I created some custom components for BANano so that I can have better graphics without having to import heavy framework components that slow down the compilation. The result is acceptable at the moment and can be improved in the future. (Further information can be found here)

Here I release a small version of the library and an example

COMPONENT

• SDbutton
• SDcol
• SDcombo
• SDcontainer
• ShowToast
• SDgrid
• SDicon
• SDimage
• SDlabel
• SDlist
• SDrow
• SDscrollHoriz
• SDselect
• SDstepper
• SDswitch

---

BANanoSDcomponent

Author: Star-Dust
Version: 1.00

• SDbutton
  • Events:
    • Click (event As BANanoEvent)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • backgroundColor (Color As String)
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • TextColor (Color As String)
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Text As Object
    • Visible As Boolean
      get/set if the component is visible
• SDcol
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • backgroundColor As String [write only]
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDcombo
  • Events:
    • Selected (Text As String)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • SetSuggestions (Sugg As String)
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDcontainer
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDfunc
  • Functions:
    • Initialize (mBANano As BANano)
    • NavigateTo (MainPageElement As BANanoElement, LayoutName As String)
    • SDRegEx (Pattern As String, str As String) As String()
    • ShowToast (Text As String, Tpe As String, Pause As Int, Cancellable As Boolean)
• SDgrid
  • Events:
    • Click (Row As Int, Col As Int)
    • HeadClick (Col As Int)
  • Functions:
    • AddRow (Column As String)
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • Clear
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • refresh
    • Remove
      removes the component from the parent tag
    • SetGridBackgroundColor (Color As String)
    • SetGridTextColor (Color As String)
    • SetHeaderRowBackgroundColor (Color As String)
    • SetHeaderRowTextColor (Color As String)
    • SetRowBackgroundColor (Color As String, Row As Int)
    • SetRowTextColor (Color As String, Row As Int)
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • BoldText As Int [write only]
    • CellBackgroundColor As Int [write only]
    • CellTextColor As Int [write only]
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • NormalText As Int [write only]
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Text As Int [write only]
    • Visible As Boolean
      get/set if the component is visible
• SDicon
  • Events:
    • Click (event As BANanoEvent)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • backgroundColor (Color As String)
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • TextColor (Color As String)
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Text As Object
    • Visible As Boolean
      get/set if the component is visible
• SDimage
  • Events:
    • Click (event As BANanoEvent)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDlabel
  • Events:
    • Click (event As BANanoEvent)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • BackgroundColor As String
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Text As String
    • TextColor As String [write only]
    • TextgroundColor As String [read only]
    • Visible As Boolean
      get/set if the component is visible
• SDlist
  • Events:
    • Click (Item As String, ID As String)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • Changeitem (Items As String, idItems As String)
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • BackgroundColor As String [write only]
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • TextColor As String [write only]
    • Visible As Boolean
      get/set if the component is visible
• SDrow
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • backgroundColor As String [write only]
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDscrollHoriz
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • backgroundColor As String [write only]
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDselect
  • Events:
    • Select (ID As String, Item As String)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • ChangeOption (Option As String, idOption As String)
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Visible As Boolean
      get/set if the component is visible
• SDstepper
  • Events:
    • Click (event As BANanoEvent)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • BackgroundColor As String
    • btnBackgroundColor As String
    • btnTextColor As String [write only]
    • btnTextgroundColor As String [read only]
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • TextColor As String [write only]
    • TextgroundColor As String [read only]
    • Value As String
    • Visible As Boolean
      get/set if the component is visible
• SDswitch
  • Events:
    • Click (event As BANanoEvent)
  • Functions:
    • AddToParent (targetID As String)
      add the component to a parent tag
    • BuildExStyle As String
      internal method to build the style
    • DesignerCreateView (Target As BANanoElement, Props As Map)
      this is the place where you create the view in html and run initialize javascript
    • Initialize (CallBack As Object, Name As String, EventName As String)
      initializes the component
    • Remove
      removes the component from the parent tag
    • Trigger (event As String, params As String)
      trigger an event
  • Properties:
    • ActiveBackgroundColor As String
    • Classes As String
      set css classes to the main tag
    • Element As BANanoElement [read only]
      returns the BANanoElement
    • Enabled As Boolean
      get/set if the component is enabled
    • ID As String [read only]
      returns the tag id
    • InactiveBackgroundColor As String
    • MarginBottom As String
      get/set the margin bottom of the main tag
    • MarginLeft As String
      get/set the margin left of the main tag
    • MarginRight As String
      get/set the margin right of the main tag
    • MarginTop As String
      get/set the margin top of the main tag
    • PaddingBottom As String
      get/set the Padding bottom of the main tag
    • PaddingLeft As String
      get/set the Padding left of the main tag
    • PaddingRight As String
      get/set the Padding right of the main tag
    • PaddingTop As String
      get/set the Padding top of the main tag
    • Style As String
      get/set the style of the main tag
    • Tag As Object
      get/set attach any object to the component
    • Value As Boolean
    • Visible As Boolean
      get/set if the component is visible

---

• Rel. 1.0

 

[Star-Dust]

 

[alwaysbusy]

Great new BANano library! I'm a fan of lightweight UI's. PWAs are often perceived as slow and bulky, but they really don't have to be

 

[Star-Dust]

I'm trying to produce lightweight components, but I'm a beginner.

 

[Theera]

    Private BANano As BANano 'ignore

Excause me, Where to get BANano library?

 

[Star-Dust]

This library is useful for those who already use the BANano library to create WebApps. If you don't know Banano, search for it on the forum and study it, then you can use this

 

[Theera]

This library is useful for those who already use the BANano library to create WebApps. If you don't know Banano, search for it on the forum and study it, then you can use this

OK.Thank you for kind ofyou.

[Web][BANano] Website/App/PWA library with Abstract Designer support

Download the latest version here: https://www.b4x.com/android/forum/threads/banano-a-sneak-peek-into-a-progressive-web-app-library.99740/#post-627764 INTRO BANano is a new B4J library to websites/webapps with (offline) Progressive Web App support. Unlike its big brother ABMaterial, BANano...

www.b4x.com