Tips
Open dialog box
The ASF.OpenDialog
Javascript operation can be used to open
a dialog box by fetching its content from the server.
First, create the dialog box file in a separate XHTML file.
The file should start with a <f:view>
component with a
valid contentType
attribute.
<f:view contentType="text/html; charset=UTF-8"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:w="http://code.google.com/p/ada-asf/widget"
xmlns:h="http://java.sun.com/jsf/html">
<div>
<h:form id='subscribe-send'>
...
<ul class='awa-buttons'>
<li>
<h:commandButton id='send-mail'
title="..."
value='...'
styleClass="ui-button ui-state-default ui-corner-all"
action="#{action}"/>
</li>
</ul>
</h:form>
</div>
</f:view>
The ASF.OpenDialog
is simply called to trigger the opening of the dialog.
The second parameter shoudl be the name of the dialog box JavaScript variable.
The last parameter is the URL to fetch to get the dialog box content.
<a class='awa-button' href="#"
onclick="return ASF.OpenDialog(this, 'openDialog', '#{contextPath}/');">
Open Dialog
</a>
ASF Actions
Updating content
Several actions are available to update the content of some DOM components:
- The update action replaces a complete DOM content,
- The prepend action adds some content before a DOM node,
- The append action adds some content after a DOM node.
The DOM component is identified by a jQuery
identication string and passed in the id
attribute.
The content to replace, prepend or append is specified
in the data
attribute which can contain HTML tags.
{
"action": "update",
"id": "<name>",
"data": "<content>"
}
Hide or show
Several actions are available to hide, show and provide visual effects when displaying or hiding some component.
- show to make a DOM component visible,
- hide to make a DOM component invisible,
- fadeIn to show a component after a fade-in visual effect,
- fadeOut to hide a component after a fade-out visual effect,
- slideUp to slide a component up,
- slideDown to slide a component down.
The id attribute is used to defined the DOM component onto which the action is made.
{
"action": "fadeIn",
"id": "<name>"
}
Updating CSS class
- addClass to add a CSS class to some DOM components,
- removeClass to remove a CSS class to some DOM components.
{
"action": "addClass",
"id": "<name>",
"data": "<class-name>"
}
Redirect
The redirect action can be used to redirect the browser to a new page. The redirection page is defined by the url attribute.
{
"action": "redirect",
"url": "<redirection-url>"
}
Get content
The redirect action can be used to redirect the browser to a new page. The redirection page is defined by the url attribute.
{
"action": "get",
"id": "<name>",
"url": "<get-url>"
}
clear action
TBW