B4A Library [B4X] [XUI] Cross platform & native UI library

Erel

Administrator
Staff member
Licensed User
Update: The designer was updated since the tutorial was written. It is now possible to declare views as B4XView from the designer and it is also possible to copy and paste views between the three platforms.

Video tutorial:


The purpose of XUI library is to make it easier to share code between B4A, B4J and B4i projects.
It is an important new library and I expect that all B4X developers who target more than a single platform will use it at some point.

Two main concepts:
- XUI libraries API is the same between all three libraries.
- It is very simple to switch between the XUI objects and the native objects when needed.

The second point is important. XUI types provide a different "view" or a different wrapper above the same native objects. They do not replace the native types.
There are some new features provided in the libraries which you can use even if you target a single platform.

Example of CustomListView class that is supported by B4A, B4i and B4J:



The main type in XUI is B4XView.
Any view or node can be assigned to a B4XView variable.
The B4XView type includes all the common methods, including methods that are not available in all types.
See the methods documentation for more information.
B4X:
Dim xlbl As B4XView = Button1
xlbl.Text = "Click!"
Dim b As Button = xlbl
Steps to writing cross platform solutions:

1. Use the designer to build the interface. The designer hides many of the differences between the platforms. Make sure to use anchors and designer script to handle different screen sizes.

2. Use B4XViews whenever possible and whenever it makes sense. You can change the types of views added with the designer to B4XView:
B4X:
Sub Globals
   Private clv1 As CustomListView
   Private clv2 As CustomListView
   Private Label1 As B4XView '<--- manually change to B4XView or change with the designer.
   Private CheckBox1 As B4XView
End Sub
3. Switch to the native types when needed. You can use the built-in conditional compilation symbols for this:
B4X:
#If B4A
Dim nCheckBox1 As CheckBox = CheckBox1
nCheckBox1.Ellipsize = "END" 'no such property in B4XView
#Else If B4i
Dim nCheckBox1 As Switch = CheckBox1
nCheckBox1.TintColor = Colors.Red
#End If
CheckBox1.Checked = True
'B4XView.Checked works with:
'B4A: CheckBox, RadioButton, ToggleButton and Switch
'B4i: Switch
'B4J: CheckBox, RadioButton and ToggleButton
Other types available:

- B4XBitmap - Wrapper for Bitmap (B4A, B4i) and Image (B4J). Adds all the features available in B4A and B4i Bitmap type to B4J (Resize, Crop, Rotate and saving as Jpeg).
- XUI - This type holds various methods to help writing cross platform code.
For example SubExists in B4i expects another parameter (the number of arguments). XUI.SubExists adds this parameter. The parameter is not used in B4J and B4A.
It includes a DefaultFolder property as well as other useful methods.

Notes & tips

- In almost all cases you can just change the variable type from the native view to B4XView. One place where you cannot is in views passed from events. In such cases you need to change the type to Object (if you want it to be cross platform compatible).
This is the case with DesignerCreateView sub:
B4X:
'B4A / B4i:
Public Sub DesignerCreateView(base As Panel, lbl As Label, props As Map)
'B4J:
Public Sub DesignerCreateView(base As Pane, lbl As Label, props As Map) 'Pane instead of Panel
'Cross platform:
Public Sub DesignerCreateView(base As Object, lbl As Label, props As Map)
Dim mbase As B4XView = base
- The B4J library uses imgscalr open source code for the bitmap manipulation. It is superior to ImageView resize algorithm.
- Some of the new features that are not available in the core libraries and can be used without relation to the cross platform features:
  • B4XView.Snapshot (new in B4A and B4i) - Captures the view appearance and returns a B4XBitmap.
  • B4XView.SetVisibleAnimated (new in B4J and B4i).
  • B4XView.Color (new in B4A and B4J) - Gets the color value if it available.
  • B4XView.SetColorAnimated (new in B4J).
  • B4XBitmap.Crop / Resize / Rotate / WriteToStream (new in B4J)
- Events are not modified. This means that the event subs will need to be different in many cases. You can see how it is handled in CustomListView class. The platform specific event subs call a shared sub.
- There are some missing features like dialogs and canvas. They will be added.
- The libraries require B4A v7.3+, B4i v4.3+ and B4J v5.9+.
- XUI is compatible with Android 4+ (API level 14+).

Examples

xCustomListView: https://www.b4x.com/android/forum/threads/84501
Calculator example: https://www.b4x.com/android/forum/t...platform-native-ui-library.84359/#post-534536
Badger class: https://www.b4x.com/android/forum/threads/b4x-class-badger-add-badges-to-views.81723/
CircularProgressBar: https://www.b4x.com/android/forum/threads/b4x-xui-custom-view-circularprogressbar.81604/

And more: https://www.b4x.com/search?query=[xui]

Change log:

XUI libraries are now internal libraries. Use the one preinstalled with the IDE.


Version 1.50 (iXUI)
  • B4XCavas.DrawLine was missing. Fixed.
Version 1.50 (jXUI) - internal library now.
  • Previous animations are stopped automatically when a new animation of the same type is started.

Version 1.48 (iXUI only):
  • XUI.Color_RGB / Color_ARGB were missing. Fixed.
Version 1.47:
  • B4XPath.InitializeRoundedRect - Creates a rectangle path with rounded corners.
Version 1.46:
  • B4XFont.ToNativeFont - Returns a native font object.
  • XUI.CreatePanel - Creates a panel that clips its child views. This is the same behavior like panels in B4A, B4i and B4J when adding panes with the designer.
Version 1.45:
  • Beta label removed.
  • B4XCanvas.Release - Releases native resources.
  • XUI.FileUri - Returns a file uri that can be used with WebView to load local resources. Also supports assets files.
Version 1.40:

Version 1.30:
  • Fixes a bug in XUI.CreatePanel in B4A.
  • B4XView.TextColor is now supported in all views in B4J. It sets the -fx-text-fill CSS attribute on views that do not have a TextColor property.
  • B4XView coordinates are rounded in B4J. This prevents the text from being blurred.
Version 1.25:
  • Fixes an issue in B4XCanvas.CreateBitmap.
  • B4i animations are now linear as in B4A and B4J.
  • XUI.CreatePanel - Useful method to create a Panel or Pane
Version 1.20:
  • New types:
    • B4XCanvas
    • B4XRect
    • B4XPath
  • B4XView.SetTextAlignment for labels and other text fields.
  • XUI.IsB4A / IsB4i / IsB4J properties. Alternative to compilation symbols (when possible).
  • The same documentation appears in all three libraries: https://www.b4x.com/android/help/xui.html

Version 1.10:
  • B4XFont - Similar to B4J Font, B4i Font and B4A Typeface + size.
  • B4XView new properties and methods:
    • Font
    • Rotation
    • SetRotationAnimated
    • BringToFront
    • SendToBack
  • XUI - New methods to create B4XFonts (CreateFont, CreateFont2, CreateDefaultFont and CreateDefaultBoldFont).
 
Last edited:

Erel

Administrator
Staff member
Licensed User
Example of a calculator:


In this case all the code is implemented in the main module (with the help of B4XEval class to make the actual calculations).
In a real app it is better to put such code in a class as class modules can be shared.

(The LCD font file included in the example is limited to non-commercial usage)
 

Attachments

Last edited:

Mashiane

Expert
Licensed User
Enjoying the customlistview so long, if you don't mind me highlighting this, subsequent calls to clear it don't work.

I'm clicking each item of the segment control, and filter my list to only show the available contents...

B4X:
Sub tblAlpha_ValueChanged (Value As String)
    allLearners = kvs.GetSimple("learners")
    lstLearners.Clear
    spList = jMash.StrParse("~",allLearners)
    For Each strLearner As String In spList
        If strLearner.StartsWith(Value) Then lstLearners.AddTextItem(strLearner,strLearner)
    Next
End Sub
clv.gif
 

Erel

Administrator
Staff member
Licensed User
This line was missing from the Clear sub:
B4X:
sv.ScrollViewInnerPanel.RemoveAllViews
I will create a thread specifically for xCustomListView and post the updated class.
 
Top