B4J Tutorial Using Sliders

This is a simple example that shows :
Using sliders
Re-sizing windows
Changing background colour of a window
Truncating/Expanding text
Moving labels to keep pace with a slider button
Text with reflections (set in javaFX designer as property not visible in IDE)

I have put many comments in the source as to what is happening and why.(sorry only in English)

Hope it helps.

 

[Erel]

When I move the slider something "strange" happens. Everything starts to move back and forth. Seems like you make an update that causes another update and so on...

 

[Daestrum]

Its caused by the sliders updating each other, in a real app there would be no need of that. It was just to show how one action can update various other items.
Original the slider was to spin a blue rectangle (hence the name in code for label 'blueBox'), but the rotation property is not exposed, so I changed it to just move the label back and forth.

 

[Robert Maguire]

Hi Folks.

First post/question...but first let me say how brilliant I think B4J is! I have been mucking around with Python and wxPython.wxWidgets for some time now and just discovered B4J. I cannot believe how much faster I can develop in B4J (having originally moved from VB6 to Python). Can't wait to have a crack with B4A once I get some apps working in B4J.

My question regarding sliders is based on the issue reported here (sorry can't provide screenshot just at the moment).

I am developing an application that shows a layout including:

• text box
• slider
• tableview

​

All three controls shown the same integer value for a 'score'.

• If I manually enter the value for 'score' in the text box, then
  • the slider is updated to the same value; and
  • the tableview scrolls to and selects the row with the same value
• If I slide to a new value for 'score' in the slider, then
  • the text box value is updated to the same value; and
  • the tableview scrolls to and selects the row with the same value
• If I select a row containing a new 'score' in the tableview, then
  • the text box value is updated to the same value; and
  • • the slider is updated to the same value.

In other words...all three controls are sychronised based on the 'score' value.

The problem is that when you adjust the slider it seems to go into an endloop, i.e. "When I move the slider something "strange" happens. Everything starts to move back and forth.". The UI becomes unusable and the only way out is to kill the process

It would appear that the 'change' events for all three controls (as soon as the 'score' value is changed in one of the controls) are endlessy causing each others change event to trigger...possibly because the slider changes in increments over a range, i.e. one slide of the slider may cause multiple change events as each increment on the control is slid over.

So...is there a clever way of keeping three controls (including a slider in synch with each other without going "strange"?

Thanks in advance.

 

[Erel]

This code uses a timer to synchronize two sliders. It shouldn't be difficult to extend it to more nodes:

Sub Process_Globals
   Private fx As JFX
   Private MainForm As Form
   Private s1, s2 As Slider
   Private syncTimer As Timer
   Private timerCounter As Int
   Private targetValue As Int
   Private eventSource As Node
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.Show
   s1.Initialize("s1")
   MainForm.RootPane.AddNode(s1, 10, 0, 300, 100)
   s2.Initialize("s2")
   MainForm.RootPane.AddNode(s2, 10, 100, 300, 100)
   syncTimer.Initialize("SyncTimer", 10)
End Sub

Sub SyncTimer_Tick
   If timerCounter >= 2 Then
     If eventSource <> s1 Then s1.Value = targetValue
     If eventSource <> s2 Then s2.Value = targetValue
     syncTimer.Enabled = False
   Else
     timerCounter = timerCounter + 1
   End If
End Sub

Sub StartEvent(source As Node, value As Int)
   If syncTimer.Enabled AND source <> eventSource Then
     Return
   End If
   eventSource = source
   timerCounter = 0
   targetValue = value
   syncTimer.Enabled = True
End Sub

Sub s1_ValueChange (Value As Double)
   StartEvent(Sender, Value)
End Sub

Sub s2_ValueChange (Value As Double)
   StartEvent(Sender, Value)
End Sub

 

[Robert Maguire]

Hi Erel,

Thanks very much for the suggestion...I'll try it and report back on it.

Cheers

 

[Robert Maguire]

Hi again,

Just applied it to my project and it works perfectly.

Thanks Erel...I've only been playing with B4J for a few days and I'm learning fast thanks to this forum.

With regard to this question...I was unaware of the 'Sender'. Is there a B4J language reference that explains some of environment variables/objects/etc.

Thanks again.

 

[Erel]

Sender is one of the keywords: http://www.b4x.com/b4j/help/core.html#keywords

 

[Robert Maguire]

Thanks again Erel.

I didn't think to look in the Core definition. Still finding my way around the doco...

 

[Erel]

You can also skim through the B4A beginner's guide: http://www.b4x.com/android/documentation.html

The language and most of the concepts are the same.