B4A Library [B4X] XUI Views - Cross platform views and dialogs

Status
Not open for further replies.

Erel

Administrator
Staff member
Licensed User

XUI Views is a b4x library (https://www.b4x.com/android/forum/threads/100383/#content). The same b4xlib library is compatible with B4A (v8.8+), B4J (v7.0+) and B4i (v5.50+).

It is a collection of custom views and dialogs. Everything is written in B4X. The source code is included inside the b4xlib file, which is a zip file.

Views:

- B4XComboBox - Cross platform ComboBox / Spinner / ActionSheet.
- ScrollingLabel - A label that scrolls the text when it is wider than the label.
- AnotherProgressBar - Vertical or horizontal animated progress bar.
- B4XLoadingIndicator - 6 different animated loading indicators.
- RoundSlider - A round slider.
- SwiftButton - 3d button
- AnimatedCounter
- B4XFloatTextField - A TextField / EditText with a floating hint
- B4XSwitch - Nice looking two state control.
- B4XPlusMinus - Allows the user to select a number or item from a previously set list.
- B4XBreadCrumb - Navigation control.

Dialogs:

- B4XDialog - A class that provides the features required to show a dialog. There are three methods to show dialogs: Show - Shows a simple dialog with text, ShowCustom - Allows you to pass a layout of your own and show it as a dialog, ShowTemplate - Shows a dialog based on a template class. See the source code for the template structure. It is quite simple.

Available templates:

- B4XDateTemplate - Based on AnotherDatePicker.
- B4XColorTemplate - Nice color picker.
- B4XLongTextTemplate - Scrollable text.
- B4XListTemplate - A list of items. The user can choose one of the items.
- B4XSignatureTemplate - Captures the user signature and adds a timestamp to the bitmap.
- B4XInputTemplate - Template for text and numeric inputs.
- B4XSearchTemplate - A list with a search field. An evolution of SearchView.
- B4XTimedTemplate - A template that wraps other templates and creates a dialog that closes automatically after the set time with a nice animated progress bar.

It is simple to add more templates.
Tutorial about B4XDialogs: https://www.b4x.com/android/forum/threads/101197

More views and templates will be added in future versions.

The examples projects are quite simple. Don't miss the following snippets:

B4i:
B4X:
Private Sub Page1_Resize(Width As Int, Height As Int)
   If Dialog.Visible Then Dialog.Resize(Width, Height)
End Sub

Private Sub Application_Background
   Dialog.Close(XUI.DialogResponse_Cancel)
End Sub
B4A:
B4X:
Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
  If KeyCode = KeyCodes.KEYCODE_BACK And Dialog.Close(XUI.DialogResponse_Cancel) Then Return True
   Return False
End Sub

Sub Activity_Resume
   'required to continue the animation after the activity is paused.
   AnotherProgressBar1.Visible = True
   B4XLoadingIndicator1.Show
   B4XLoadingIndicator2.Show
   ScrollingLabel1.Text = ScrollingLabel1.Text
End Sub

Sub Activity_Pause (UserClosed As Boolean)
   Dialog.Close (XUI.DialogResponse_Cancel)
End Sub
B4J:
B4X:
Sub MainForm_Resize (Width As Double, Height As Double)
   If Dialog.Visible Then Dialog.Resize(Width, Height)
End Sub
Updates

V2.23 - RoundSlider - New SetThumbColor and SetCircleColor methods.
V2.22 - Fixed issue with B4XInputTemplate in iOS where the decimal symbol is a comma.
V2.21 - Fixed issue with B4XSearchTemplate.Resize not working properly.
V2.19 - SwiftButton.CornersRadius new designer property (and public field).
V2.18 - B4XSeekBar.Interval field / designer property - Allows changing the values interval. Default value is 1.
V2.17 - B4XInputTemplate.lblTitle field was previously removed by mistake. This update adds it back.
V2.16 - Fixes an issue with B4XPlusMinus which caused it to remain in the "rapid" state after reaching the limits.

V2.15 - New B4XSeekBar control:

Can be vertical or horizontal. Colors can be changed. Note that the ValueChanged event is only raised when the user changes the value.
SwiftButton - New ButtonUp and ButtonDown events.

V2.13 - Fixes a crash that happens on old Android devices when B4XFloatTextField HintText is empty.
V2.12 - AnimatedCounter - Fade Color designer property. You can use it together with the background color property to change the counter colors.
V2.11 - B4XDialog.ButtonsHeight (default 40dip) and TitleBarHeight (30dip) fields.
V2.10 - B4XBreadCrumb control: (instructions - https://www.b4x.com/android/forum/threads/b4x-xui-views-cross-platform-views-and-dialogs.100836/page-3#post-665765)



V2.06 - B4XComboBox.B4iCancelButton string (only relevant to B4i). Default value is "Cancel". When this value is not an empty string the action sheet will show a Cancel button and will allow closing the sheet by clicking outside of the menu.
V2.05 - New B4XPlusMinus control:


Tutorial: https://www.b4x.com/android/forum/threads/b4x-b4xplusminus-spinner-wheel-alternative.105309/

V2.01 - Fixes an issue with animated counter in B4A when targetSdkVersion is set to 28.
V2.00 - Various internal views are now public. This was required to allow adding a light theme to preferences dialog: https://www.b4x.com/android/forum/threads/b4x-b4xpreferencesdialog-cross-platform-forms.103842/
V1.91 - B4XSwitch.Enabled property. The thumb disappears when the switch is disabled.
V1.90 - Many small changes and bug fixes.
- B4XColorTemplate.SelectedColor can be set.

V1.89 - ScrollingLabel.TextColor property.
V1.88 - B4XDialog.ButtonsOrder field. Allows changing the order of buttons. For example:
B4X:
Dialog.ButtonsOrder = Array As Int(XUI.DialogResponse_Cancel, XUI.DialogResponse_Positive, XUI.DialogResponse_Negative)
V1.87 - B4XListTemplate - support for multi-selection. New fields:
SelectedItems - Holds the list of selected items. You can also set it to preselect items.
AllowMultiSelection - Enable multi-selection.
MultiSelectionMinimum - Minimum number of selected items required. Default value is 0.
V1.86 - B4XFloatTextField - HintColor and NonFocusedHintColor fields are public. Call Update method after updating these colors.
V1.85 - B4XComboBox.cmbBox field is public. Note that it only exists in B4J and B4A.
V1.84 - SwiftButton - New Enabled property. Set to False to disable the button. It will change the button color to the "disabled color", make it flat and the not pressable.
V1.83 - ScrollingLabel - New StartPositionDelay field. Default value is 800 (ms). Scrolling is paused for the set duration when the scroll position is 0.
V1.82 - B4XListTemplate.CustomListView1 is public now. This allows changing the colors.
V1.81 - B4XFloatTextField
- NextField property. Pressing on enter or on the accept button will move the focus to the set B4XFloatTextField.
- RequestFocusAndShowKeyboard method.
V1.80 - B4XFloatTextField - Support for multiline fields and new accept button which triggers the EnterPressed event and closes the keyboard (especially important in iOS).



V1.77 - SwiftButton.SetColors - allows changing the colors at runtime.
V1.76 - Keyboard type option added to B4XFloatTextField. It affects the keyboard type in B4A and B4i.
V1.75 - New B4XSwitch control:

switch.gif

V1.70 - New B4XTimedTemplate. This template wraps other templates and creates an auto-closing dialog:

TimedTemplate.gif

See the "options / select animal" dialog for an example. It is very simple to use.
- AnotherProgressBar - The change speed can be set with ValueChangePerSecond field. This allows using the progress bar as a visual timer. For example to show 5 seconds progress:
B4X:
AnotherProgressBar1.ValueChangePerSecond = 100 / 5
AnotherProgressBar1.SetValueNoAnimation(0) 'set the value immediately.
AnotherProgressBar1.Value = 100 'animate to 100. It will take 5 seconds.

V1.67 - Tag field added to the custom views. You can set it with the designer or at runtime.
- B4XDialog - New fields: TitleBarTextColor, TitleBarFont and ButtonsFont. See the signature dialog for an example (the buttons font is set to FontAwesome):



- B4XDialog - All text fields of B4XDialog accept CSBuilder objects as well as strings (B4A and B4i).
- AnotherProgressBar is no longer limited to indeterminate state. You can modify the Value field to change its position. Note that the change is animated.
Click on the Animated Counter button in the example to see it.


V1.66 - All mBase views are now public and their tag is set to the custom view instance. This makes it simpler to get a custom view from the layout tree.
V1.65 - New dialog template: B4XSearchTemplate



V1.64 - Better behavior of B4XDialog and B4XInputTemplate with short screens.
V1.63 - Fixes an issue with B4XLongTextTemplate when the text is shorter than the dialog.
V1.62 - Small update to B4i ListTemplate layout file.

A custom "list of colors" dialog added to the example:



V1.61 - Allows setting the Text property of B4XInputTemplate.

V1.60 - B4XFloatTextField reveal button in password mode:

reveal.gif

V1.55 - B4XComboBox.DelayBeforeChangeEvent - Used to prevent rapid events when scrolling the list with the keyboard. Default value is 500ms in B4J and 0 in other platforms (not used).

V1.50 - B4XInputTemplate - preset configurations for numeric inputs (ConfigureForNumbers)

V1.45 - B4XFloatTextField:

- EnterPressed and TextChanged events.
- Optional clear button.
- Bug fixes.

V1.40 - B4XFloatTextField password mode (in the designer)

V1.35 - New B4XFloatTextField:

B4XFloatTextField.gif

V1.30 - New B4XSignatureTemplate:

signature.gif

V1.20 - New AnimatedCounter custom view:



V1.10 - New B4XInputTemplate - See post #2.

Executable jar is available for download: http://www.b4x.com/b4j/files/XUI Views Example.jar - Download and double click to run.

XUI Views is an internal library. Make sure to copy it to the internal libraries folder (C:\Program Files (x86)\Anywhere Software\<tool>\libraries).

Notes:
 

Attachments

Last edited:

walterf25

Well-Known Member
Licensed User

XUI Views is a b4x library (https://www.b4x.com/android/forum/threads/100383/#content). The same b4xlib library is compatible with B4A (v8.8+), B4J (v7.0+) and B4i (TBD+).

It is a collection of custom views and dialogs. Everything is written in B4X. The source code is included inside the b4xlib file, which is a zip file.



Views:

- B4XComboBox - Cross platform ComboBox / Spinner / ActionSheet.
- ScrollingLabel - A label that scrolls the text when it is wider than the label.
- AnotherProgressBar - Vertical or horizontal animated indeterminate progress bar.
- B4XLoadingIndicator - 6 different animated loading indicators.
- RoundSlider - A round slider.
- SwiftButton - 3d button

Dialogs:

- B4XDialog - A class that provides the features required to show a dialog. There are three methods to show dialogs: Show - Shows a simple dialog with text, ShowCustom - Allows you to pass a layout of your own and show it as a dialog, ShowTemplate - Shows a dialog based on a template class. See the source code for the template structure. It is quite simple.

Available templates:

- B4XDateTemplate - Based on AnotherDatePicker.
- B4XColorTemplate - Nice color picker.
- B4XLongTextTemplate - Scrollable text.
- B4XListTemplate - A list of items. The user can choose one of the items.

It is very simple to add more templates.

More views and templates will be added in future versions.

The examples projects are quite simple. Don't miss the following snippets:

B4i:
B4X:
Private Sub Page1_Resize(Width As Int, Height As Int)
   If Dialog.Visible Then Dialog.Resize(Width, Height)
End Sub

Private Sub Application_Background
   Dialog.Close(XUI.DialogResponse_Cancel)
End Sub
B4A:
B4X:
Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
   If Dialog.Close(XUI.DialogResponse_Cancel) Then Return True
   Return False
End Sub

Sub Activity_Pause (UserClosed As Boolean)
   Dialog.Close (XUI.DialogResponse_Cancel)
End Sub
B4J:
B4X:
Sub MainForm_Resize (Width As Double, Height As Double)
   If Dialog.Visible Then Dialog.Resize(Width, Height)
End Sub
Updates

V1.10 - New B4XInputTemplate - See post #2.
Wow this very nice, Thanks @Erel

Walter
 

incendio

Well-Known Member
Licensed User
Can this lib run with B4A 8.5?

Tried to extract XUI Views.b4xlib and add every modules manually, but got errors :
- Unknown Member : SetBitmapToImageView
- Unknown Type : BCPath


Library
- BitmapCreator 4.18
- DateUtils 1.05
- IME 1.10
- xCustomListView 1.63
- XUI 1.72
 
Last edited:

scsjc

Well-Known Member
Licensed User
hi, i find a little problem... i'm use in some codes the name T in a module code
when try to compile in Debug mode....
upload_2018-12-28_15-49-8.png

is possible fix it???
thanks a lot
 

Erel

Administrator
Staff member
Licensed User
A cross platfom EdiText?
It is not needed once you learn how to work with B4XView. Add the EditText with the designer and change its type to B4XView.

The problem with the T module name is that there is a conflict with a variable named the same in ScrollingLabel class.
 
Last edited:

LucaMs

Expert
Licensed User
Since you are working on it... it would be useful to show a total, so to have an "AddValue" property (you can pass negative values) but with scrolling of all numbers only in one direction (better if upwards when positive value and vice versa).
 
Last edited:
Status
Not open for further replies.
Top