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

[Alexander Stolte]

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

Spoiler: Dependencies/Libraries you need for this view

read the dependencies of the ASViewPager to avoid errors
B4j: jXUI,ASViewPager
B4a: XUi,ASViewPager
B4i: =iXUI,ASViewPager

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

 

[Jorge M A]

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]

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.

 

[Jorge M A]

I have updated the B4J Example

Maybe the wrong example? It seems to be AS View Pager Example. or I'm missing something?

 

[Alexander Stolte]

Maybe the wrong example? It seems to be AS View Pager Example. or I'm missing something?

Fixed ?

 

[Jorge M A]

Wow! Súper! Thanks! ?

 

[Scantech]

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]

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]

You might want to add SkipButtonClicked(Mode As String) to the event description above. Thanks for this update.

 

[Erel]

Great work!

 

[jahswant]

TESTING WITH B4J.

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]

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]

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

 

[Alexander Stolte]

Try it in V1.05, thanks.

 

[BigBoss123]

Thanks a lot. Working fine now!!!

 

[RiverRaid]

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

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]

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?

ASOnboarding.ViewPager.CustomListView.Size

 

[RiverRaid]

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]

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]

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

Spoiler: Dependencies/Libraries you need for this view

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:

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

xui.SubExists(mCallBack, mEventName & "_PageChange",1)