Ola
BANanoReef
So I took a small break to check this out, out of curiosity. Reef does one thing, renders the UI and only updates the stuff that has changed.
To develop webistes / web apps with BANano, one uses html, css and javascript. Here we go to basics and create a reactive HTML component, a h1 using data-properties.
We will update parts of it using a template and setting its data properties. What we have below is a HTML h1 component that gets updated every 3 seconds to update the name property..
Reproduction
1. We create a reef object.
2. We set the data to it
3. We create a template for our HTML element and pass it the data
4. We render the reef to the body of the page.
Let's take a loot at the code...
We have defined a process globals reef component.
We want to change the name at each 3 seconds..
We then define a timer..
When the timer fires, we change the name property and refresh the element.
BANanoReef
So I took a small break to check this out, out of curiosity. Reef does one thing, renders the UI and only updates the stuff that has changed.
To develop webistes / web apps with BANano, one uses html, css and javascript. Here we go to basics and create a reactive HTML component, a h1 using data-properties.
We will update parts of it using a template and setting its data properties. What we have below is a HTML h1 component that gets updated every 3 seconds to update the name property..
Reproduction
1. We create a reef object.
2. We set the data to it
3. We create a template for our HTML element and pass it the data
4. We render the reef to the body of the page.
Let's take a loot at the code...
We have defined a process globals reef component.
B4X:
'initialize a reef and set the object to render it to
reef.Initialize("#body")
'define the properties for the element, we have greeting and name
reef.SetData(CreateMap("greeting": "Hello", "name": "world"))
'define the h1 html element
reef.SetTemplate($"<h1>#greeting#, #name#!</h1>"$)
'we render the element to the body
reef.Render(False)
We want to change the name at each 3 seconds..
We then define a timer..
B4X:
nameCnt = 0
timer.Initialize("timer1", 3000)
timer.Enabled = True
When the timer fires, we change the name property and refresh the element.
B4X:
Sub timer1_tick
nameCnt = nameCnt + 1
Select Case nameCnt
Case 1
reef.Refresh(CreateMap("name":"Mashy"))
Case 2
reef.Refresh(CreateMap("name":"Ozzie"))
Case 3
reef.Refresh(CreateMap("name":"Orio"))
Case 4
reef.Refresh(CreateMap("name":"Ernesto"))
nameCnt = 0
End Select
End Sub