|
|
| <Portlet:Button . . . |
compatability |
|
| Overview |
|
The button widget can be used for firing of a simple server side event when pressed. Jaffa
supports a variety of button display from HTML Buttons, links, CSS buttons. Unlike the other MVC
widgets in Jaffa, a button does not require a Model in the form bean.
Links on this page...
|
|
|
|
| General Attributes |
| Attribute Name |
Mandatory/Optional |
Description |
| field |
Mandatory |
The name of the field / event that this button is tied to. The name
of the event method in the Action class that will be invoked when
the button is pressed will be ‘do_{field}_Clicked()’ |
| label |
Mandatory |
In the case of 'default', 'link' and sized type buttons the label
is the text that is displayed on the screen. In the case of the image
button, the label text is displayed as a floating hint when you hover
over the image. The label string supports token substitution where
tokens are specified in the format [token.key]. |
| type |
Optional |
This must be one of the following values ‘default’,’image’,’link’,’sized’.
If no type is specified then if an image attribute is supplied it
assumes the type is ‘image’, if no image attribute is specified then
it assumes that type is ‘default’. See below for full expalnation
of the different types |
| submit |
Optional |
This flag indicates that this is the default button on the page
that will be used to submit the form. This option impacts the CSS
class name used so that you can give the submit buttons a different
look In the case of the ‘default’ and ‘image’ button types, this flag
will also make this button submit the page if the ‘Return’ key is
pressed. This functionality is not yet available for the ‘link’ and
‘sized’ types. |
| classExtn |
Optional |
This is an extra string that is added to the generated CSS class
name. This allows for groups of buttons to extend the basic style,
while still having the button size and submit properties remain as
part of the name. (See the CSS section below for more details) |
| classOverride |
Optional |
This allows a given CSS class name to be used. This overrides all
class name attributes and passes the class name straight through to
the HTML. |
| fontname |
Optional |
Specify the font to use. This is included using style="font-family:
xxx". This attribute is not relevant for ‘image’ type buttons. |
| fontsize |
Optional |
specify the font size to use. This is included using style="font-size:
xxx". This attribute is not relevant for ‘image’ type buttons. |
| height |
Optional |
Specify the height to use. This is included using style="height:
xxx" |
| width |
Optional |
Specify the width to use. This is included using style="width:
xxx" |
| detail |
Optional |
(Default=true) This controls the behavior of the button, when ‘true’
it will cause a server side post to process the action, when ‘false’
it won’t. (Note: The plan is to provide a mechanism to run some client
side JavaScript in the event that detail=’false’, but this has not
been implemented yet, as there has been no demand for this). |
| guarded |
Optional |
(Default=false) Show transition page when pressed, while the form
is posting. (also see <Portlet:Form guardedHtmlLocation=’x’>
for controlling the guard page to be used) |
| confirm |
Optional |
If provided this string is used to confir with the user that they
want this action to be executed. Useful for ‘Delete’ buttons where
you want to ask "Are you sure you want to delete this record".
The buttons on the dialogue box that is prompted are always "OK"
and "Cancel". If "OK" is selected the action is
processes as normal, "Cancel" will return to the form, aborting
the action. |
| preprocess |
Optional |
(Default = true) This is used for performance optimization such
that any form pre-processing can be suppressed. The pre-processing
is normally to evaluate any ‘lazy-widgets’ like Grids, UserGrids,
etc. In the case of a ‘Cancel’ button on a form, there is no need
to process any widget to post back, as the cancel event will quit
the form anyhow. Use this with caution, and only on complex forms
that post back large data sets where the button doesn’t need that
data set posting back. Not posting back all data on a form, if you
intent that form to re-render, may cause some widget values to be
lost. If you intend to re-render the JSP, don’t suppress the pre-processing. |
| target |
Optional |
This is the target window the resulting action should be directed
to. If not provided it will default from the target attribute specified
in the <Portet:Form target=’x’> attribute. If nothing is specified
at the form level, it will target the current window (i.e. target=’_self’) |
| text |
Optional |
Deprecated. Use type = 'link' |
| rollover image |
|
|
| width factor |
|
|
|
| Events |
| Event Name |
Description |
| do_widget name_Clicked() |
This is an event fired when the button is clicked |
|
Overview
These are standard HTML buttons. type=default. If no type is specified,
the label is displayed on the button. The HTML tag
<input type="button"> is used. It can also be used as
a default button to submit the page.
|
In Browser
|
|
JSP Code
<Portlet Button label="Clear"/>
<Portlet Button type="default" label="Cancel"/>
<Portlet Button type="default" label="Save"
submit="true" /> |
|
|
How they work
A standard button normally uses the <input type="button">
HTML tag, unless the submit flag has been set,
in which case it will use the <input type="submit"> HTML
tag. |
Overview
These are standard HTML buttons. type=default. If no type is specified,
the label is displayed on the button. The HTML tag
<input type="button"> is used. It can also be used as
a default button to submit the page.
|
|
In Browser
|
|
JSP Code
<Portlet Button label="Clear" image="../imgs/clear.gif"/>
<Portlet Button type="image" label="Cancel"
image="../imgs/cancel.gif"/> |
|
|
How they work
The "image" type button is different from a standard button
in that an image is displayed instead of the label. The label text is
displayed as a floating hint when the mouse hovers over the button. It
can also be used as to submit the form similar to the Standard HTML button.
|
| Image Buttons with Alternate
Rollover Image |
top |
Overview
These are standard HTML buttons where an image is displayed on the button.
type=image. The difference between a Simple Image button and a Image button
with Rollover Image is that the image on the button changes to the rollover
image if specified.
|
|
In Browser
|
|
JSP Code
| <Portlet Button type="image" label="Save"
image="../imgs/save_up.gif" rolloverImage="../imgs/save_down.gif"/>
|
|
|
How they work
The image specified with the rollover attribute is loaded on the button
when the mouse is rolled over the button. As soon as the mouse is moved
away from the button, the original image is loaded.
|
Overview
This type of button looks like a basic hyperlink, but rather than just
working like a hyperlink with a href, it will cause the appropriate event
handler to be fired in the Action class. If you need just a simple hyperlink
in your form, just use a plain <a>link</a> in your JSP.
|
|
In Browser
|
|
JSP Code
| <Portlet Button type="link" label="Google"/>
|
|
|
How they work
In HTML this widget is modeled as HTML anchor (<a></a> ),
but when pressed it set the ‘eventId’ to the ‘field=clicked’
and causes the form to be posted back to the server, such that the Action
class can handle this event server side.
|
| CSS Controlled Buttons |
top |
Overview
If you are creating custom looking buttons, you have two choices, you
can use the image button, and create two images (regular and rollover)
for each button, and if these buttons use text, then for every different
piece of text create two images. Or you can use this type of button, which
uses the CSS to drop a background image behind the button, and layer the
text over the top. This way you only need to develop a single blank button
(regular and rollover states) and have the text come from the label. The
advantage of this is that you can read the text of the label from a resource
file, that may even be locale dependant.
|
|
In Browser
|
|
JSP Code
<Portlet Button type="sized" label="log
out"/>
Display |
|
|
How they work
One problem with the CSS providing the background image, is that it does
not stretch to the size of the text being displayed. Due to this if you
want to display long labels and short labels, it may be better to use
different sized images underneath them. This widget by default does this
by embedding the length of the label text into its CSS class name so that
different CSS mappings can point to different label sizes.
|
| How CSS Classes for different buttons types work |
top |
Basic Names
Standard button uses WidgetButton
Image button uses WidgetButtonImage
The link button uses WidgetButtonLink
The CSS button uses WidgetButton(N) |
|
|
How they work
In the case of the CSS button the (N) represents the size of the button
based on the length of the label on the button. As with the CSS the image
behind the text is fixed, for different lengths of text you may want to
pull in different size images.
By default the (N) is rounded up to the nearest 4 characters, so in the
case of a label "Search" N=8, in the case of "Search Again"
N=12 and so on.
In addition to the above basic class name, any button that is flagged
as ‘Submit’ will have the word "Submit" appended
to the class name. All buttons support the attribute "classExtn"
which stands for ‘CSS Class Extension’, which will be added
to the end of the auto-generated class names.
This allows set of buttons to be given an extension and therefore given
a custom look via the CSS.
|
|
Controlling the look of the button by CSS
The button widgets corresponding CSS can be found in 'source/html/jaffa/css/widgets/button.css'. The button widget can have 5 different sizes , a.WidgetButton4 , a.WidgetButton8 , a.WidgetButton12, a.WidgetButton16, a.WidgetButton20. If you want to change the look of the button you must change it for all these sizes.
|
|
