B4A Library [B4X] [XUI] AS Timeline

This view is a simple horizontal timeline view.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)

1690228054560.png

AS_Timeline.gif

AS_Timeline
Author: Alexander Stolte
Version: 1.00

  • AS_Timeline
    • Events:
      • SelectionChanged (Item As AS_Timeline_Item)
    • Fields:
      • g_ItemProperties As AS_Timeline_ItemProperties
      • lst_Items As List
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddItem (DataYear As String, DataInfo As String, Value As Object) As String
        Add a item
        DataYear - Year Text e.g. 1960
        DataInfo - Description Text
        Value - whatever you want
      • AddItemAdvanced (Item As AS_Timeline_Item) As String
      • AddItemDuration (DataYear As String, DataInfo As String, Value As Object, AutoPlayDuration As Int) As String
        Add a item with a custom duration for this item, if you are using auto play
        DataYear - Year Text e.g. 1960
        DataInfo - Description Text
        Value - whatever you want
        AutoPlayDuration - Duration in milliseconds
      • Class_Globals As String
      • CreateAS_Timeline_ItemProperties (UnReachedColor As Int, ReachedColor As Int, UnReachedFont As B4XFont, ReachedFont As B4XFont) As AS_Timeline_ItemProperties
      • CreateTimeline As String
        Call this if you change something or if you want to show it
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
        Base type must be Object
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • PauseAutoPlay As String
        Paused AutoPlay
      • StartAutoPlay As String
        Starts the AutoPlay
      • StopAutoPlay As String
        Stops the AutoPlay
  • AS_Timeline_Item
    • Fields:
      • DataInfo As String
      • DataYear As String
      • Duration As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • ItemProperties As AS_Timeline_ItemProperties
      • Value As Object
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_Timeline_ItemProperties
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • ReachedColor As Int
      • ReachedFont As B4XFont
      • UnReachedColor As Int
      • UnReachedFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • Add Event CustomDrawItem
    • Add get and set Index
Have Fun :)
 

Attachments

  • AS Timeline.zip
    10.7 KB · Views: 211
  • AS_Timeline.b4xlib
    3.1 KB · Views: 155
Last edited:

zed

Active Member
Licensed User
Hi Alexander,
Can you check the version of the project.
While trying, I noticed that it's the same as the first version without the timer.
This version does not work with the library.
B4X TimeLine:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private AS_Timeline1 As AS_Timeline
    Private xlbl_SelectedValue As B4XView
    Private xlbl_Title As B4XView
End Sub

Public Sub Initialize
    
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("frm_main")
    
    B4XPages.SetTitle(Me,"AS Timeline Example")
    
    xlbl_Title.Text = "Notable inventions, 1910–2000"
    
    AS_Timeline1.AddItem("1910","headset","And future Call of Duty players would thank them.")
    AS_Timeline1.AddItem("1920","jungle gym","Because every kid should get to be Tarzan for a day.")
    AS_Timeline1.AddItem("1930","chocolate chip cookie","And the world rejoiced.")
    AS_Timeline1.AddItem("1940","Jeep","Because building roads is inconvenient.")
    AS_Timeline1.AddItem("1950","leaf blower","Ain’t nobody got time to rake.")
    AS_Timeline1.AddItem("1960","magnetic stripe card","Because paper currency is for noobs.")
    AS_Timeline1.AddItem("1970","wireless LAN","Nobody likes cords. Nobody.")
    AS_Timeline1.AddItem("1980","flash memory","Brighter than glow memory.")
    AS_Timeline1.AddItem("1990","World Wide Web","To capitalize on an as-yet nascent market for cat photos.")
    AS_Timeline1.AddItem("2000","Google AdWords","Because organic search rankings take work.")
    
    AS_Timeline1.CreateTimeline
    
End Sub

Private Sub AS_Timeline1_SelectionChanged(Item As AS_Timeline_Item)
    xlbl_SelectedValue.Text = Item.Value
End Sub

Here are the logs

Logger connecté à : Xiaomi M2101K7AG
--------- beginning of main
Copying updated assets files (1)
*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create (first time) **
Error occurred on line: 74 (AS_Timeline)
java.lang.RuntimeException: Cannot parse: null as boolean
at anywheresoftware.b4a.BA.parseBoolean(BA.java:640)
at anywheresoftware.b4a.BA.ObjectToBoolean(BA.java:710)
at com.stoltex.timeline.as_timeline._iniprops(as_timeline.java:560)
at com.stoltex.timeline.as_timeline$ResumableSub_DesignerCreateView.resume(as_timeline.java:472)
at com.stoltex.timeline.as_timeline._designercreateview(as_timeline.java:431)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:157)
at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:61)
at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:147)
at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:134)
at anywheresoftware.b4a.objects.B4XViewWrapper.LoadLayout(B4XViewWrapper.java:329)
at com.stoltex.timeline.b4xmainpage._b4xpage_created(b4xmainpage.java:69)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:318)
at anywheresoftware.b4a.debug.Debug.CallSubNew2(Debug.java:285)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.keywords.Common.CallSubDebug2(Common.java:1087)
at com.stoltex.timeline.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:1068)
at com.stoltex.timeline.b4xpagesmanager._showpage(b4xpagesmanager.java:425)
at com.stoltex.timeline.b4xpagesmanager._addpage(b4xpagesmanager.java:245)
at com.stoltex.timeline.b4xpagesmanager._addpageandcreate(b4xpagesmanager.java:259)
at com.stoltex.timeline.b4xpagesmanager._initialize(b4xpagesmanager.java:165)
at com.stoltex.timeline.main._activity_create(main.java:415)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:157)
at com.stoltex.timeline.main.afterFirstLayout(main.java:105)
at com.stoltex.timeline.main.access$000(main.java:17)
at com.stoltex.timeline.main$WaitForLayout.run(main.java:83)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:210)
at android.os.Looper.loop(Looper.java:299)
at android.app.ActivityThread.main(ActivityThread.java:8302)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:556)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1037)
** Activity (main) Resume **
 

Attachments

  • Error_AS Timeline.zip
    10.6 KB · Views: 159

Alexander Stolte

Expert
Licensed User
Longtime User
Error occurred on line: 74 (AS_Timeline)
java.lang.RuntimeException: Cannot parse: null as boolean
Sorry, my mistake. I had added new designer properties without opening the designer again to save once. Just open the designer and save directly, then it should work. If you want to have the AutoPlay on directly at the start, then simply activate the AutoPlay in the designer. Otherwise you can simply do that with:
B4X:
AS_Timeline1.StartAutoPlay
 
  • Like
Reactions: zed

klaus

Expert
Licensed User
Longtime User
Sorry, my mistake. I had added new designer properties without opening the designer again to save once.
You can avoid this by using:
B4X:
MyProperty = Props.GetDefault("MyProperty", DefaultValue)
Instead of:
B4X:
MyProperty = Props.Get("MyProperty")
 

asales

Expert
Licensed User
Longtime User
I'm testing this (another great) library.

If I have many dates, I get this screen:
1706021879869.png

Can I made the dates scrolls, like the ASDatePickerTimeline?
And change the color of the individual circle?

Thanks again for your support.
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.01
    • Add Event CustomDrawItem
    • Add get and set Index
Can I made the dates scrolls, like the ASDatePickerTimeline?
No, but you cann add this view on a horizontal xcustomlistview and then you have a scrolling feature. But you need to calculate the right widt by yourself.
And change the color of the individual circle?
Yes, with the new CustomDrawItem Event
Example:
B4X:
Private Sub AS_Timeline1_CustomDrawItem(Item As AS_Timeline_Item,Views As AS_Timeline_CustomDrawItemViews)
    If Item.Index > AS_Timeline1.Index Then
        Views.xpnl_Round.Color = xui.Color_Green
    Else
        Views.xpnl_Round.Color = AS_Timeline1.g_ItemProperties.ReachedColor
    End If
End Sub
 

asales

Expert
Licensed User
Longtime User
No, but you cann add this view on a horizontal xcustomlistview and then you have a scrolling feature. But you need to calculate the right widt by yourself.
Thanks again.
I'm starting to testing in this way and works fine.

Another issue:
if I check the AutoPlay in the designer I get this error below.
If I call the function StartAutoPlay (without check the option in the designer) works fine.
B4X:
java.lang.RuntimeException: java.lang.IndexOutOfBoundsException: Index 0 out of bounds for length 0
 

Alexander Stolte

Expert
Licensed User
Longtime User
Another issue:
if I check the AutoPlay in the designer I get this error below.
If I call the function StartAutoPlay (without check the option in the designer) works fine.
I can't recreate it, please provide an example project.
 
Top