Bootstrap Extra Components 1.0.0 released

[patrick]

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, ...



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



* Breadcrumbs: simple display of the navigation hierarchy



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



* Rating: simple star rating control



* Badges: labels or button with counter badges



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.

[patrick]

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).

[HEKUCH]

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

[huber]

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,

[patrick]

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?

[huber]

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

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]

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.

[huber]

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.
}

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

[patrick]

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]

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.

[huber]

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?

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,

[patrick]

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?

[huber]

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

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]

Regarding the arrows: could you run the sample solution of the components and see what happens there?

[huber]

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

Regarding the arrows: could you run the sample solution of the components and see what happens there?