Bootstrap Extra Components 1.0.0 released

Announcements of the latest WebComponents for NGClient (shipped by the WebPackageManager)

Bootstrap Extra Components 1.0.0 released

Postby patrick » Thu Feb 23, 2017 10:47 am

We are pleased to announce a new set of bootstrap based components called "Bootstrap Extra Components" featuring

* Image carousel: show images from either a foundset or by URL in a carousel featuring lazy loading of images (images are transferred to the browser only when needed)

carousel.png


* Navbar: basic bootstrap navigation bar with support for different types of menu items such as Dropdown menus, buttons, input fields, typeaheads, ...

Image

* Input groups: Input fields with text or button addons to the left and/or right grouped as one control

Image

* Breadcrumbs: simple display of the navigation hierarchy

Image

* Button groups: grouped buttons as either a radio or checkbox control

Image

* Rating: simple star rating control

Image

* Badges: labels or button with counter badges

Image

For more details, visit https://github.com/Servoy/bootstrapextracomponents and for documentation have a look at the wiki.

The components are available as a downloadable package or can be installed using the Web package manager inside Servoy developer. A sample solution is available for download from the releases section. All of the components can be used in absolute or responsive layouts.
You do not have the required permissions to view the files attached to this post.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Fri Feb 24, 2017 8:41 am

For an introduction to all of these components, have a look at the last session of our tech webinars here: https://servoy.com/webinars/tech-series/ (or follow this direct link to video).
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby HEKUCH » Fri Feb 24, 2017 1:04 pm

Hi Patric,
Wow !! great work - Congratulations and thanks for sharing!

Now I miss one thing for me: A component to drag-drop files and upload it.

But I have also a small problem with all NG-Components:
When I drag a Web-component then the anchor-property was not showed in the property-window . It's nessesery to execute the application in my developper and then this property was showed :


24-02-2017 11-56-40.png

24-02-2017 11-57-35.png
You do not have the required permissions to view the files attached to this post.
Hendrick Kurland

DataBit GmbH
CH-9217 Neukirch an der Thur
HEKUCH
 
Posts: 13
Joined: Thu May 05, 2011 8:02 am

Re: Bootstrap Extra Components 1.0.0 released

Postby huber » Fri Jul 14, 2017 3:07 pm

Hi Patrick

Thanks for the bootstrap extra components. I am experimenting with the carousel, using it to display instruments for a student to select from (choice is around 20 instruments to select from). Instruments are stored in a table. I would add images of the instruments as well.

Unfortunately, I can't find a onClick event, which would be nice to select the desired instrument by clicking on the image.
May be there is already a way to react to a click on the image? Otherwise I would like to ask for such an enhancement, if it is doable?

Best regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 531
Joined: Mon May 14, 2012 11:31 pm

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Mon Jul 17, 2017 10:47 am

Hello Robert,

I can add a onSlideClicked handler, yes. Anything else while I look at that? Could you create a feature request for that on github?
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby huber » Wed Jul 19, 2017 9:57 am

Hello Patrick

Thank you very much for your offer to add a a onSlideClick(ed) handler. It would be extremely helpful and allow us to use the carousel in our new NG Client application to select instruments. Made a feature request having ID SVY-11356.

I found that on macOS 10.11.x and 10.12.x, the Carousels left/right arrow do not work (sometimes reacts on a right click once, but never more than once).
On Windows 7, left/right arrows do work in IE, but not in Firefox and Chrome (the ones I tested).

I also noticed that setting imageOptions property does not seem to work in my environment. It looks like it behaves always like scale to fit.

Made an entry in GitHub entry having ID SVY-11357.

I did not play extensively, but it would be welcome to be able to influence the position and size of the indicators (circles to navigate backward/foreward) as well as the caption (text).

Thanks,
Robert

patrick wrote:Hello Robert,

I can add a onSlideClicked handler, yes. Anything else while I look at that? Could you create a feature request for that on github?
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 531
Joined: Mon May 14, 2012 11:31 pm

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Wed Jul 19, 2017 11:12 am

I see the tickets, but they should better go here: https://github.com/Servoy/bootstrapextr ... nts/issues

I will transfer them...

Regarding the arrow buttons: I have no issues using them. Do you have a small sample solution that shows the problem? That demo could also show which image scaling options you tried.

I will have a look on styling the indicators, but I think you can already do that. Maybe needs to be added to documentation.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby huber » Tue Jul 25, 2017 9:47 am

Hi Patrick

I have a foundset containing the instrument names (around 20) plus a few more attributes and following is the code I use, together wit a Carousel Web Component. The picture is just for test purposes always the same, I recognise the instrument by getting the name of the instrument from the corresponding foundset record. Does this piece of code help?

Code: Select all
function showInstruments() {
   /** @type {JSFoundSet<db:/hades/particular_subjects>} */
   var fsInstruments = databaseManager.getFoundSet('hades', 'particular_subjects');
   if (fsInstruments.find()) {
      fsInstruments.subject_code = 'IN';
      fsInstruments.search();
   }
   
   elements.carousel.lazyLoading = true;
   elements.carousel.removeSlide(0); // Remove first empty slide (don't know why there is one)
   for (var i = 1;  i <= fsInstruments.getSize(); i++) {
      /** @type {bootstrapextracomponents-carousel.slide} */
      var slide = {
         imageUrl: 'https://swallowhillmusic.org/wp-content/uploads/2013/03/ukulele.jpg',
         caption: fsInstruments.getRecord(i).name
      };
      slides = elements.carousel.addSlide(slide);
      application.output('ElcInstruments: showInstrument: fsInstruments.getRecord(i).name: ' + fsInstruments.getRecord(i).name, LOGGINGLEVEL.DEBUG);
   }
   
   elements.carousel.cycleInterval = 0; // Do no cycling
   elements.carousel.noPause = false; // Animation does stop when mouse is over the component. Default is false.
}


patrick wrote:I see the tickets, but they should better go here: https://github.com/Servoy/bootstrapextr ... nts/issues

I will transfer them...

Regarding the arrow buttons: I have no issues using them. Do you have a small sample solution that shows the problem? That demo could also show which image scaling options you tried.

I will have a look on styling the indicators, but I think you can already do that. Maybe needs to be added to documentation.

Best regards,
Robert
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 531
Joined: Mon May 14, 2012 11:31 pm

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Tue Jul 25, 2017 10:06 am

Looking at your code: couldn't you either base the component on your foundset directly or set all slides at once (instead of adding one by one)? I find it odd to send 20 single requests over the wire to add slide by slide instead of just doing something like this:

Code: Select all
var slides = [];
for (var i = 1;  i <= fsInstruments.getSize(); i++) {
      /** @type {bootstrapextracomponents-carousel.slide} */
      var slide = {
         imageUrl: 'https://swallowhillmusic.org/wp-content/uploads/2013/03/ukulele.jpg',
         caption: fsInstruments.getRecord(i).name
      };
      slides.push(slide);
      application.output('ElcInstruments: showInstrument: fsInstruments.getRecord(i).name: ' + fsInstruments.getRecord(i).name, LOGGINGLEVEL.DEBUG);
   }
elements.carousel.setSlides(slides);


This will send only one small request to the client. You have to be aware that elements.carousel.addSlide(slide) each time triggers loads of watches etc. on the component. Simply setting all slides is way more efficient and in general more what a carousel is built for. addSlide was added for completeness and to allow the rather rare use case of modifying the set of images at runtime. It is not meant to populate the carousel at start.

You forgot to mention what goes wrong with that example code... Does such an example produce the problem with the arrow keys? Maybe adding slide by slide is messing it up a bit.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Tue Jul 25, 2017 10:07 am

And by the way: the onClickHandler has been added to version 1.1.5 which you should be able to grab using the webpackage manager.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby huber » Fri Jul 28, 2017 11:59 am

Hi Patrick

Thanks for your feedback and suggesting better code as my simple adding one by one solution. Yes, the code is the one I use which has the problem with the forward/backward arrows not working. I just implemented your code but still the same behaviour, i. e. it's not possible to advance or go back with the arrows. It is possible to navigate by the indicators (circles) though. A bit strange, isn't it?
I am a bit baffled that it works on Windows 7 on Internet Explorer, but not in Firefox and Chrome (in my environment). And in none of the browsers on Mac. How can that be? Does it point to a browser setting required which is set by default on Internet Explorer?
Do the arrows work in your testing environment (with your code) on Mac?

By the foundset suggestion, do you mean setting the table containing the instruments as dataprovider for the Property slidesFoundset for the carousel component? I could very well do that, what would be the advantages?

patrick wrote:Looking at your code: couldn't you either base the component on your foundset directly or set all slides at once (instead of adding one by one)? I find it odd to send 20 single requests over the wire to add slide by slide instead of just doing something like this:

Code: Select all
var slides = [];
for (var i = 1;  i <= fsInstruments.getSize(); i++) {
      /** @type {bootstrapextracomponents-carousel.slide} */
      var slide = {
         imageUrl: 'https://swallowhillmusic.org/wp-content/uploads/2013/03/ukulele.jpg',
         caption: fsInstruments.getRecord(i).name
      };
      slides.push(slide);
      application.output('ElcInstruments: showInstrument: fsInstruments.getRecord(i).name: ' + fsInstruments.getRecord(i).name, LOGGINGLEVEL.DEBUG);
   }
elements.carousel.setSlides(slides);


This will send only one small request to the client. You have to be aware that elements.carousel.addSlide(slide) each time triggers loads of watches etc. on the component. Simply setting all slides is way more efficient and in general more what a carousel is built for. addSlide was added for completeness and to allow the rather rare use case of modifying the set of images at runtime. It is not meant to populate the carousel at start.

You forgot to mention what goes wrong with that example code... Does such an example produce the problem with the arrow keys? Maybe adding slide by slide is messing it up a bit.


Best regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 531
Joined: Mon May 14, 2012 11:31 pm

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Fri Jul 28, 2017 12:12 pm

I have tested it on Windows 10 in Chrome, Firefox, Edge and on Mac OS X and see no problems with the arrows. Do you see an error in the console when nothing happens?
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby huber » Fri Jul 28, 2017 12:41 pm

OK. No, I do not get any errors in the console.

patrick wrote:I have tested it on Windows 10 in Chrome, Firefox, Edge and on Mac OS X and see no problems with the arrows. Do you see an error in the console when nothing happens?
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 531
Joined: Mon May 14, 2012 11:31 pm

Re: Bootstrap Extra Components 1.0.0 released

Postby patrick » Fri Jul 28, 2017 12:58 pm

Regarding the arrows: could you run the sample solution of the components and see what happens there?
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3708
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Bootstrap Extra Components 1.0.0 released

Postby huber » Fri Jul 28, 2017 5:01 pm

Hi Patrick, I will do that in two weeks – for obvious summertime reasons :-)

patrick wrote:Regarding the arrows: could you run the sample solution of the components and see what happens there?
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 531
Joined: Mon May 14, 2012 11:31 pm

Next

Return to Web Components

Who is online

Users browsing this forum: No registered users and 1 guest