THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
Name | YUI Plugin |
|---|---|
Publisher | |
License | Open Source (ASL2) |
Version | 0.1-ALPHA-7 |
Compatibility | Struts 2.1.6+ |
Homepage | |
Download |
...
Overview
YUI plugin excerptINLINE
provides tags based on the Yahoo! User Interface Library (YUI)
...
Get Started With Five Easy Steps
...
Add the following taglib directive to your JSP pages:
...
...
Step Three
Add class="yui-skin-sam" to the <body> tag of your JSP pages:
...
...
Alternatively, you can wrap each YUI widget you use with a <div> tag that specifies the CSS class. For example:
...
...
Step Four
Add the <yui:head> element in the <head> section of your JSP pages. You must add the <yui:head> element for each widget that you want to use on the page. For example, if you want to use the datepicker, your head section should look something like this:
...
...
If you want to use both the datepicker and the autocompleter in a page, the head section of that page would look like this:
...
...
Step Five
Finally, add the appropriate YUI tag for the widget within your JSP page. For example:
...
...
Tags
head
This tag includes required javascript and css files. For each tag there will be an attribute on the head tag, which needs to be set to true, in order to use that tag. This will make sure that only required files are included on the page. For example, to use the datepicker tag:
...
...
Tag Attributes:
Attribute | Description | Required | Default Value |
|---|---|---|---|
datepicker | Include datepicker tag required files | no | false |
autocompleter | Include autocompleter tag required files | no | false |
tabview | Include tabview tag required files | no | false |
cssreset | Include YUI Reset CSS file | no | false |
cssfonts | Include YUI Fonts CSS file | no | false |
cssgrids | Include YUI Grids CSS file | no | false |
cssbase | Include YUI Base CSS file | no | false |
languages | Comma delimited list of language names to be loaded(supported languages are: 'de', 'it', 'es', 'fr') | no | Language of the request |
datepicker
...
...
...
...
This tag is based on YUI Calendar.It can be rendered in 3 different ways, which are controlled by the mode attribute:
- static : The datepicker is always visible on the page
- input : Default. An input is added to the page, with an image that shows and hides the datepicker.
- label : A label is added to the page that shows the current selected date, with an image that shows and hides the datepicker.
The datepicker tag adds a hidden field to the page which will be used by Struts. The value of this field is in RFC3339 format. Values entered on the visible input (when mode="input") are synchronized with the hidden field.
The initial value can be set from the stack, using the value attribute. This value can be of type java.util.Date(recommended), java.util.Calendar. If the value is an string, the the following formats will be used while trying to parse it:
- RFC3339
- SimpleDateFormat.getDateInstance(DateFormat.SHORT)
- SimpleDateFormat.getDateInstance(DateFormat.MEDIUM)
- SimpleDateFormat.getDateInstance(DateFormat.FULL)
- SimpleDateFormat.getDateInstance(DateFormat.LONG)
Please not that this is the format of the string used in the value attribute, not the display format, which is always MM/dd/yyyy and can be customized using the formatFunction attribute.
Using a value from the stack:
...
...
Using an string value:
...
...
Using 'today' constant:
...
...
The current value is always displayed in the format MM/dd/yyyy (when mode is either 'label' or 'input'). To customize this behavior, a function name can be specified in the formatFunction attribute. The value returned from this function will be shown on the input o the label. This value is not the one that is used by Struts. When the page loads, if an initial value was set for the datepicker tag, the function will be called with that value as an String parameter. When the user selects a value (or types into the input) from the datepicker the function will be called with the selected date as a Date parameter.
The following example displays the selected value in the format yyyy.MM.dd:
...
...
By default the language defined in the request will be used on the datepicker. Supported languages are 'en'(default), 'de', 'es', 'it', 'fr'. Use the language attribute to specify a different(from the request) language.
Example using Italian:
...
...
YUI's calendar supports internationalization. To use a locale that is not supported(please consider contributing the resource names for inclusion in the plugin) see YUI's documentation .
Example using i18n on German:
...
...
As you might have noted on the example above, for each calendar an object is created on th global scope with the name YAHOO.datepicker.id where "id" is the id of the date picker.
...
...
For each calendar an object is created on th global scope with the name YAHOO.datepicker.id where "id" is the id of the date picker. For the date picker:
<yui:datepicker id="dp" name="dp" value="%{'today'}"/>
The object YAHOO.datepickers.dp will be created on the global scope.
...
Attribute | Description | Required | Default Value |
|---|---|---|---|
id | is used in the JavaScript object name that will be created for each datepicker | yes | none |
name | name that will be used on the hidden field containing the date value in RFC3339, used by Struts | yes | none |
value | Initial value. Read from the Value Stack, use %{'2007-10-09'} format for string literals | no | none |
formatFunction | Function called on page loads(value is passed as an String parameter), and when user changes the selected value(value is passed as a Date object). The returned value will be used on the input or label | no | none |
autoClose | Close datepicker when a date is selected | no | true |
startDate | First enabled date on calendar | no | none |
endDate | Last enabled date on calendar | no | none |
cssClass | css class applied to the input or label | no | none |
cssStyle | css style applied to the input or label | no | none |
language | Name of language to be used (two lowercase characters), supported languages are 'de', 'es', 'fr', 'it'. If the language is not the one defined on the request, it needs to be specified on head also | no | 'en' |
...
...
When using the 'input' mode, the value entered on the input is assumed to be on the format MM/dd/yyyy, if it isn't on that format, the value won't be parsed and will be copied verbatim to the hidden field, which Struts won't probably be able to parse. Tip: Use String fields on your action when using 'input' mode, and define your own converter.
...
autocompleter
The autocompleter tag creates the YUI AutoComplete control which provides the front-end logic for text-entry suggestion and completion functionality. See the Yahoo! UI Design Pattern Library description for AutoComplete to get a fuller sense of the underlying design patterns in the AutoComplete family.
...
The autocompleter loads a list of options from a url that returns a JSON string in the following form:
...
...
The JSON Plugin can be used to generate this JSON string. The following example shows how:
The Action
...
...
The mapping:
...
...
- When generating the JSON result make sure that the result is not decorated (by Sitemesh, Tiles, etc)
- When extending "json-default" as shown on the package definition in the mapping example above, the JSON plugin is required.
The JSP:
...
...
Attribute | Description | Required | Default Value |
|---|---|---|---|
id | is used in the JavaScript object name that will be created for each autocompleter | yes | none |
name | name of the input | yes | none |
cssClass | css class applied to the input | no | none |
cssStyle | css style applied to the input | no | none |
containerCssClass | css class applied to the input | no | ysearchcontainer") |
containerCssStyle | css style applied to the input | no | none |
href | URL used to load the options. Accepts a literal value, for a value from the Value Stack use the _%{#url}_notation | no | none |
keyName | Name of the key field | no | ${name}Key |
dataFieldName | Full patch of the field that has th array with the options in the JSON returned from the request, like field1.field2 | no | results |
resultsLimit | Limit how many results are shown as autocompletion options | none | 10 |
loadMinimumCount | Minimum number of characters that will force the options to be loaded | none | 1 |
delay | Delay(in seconds) before making query to load options | none | 0.5 |
autoHighlight | Autohighlight first element on the list | none | true |
useShadow | The dropdown will have a shadow, the CSS class for the shadow is 'yui-ac-shadow' | no | false |
forceValidOption | Force selection to be one of the options | none | false |
autocomplete | Warning: This behavior seems to have a few bugs on YUI's implementation. Will make suggestions on the input based on the text entered by user | none | false |
...
The tabview and tab tags are used together to create a TabView widget. Currently, only very basic TabView support is implemented.
JSP Example
...
...
Installation
This plugin can be installed by copying the plugin jar into your application's /WEB-INF/lib directory. No other files need to be copied or created.
...
Version | Date | Author | Notes |
|---|---|---|---|
0.1-ALPHA-4 | Jun 22, 2007 | Add autocompleter tag | |
0.1-ALPHA-3 | Jun 20, 2007 | Add support for i18n, 'de', 'es', 'fr', 'it'. Fix RFC bug | |
0.1-ALPHA | Jun 19, 2007 | Initial release |