Two simple UI headaches

[Jason Irwin]

Hi all.

I have recently started with JSF (using MyFaces 1.2 and Trinidad) and knocked up a quick demonstration of a search, PPR, downloading files, saving results to CSV etc. Nothing fancy but it works and I was very impressed with how easy it was to do. I am just struggling with is a few very basic UI things, I've googled until I've boggled and still not found the answers. These are so simple, you'll probably laugh. No, really. You will.

1) How to "clear" an already empty required control
I have a combo ("cboProject" in the code below) and it is required. Eventually there will be many more controls, so I provided a button to clear the values and that's where I hit the problem. If the value is already empty, I get the default "You must enter a value" error message when I click on "Clear" because of the submit. I want to "Clear" to always clear the values on the UI, I am not concerned about validation when this is clicked but I cna't figure out how to do this. Is it a case of having to write some custom javascript to crawl the DOM and set all the inputs to null?

2) Pushing a value from one control to another
I have to have a text box and a combo ("txtProject" and "cboProject" below). If the user enters a value into the text box, the combo should show the corresponding item. If the user selects a value in the combo, the text box should update to show the stored value. To do this I have written some custom javascript (the "pushValueTo" function mentioned in the code below), but I am sure there has to be a better JSF way.

Due to the planned number of controls and volume of data, I'd like to avoid round-trips to the server and handle it all on the client (IE6) if possible.

<tr:form defaultCommand="runSearch">
	<tr:panelGroupLayout id="searchAttributes" layout="vertical">

		<tr:inputText id="txtProject" value="#{searchBean.projectNumber}" onkeyup="pushValueTo(this, 'cboProject');"/>

		<tr:selectOneChoice partialTriggers="clearSearch" id="cboProject" required="true" value="#{searchBean.projectNumber}" unselectedLabel="" valuePassThru="true" onchange="pushValueTo(this, 'txtProject');">
			<t:selectItems value="#{searchBean.allProjects}" var="proj" itemLabel="#{proj.name}" itemValue="#{proj.projectNumber}" />
		</tr:selectOneChoice>

		<tr:panelGroupLayout layout="horizontal">

			<tr:commandButton id="runSearch" text="Search" actionListener="#{searchBean.runSearch}" partialSubmit="true" />

			<tr:commandButton id="clearSearch" text="Clear" actionListener="#{searchBean.clearSearch}" partialSubmit="true" />

		</tr:panelGroupLayout>
	</tr:panelGroupLayout>
	...
</tr:form>

Thanks for any helps/tips/advice.

rS

[Jason Irwin]

Isn't it always the way? About 10 minutes after posting I found this page which gave me some pointers.

I added 'immediate="true"' to my "clearSearch" button and a quick test shows that the "Delete Components Holding Unwanted State" works for me, but it seems to be dependent on page layout which I don't like. I'll look at the other methods in more detail tomorrow.

This still involved a round-trip and re-rending all the controls with their many thousands of values though. Is there a purely client-side way to do this?

Cheers,

J

[Tim Holloway]

If you want client-side, you have 2 options:

1. Use the basic JSF (core, html) controls and write your own JavaScript

2. Use a JSF/Ajax-savvy tagset like IceFaces or RichFaces. A lot of that stuff is built into them and the rest is usually simpler than if you had to do raw JSF.

Another advantage of solution #2 is that you'll probably see more portability and flexibility. Even if you presently have an audience that's in bondage to IE6, if you offload the JavaScript to a more general-purpose framework, that may save you some work when they all flip over to IE8.

BTW, I think you're misunderstanding what a "Combo Box" control is, since it sounds like you're actually trying to build one yourself. A Combo Box is a combination of a straight Text Input control plus a SelectOneDropdown List control. A dropdown list isn't editable. The Core JSF doesn't provide this, because there's not an HTML Combo Box control to build on. RichFaces provides one synthesized using JavaScript and paired HTML controls in much the same way you're trying to do.

[Jason Irwin]

Hi Tim, thanks for the reply. I will have a quick look at ICEFaces/RichFacse but I do not think I will have time to swap from Trinidad (which, if I understand things correctly, is JSF/AJAX-savvy too).

The text box (inputBox) and combo (selectOneChoice) are separate controls, I'm not trying to roll my own. Some users want to type codes into a series of text boxes (old hands that know only code numbers); others want a series of point 'n click combos (they know only item names). The customer is insisting that these are separate controls (I know they could be combined, but.....) and that they are kept in sync. So if a user types "123" in to the text box, the combo will automatically change to show the relevant item and vice versa; I got this working but at I say, it's custom JS on the client and I am not sure if there is a more correct JSF way, some client side event that can be fired to cause controls to update without going back to the server.

As for the clearing, this is working with a submit back to the server. I could write javascript easily enough to clear the client values, but that would leave the server out-of-sync with the client. Maybe not such a big deal as clicking on "Search" should push the new values back to the server. I guess my javascript could call back to the server to tell the bean to clear too - but I am not clear on how to message the server from the javascript. This would avoid having to push all the data back down to the client again. Is it possible to invoke a bean method from client-side javascript?

I only have a couple of weeks to write this thing from scratch (that includes documentation and testing) and as from people moving away from IE6....that's a good one!

Thanks again,

J.

[Jason Irwin]

Well, I think I solved it.

For the clear I have written a small javascript function that will clear the form when the button is clicked. I have also set the button as a partialSubmit, so after the form is cleared a message is fired off to the server and causes the bean to clear (I need to double check that actually happens, but it seems to work).

I am just leaving the textbox/combobox syncing using my custom javascript.

Looks like JSF doesn't do client-side validation/event handling as far as I can tell.

[Tim Holloway]

Jason Irwin wrote:
Looks like JSF doesn't do client-side validation/event handling as far as I can tell.

You are correct. JSF doesn't have any JavaScript (client-side logic) requirements or support whatsoever other than extending the same JavaScript properties that raw HTML has.

To have any sort of client-side action, you have to either hand-code your own JavaScript or you have to use JavaScript-supporting third-party add-ons such as RichFaces.

[Jason Irwin]

Tim Holloway wrote:To have any sort of client-side action, you have to either hand-code your own JavaScript or you have to use JavaScript-supporting third-party add-ons such as RichFaces.

Strange, I thought I would have got that from using Trinidad. But them I am pretty new at this stuff.

I still need to find the time to look at RichFaces.

Cheers,

J.

[Tim Holloway]

I think Trinidad does do JavaScript, although it had some compatibility issues, so I've never really looked at it.

But Trinidad isn't core JSF. It's one of those third-party add-ons I mentioned. So is Tomahawk, for that matter.

[Jason Irwin]

Yeah, I chose Trinidad over Core as I wanted PPR without the hassle of rolling my won (I have done that before for prototypes, but would prefer is the framework took the strain). Also the theme/skinning behaviour provided by Trinidad could come in useful.

I am sure RichFaces will do similar things - I just wish I had more time to research.