B4A Class [B4X] [XUI] AS Onboarding View V1.11

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.

If you want to show the new users the nicest features of your app, then i have the perfect view for you

If you have wishes, bugs or a better design idea, then tell me it in the comments below.
Tested on B4A.



AS Onboarding
Author: Alexander Stolte
Version: 1.10

• ASOnboarding
  • Events:
    • BackButtonClick
    • GetStartedButtonClick
    • NextButtonClick
    • PageChange (Page As Int)
    • SkipButtonClick
  • Functions:
    • AddPage (HeadingText As String, Description As String, BackgroundColor As Int, HeaderLayout As B4XView, Tag As Object) As String
      
    • AddView (vParent As B4XView, vNextButton As String, vBackButton As String, vShowSkipButton As Boolean, vSkipButton As String, vShowFinishButtonText As Boolean, vFinishButtonText As String, vSwipeGestureEnable As Boolean, vHeaderSize As Float) As String
      Adds the view per code to the given parent
    • Class_Globals As String
      
    • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
      Base type must be Object
    • getBackBtnText As String
      
    • getBackButton As B4XView
      
    • getBackgroundImage As B4XBitmap
      
    • getBaseView As B4XView
      
    • getFinishBtnText As String
      
    • getFinishButton As B4XView
      
    • getHeader_Size As Int
      
    • getNextBtnText As String
      
    • getNextButton As B4XView
      
    • getHeaderLabel As B4XView
    • getDescriptionLabel As B4XView
      
    • getShowFinishBtn As Boolean
      
    • getShowSkipBtn As Boolean
      
    • getSkipBtnText As String
      
    • getSkipButton As B4XView
      
    • getTagOfCurrentPage As Object
      Gets or Sets the Tag of the current Page
    • getTagOfPage (Index As Int) As Object
      Gets the Tag of a Page with the given Index
    • Initialize (Callback As Object, EventName As String) As String
      
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • setBackBtnText (Text As String) As String
      
    • setBackgroundImage (Image As B4XBitmap) As String
      
    • setFinishBtnText (Text As String) As String
      
    • setHeader_Size (Value As Int) As String
      
    • setNextBtnText (Text As String) As String
      
    • setShowFinishBtn (Visible As Boolean) As String
      
    • setShowSkipBtn (Visible As Boolean) As String
      
    • setSkipBtnText (Text As String) As String
      
    • setTagOfCurrentPage (Tag As Object) As String
      Gets or Sets the Tag of the current Page
    • TagOfPage (Index As Int, Tag As Object) As String
      Sets the Tag of a Page with the given Index
  • Properties:
    • BackBtnText As String
      
    • BackButton As B4XView [read only]
      
    • BackgroundImage As B4XBitmap
      
    • BaseView As B4XView [read only]
      
    • FinishBtnText As String
      
    • FinishButton As B4XView [read only]
      
    • Header_Size As Int
      
    • NextBtnText As String
      
    • NextButton As B4XView [read only]
      
    • ShowFinishBtn As Boolean
      
    • ShowSkipBtn As Boolean
      
    • SkipBtnText As String
      
    • SkipButton As B4XView [read only]
      
    • TagOfCurrentPage As Object
      Gets or Sets the Tag of the current Page
• Pages
  • Fields:
    • BackgroundColor As Int
      
    • DescriptionText As String
      
    • HeaderLayout As B4XView
      
    • HeadingText As String
      
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • Tag As Object
  • Functions:
    • Initialize
      Initializes the fields to their default value.

If you like my work, then spend me a coffe or two

Change log:
- V1

• Release

-V1.1

• Add getNextButton
• Add getBackButton
• Add getSkipButton
• Add getFinishButton
• Add SwipeGesture swipe right to left to get next, or swipe left to right to get back
• Add SwipeGesture Enable Property
• Add Fix DesignerPropertys Description Texts

-V1.2

• Add AddView 'Add the view with code instead of the designer
• Add B4J Click Events
• Add Example Project for B4J

-V1.3

• Add Tags for every Page

-V1.4

• Add HeaderSize (25% - 75% of the View Height)

-V1.5

• Indicator BugFix

-V1.6

• AddView BugFix

-V1.7

• Add BackgroundImage
• Add TagOfPage Set or Get the Tag on a Index

-V1.8

• Add Partingline + Visible + Color + BorderWidth Property
• Add Indicator Active and Inactive Color Property
• BugFixes
• Add b4xlib

-V1.9

• Fix Crash on Crashlytics "width and height must be > 0"

-V1.10

• Add getHeaderLabel
• Add getDescriptionLabel

V1.11

• Removed a unusded Variable
• Add AutomaticCalculateDescriptionTextHeight Property, set it to true and the description text height adapts automatically to the text

 

Nice work - is swiping possible, too ?

 

no, because i only switch the label text and panels in the header.

 

but maybe, on the panel swipe right or left, then i can trigger it as a "Next" or "Back" button click? would it be nice?

 

-V1.1

• Add getNextButton
• Add getBackButton
• Add getSkipButton
• Add getFinishButton
• Add SwipeGesture swipe right to left to get next, or swipe left to right to get back
• Add SwipeGesture Enable Property
• Add Fix DesignerPropertys Description Texts

Fun Fact: The Page Indicator and the SwipeGesture Functions are from the ImageSlider Class, thanks @Erel !

 

Sent you some coffee

 

Thanks

 

Hello Alex,

I added here your CustomView with a small modification. It is now capable of setting the height of the HeaderImage as a percentage of the viewheight.
It was fixed to 50%. Now it is setable between 25% and 75% per designer or programatically.

May be you find that usefull and add that to your release.

Chers!

 

I have a look this wekk, thanks.

 

Facing an issue in B4J

Code:

Waiting for debugger to connect...
shell switching to alternate port: 9054
shell switching to alternate port: 9055
Program started.
Une erreur s'est produite en ligne : 205 (ASOnboarding)
java.lang.RuntimeException: Object should first be initialized (B4XView).
    at anywheresoftware.b4a.AbsObjectWrapper.getObject(AbsObjectWrapper.java:32)
    at anywheresoftware.b4a.objects.B4XViewWrapper.getNodeObject(B4XViewWrapper.java:103)
    at anywheresoftware.b4a.objects.B4XViewWrapper.setText(B4XViewWrapper.java:292)
    at cm.jahswant.deskpos.asonboarding._addpage(asonboarding.java:124)
    at cm.jahswant.deskpos.main._appstart(main.java:350)
    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 cm.jahswant.deskpos.main.start(main.java:38)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$161(LauncherImpl.java:863)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$174(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl.lambda$null$172(PlatformImpl.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$173(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$147(WinApplication.java:177)
    at java.lang.Thread.run(Thread.java:748)

 

and when did the error occur? Did you change something? which properties have you set?

 

nothing using your original code

Code:

MainForm.Initialize("LoginPage",800,600)
        MainForm.SetFormStyle("UNDECORATED")
   
        MainForm.Icon = fx.LoadImage(File.DirAssets,"store.png")
        MainForm.Title = "Login Page"
   
        MainForm.Title = Loc.Localize("logintoyouraccount")
       
        MainForm.RootPane.LoadLayout("configurationlayout")
       
       ASOnboarding1.AddPage("B4X development tools", "With B4X, anyone who wants to, can develop real-world solutions." & CRLF & "B4X suite supports more platforms than any other tool." & CRLF & "ANDROID | IOS | WINDOWS | MAC | LINUX | ARDUINO | RASPBERRY PI | ESP8266 | AND MORE...",xui.Color_RGB(10, 169, 195),    GenImageViews("store.png"))
'  
'        ASOnboarding1.AddPage("B4A – The simple way to develop native Android apps","B4A includes all the features needed to quickly develop any type of Android app." & CRLF & "B4A is used by tens of thousands of developers from all over the world, including companies such as NASA, HP, IBM and others." & CRLF & "Together with B4i you can now easily develop applications for both Android and iOS.",xui.Color_RGB(13, 205, 198),GenImageViews("store.png"))
'  
'        ASOnboarding1.AddPage("B4i – The simple way to develop native iOS apps", "B4i is a development tool for native iOS applications." & CRLF & "B4i follows the same concepts as B4A, allowing you to reuse most of the code and build apps for both Android and iOS." & CRLF & "This is the only development tool that allows you to develop 100% native iOS apps without a local Mac computer.",xui.Color_RGB(101, 101, 101),GenImageViews("store.jpg"))
'  
'        ASOnboarding1.AddPage("B4J – RAD development tool for cross platform desktop, server and IoT solutions", "B4J is a 100% free development tool for desktop, server and IoT solutions." & CRLF & "With B4J you can easily create desktop applications (UI), console programs (non-UI) and server solutions." & CRLF & "The compiled apps can run on Windows, Mac, Linux and ARM boards (such as Raspberry Pi).",xui.Color_RGB(255, 57, 174),    GenImageViews("store.png"))
'
'        ASOnboarding1.AddPage("Powerfull B4X Forum","If you have any questions, then you can ask this question in the forum and the nicest peoples in the forum answer on them.",xui.Color_RGB(40, 89, 154),GenImageViews("store.png"))
'  
        MainForm.WindowWidth = fx.PrimaryScreen.MaxX - fx.PrimaryScreen.MinX
        MainForm.WindowLeft = fx.PrimaryScreen.MinX
        MainForm.WindowHeight = fx.PrimaryScreen.MaxY - fx.PrimaryScreen.MinY
        MainForm.WindowTop = fx.PrimaryScreen.MinY
        MainForm.Show

Private Sub GenImageViews(ImageName As String) As B4XView
   
    Private ImageView1 As ImageView
    ImageView1.Initialize("")
    ImageView1.SetLayoutAnimated(0,0,0,MainForm.RootPane.Width,MainForm.RootPane.Height/2)
    ImageView1.SetImage(xui.LoadBitmap(File.DirAssets,ImageName))
    Return ImageView1
   
End Sub

If you can provide a simple B4J sample.

 

Maybe add the view over the Designer will help, or add the view with the new Property "AddView"

-V1.2

• Add AddView 'Add the view with code instead of the designer
• Add B4J Click Events
• Add Example Project for B4J

 

Facing the same ISSUE in B4i even with the new version.

Code:

<B4IExceptionWrapper: Error Domain=NSCocoaErrorDomain Code=3010 "remote notifications are not supported in the simulator" UserInfo={NSLocalizedDescription=remote notifications are not supported in the simulator}>
Error occurred on line: 230 (ASOnboarding)
Object was not initialized (UIView)
Stack Trace: (
  CoreFoundation       __exceptionPreprocess + 171
  libobjc.A.dylib      objc_exception_throw + 48
  CoreFoundation       +[NSException raise:format:] + 197
  237iPos              -[B4IObjectWrapper object] + 143
  237iPos              -[B4XViewWrapper setText:] + 49
  237iPos              -[b4i_asonboarding _addpage:::::] + 1838
  237iPos              -[b4i_main _configpage_resize::] + 1413
  CoreFoundation       __invoking___ + 140
  CoreFoundation       -[NSInvocation invoke] + 320
  237iPos              +[B4I runDynamicMethod:method:throwErrorIfMissing:args:] + 1645
 237iPos              -[B4IShell runMethod:] + 412
 237iPos              -[B4IShell raiseEventImpl:method:args::] + 1821
 237iPos              -[B4IShellBI raiseEvent:event:params:] + 1450
 237iPos              +[B4IObjectWrapper raiseEvent:::] + 273
 237iPos              __30-[B4IPanelView layoutSubviews]_block_invoke + 848
 libdispatch.dylib    _dispatch_call_block_and_release + 12
 libdispatch.dylib    _dispatch_client_callout + 8
 libdispatch.dylib    _dispatch_main_queue_callback_4CF + 1260
 CoreFoundation       __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
 CoreFoundation       __CFRunLoopRun + 2402
 CoreFoundation       CFRunLoopRunSpecific + 409
 GraphicsServices     GSEventRunModal + 62
 UIKit                UIApplicationMain + 159
 237iPos              main + 111
 libdyld.dylib        start + 1
)

 

Without a sample project with the issue i cant do what

 

THIS IS A SIMPLE EXAMPLE

Code:

Copying updated assets files (1)
Application_Start
Application_Active
Error occurred on line: 230 (ASOnboarding)
Object was not initialized (UIView)
Stack Trace: (
  CoreFoundation       __exceptionPreprocess + 171
  libobjc.A.dylib      objc_exception_throw + 48
  CoreFoundation       +[NSException raise:format:] + 197
  TEST BOARDING        -[B4IObjectWrapper object] + 143
  TEST BOARDING        -[B4XViewWrapper setText:] + 49
  TEST BOARDING        -[b4i_asonboarding _addpage:::::] + 1838
  TEST BOARDING        -[b4i_main _configpage_resize::] + 1413
  CoreFoundation       __invoking___ + 140
  CoreFoundation       -[NSInvocation invoke] + 320
  TEST BOARDING        +[B4I runDynamicMethod:method:throwErrorIfMissing:args:] + 1645
 TEST BOARDING        -[B4IShell runMethod:] + 412
 TEST BOARDING        -[B4IShell raiseEventImpl:method:args::] + 1821
 TEST BOARDING        -[B4IShellBI raiseEvent:event:params:] + 1450
 TEST BOARDING        +[B4IObjectWrapper raiseEvent:::] + 273
 TEST BOARDING        __30-[B4IPanelView layoutSubviews]_block_invoke + 848
 libdispatch.dylib    _dispatch_call_block_and_release + 12
 libdispatch.dylib    _dispatch_client_callout + 8
 libdispatch.dylib    _dispatch_main_queue_callback_4CF + 1260
 CoreFoundation       __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
 CoreFoundation       __CFRunLoopRun + 2402
 CoreFoundation       CFRunLoopRunSpecific + 409
 GraphicsServices     GSEventRunModal + 62
 UIKit                UIApplicationMain + 159
 TEST BOARDING        main + 111
 libdyld.dylib        start + 1
)

 

Unfortunately I had not time to do tests for IOS


-V1.3

• Add Tags for every Page
  

 

Added in 1.4, Thanks!
-V1.4

• Add HeaderSize (25% - 75% of the View Height)

EDIT:
-V1.5

• Indicator BugFix

EDIT EDIT:
-V1.6

• AddView BugFix

 

Thanks. It would be great if you add also a setting to keep the ratio of the add picture instead of stretch it to the size of the header. Sure that pic should be centred than.