Select2

[ghost]

pull request not yet final, as I'm not sure about integrating new js and css files within a component. Therefore, I have a question and hope to get some hint for that: how can I conditionally load a js and css file if a tag attribute is set? In this example, I want this:

<b:selectOneMenu ... select2="true"> ... </b...>

should render the following lines in the document header:

<link href="css/ext/select2.min.css" rel="stylesheet" />
<script src="js/select2.min.js"></script>

I don't know how to do that, neighter globally nor in condition of the attribute value. Maybe you could give me a hand on that problem?

Finally, this extension allows a filter on the selectOneMenu tag and makes bootsfaces a bit more powerful.

What is supposed to happen?

if the select2 attribute is set to true, a new class is added to the component (called select2style) and a jquery block is added after the component of such code:

<script type="text/javascript">
$(document).ready(function() {
    $("[id='j_idt_1:j_idt_2']").select2();
});
</script>

With that and a valid included select2.min.js, the selectOneMenu component becomes a dropdown with a filter box. For the javascript library, refer to https://select2.org/

I turned out that using this feature, <b:panelGrid /> is broken up by the width of the javascript element size. Therefore, a

$(document).ready(function() {
    $(".select2-container").css("width", "100%");
});

can be added to get the complete width of the component after page rendering.

[ghost]

this is how it could look like:

[stephanrauh]

Awesome!

[stephanrauh]

BootsFaces 1.x has a mechanism to add conditional CSS and JS. We haven't used it this way yet, but there's no reason it shouldn't work. Have a look at the constructor of the component class:

	public SelectOneMenu() {
		Tooltip.addResourceFiles();
		//!bs-less//AddResourcesListener.addThemedCSSResource("dropdowns.css");
		AddResourcesListener.addThemedCSSResource("core.css");
		//AddResourcesListener.addThemedCSSResource("bsf.css");
		setRendererType(DEFAULT_RENDERER);
	}

You can register a new CSS file using AddResourcesListener.addExtCSSResource() and a new JS file using AddResourcesListener.addBasicJSResource(). In your case, put the code in the setter setSelect2(). If you've discovered our Xtext plugin (and if you've managed to install it :)), please override the setter in the component class, because the code in the *Core class is always overridden.

[stephanrauh]

However, your PR is a challenge for BootsFaces 2. We haven't made the source code publicly available, so this isn't your problem (yet). Thing is, I'd like to get rid of the AddResourcesListener. It's a powerful and useful tool, but it's also the number one source of bug reports.

So maybe it's better to create a new component, such as b:filteredDropDownSelect (or whichever name suits best). This component is simply derived from the original b:selectOneMenu. The difference is that the constructor registers the new code, plus the other changes you've started to implement.

[ghost]

Thanks for all the detailed answers. I like the idea of an own component, but for time consumption, I wanted to add this to the selectOneMenu tag. On the other side, I don't know when BootsFaces 2 will come out and how long it will take to be used in my projects. I expect bigger changes for such new releases. Therefore, I'd like to go with your first comment on using the AddResourcesListener in the constructor directly. I will do so and hope that the pull request will be updated automatically?

[ghost]

Ok, done, here we go. Will there be a 1.2.1-SNAPSHOT version for testing this feature? Tell me if so, I'm looking forward to solve the rest of the problems for this extension.

[stephanrauh]

Now you've added the resources no matter whether select2 is set or not. Is this intentional or accidental?

[stephanrauh]

After merging your PR, I can publish a snapshot. Just tell me when to do this (and prepare a day delay because I don't live on GitHub :) ). I guess I can also publish the snapshot after merging the PR locally, so you can continue working on your PR.

[ghost]

Yes, adding the resources always was intentional, as it is the fastest way to make it run. I consider a change to conditional later if I find some time to improve the extension.

A snapshot would be great, you don't have to put that to maven central before. Just let me know where to get the jar file, then I can do some tests. I've also generated jar files on myself using gradle, but I wonder if I did that right - deactivated the java9 target because of an installed java8 one and such... therefore, yes, please provide a snapshot for me.

Thanks for the fast answers and all of your support!

[stephanrauh]

I've just uploaded the merged version as 1.2.1-SNAPSHOT to Maven Central (as described in #369).

Actually, putting the snapshot to Maven Central is just a matter of running "mvn deploy" and entering a password. So it's the simplest way for me :).

[stephanrauh]

I've quickly scanned the file changes. I didn't run the code, so I can't be sure, but at first glance, it looks good to me. Please add the new attribute to the file xtext/BootsFaces.jsfdsl. If you've installed the Xtext plugin, it generates the *Core.java, the taglib, and the attribute description of the showcase.

[ghost]

Ended up ith this error message:

Jan 17, 2018 11:37:23 AM org.apache.myfaces.renderkit.html.HtmlStylesheetRenderer encodeEnd
WARNUNG: Resource referenced by resourceName css/select2.min.css and libraryName bsf not found in call to ResourceHandler.createResource. It will be silenty ignored.
Jan 17, 2018 11:37:23 AM org.apache.myfaces.renderkit.html.HtmlScriptRenderer encodeEnd
WARNUNG: Resource referenced by resourceName js/select2.min.js and libraryName bsf not found in call to ResourceHandler.createResource. It will be silenty ignored.

My suggestion is, that the needed files could not be found because you've used maven to build it. I copied the css and js files to gradleResources/staticResources/... only. With commit d245c32, I've added them to mavenResources/META-INF/bsf/... also, even tough there is no ext folder under css, but I think that might work as the other css files are there also.

Could you merge again and setup a new snapshot release?

Btw. here is my test project: https://github.com/jottyfan/Check2.git

[stephanrauh]

Yeah - you've mentioned Gradle, so I should have checked that! I've uploaded the new version of the snapshot. Now it should work. I've run a quick test on my local copy of the showcase, and it looks nice.

[stephanrauh]

BTW, I've sent you an invitation to the BootsFaces 2 repository. We're trying something new over there, so don't be surprised nothing looks familiar. But if you'd like to contribute your advanced selectOneMenu to BootsFaces 2, now you've got a chance to do so. Basically, you need to add the component to the BootsFaces.jsfdsl file and define the renderer in a new *.html file in generators/src/main/resources. The corresponding Java class is generated from this Angular-like template file.

[ghost]

Yes, indeed, I can confirm that it works. Thanks for your support!

Nevertheless, I didn't receive your BootsFaces 2 repository invitation. I've also checked my spam folder, nothing to find there. Maybe you can check your invitation function?

[stephanrauh]

It's a GitHub repository, and you seem to have accepted the invitation. No idea why you didn't receive an email. Can you see the repository https://github.com/stephanrauh/BootsFacesNext ?

[ghost]

yes, I've received the invitation after 12 hours, so this morning. With that, I accepted your invitation. Sorry for the misunderstandings.

[stephanrauh]

@jottyfan I wonder if we should call the attribute filter. What do you think?

[ghost]

you are free to change this the way you want - but on a filter field, I'd expect to enter the filter itself. Therefore, I would call it activateFilter (activate_filter) instead.