B4A Library [B4X] [XUI] AS Sliding Onboarding (based on ASViewPager)

Hello,
the next view to make the B4X life easier :)
The view was written from scratch and is not compatible with the ASOnboarding.

First, i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal. :)

Features
  • cross-platform compatible
  • Slide between pages (ASViewPager)
  • fully customizable
  • Next,Back,Skip,Finish Button
  • Use your own layout
  • 3 Header Sizes
  • Events
  • Use a image as background
read the dependencies of the ASViewPager to avoid errors
B4j: jXUI,ASViewPager
B4a: XUi,ASViewPager
B4i: =iXUI,ASViewPager

20-04-25-23-23-39.gif
Bildschirmfoto 2020-04-26 um 00.00.15.png
Bildschirmfoto 2020-04-26 um 00.00.46.png
Bildschirmfoto 2020-04-26 um 00.01.11.png
Screenshot_20200425-232321.jpg
dsffsdsdfsdf.JPG


AS SlidingOnboarding
Author: Alexander Stolte
Version: 2.00

  • AS_SlidingOnboarding
    • Events:
      • BaseResize (Width As Double, Height As Double)
      • GetStartedButtonClick
      • PageChange (Index As Int)
      • SkipButtonClicked (Mode As String)
    • Fields:
      • Tag As Object
    • Functions:
      • AddPage (HeaderText As String, Description As String, BackgroundColor As Int, HeaderLayout As B4XView, Value As Object) As String
      • Base_Resize (Width As Double, Height As Double) As String
      • BottomPanel (Index As Int) As B4XView
        gets the Bottom Panel
      • Class_Globals As String
      • Clear As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GenerateImageView (ImageName As String) As B4XView
      • getBottomButtons As AS_SlidingOnboarding_BottomButtons
      • getBottomProperties As AS_SlidingOnboarding_BottomProperties
        Call RefreshBottom if you change something
      • getCurrentIndex As Int
      • getCustomListView As b4j.example.jpager
        The View is based of the ASViewPager and this Pager is based on the xCustomListView
      • getDescriptionProperties As AS_SlidingOnboarding_DescriptionProperties
      • getHeaderHeight As Float
        gets the Header Height
      • getHeaderProperties As AS_SlidingOnboarding_HeaderProperties
      • getIndicatorActiveColor As Int
      • getIndicatorInactiveColor As Int
      • getLoadingPanelColor As Int
      • getSize As Int
      • getSkipButtonMode As String
      • getViewPager As b4j.example.asviewpager
        This View is based on the ASViewPager
      • HeaderPanel (Index As Int) As B4XView
        gets the Header Area Panel to change the Header Layout
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • PageBackgroundPanel (Index As Int) As B4XView
        If you want to change the background color of a page or you want to add your own views on the full page instead just on the header
      • RefreshBottom As String
      • RemovePage (Index As Int) As String
      • setCurrentIndex (index As Int) As String
        sets or gets the current index
      • setHeaderSize (header_size As Float) As String
        The header size must be between 25 and 75 if not the value is set to 50
      • setIndicatorActiveColor (clr As Int) As String
        gets or sets the active indicator color
      • setIndicatorInactiveColor (clr As Int) As String
        gets or sets the inactive indicator color
      • setLoadingPanelColor (Color As Int) As String
      • setShowIndicator (visible As Boolean) As String
      • setSkipButtonMode (mode As String) As String
      • SkipButtonMode_CLOSE As String
      • SkipButtonMode_SKIP As String
    • Properties:
      • BottomButtons As AS_SlidingOnboarding_BottomButtons [read only]
      • BottomProperties As AS_SlidingOnboarding_BottomProperties [read only]
        Call RefreshBottom if you change something
      • CurrentIndex As Int
        sets or gets the current index
      • CustomListView As b4j.example.jpager [read only]
        The View is based of the ASViewPager and this Pager is based on the xCustomListView
      • DescriptionProperties As AS_SlidingOnboarding_DescriptionProperties [read only]
      • HeaderHeight As Float [read only]
        gets the Header Height
      • HeaderProperties As AS_SlidingOnboarding_HeaderProperties [read only]
      • HeaderSize
        The header size must be between 25 and 75 if not the value is set to 50
      • IndicatorActiveColor As Int
        gets or sets the active indicator color
      • IndicatorInactiveColor As Int
        gets or sets the inactive indicator color
      • LoadingPanelColor As Int
      • ShowIndicator
      • Size As Int [read only]
      • SkipButtonMode As String
      • ViewPager As b4j.example.asviewpager [read only]
        This View is based on the ASViewPager
  • AS_SlidingOnboarding_BottomButtons
    • Fields:
      • BackButton As B4XView
      • FinishButton As B4XView
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextButton As B4XView
      • SkipButton As B4XView
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_BottomProperties
    • Fields:
      • BackButtonText As String
      • FinishButtonText As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextButtonText As String
      • ShowFinishButton As Boolean
      • ShowNextBackButton As Boolean
      • ShowSkipButton As Boolean
      • SkipButtonText As String
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_DescriptionProperties
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_HeaderProperties
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_Page
    • Fields:
      • BackgroundColor As Int
      • Description As String
      • HeaderLayout As B4XView
      • HeaderText As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Value As Object
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • Add BaseResize Event
  • 1.02
    • Add SkipButtonClicked Event
    • Add SkipButtonMode
      • SkipButtonMode_SKIP
      • SkipButtonMode_CLOSE
  • 1.03
    • BugFix
  • 1.04
    • Add compatibility for AS_ViewPager Version 2.0
  • 1.05
    • BugFix
  • 2.00
    • Complete lib. rewrite with new name
  • 2.01
    • mBase is now public like in all other custom views
Have Fun :)
 

Attachments

  • AS Sliding Onboarding Example.zip
    39.6 KB · Views: 209
  • AS_SlidingOnboarding.b4xlib
    4.9 KB · Views: 130
Last edited:

Jorge M A

Well-Known Member
Licensed User
Thank you, Alexander, for allowing us to test your amazing creations again.
I am aware that the main trend is mobile devices, however I find it useful in B4J.
I'm playing with the example of this platform, and I was wondering if there is a way to "refresh" the page when the form is resized, since now it is distorted.
When you execute any function of Back or Next, it resets perfectly.
I hope I'm clear.
 

Alexander Stolte

Expert
Licensed User
Longtime User
It was a bug in the ASViewPager lib. download the lates Version V1.03+ and try it again
This view made the ASViewPager more stable, during development I had to deal with so many bugs.
Unfortunately this takes a lot of time, but I think it will help me/us later when I want to program some awesome apps. :)

1.01
  • Add BaseResize Event
I have updated the B4J Example with the BaseResize event to show, how you can resize your header layout.
In the example the bitmaps have a strange scale, i dont know why.
 

Scantech

Well-Known Member
Licensed User
Longtime User
May want to add scrolling method for HeadingText just in case the words wont fit. Also, can the skip button close the pager instead of going to last page? You can add Skip to close or Skip to last page option?

Good job with the library.
 

Alexander Stolte

Expert
Licensed User
Longtime User
add scrolling method for HeadingText just in case the words wont fit.
I don't think this is so easy to implement, especially not for 2 lines.
Also, can the skip button close the pager instead of going to last page?

1.02
  • Add SkipButtonClicked Event
  • Add SkipButtonMode
    • SkipButtonMode_SKIP
    • SkipButtonMode_CLOSE
The "SkipButtonMode_CLOSE" mode only triggers the SkipButtonClicked Event
 

Scantech

Well-Known Member
Licensed User
Longtime User
You might want to add SkipButtonClicked(Mode As String) to the event description above. Thanks for this update.
 

jahswant

Well-Known Member
Licensed User
Longtime User
TESTING WITH B4J.
NO CHANCE.:
Waiting for debugger to connect...
Program started.
Une erreur s'est produite en ligne : 103 (ASViewPager)
java.lang.NullPointerException
    at b4j.example.asviewpager$ResumableSub_Base_Resize.resume(asviewpager.java:99)
    at b4j.example.asviewpager._base_resize(asviewpager.java:61)
    at b4j.example.asslidingonboarding._base_resize(asslidingonboarding.java:301)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:632)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:237)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:167)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
    at anywheresoftware.b4a.shell.ShellBA.raiseEvent2(ShellBA.java:98)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
    at anywheresoftware.b4j.objects.PaneWrapper$1.run(PaneWrapper.java:120)
    at anywheresoftware.b4j.objects.PaneWrapper$ResizeEventManager$1.run(PaneWrapper.java:175)
    at anywheresoftware.b4j.objects.PaneWrapper$ResizeEventManager$3.changed(PaneWrapper.java:198)
    at anywheresoftware.b4j.objects.PaneWrapper$ResizeEventManager$3.changed(PaneWrapper.java:1)
    at com.sun.javafx.binding.ExpressionHelper$SingleChange.fireValueChangedEvent(ExpressionHelper.java:182)
    at com.sun.javafx.binding.ExpressionHelper.fireValueChangedEvent(ExpressionHelper.java:81)
    at javafx.beans.property.ReadOnlyDoublePropertyBase.fireValueChangedEvent(ReadOnlyDoublePropertyBase.java:72)
    at javafx.beans.property.ReadOnlyDoubleWrapper.fireValueChangedEvent(ReadOnlyDoubleWrapper.java:103)
    at javafx.beans.property.DoublePropertyBase.markInvalid(DoublePropertyBase.java:113)
    at javafx.beans.property.DoublePropertyBase.set(DoublePropertyBase.java:147)
    at javafx.scene.layout.Region.setHeight(Region.java:917)
    at javafx.scene.layout.Region.resize(Region.java:1365)
    at javafx.scene.Node.resizeRelocate(Node.java:2941)
    at javafx.scene.layout.AnchorPane.layoutChildren(AnchorPane.java:363)
    at javafx.scene.Parent.layout(Parent.java:1087)
    at javafx.scene.Scene.doLayoutPass(Scene.java:552)
    at javafx.scene.Scene.preferredSize(Scene.java:1646)
    at javafx.scene.Scene.impl_preferredSize(Scene.java:1720)
    at javafx.stage.Window$9.invalidated(Window.java:864)
    at javafx.beans.property.BooleanPropertyBase.markInvalid(BooleanPropertyBase.java:109)
    at javafx.beans.property.BooleanPropertyBase.set(BooleanPropertyBase.java:144)
    at javafx.stage.Window.setShowing(Window.java:940)
    at javafx.stage.Window.show(Window.java:955)
    at javafx.stage.Stage.show(Stage.java:259)
    at anywheresoftware.b4j.objects.Form.Show(Form.java:222)
    at b4j.example.main._appstart(main.java:91)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:632)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:237)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:167)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:91)
    at anywheresoftware.b4a.shell.ShellBA.raiseEvent2(ShellBA.java:98)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:78)
    at b4j.example.main.start(main.java:38)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$166(LauncherImpl.java:863)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$179(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl.lambda$null$177(PlatformImpl.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$178(PlatformImpl.java:294)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$152(WinApplication.java:177)
    at java.lang.Thread.run(Thread.java:748)
 

Jorge M A

Well-Known Member
Licensed User
Hello @Alexander Stolte !
There seems to be some incompatibility in ASViewPager V.1.04, while with version 1.03 it works perfectly.
In the new version 1.04, in the DesignerCreateView Sub, if I comment the Sleep(0) instruction, it works fine in B4J. But I don't know the implications in the other platforms.
Greetings and Thanks!
 

BigBoss123

Member
Licensed User
Longtime User
Having the same problem with 1.04.
Error in line 103 (ASViewPager)
java.lang.NullPointerException: Attempt to invoke virtual method 'void anywheresoftware.b4a.objects.B4XViewWrapper.SetLayoutAnimated(int, int, int, int, int)' on a null object reference

Cheers and thanks for your help
 

RiverRaid

Active Member
Licensed User
Longtime User
Hi,

Thank you very much for your Library!

I have 3 questions:
1) Is it possible to change the Swipe-Style to Horizontaol?
2) Is there any way to "refresh" the current page?

I use the following code to implement an "unserstood" checkbox, and only if clicked, the "Finish" Button should be available

B4X:
Dim chkok As CheckBox
chkok.Initialize("chkok")
chkok.TextColor = Colors.Red
chkok.Text = "Unserstood"

Dim pnl As Panel
pnl = ASSlidingOnboarding1.getBottomArea (4)
pnl.AddView(chkok,10dip,pnl.Height - 130dip,pnl.Width -10dip,30dip)

Private Sub chkok_CheckedChange(Checked As Boolean)
    ASSlidingOnboarding1.ShowFinishButton = Checked
End Sub

It generally works, but the back and next has to be clicked to update the visibility of the Finish

3) Could you implement an "LastIndex" Property?


Thank you very much an best regards,
Andi
 

Alexander Stolte

Expert
Licensed User
Longtime User
1) Is it possible to change the Swipe-Style to Horizontaol?
Show me a successful app that has a vertical onboarding. I don't plan to implement it either, because I would have to completely rewrite the view... and that is not worth the time.
2) Is there any way to "refresh" the current page?
I will check it.
3) Could you implement an "LastIndex" Property?
B4X:
ASOnboarding.ViewPager.CustomListView.Size
 

RiverRaid

Active Member
Licensed User
Longtime User
Thank you for the answers!!

Regarting the Swipe: I think i told it wrong. Presently, i habe to swipe from the downside up to get to the next screen. And not from the right to the left as shown in your animated demo above
 

Alexander Stolte

Expert
Licensed User
Longtime User
Regarting the Swipe: I think i told it wrong. Presently, i habe to swipe from the downside up to get to the next screen. And not from the right to the left as shown in your animated demo above
Is now fixed
  • 1.03
    • BugFixes
Is there any way to "refresh" the current page?
The visible views are now updated if you add a new page.
 

fbritop

Active Member
Licensed User
Longtime User
Hello,
the next view to make the B4X life easier :)
The view was written from scratch and is not compatible with the ASOnboarding.

First, i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal. :)

Features
  • cross-platform compatible
  • Slide between pages (ASViewPager)
  • fully customizable
  • Next,Back,Skip,Finish Button
  • Use your own layout
  • 3 Header Sizes
  • Events
  • Use a image as background
read the dependencies of the ASViewPager to avoid errors
B4j: jXUI,ASViewPager
B4a: XUi,ASViewPager
B4i: =iXUI,ASViewPager

View attachment 92636View attachment 92637View attachment 92638View attachment 92639View attachment 92640View attachment 92641

AS SlidingOnboarding
Author: Alexander Stolte
Version: 1.00

  • ASSlidingOnboarding
    • Events:
      • GetStartedButtonClick
      • PageChange (Index As Int)
    • Functions:
      • AddPage (HeadingText As String, Description As String, BackgroundColor As Int, HeaderLayout As B4XView, Tag As Object) As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBackButtonText As B4XView
      • getBottomArea (Index As Int) As B4XView
        gets the Bottom Area Panel
      • getCurrentIndex As Int
      • getCustomListView As b4a.example3.customlistview
        The View is based of the ASViewPager and this Pager is based on the xCustomListView
      • getFinishButtonText As B4XView
      • getHeaderArea (Index As Int) As B4XView
        gets the Header Area Panel to change the Header Layout
      • getHeaderHeight As Float
        gets the Header Height
      • getIndicatorActiveColor As Int
      • getIndicatorInactiveColor As Int
      • getNextButton As B4XView
      • getPageBackgroundPanel (Index As Int) As B4XView
        If you want to change the background color of a page or you want to add your own views on the full page instead just on the header
      • getShowFinishButton As Boolean
      • getShowNextBack As Boolean
      • getShowSkipButton As Boolean
      • getSkipButtonText As B4XView
      • getViewPager As com.as.slidingonboarding.asviewpager
        This View is based on the ASViewPager
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • RemovePage (Index As Int) As String
      • setBackButtonText (text As String) As String
      • setCurrentIndex (index As Int) As String
        sets or gets the current index
      • setFinishButtonText (text As String) As String
      • setHeaderSize (header_size As Float) As String
        The header size must be between 25 and 75 if not the value is set to 50
      • setIndicatorActiveColor (clr As Int) As String
        gets or sets the active indicator color
      • setIndicatorInactiveColor (clr As Int) As String
        gets or sets the inactive indicator color
      • setNextButtonText (text As String) As String
      • setShowFinishButton (visible As Boolean) As String
      • setShowIndicator (visible As Boolean) As String
      • setShowNextBack (visible As Boolean) As String
      • setShowSkipButton (visible As Boolean) As String
      • setSkipButtonText (text As String) As String
    • Properties:
      • CurrentIndex As Int
        sets or gets the current index
      • CustomListView As b4a.example3.customlistview [read only]
        The View is based of the ASViewPager and this Pager is based on the xCustomListView
      • HeaderHeight As Float [read only]
        gets the Header Height
      • HeaderSize
        The header size must be between 25 and 75 if not the value is set to 50
      • IndicatorActiveColor As Int
        gets or sets the active indicator color
      • IndicatorInactiveColor As Int
        gets or sets the inactive indicator color
      • NextButton As B4XView [read only]
      • NextButtonText
      • ShowFinishButton As Boolean
      • ShowIndicator
      • ShowNextBack As Boolean
      • ShowSkipButton As Boolean
      • ViewPager As com.as.slidingonboarding.asviewpager [read only]
        This View is based on the ASViewPager
Changelog
  • 1.00
    • Release
  • 1.01
    • Add BaseResize Event
  • 1.02
    • Add SkipButtonClicked Event
    • Add SkipButtonMode
      • SkipButtonMode_SKIP
      • SkipButtonMode_CLOSE
  • 1.03
    • BugFix
Have Fun :)

This could be a bug in B4I:
B4X:
Private Sub PageChangeHandler(Page As Int)
    If xui.SubExists(mCallBack, mEventName & "_PageChange",0) Then
        CallSub2(mCallBack, mEventName & "_PageChange",Page)
    End If
End Sub

For B4I it needs the number of params, in this case 1
B4X:
xui.SubExists(mCallBack, mEventName & "_PageChange",1)
 
Top