B4J Library [B4X] [XUI] SD XUIView

I'm happy to announce the publication of my new B4XView library.
This library adds to the XUi Views the native views of the three platforms (Android / IOS / Desktop) so that they can be managed by Design, using them as XUI views without having to change its type in the Globals Sub.
With this Library the views have the same properties and identical events, and you can also access the original view and more properties, method and animation not included natively.
This will allow you to reuse the code written for a platform on the others without any changes.
Also I'm adding custom views and animations not included natively.

Included this view
videoa-gif.71130
​
​
Other views not included in this list (such as XCustomListView or XComboBox, B4XComboBox, LoadingIndicator, CicularProgressBar, RadarProgressView, GaugeView, RulerPicker, RoundSlider, CaptchaView, etc.. ) will not be included in the future because they already exist. Many sources have been made available just search the forum.​
​
NOTICE. Unfortunately in the IOS version it occupies more than 500Kb, so I compressed with RAR and then with ZIP. to decompress it, you must use WinRar

SD_XUIView

Author: Star-Dust
Version: 0.16
  • B4XButton
    • Events:
      • DoubleOrLongClick
      • OneClick
      • Touch (Action As Int, Coordinate() As Tp_Coordinate)
    • Fields:
      • Action_Click As Int
      • Action_DoubleClick As Int
      • Action_Down As Int
      • Action_Drag As Int
      • Action_LongClick As Int
      • Action_LoseTouch As Int
      • Action_Up As Int
      • MinMoveAccept As Int
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • B4XObject As B4XView
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • NativeObject As Button
      • RemoveAllViews As String
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Color As Int
      • Enable As Boolean
      • Font
      • Height As Int
      • Left As Int
      • Top As Int
      • Visible As Boolean
      • Width As Int
  • B4XCalendarPicker
    • Events:
      • Click
    • Fields:
      • Color As Int
      • Square As Boolean
      • Tag As Object
      • TextColor As Int
      • TextSize As Int
      • Title As String
    • Functions:
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (CallBack As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Date As Long
      • Enable As Boolean
      • Height As Int
      • Left As Int
      • Top As Int
      • Visible As Boolean
      • Width As Int
  • B4XCheckBox
    • Events:
      • Click
    • Fields:
      • Action_Click As Int
      • Action_DoubleClick As Int
      • Action_Down As Int
      • Action_Drag As Int
      • Action_LongClick As Int
      • Action_LoseTouch As Int
      • Action_Up As Int
      • MinMoveAccept As Int
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • RemoveAllViews As String
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Check As Boolean
      • Color As Int
      • Enable As Boolean
      • Font
      • Height As Int
      • Left As Int
      • Top As Int
      • Visible As Boolean
      • Width As Int
  • B4XEditText
    • Events:
      • DoubleOrLongClick
      • EnterPressed
      • FocusChanged
      • OneClick
      • TextChanged (Old As String, New As String)
    • Fields:
      • Action_Click As Int
      • Action_DoubleClick As Int
      • Action_Down As Int
      • Action_Drag As Int
      • Action_LongClick As Int
      • Action_LoseTouch As Int
      • Action_Up As Int
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • B4XObject As B4XView
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • NativeObjct As EditText
      • RemoveAllViews As String
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • setSelection (StartIndex As Int, EndIndex As Int) As String
      • Snapshot As B4XView
    • Properties:
      • Color As Int
      • CursorVisible
      • Ellipsize As String
      • Enable As Boolean
      • Font
      • ForceDoneButton
      • Height As Int
      • Left As Int
      • SelectionEnd As Int [read only]
      • SelectionStart As Int [read only]
      • TextIsEditable
      • TextIsSelectable
      • Top As Int
      • Typeface
      • Visible As Boolean
      • Width As Int
  • B4XLabel
    • Events:
      • DoubleOrLongClick
      • OneClick
      • Touch (Action As Int, Coordinate() As Tp_Coordinate)
    • Fields:
      • Action_Click As Int
      • Action_DoubleClick As Int
      • Action_Down As Int
      • Action_Drag As Int
      • Action_LongClick As Int
      • Action_LoseTouch As Int
      • Action_Up As Int
      • MinMoveAccept As Int
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • B4XObject As B4XView
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • NativeObject As Label
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Color As Int
      • Enable As Boolean
      • Font
      • Height As Int
      • Left As Int
      • TextAppear
      • TextFind
      • TextRoll
      • TextScroll
      • Top As Int
      • Visible As Boolean
      • Width As Int
  • B4XPanel
    • Events:
      • DoubleOrLongClick
      • Moved
      • OneClick
      • Resized
      • Touch (Action As Int, Coordinate() As Tp_Coordinate)
    • Fields:
      • Action_Click As Int
      • Action_DoubleClick As Int
      • Action_Down As Int
      • Action_Drag As Int
      • Action_LongClick As Int
      • Action_LoseTouch As Int
      • Action_Up As Int
      • AllSurfaceMove As Boolean
      • MinMoveAccept As Int
      • Movible As Boolean
      • Resizable As Boolean
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • AddView (View As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • B4XObject As B4XView
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • EmbedView (View As B4XView) As String
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • NativeObject As Panel
      • RemoveAllViews As String
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Enable As Boolean
      • Height As Int
      • Left As Int
      • Top As Int
      • Visible As Boolean
      • Width As Int
  • B4XProgressBar
    • Fields:
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • BackgroundColor
      • BarColor
      • Enable As Boolean
      • Height As Int
      • Left As Int
      • Top As Int
      • Value As Float
      • Visible As Boolean
      • Width As Int
  • B4XSeek_Bar
    • Events:
      • ChangeValue (Value As Float)
    • Fields:
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Enable As Boolean
      • Height As Int
      • Left As Int
      • Top As Int
      • Value As Float
      • Visible As Boolean
      • Width As Int
  • Tp_Coordinate
    • Fields:
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • x As Int
      • y As Int
    • Functions:
      • Initialize
        Inizializza i campi al loro valore predefinito.
  • xRadioButton
    • Events:
      • Click
    • Fields:
      • Action_Click As Int
      • Action_DoubleClick As Int
      • Action_Down As Int
      • Action_Drag As Int
      • Action_LongClick As Int
      • Action_LoseTouch As Int
      • Action_Up As Int
      • MinMoveAccept As Int
      • Tag As Object
    • Functions:
      • AddToParent (PanelToAdd As B4XView, Left As Int, Top As Int, Width As Int, Height As Int) As String
      • BringToFront As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GetAllViewsRecursive As List
      • GetBase As Panel
      • GetView (Index As Int) As B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Verifica se l'oggetto sia stato inizializzato.
      • RemoveAllViews As String
      • RemoveViewFromParent As String
      • RequestFocus As String
      • ReSetEvent (Callback As Object, EventName As String) As String
      • Rotate (AngleX As Float, AngleY As Float, AngleZ As Float) As String
      • SendToBack As String
      • Snapshot As B4XView
    • Properties:
      • Check As Boolean
      • Color As Int
      • Enable As Boolean
      • Font
      • Height As Int
      • Left As Int
      • Top As Int
      • Visible As Boolean
      • Width As Int

_________________________________________________________________________

For ios download here
 

Attachments

  • SD_XUIView 0.16.zip
    72 KB · Views: 251
  • jSD_XUIView 0.16.zip
    68.9 KB · Views: 221
Last edited:
Click to expand...
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
With this library you can add the B4X XUi Views directly from Design.
It also adds new functions and methods that are not present basic to native views

upload_2018-8-25_6-52-55.png


Now the Trimmer class is in the XUIView2library
 

Attachments

  • aSample1.zip
    19.6 KB · Views: 585
  • jSample1.zip
    12.4 KB · Views: 524
  • iSample1.zip
    12.6 KB · Views: 433
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
From version 0.02 it will be possible to set again after the initialization of the view the name of the event that will be raised and also the module to which the sub is related to the event. (method ReSetEvent (Callback As Object, EventName As String))
In addition I will add Ellipsize (currently only present in the Design of Android) that also effects also to IOS View.

These functions do not exist with native views, so it adds something thatcan not be done normally with native views.
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Update to 0.02 release

In post#1 you will find the library, from post#2 you can download examples.
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Available update to version 0.03

  • Add to EditText
    • TextIsEditable As Boolean
    • CursorVisible As Boolean
    • TextIsSelectable As Boolean
    • setSelection(StartIndex As Int, EndIndex As Int)
    • SelectionStart As Int
    • SelectionEnd As Int
  • Add funciton 3d for View (B4A & B4I)
    • Rotate(AngleX As Float, AngleY As Float , AngleZ As Float)

ezgif.com-crop.gif
Video3.gif
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
New EmbedView(View As B4XView) method in B4XPanel.

In the design it is not possible to attach other views to the B4XPanel because there is no such function in the design.
I found a way around the obstacle.
You draw the views above the panel to which you want to attach as in the image
upload_2018-8-25_12-12-4.png


Write this as a code

B4X: 
B4XPanel1.EmbedView(B4XImageView4.GetBase)
B4XPanel1.EmbedView(B4XImageView5.GetBase)
B4XPanel1.EmbedView(B4XImageView6.GetBase)

And the method automatically hooks the views to the panel in the position you have put them in the design.
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Erel said:
There is a simpler solution. Use the native Panel and all other native views. Then convert their type to B4XView.

It is good to add cross platform controls that do not exist as native controls.
It is a mistake to wrap existing native views. It only makes things more complicated.
Click to expand...
Dear @Erel,
as you can see, this library contains several Custom Views (CalendarPicker, SeekBar, Trimmer, RadioButton).
You are pausing to look only at the native ones, not seeing the library as a whole.
Moreover, the Native Views are not just an envelope, which adds nothing to the existing ones. But they add new features and methods.

For example, think of the View FloatLabeledEditText, which you made, you can not say that it is a simple label and therefore useless, because it adds new features not available natively. Besides the fact, not negligible, that it is possible to manage everything from Design without having to intervene from code and in any case have views with Events and Methods that correspond on all platforms.

This has required a lot of work, in fact the librery is full-bodied in Kb, it would not be so if it were just a shell of already existing Views.

Probably on this point we have different views, but I hope that in the future you can see it from my own point of view.
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Erel said:
These are great cross platform views.

It is the native views such as panel and label that I think should not have been wrapped.
Click to expand...
I take note of your thought. And I understand what you mean because at the moment they only partially offer the Personalizations I have in mind. I have not implemented everything yet.

I hope I can change your mind as I implement everything I have in mind.
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
I can imagine you going for an extensive XUI views set, to ease the creation of cross platform apps.
Still, keep in mind that some devs like to have platform specific projects and may need a "one from the pack" view...
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Cableguy said:
I can imagine you going for an extensive XUI views set, to ease the creation of cross platform apps.
Still, keep in mind that some devs like to have platform specific projects and may need a "one from the pack" view...
Click to expand...
It's true, even I still create platform-specific libraries.
These same Classes that you find in this XUI library can be found in my other specific libraries for Android. Oriented precisely to the developers you're referring to who want "one from the pack"

This library instead is addressed to other developers, and is based on XUI, so it has the goal of having View that work identically on the three platforms and have the same properties and events.

I tried to develop libraries on both the specific ways to cover every need.

Mainly I created them for me, but I hope that they can be useful to others too
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
A preview of new transition effects for labels. :D

B4X: 
B4XLabel2.Text="Scrolling Text"
B4XLabel2.TextScroll="New Text"
B4XLabel2.TextRoll="Other Text"
ezgif.com-crop.gif
 
Last edited:
M

Michael99k

Member
Licensed User
Hello,
I´m new to B4A and I´ve troubles getting things to work. I aim at multiple platforms.
My code tries to create B4XImageViews (which are not generated in the VisualDesigner) because I need a flexible amount of views.
XUI (Version 1.70) and SD_XUIView (Version 0.03) are loaded.

I miss the .Initialize method as with normal ImageViews (produces an error here).

The 2nd problem: The panel "panRaum" doesn´t allow the .AddView - it says that the B4XImageview cannot be converted to Imageview (see the attached screenshot)
I really get confused and the sample1.zip hasn´t an B4XImageview but just other Views to look at.

Can anyone please give advice?

B4X: 
Sub Globals

    Private B4XImageView1 As B4XImageView
End Sub
Sub Activity_Create(FirstTime As Boolean)
Dim imgPlatz As B4XImageView
            'imgPlatz.Initialize ("imgPlatz") 'All buttons share the same event sub; now error with B4XImageView
            FillImageToView(b, imgPlatz) 'Sub from Erel from https://www.b4x.com/android/forum/threads/b4x-xui-fill-and-fit-images-without-distortion.86627/
'            imgPlatz.setBitmap(b) 'b is a bitmap-object with loaded image
'            imgPlatz.SetBackgroundImage(b).Gravity = Gravity.CENTER           
            panRaum.AddView(imgPlatz,0 + x * (breite + 0dip), 0 + y * (tiefe + 0dip), breite, tiefe)
End Sub

Thanks in advance,
Michael
 

Attachments

  • 2018-08-26 17_38_18-Kompilieren & schnelles Austesten (Build_ Default).png
    2018-08-26 17_38_18-Kompilieren & schnelles Austesten (Build_ Default).png
    15.7 KB · Views: 741
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
If you want to initialize from code then you have to use ImageView as already suggested by Erel and then assign from code to a B4XView variable.
This library is specific for those who use design.
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Star-Dust said:
If you want to initialize from code then you have to use ImageView as already suggested by Erel and then assign from code to a B4XView variable.
This library is specific for those who use design.
Click to expand...
My suggestion is to use the visual designer and add a regular ImageView. You can then optionally change the type of the generated variable to B4XView. I don't see any reason to add a custom view that wraps ImageView. It goes against the design of XUI framework and custom views are less flexible than native views.

There is a place for custom views. They are very useful when you want to add a control that is not covered by B4XView. ImageView like many other controls is already covered.
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
I'll explain why I'm a bit obsessed here.
Lets start with an example. You want to add a Panel to your layout. However in B4A and B4i the type is named Panel and in B4J it is named Pane. If you generate the variable declaration you will get a non-cross platform type.
So a developer might think that they need to wrap it with a custom view named B4XPanel. This is the wrong conclusion.
The correct solution is to add a Pane in B4J and a Panel in B4A / B4i and then go to the declared global variable and change its type to B4XView. Everything will just work.

Another important design choice behind XUI is to never limit the developer to the cross platform features. You can always cast B4XView to the native type and access all the available features.
You can use conditional compilation for this:
B4X: 
#If B4i
Dim iv As ImageView = ImageView1 'a B4XView
iv.SetShadow(...)
#End If
It is nice when it is not needed but it is nicer to be able to access all the features.

There are all kinds of drawbacks with custom views. For example you cannot get a custom view directly from the views tree.
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Erel said:
I'll explain why I'm a bit obsessed here.
Lets start with an example. You want to add a Panel to your layout. However in B4A and B4i the type is named Panel and in B4J it is named Pane. If you generate the variable declaration you will get a non-cross platform type.
So a developer might think that they need to wrap it with a custom view named B4XPanel. This is the wrong conclusion.
The correct solution is to add a Pane in B4J and a Panel in B4A / B4i and then go to the declared global variable and change its type to B4XView. Everything will just work.

Another important design choice behind XUI is to never limit the developer to the cross platform features. You can always cast B4XView to the native type and access all the available features.
You can use conditional compilation for this:
B4X: 
#If B4i
Dim iv As ImageView = ImageView1 'a B4XView
iv.SetShadow(...)
#End If
It is nice when it is not needed but it is nicer to be able to access all the features.

There are all kinds of drawbacks with custom views. For example you cannot get a custom view directly from the views tree.
Click to expand...
I do not see it as you, I would argue that by reasoning that xui contains the xui.CreatePanel method

But I do not want to turn this library thread into something else. And I do not even want to argue with you because I have much esteem for your work.

So I refer this conversation to another more suitable place. Maybe I can even explain my obsession with this library.

Regard StarDust
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS RatingBar
Replies
16
Views
6K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS ViewPager based on xCustomListView
7 8 9
Replies
167
Views
44K
Alexander Stolte
Alexander Stolte
LucaMs
  • Question
Android Question [B4X] XUI Views.b4xlib
Replies
1
Views
841
klaus
klaus
Star-Dust
  • Article
B4J Library [B4X] [XUI] SD XUIScrollView2D
2
Replies
27
Views
9K
Star-Dust
Star-Dust
Star-Dust
  • Article
B4A Library [B4X] [XUI] SD XUIScrollView2D
Replies
3
Views
4K
Star-Dust
Star-Dust
Top