TheCoder4eu / BootsFaces-OSP

BootsFaces - Open Source Project
Apache License 2.0
246 stars 102 forks source link

selectMultiMenu as Listbox possible? #968

Closed kwrobel closed 5 years ago

kwrobel commented 6 years ago

I'm trying to use the b:selectMultiMenu widget, but I was hoping it would render as a listbox instead of a button that just fills up with text as items are selected. I think it would look nice if the widget showed all options as a list, kind of how the list looks like when the button is clicked. Is that an option that is being considered? Or did I miss an option and it's already possible?

For reference, and I hate to compare Bootsfaces to the competition, PrimeFaces has an implementation of the standard JSF selectManyMenu. In fact, I tried the standard JSF selectMenuMenu in the context of Bootsfaces, but of course it's missing styling and looks ugly.

Thoughts?

stephanrauh commented 6 years ago

I don't think that's possible. We're using the JavaScript widget http://davidstutz.de/bootstrap-multiselect/. It has many options, but the option you're requesting doesn't seem to be there. Would you mind to have to look yourself, just in case?

BTW, we're on good terms with the PrimeFaces team. Technically, we may be competition, but it doesn't feel that way. :)

kwrobel commented 6 years ago

Ok, so I took a look at Bootstrap, specifically their Form controls. The standard <select> and <option> tags are styled properly. They have the "form-control" CSS class. So what I tried is to use a standard JSF <h:selectManyListbox> component and added class="form-control" to it. The control is now properly styled. Would it be possible, maybe even simple, to implement a Bootsfaces version of the widget?

kwrobel commented 6 years ago

Ok, so I took a look at Bootstrap, specifically their Form controls. The standard <select> and <option> tags are styled properly. They have the "form-control" CSS class. So what I tried is to use a standard JSF <h:selectManyListbox> component and added class="form-control" to it. The control is now properly styled. Would it be possible, maybe even simple, to implement a Bootsfaces version of the widget?

stephanrauh commented 6 years ago

@kwrobel It's easy. I've prepared a branch containing an automatically generated skeleton of b:selectManyListbox for you (https://github.com/TheCoder4eu/BootsFaces-OSP/tree/selectManyListbox). The classes you're interested in are in the package net.bootsfaces.component.selectManyListbox.

I suppose you'll quickly find out how to write the encodeBegin() method which usually generates the HTML code. Just have a look at the other components, such as b:row.

A bit more challenging might be the decode() method, which care about input sent to the server. It's not really difficult, but you can leave that to us if you prefer to do so.

Please add or update the attributes of the widget in the file BootsFaces.jsfdsl even if you don't use our Xtext Eclipse plugin (https://github.com/stephanrauh/JSFLibraryGenerator/tree/master/JSFLibraryGeneratorUpdateSite). The plugin generates the Core.java, the Attributes.xhtml, and updates the taglib. The plugin makes us a lot more productive and allows us to do large-scale refactorings, such as #953.

And don't hesitate to ask if you've got a question!

Thanks in advance, Stephan

kwrobel commented 6 years ago

@stephanrauh Not sure if I'm qualified enough to lay my hands on Framework code, but I can give it a crack. So if I wanted to work on that branch, do I simply clone the project and check out that branch?

kwrobel commented 6 years ago

@stephanrauh Stephan, I looked at the source code. I want to be honest: this goes a bit over my head since I am also working on an internal project and can't fully focus and study the code of other widgets. I am resorting to standard JSF selectManyListbox right now so I can get my assignment done. If you or your peer have a working widget that you'd like me to test, please ping me right away and I will pull the changes inside that branch down again and recompile and test.

stephanrauh commented 6 years ago

@kwrobel No problem. By the way, have a look at https://select2.org/getting-started/basic-usage. How to you like the multi-select boxes? I suppose we can implement them with little effort.

kwrobel commented 6 years ago

@stephanrauh Thanks for the link. It looks like a nice widget. However, I was hoping for more of a standard component like the JSF h:selectManyMenu, just with a Bootstrap styling and maybe nice AJAX integration. I'm currently simply using that and added the class "form-control" to add styling. See, I need a set of options to be visible to the user on the page. The control you referred to shows nothing until you click it, then it shows content to select, and the selected content gets added on the same line. That is not what I was looking for for the project I'm working on. I was looking more for something standard, like this.

stephanrauh commented 5 years ago

Let's close the ticket. It's been open for such a long time I suspect it's lost its urgency.