Javascript Event Handlers
This type of Javascript is usually tied to a onXYZ event on an HTML DOM object. Common examples include rollover images, form submission pre-validators and so on. Typical functionality would usually involve reading and/or changing the DOM. I think you can further divide these into three parts:
1) Single global javascript function per component type where each component instance provides the behaviour via parameters. Typical example would be a rollover image:
In the document header: <script> function swapImage(nameOfImageObject, imageToDisplay) { ..... } </script>
On the components: <img id="image1" src="...." onMouseOver="swapImage('image1', 'image1_over.gif' onMouseOut="swapImage('image1', 'image1_normal.gif')"/>
2) Specific Javascript function for each individual component instance. An exampe might be a text field that only allows digits to be entered:
In the document header: <script> function testfield1_stripNonDigits { ..... } </script>
In the body: <input id="testfield1" type="text" ... onKeyUp="testfield1_stripNonDigits()"/>
3) Javascript function from one component that is invoked by another. One example is a select box that submits the form when the value is changed:
In the document header: <script> function form1_submit() { ... } </script>
In the body: <select .... onChange="form1_Submit()"> .....Another example is a function on a form submit that invokes the validate method of each item on that form:
In the document header: <script> fucntion form1_validate() { for1_field1_validate(); ... } function form1_field1_validate() { .... } </script>
In the body: <form id="form1" .... onSubmit="return form1_validate()"> .....
There's also a potential mix between these as you may build a reusable validation library that you inlude as a .js file and which you invoke by introspecting the DOM and passing parameters!
This sort of adhoc javascript is the most complex to deal with and gets very messy very quickly! I think support for this level of Javascript is something that needs to be built directly into the Wicket framework. We want to make it easy for people to be able to use Javascript for formclient-side form validation and so on.
Javascript Component
This is perhaps slightly simpler to handle than the more adhoc javascript event handlers. Usually components are nicely packaged and come as one (or more) .js files that you include in the document header. You then usually need to include either some additional javascript somewhere within the document body (usually near the top) so that the component can insert the additional DOM elements as required. A typical example of this it the coolmenus javascrpt component:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript" SRC="coolmenus4.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript" SRC="cm_addins.js"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="javascript" SRC="mymenus.js"></SCRIPT>
....
</BODY>
</HTML>In the above example, the menu content is defined in the mymenus.js file. Coolmenus can also be used dynamically where the script element at the top of the body inlines the javascript menu creation from the current page from a dynamic model. E.g.:
<body>
<script>
... oM.level[0]=new
cm_makeLevel(120,21,"menuItem","menuItemOver",1,1,"menuItemBack",0,"left",0,0,0,0,0);
oM.level[1]=new
cm_makeLevel(160,22,"menuSubItem","menuSubItemOver",1,1,"menuItemBack",0,"right",0,0,0,10,10); // Root menu items
oM.makeMenu('m1','','News and Diary','introduction.html');
... </script>
...Similar Javascript components such as trees and so on have a similar approach.
These sort of Javascript components should arguably be first-class Wicket components (in the extras or contrib modules). Their only real requirement is that they can contribute javascript
includes to the header and can render their own body component.
Conclusions
- All Wicket components should be able to contribute Javascript to the header (either as a .js include or as direct scripted functions)
- Javascript components (menus, trees etc.) can be implemented as real Wicket components (in the extras or contrib modules)
- Event handling code related to forms and core components should be built into the Wicket framework components
Regards, Chris
------------------------------------------------------- SF email is sponsored by - The IT Product Guide Read honest & candid reviews on hundreds of IT Products from real users. Discover which products truly live up to the hype. Start reading now. http://ads.osdn.com/?ad_id=6595&alloc_id=14396&op=click _______________________________________________ Wicket-develop mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/wicket-develop
