This Bugzilla instance is a read-only archive of historic NetBeans bug reports. To report a bug in NetBeans please follow the project's instructions for reporting issues.

Bug 161384

Summary: The palette for HTML forms etc needs 'updating' [APPLY EXISTING PATCH]
Product: web Reporter: madtom <madtom>
Component: HTML EditorAssignee: Milutin Kristofic <mkristofic>
Status: STARTED ---    
Severity: blocker CC: hmarquis, mfukala, pjiricka, vriha
Priority: P1    
Version: 6.x   
Hardware: All   
OS: All   
Issue Type: TASK Exception Reporter:
Attachments: updated palette sources
diff in single files

Description madtom 2009-03-27 18:56:37 UTC
The palette needs updating to WAI standards:
names replaced with id's, include fieldsets and labels optgroups etc
Comment 1 madtom 2009-08-06 12:11:36 UTC
If someone points me in the direction of the code (and a couple of tutorials) I can probably do this *but not the icons*
and forward to the relevant assignee
Tom
Comment 2 Marek Fukala 2009-08-06 15:32:34 UTC
Alexey will look at the issue now.
Comment 3 bluescreenjunky 2012-03-10 08:21:35 UTC
OK so this was supposed to be fixed in 6.9, yet I'm looking at yesterday's 7.2 nightly build and it's still not fixed. So in my opinion here are the changes that need to be made before 7.2 feature freeze (or is it considered as a bug which can be "fixed" even after feature freeze ?) :

-Form's "name" field should be replaced by "id", since name="" is not xhtml valid (not sure about html5 though).


-Every input time should have an "add id" checkbox that would create an id="" attribute which is the same as the name attribute by default.

-Also every input type should have a "add label" checkbox, which would automatically add the label tag with the correct for="" attribute (depending on the id). It would be nice to be able to choose wether to add it before or after the input.

-Optgroups would be nice too, but I'm not really sure how to implement them

-Maybe add a submit button at the end of the form by default (with a checkbox that can be unchecked), but it's more of a personal wish since I always forget to add a submit button for some reason.

-Unrelated to forms but the table palette could also be update with a caption field.


I'm sure there are other improvements to be made but I'll stop here for now. I'm not qualified to modify the code myself but if needed I can make mockups of the dialog windows and provide html snippets.
Comment 4 Petr Jiricka 2012-03-30 17:00:48 UTC
I agree this is probably an enhancement, rather than a bug. You are right that the palette looks pretty outdated and should be improved. Though one thing we have discussed is whether Palette is the best UI for adding code snippets to HTML text - if you need to use the mouse, it breaks your flow. A more appropriate way could be to use "Insert Code" actions (Ctrl+I). Though in that case the individual items would likely mirror what's in the palette (including the generated code), so the issues you raise are still relevant. 

With the Insert Code approach, one thing we could do is to make the pre-insertion customization dialogs more lightweight (or eliminate them altogether), and use parametrized templates, i.e. templates which allow you to tab through parameters and complete them after the code snippet has been inserted (Java language has many templates like this defined, see Tools -> Options -> Editor -> Code Templates). 

What do people think?
Comment 5 bluescreenjunky 2012-04-01 12:33:20 UTC
Not sure about this either... It's actually pretty easy to make your own code templates for html right now, for example here's my <input> template (mapped to in+tab) :
<label for="${id}">${cursor}</label><input id="${id}" name="${id}" type="${type default="text"}" value="${value default=""}" /> 

It's perfectly usable, but I think palettes (or at least pre-insertion customization dialogs) still have their use : What about <table>s for example ? I'm pretty sure it's not possible to create a template that inserts X rows and Y lines (unless you're using the Zen Coding plugin of course). So we would either need a palette, or allow that kind of dialog windows in code templates.

I think palettes are also more user friendly for less experienced developpers : I've been trying to show how to use Netbeans to beginners, and they instantly liked the palettes but found the templates confusing. But I'd chose efficiency over 'user-friendliness' anytime, so maybe ditching the palettes altogether wouldn't be such a bad idea.


Anyway, a "quick fix" untill an ideal solution is found would be to preload a bunch of code templates for HTML in netbeans for forms, images, hyperlinks and so on.
Comment 6 Marek Fukala 2012-04-02 07:23:12 UTC
>With the Insert Code approach, one thing we could do is to make the
>pre-insertion customization dialogs more lightweight (or eliminate them
>altogether), and use parametrized templates,

Just FYI ... this is already implemented in the facelets editor. The palette items are available also via the insert code action (though it'd be likely better to use "Component" submenu in IC popup than to put them to the high level menu).

OTOH implementing the "insert component" actions for IC requires approximately the same amount of work as doing them as the palette items so if one really likes the palette it may be made available both ways.

Still the original issue is valid - the components needs to be "updated".
Comment 7 Petr Jiricka 2012-04-02 09:47:41 UTC
Sounds like we are near an agreement. I agree with bluescreenjunky that we could do a "quick fix" to add a bunch of code templates. Would someone like to suggest what these templates should be? If you attach them here, we will add them to the IDE - thanks. 

If someone also wants to fix the palette itself and contribute a patch, the code is under html/src/org/netbeans/modules/html/palette/items.
Comment 8 Vladimir Riha 2012-04-11 14:07:37 UTC
I can take look at it and update (?add new) HTML elements as described at comment #3. I'll attach it for review.
Comment 9 Vladimir Riha 2012-04-16 08:41:52 UTC
Created attachment 118307 [details]
updated palette sources

proposed updates in palette:
- each form element can have an ID (value taken from value of "name" attr)
- each form element can have a label element (with "for" attr set to the id value) - except of radio button where it doesn't make sense for me
- table generates caption element (if caption text is longer > 0) and tfoot
- img can be generated as HTML5 figure with figcaption (value of figcaption derived from "alt" attr)
- form element can have an ID attr but name attr is preserved (it is valid in HTML5)


Can someone please review it? I can commit it to the repository if it'll be OK. Thanks
Comment 10 Marek Fukala 2012-04-16 11:09:46 UTC
Thank you a lot Vlado! Can you please create a diff of the changes so it can be reviewed easily? Thank you.
Comment 11 Vladimir Riha 2012-04-16 11:44:36 UTC
Created attachment 118327 [details]
diff in single files

Here it is, if you prefer single diff for each file let me know :)
Comment 12 Marek Fukala 2013-01-02 12:42:56 UTC
*** Bug 167093 has been marked as a duplicate of this bug. ***