Usage of Bootstrap progressbar

Forum to discuss the new web client version of Servoy.

Usage of Bootstrap progressbar

Postby robrecht » Fri Dec 30, 2016 2:18 pm

Hi,

I was watching some Youtube webinars for Servoy 8 and successfully implemented sidenav, svysearch, ... components into our solution.
After that I tried to use the Bootstrap Progressbar instead of our old spinning wheel.
Everything works fine but I have the feeling I am doing something wrong..

Each time the progress bar needs to be updated, I call
Code: Select all
forms.progressbar.elements.bs_progressbar.value = xx

Doesn't this slow down the NG client ?
I thought the progressbar would have a property value with a dataprovider in it, e.g. a globals.progress_value which is updated during the transaction.. ?

Are we supposed to adjust the component so that an extra property for a dataprovider is available ?

P.S. Is there a complete video or written tutorial about creating your own webcomponents to use in Servoy ?

Many thanks

Robrecht
robrecht
 
Posts: 99
Joined: Wed Aug 01, 2012 4:30 pm

Re: Usage of Bootstrap progressbar

Postby paronne » Fri Dec 30, 2016 3:16 pm

Hi,

Is the progress bar corretly updated during the execution ?
Why do you believe that the line of code slow down the execution of the NGClient compared to update a dataprovider ? There is actually no difference.
Surely updating the UI of the progressbar is a round-trip server to client, therefore updating the progress bar for each value (100 round-trips) will be slower then updating the bar for each 10 units (10 round-trips).

What you need to consider is instead the fact that a runtime change to an element's property is not immediately pushed to the UI; servoy keeps track of the runtime changes and push them all togheter to the UI when the method execution is terminated or as soon you execute an element's API on the UI (any element's API of any element present in UI) or if you call application.updateUI();
For example there is a difference between:

Code: Select all
// UI is updated only when the the loop is over
for (var index = 0; index <= 100; index++) {
   elements.bs_progressbar.value = index;
        application.sleep(50);
}

and

// UI is updated at each iteration.
for (var index = 0; index <= 100; index++) {
   elements.bs_progressbar.value = index;
        application.updateUI();
        application.sleep(50);
}


You can use the default progress bar just fine, there is no need to build your own.

About your last question, there is not a video or tutorial on how to build web components. Building components requires HTML/CSS knowledge; documentation on Servoy web components is available in this wiki section https://wiki.servoy.com/display/public/DOCS/NGClient ; it explains how to build components from the Servoy point of view, the angular directives offered by Servoy (sort Servoy's api for components), but it won't cover any HTML/CSS topic.
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Usage of Bootstrap progressbar

Postby robrecht » Fri Dec 30, 2016 3:36 pm

Hi Paolo,

I think I'm confusing some things.
When I build an Angular example with a progress bar I would do something like

Code: Select all
<progress class="progress" value={{current_value}} max="100"></progress>


current_value will be changed in some sort of loop, but I don't need to think about UI updates.

In the past we noticed that reducing application.updateUI() calls boosted the performance of transactions in our application.
I am probably missing something but why is a UI update a round-trip server to client ? Isn't it all client side ?


About the tut (sorry it is off topic); I do have the HTML/CSS knowledge and I have a jQuery menu component I would like to use in the Servoy / NGClient. I am looking for some documentation, a step-by-step guide, about how to convert this component into a 'Servoy-ready' component. Maybe the topic on the wiki is enough, but it remember a presentation on Servoy World or Camp about creating a component with spec file etc from scratch - but unfortunately can't find info about it

Thank !
robrecht
 
Posts: 99
Joined: Wed Aug 01, 2012 4:30 pm

Re: Usage of Bootstrap progressbar

Postby paronne » Fri Dec 30, 2016 4:04 pm

Hi Rob,

this logic is executed client-side indeed
Code: Select all
<progress class="progress" value={{current_value}} max="100"></progress>


but in fact you want to update the value of the progress bar from your form/scope logic;
therefore still you need a round-trip because each time you want to update the progressbar because you need to push a serverside value (a dataprovider value or the runtime valuea there is not a real difference) to the UI, that's why the roundtrip.

And sure, using less updateUI can boost your performance (an updateUI force the update of all runtime/dataprovider changes from server to the UI, that's why the round-trip); as said before a change to a runtime property (or to a dataprovider ) is not pushed immediately to the UI but at the end of the method execution or with a round-trip called by updateUI or any other element's API.

About the tutorial for building web components, what you have seen at Servoy World/Camp is just a short summary of the wiki i have shared with you. The more important are read these pages:
https://wiki.servoy.com/display/DOCS/WebComponents
https://wiki.servoy.com/pages/viewpage. ... Id=1869552
https://wiki.servoy.com/pages/viewpage. ... Id=8061129
https://wiki.servoy.com/pages/viewpage. ... Id=8061131

You can then see how simple web components, which are open sourced, are implemented. You can check this simple bootsrap button for example: https://github.com/Servoy/bootstrapcomp ... ter/button
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Usage of Bootstrap progressbar

Postby robrecht » Fri Dec 30, 2016 4:14 pm

Hi Paolo,

Many thanks for the explanation !
I'll take a look at the docs asap !

Robrecht
robrecht
 
Posts: 99
Joined: Wed Aug 01, 2012 4:30 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 4 guests