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)
[attachment=0]carousel.png[/attachment]
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
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.
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 :
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?
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:
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?
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.
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?
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.
}
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.
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:
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.
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:
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:
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.
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:
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?
You can set the enabled property to false. While testing I noticed there is a subtle change in the angular version that Servoy 8.2 is using. The icons did change even when not enabled, only the dataprovider is not updated. That will be fixed in the next update.
