Looking for ideas/discussion on "Best Approach"

[ziggy25]

I have to create a form using JSP/Servlets with the following form fields

Customer Details
---------------------
Customer ID
Name
Street
City
Country

Product Details
-------------------
Product ID
Product Name
Manufacturer
Product Code
Country of Production //Where the product was manufactured

Product Certificate Details
----------------------------
Certificate ID
Issue Date
Country of Issue

The purpose of the form is so that the user can enter the customer details, product details and certificate details and submit the form for the data to be saved on to an database. That is ok if it was that simple

The idea is to make the form as easy as possible to complete so the following functionality will be available on the form.

A search icon will be available next to Customer ID which when clicked will display a pop up window with a list of all the customer ids available. The user can then select a customerid from the pop up window and the application will populate the customer details on the parent window based on the ID.

A similar type of popup/lookup window will be available for Productid, product code in product details and certificate id in certificate details.

There will also be a lookup window for all the country elements in the form. I.e Country under customer details, Country of production and country of issue.

Now the bit that i am interested in is what is the best way of implementing this using jsp,servlets and struts. I am mainly interested in knowing how you would implement the following functionality

1 - The database stores nearly 23,000 product codes. If the user selects the search icon to load all the product codes so that they can select one, how would you manage these? Presumabely it wont make sense to display 23,000 product codes for the user to select 1 from the list. I think the best way to do this is to paginate the list on the popup window. Is there anything in JSP to simplify this?

The other question is where/how would you store the product codes on the client? or would you store them at all?

2. The other thing that i would like some advice on is what is the best way to implement the lookup window for Country, Country of Production and Country of issue. Im thinking as all these 3 elements are retrieving the same data i should have a generic component that can be used for all 3. How can you make the generic component to determine which form field of the 3 is to be populated if they have different names?

3. And finally when the popup window loads, is there any other way other than Javascript to populate a form element on a parent window based on a clicked hyperlink on a child window?

4. And finally finally, is it better to display the pop window in a "new window" or a hidden css DIV layer?


Thanks

[rozner]

Now the bit that i am interested in is what is the best way of implementing this using jsp,servlets and struts. I am mainly interested in knowing how you would implement the following functionality

Just a suggestion, don't use Struts. Or at least use the new Struts/WebWork. Sorry I just really hate Struts. Currently I've been using JSF and I actually quite like it, but it takes a while to learn properly. If you must use struts though there is that DynaForm thing which will automatically populate a bean for you so you don't have to do request.getParameter 100 times.

1 - The database stores nearly 23,000 product codes. If the user selects the search icon to load all the product codes so that they can select one, how would you manage these? Presumabely it wont make sense to display 23,000 product codes for the user to select 1 from the list. I think the best way to do this is to paginate the list on the popup window. Is there anything in JSP to simplify this?

The other question is where/how would you store the product codes on the client? or would you store them at all?

You'll definitely want to use a paginator for this. Generally in this case (popup window with options) I would say load them all in to the browser but when dealing with 23000 records, not a good idea. There is a taglib called pager which can help you, just look up something like "jsp pager tag" in google. Maybe you want to see if there's an AJAX version.

2. The other thing that i would like some advice on is what is the best way to implement the lookup window for Country, Country of Production and Country of issue. Im thinking as all these 3 elements are retrieving the same data i should have a generic component that can be used for all 3. How can you make the generic component to determine which form field of the 3 is to be populated if they have different names?

I'm not sure what you mean by component, but this should be easy enough to do just by passing a parameter. As an example, let's say you have a popup window with the choices. You pass that popup the form name or id as a parameter via HTTP get (the ? in the URL) and then have a Javascript variable or hidden input on the page to store the parameter. Then the user selects a country and clicks ok, presumably you have some javascript that will populate the field, so take your parameter to find out which form to populate.

3. And finally when the popup window loads, is there any other way other than Javascript to populate a form element on a parent window based on a clicked hyperlink on a child window?

I would like to say yes, but I can't think of how at the moment. I'll have to get back to you on that one.

4. And finally finally, is it better to display the pop window in a "new window" or a hidden css DIV layer?

I really like the div layer approach but it's probably easier to do it in a popup. I think this is more of personal choice so I'd say do whatever is easier for you. If you do the div popup here you'll probably need to rely on AJAX to populate the choices. If you're concerned about non javascript users then you may want to avoid this and stick with a traditional popup.

Hope this is helpful

[rushiku]

23,000? IMHO, even if you do a bang up job of implementing this 'search' feature, as described, no one will ever go near it. Imagine yourself using it, there are 100 records per page...you click and scan, click and scan, do you make it the 230th page before you give up? I wouldn't make it to the 5th before I closed the pop-up and found some sort of book or other reference for the codes.

Better yet, and much to the data's dismay: (playing the part of a user) "Alright program, I can't find the code with the search function, you won't let me enter a blank, you won't let me guess, but I know widgets are WID0001, I'll just use that for everything."

Surely these codes can be broken down into categories and subcategories, such that the users can quickly find the code they need?

[rozner]

yeah good point, 100 per page I think I would stop on page 2. Although I was assuming there was still the option to manually enter the code. As a user I would find it quite annoying if I couldn't just manually enter it in the case where I know the code.

[rushiku]

As a user I would find it quite annoying if I couldn't just manually enter it in the case where I know the code.

That's where using a single valid code for every entry came in, in my example.
(buggy whip? that's a WID0001, Blue Whale Pimple Cream? WID0001, etc)

[sg707]

1 - The database stores nearly 23,000 product codes. If the user selects the search icon to load all the product codes so that they can select one, how would you manage these? Presumabely it wont make sense to display 23,000 product codes for the user to select 1 from the list. I think the best way to do this is to paginate the list on the popup window. Is there anything in JSP to simplify this?


Not sure if it's just me but does it make sense for your client to pick a product by the "code". I think it would be more intuitive to list by product names then codes. Anyways, the best user friendly way is to use AJAX auto-complete. The cons? each letter they type will search your database and may slow down on performance. One way to reduce search traffic is to wait till they typed in at least 3 character then do search. Another way to speed it up is to load some of your product as a partial cache. For example, let say user A has searched for "Ipod" then cache the results. Of course, you can limit how many search results to be in memory and when to expire them.


The other question is where/how would you store the product codes on the client? or would you store them at all?
Not quite sure what you mean by storing product codes on the client. You mean saving product id's through javascript? I would advice against it. I rather keep all client's request parameter into session.

2. The other thing that i would like some advice on is what is the best way to implement the lookup window for Country, Country of Production and Country of issue. Im thinking as all these 3 elements are retrieving the same data i should have a generic component that can be used for all 3. How can you make the generic component to determine which form field of the 3 is to be populated if they have different names?
Google AJAX auto-complete, I'm sure you'll get some ideas.

3. And finally when the popup window loads, is there any other way other than Javascript to populate a form element on a parent window based on a clicked hyperlink on a child window?
Oh no JavaScript? then I guess you need to reload your parent window to refresh the data. I think that's doable w/o script and maybe the only way

4. And finally finally, is it better to display the pop window in a "new window" or a hidden css DIV layer?
new window = bad, hidden layer = good

[sg707]

One of the easiest way to use AJAX through JSP is
http://ajaxtags.sourceforge.net/
It's almost idiot proof.

Unfortunately, they don't support this open source any more. I've used it many times and it works great! Of course, it has limited functionality but if should be more than enough for your case. If you want more features then you need to AJAX framework like scriptaculous and it's not so bad if you know JavaScript.

[sg707]

Also, as someone suggested JSF would be great candidate since they have AJAX support...forgot the name something like "icefaces" for JSF does AJAX.

[rushiku]

Not quite sure what you mean by storing product codes on the client. You mean saving product id's through javascript? I would advice against it. I rather keep all client's request parameter into session.

As I understand it, 'storing product codes on the client' would be placing all 23,000 codes into a ArrayList, or similar container, and placing it into each client's session - you are right to advise against it. (massive waste of space)

[sg707]

That would be a suicide.

[ziggy25]

Just a suggestion, don't use Struts. Or at least use the new Struts/WebWork. Sorry I just really hate Struts. Currently I've been using JSF and I actually quite like it, but it takes a while to learn properly. If you must use struts though there is that DynaForm thing which will automatically populate a bean for you so you don't have to do request.getParameter 100 times.

I dont really have a choice with struts. I am adding new funtionality to an existing application which uses struts.

You'll definitely want to use a paginator for this. Generally in this case (popup window with options) I would say load them all in to the browser but when dealing with 23000 records, not a good idea. There is a taglib called pager which can help you, just look up something like "jsp pager tag" in google. Maybe you want to see if there's an AJAX version.

I'm not sure what you mean by component, but this should be easy enough to do just by passing a parameter. As an example, let's say you have a popup window with the choices. You pass that popup the form name or id as a parameter via HTTP get (the ? in the URL) and then have a Javascript variable or hidden input on the page to store the parameter. Then the user selects a country and clicks ok, presumably you have some javascript that will populate the field, so take your parameter to find out which form to populate.

I would like to say yes, but I can't think of how at the moment. I'll have to get back to you on that one.

I really like the div layer approach but it's probably easier to do it in a popup. I think this is more of personal choice so I'd say do whatever is easier for you. If you do the div popup here you'll probably need to rely on AJAX to populate the choices. If you're concerned about non javascript users then you may want to avoid this and stick with a traditional popup.

Hope this is helpful

I am thinking about using the DIV approach but im curious now of the Ajax issue you mentioned. Does this mean that if i use DIVs i wont be able to use javascript to populate the form?

[ziggy25]

23,000? IMHO, even if you do a bang up job of implementing this 'search' feature, as described, no one will ever go near it. Imagine yourself using it, there are 100 records per page...you click and scan, click and scan, do you make it the 230th page before you give up? I wouldn't make it to the 5th before I closed the pop-up and found some sort of book or other reference for the codes.

Better yet, and much to the data's dismay: (playing the part of a user) "Alright program, I can't find the code with the search function, you won't let me enter a blank, you won't let me guess, but I know widgets are WID0001, I'll just use that for everything."

Surely these codes can be broken down into categories and subcategories, such that the users can quickly find the code they need?

The user will have the option to search for a code via the text box. The lookup list is only for those that do not know the code. We expect most people to know the codes as they are on their invoices. When they make an order over the phone they all provide a product code as its easier for the clerk to retrieve the product.

I like the idea of categorisation of the product as well. The list could have 3 columns which include product code, category and name. The user can the sort by column.

[ziggy25]

As a user I would find it quite annoying if I couldn't just manually enter it in the case where I know the code.

The form itself will act as a search form. If they do enter the product details manually and click submit, the application will validate and return a product not found error if the product is not recognised.

[ziggy25]

Not sure if it's just me but does it make sense for your client to pick a product by the "code". I think it would be more intuitive to list by product names then codes.[/p]

As someone suggested above, i will list the product list in three columns, i.e. productid, name and category. All columns will be sortable.

The products are a mixture of physical products and services. Some products will have the same product name but different product code. As an example, if a user wishes to lease a router, he can lease it using three different contracts. one for a 3 year contract one for a 6yr contract and one for 12 years. Each of these will be the same product but with a different product code.

Anyways, the best user friendly way is to use AJAX auto-complete. The cons? each letter they type will search your database and may slow down on performance. One way to reduce search traffic is to wait till they typed in at least 3 character then do search. Another way to speed it up is to load some of your product as a partial cache. For example, let say user A has searched for "Ipod" then cache the results. Of course, you can limit how many search results to be in memory and when to expire them.

I am updating an exsting application will is already based on the struts/Tiles architecture. I've not worked with Ajax before and have heard a lot of good things about it. Can it be integrated into an existing Struts/Tiles framework?

Not quite sure what you mean by storing product codes on the client. You mean saving product id's through javascript? I would advice against it. I rather keep all client's request parameter into session.

The idea i had was to store the product codes inside a hidden div layer. Having read some of the above posts, it sounds like its not a good idea.

new window = bad, hidden layer = good

[/quote]

Yes i am heading towards hidden layers for country codes and certificate ids. Im still not sure if i should have a hidden layer for the product codes.

Wouldnt having 3 or 4 hidden layers with country codes, certificate ids etc mean that it would take longer for the page to load?

[ziggy25]

One of the easiest way to use AJAX through JSP is
http://ajaxtags.sourceforge.net/
It's almost idiot proof.

Unfortunately, they don't support this open source any more. I've used it many times and it works great! Of course, it has limited functionality but if should be more than enough for your case. If you want more features then you need to AJAX framework like scriptaculous and it's not so bad if you know JavaScript.

I am not really familiar with Ajax but i am looking at it now. Im trying to see if it can be integrate into a struts/Tiles framework.

[rushiku]

Struts & AJAX: Absolutely, for starters, here's an article on incrementally adding ajax to an existing Struts app.

Once you have Ajax working for you, you should be able to do something like this: OEM Part Diagrams Look Up by Model Fit .

As an example, if a user wishes to lease a router, he can lease it using three different contracts. one for a 3 year contract one for a 6yr contract and one for 12 years. Each of these will be the same product but with a different product code.

IMHO, they are not the same product: 3yr router lease != 6yr router lease.

Wouldnt having 3 or 4 hidden layers with country codes, certificate ids etc mean that it would take longer for the page to load?

There aren't that many country codes, if the certs are unique to customers, you should not be including all of them on any page ('course, I don't even know what they are...)

That said, I find it easier to update a table in a database than to find, update and upload a JSP with hardcoded data, which means you now have a new version of your app so you have to update your code repository as well...blegh - it should be a data update, not a program revision. (leaning towards ajax or at least a db query for country and cert too)

[sg707]

Yes you can integrate w/ struts+tiles. AjaxTags was meant to be used w/ JSP. It can't get any more easier than that. So when choosing AJAX framework, you got 2 choice. Either, go w/ 100% Java solution or to go w/ JavaScript solution. The AJAX Java framework is nothing more than a wrapper to popular AJAX Javascript framework like "Prototype" and "Scriptaculous". So for a programmer who knows lil javascript then go w/ Java solutions as rushiku and I mentioned or go to JavaScript solution. Personally, I use protype/scriptaculous directly because I want to use the latest/greatest feature they have. For Java AJAX framework, you may have to wait a bit or use old version of prototype/scriptaculous.

[sg707]

A lil more info on AJAX. AJAX is purely run by JavaScript, so that means you can even do AJAX on plain on HTML files. So, what I'm trying to say is that it can be integrated w/ any technologies like java/php/.net/etc...

[sg707]

Here's a demo code
http://courses.coreservlets.com/Cour...xtags-demo.zip

[sg707]

tutorial
http://courses.coreservlets.com/Cour...ags-Basics.pdf

[rozner]

I dont really have a choice with struts. I am adding new funtionality to an existing application which uses struts.

Been there before and I feel your pain.

I am thinking about using the DIV approach but im curious now of the Ajax issue you mentioned. Does this mean that if i use DIVs i wont be able to use javascript to populate the form?

Quite the contrary, I was saying generally with the divs you need javascript to show and hide them so if a user disables javascript in the browser, which a small percentage of users do they may not see it, but then again without javascript the only way to really do it is an href with a target attribute.

You should definitely look into using AJAX, I won't get into that since the replies from sg707 and rushiku cover that pretty well.