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.

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

 

[Sergio Haurat]

My God, every time I see you post I think... what will you surprise me with this time?

 

[zed]

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.

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 **

 

[Alexander Stolte]

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:

AS_Timeline1.StartAutoPlay

 

[zed]

It works very well.
Very nice job.
Respect.

 

[klaus]

Sorry, my mistake. I had added new designer properties without opening the designer again to save once.

You can avoid this by using:

MyProperty = Props.GetDefault("MyProperty", DefaultValue)

Instead of:

MyProperty = Props.Get("MyProperty")

 

[Alexander Stolte]

You can avoid this by using:

Thanks, but every update I do this. But since that was the 1st official release, I forgot about it.

 

[Daica]

These sort of libraries are a great addition to the community!

 

[asales]

I'm testing this (another great) library.

If I have many dates, I get this screen:

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

Thanks again for your support.

 

[Alexander Stolte]

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:

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]

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.

java.lang.RuntimeException: java.lang.IndexOutOfBoundsException: Index 0 out of bounds for length 0

 

[Alexander Stolte]

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.

 

[asales]

I can't recreate it, please provide an example project.

I'm doing more tests here.
I saw the problem is because I load the layout - with the AS Timeline - in a customlistview.