Currently Being Moderated

Migrating from QuipuKit 1.x

VERSION 6

Created on: Apr 30, 2009 7:06 PM by Dmitry Pikhulya - Last Modified:  Jul 31, 2009 6:49 PM by Dmitry Pikhulya

This document describes how to upgrade your application from QuipuKit 1.x to OpenFaces 2.0.EAP1.

General

  • OpenFaces 2.0 requires Java version 5 or higher.
  • OpenFaces 2.0 requires JSF 1.2.x (Mojarra or MyFaces).
  • As with QuipuKit 1.x, OpenFaces can be used with JSP and Facelets. Though if you are working with Facelets, please ensure that you are using a version 1.1.14 or higher.
  • Support for Ajax4jsf framework of versions that existed prior to integrating Ajax4jsf into RichFaces has been dropped. Use RichFaces 3.3.0 or later instead of Ajax4jsf.
  • Support for RichFaces library earlier than version 3.3.0 has been dropped. Upgrade to RichFaces 3.3.0 or later.
  • Suppor for JBoss Seam framework of versions earlier than 2.0 has been dropped.
  • OpenFaces 2.0 comes as a single Jar file named openfaces.jar . License jar file that was required for QuipuKit 1.x is not required anymore and should be removed. Other jar dependencies remained the same (see the Installation and Configuration section in OpenFaces Developer's Guide).

Changes Dependent on the New Product Name

Since version 2.0 QuipuKit has been renamed to OpenFaces. Hence all of the names that depended on the old product name must be changed. Here's the full list of changes that might require updates in your application:

  • Renamed the root package from teamdev.jsf to org.openfaces. Therefore you need to update paths to imported packages in your code appropriately. Please also pay special attention to renaming the resource filter class in web.xml from teamdev.jsf.util.ResourceFilter to org.openfaces.util.ResourceFilter . The teamdev.jsf.portlet.QuipuKitPortlet class for configuring portlet applications has also been renamed to org.openfaces.portlet.OpenFacesPortlet.
  • Changed prefixes of component-type and component-family strings from teamdev.jsf to org.openfaces .
  • The prefixes for application parameters specified in web.xml file were changed from teamdev.jsf to org.openfaces .
  • The /qk_internalResource/* resource mapping that can optionally be specified in web.xml for performance optimization has been renamed to /openFacesResources/* .
  • Changed validation message key prefixes for message bundles from teamdev.jsf to org.openfaces .
  • Namespace for OpenFaces component tags was changed from http://teamdev.com/quipukit to http://org.openfaces/ . Although it is not required to change the namespace prefix in your page files, we recommend to use the "o" prefix when using OpenFaces tags, for example <o:dataTable>.

Removal of Deprecated API

In version 2.0 we have removed the API that was marked as deprecated in QuipuKit 1.x. Below is the list of changes, with the description of how to retain the appropriate functionality using the new API.

 

The list of removed attributes, and the appropriate replacements:

 

ComponentOld Attribute NameReplacement
HintLabeltitlehint
DataTable, TreeTablerowOnclick, rowOndblclick, rowOnmousedown, rowOnmousemove, rowOnmouseout, rowOnmouseover, rowOnmouseupPlace <o:row onclick="..."/> inside of your <o:dataTable> or <o:treeTable> tag (applicable for all listed events).
TabSetsubmitOnChangeUse onchange attribute with manual form submission code, e.g. onchange="document.forms[0].submit()"; or use the <o:reloadComponents> tag to introduce Ajax interaction for the onchange event

 

The list of removed tags and their replacements:

 

TagReplacement
<q:cellStyle>Rename all <q:cellStyle> tags to <o:cell> and enclose them into empty <o:row> tags with no additional attributes.
<q:rowStyle><o:row>

Renamed, Moved API

Moved/renamed packages:

 

Old Package NameNew Package Name
teamdev.jsf.component.ajaxsettingsorg.openfaces.component.ajaxsettings
teamdev.jsf.component.calendar.daterangeorg.openfaces.component.calendar
teamdev.jsf.component.confirmationorg.openfaces.component.window
teamdev.jsf.component.chart.impl.vieworg.openfaces.component.chart
teamdev.jsf.component.chart.impl.modelorg.openfaces.component.chart
teamdev.jsf.component.chart.impl.eventorg.openfaces.component.chart
teamdev.jsf.component.chart.vieworg.openfaces.component.chart
teamdev.jsf.component.datatableorg.openfaces.component.table
teamdev.jsf.component.datechooserorg.openfaces.component.input
teamdev.jsf.component.dropdownfieldorg.openfaces.component.input
teamdev.jsf.component.dynamicImageorg.openfaces.component.output
teamdev.jsf.component.focusorg.openfaces.component.util
teamdev.jsf.component.foldingpanelorg.openfaces.component.panel
teamdev.jsf.component.graphicTextorg.openfaces.component.output
teamdev.jsf.component.hintlabelorg.openfaces.component.output
teamdev.jsf.component.messageorg.openfaces.component.validation
teamdev.jsf.component.inputTextorg.openfaces.component.input
teamdev.jsf.component.inputTextareaorg.openfaces.component.input
teamdev.jsf.component.loadbundleorg.openfaces.component.util
teamdev.jsf.component.popuplayerorg.openfaces.component.window
teamdev.jsf.component.scrollpositionorg.openfaces.component.util
teamdev.jsf.component.spinnerorg.openfaces.component.input
teamdev.jsf.component.suggestionFieldorg.openfaces.component.input
teamdev.jsf.component.tabbedpaneorg.openfaces.component.panel
teamdev.jsf.component.tabsetorg.openfaces.component.select
teamdev.jsf.component.treetableorg.openfaces.component.table
teamdev.jsf.component.twolistselectionorg.openfaces.component.select

 

Moved/renamed classes:

 

Old Class NameNew Class Name
teamdev.jsf.component.chart.impl.model.PlainModelImplorg.openfaces.component.chart.PlainModel
teamdev.jsf.component.chart.impl.model.PlainSeriesImplorg.openfaces.component.chart.PlainSeries
teamdev.jsf.component.chart.impl.model.TupleImplorg.openfaces.component.chart.Tuple
teamdev.jsf.component.dropdown.DropDownFieldorg.openfaces.component.input.DropDownField
teamdev.jsf.component.dropdown.HorizontalAlignmentorg.openfaces.component.HorizontalAlignment
teamdev.jsf.component.output.HintLabelorg.openfaces.component.output.HintLabel
teamdev.jsf.component.popuplayer.Confirmationorg.openfaces.component.window.Confirmation
teamdev.jsf.component.popuplayer.ButtonTypeorg.openfaces.component.window.ButtonType
teamdev.jsf.component.util.LoadingModeorg.openfaces.component.LoadingMode
teamdev.jsf.component.util.FacesUtilorg.openfaces.util.FacesUtil
teamdev.jsf.renderkit.validation.validator.ClientValidationEnumorg.openfaces.component.validation.ClientValidationMode

 

Renamed tags:

 

Old Tag NameNew Tag Name
<q:customValidator><o:validateCustom>
<q:emailValidator><o:validateEmail>
<q:equalValidator><o:validateEqual>
<q:regExpValidator><o:validateRegex>
<q:urlValidator><o:validateUrl>

 

Renamed attributes. These are applicable to both property names in the actual component classes and the appropriate attribute names.

 

ComponentOld Attribute NameNew Attribute Name
ChartstyletextStyle
ConfirmationinvokerIdfor
ConfirmationinvokerEventNameevent
ConfirmationmiddleAreaClasscontentClass
ConfirmationmiddleAreaStylecontentStyle
ConfirmationrolloverMiddleAreaClassrolloverContentClass
ConfirmationrolloverMiddleAreaStylerolloverContentStyle
GraphicTextstyletextStyle
PopupLayer, ConfirmationcloseOnOuterClickhideOnOuterClick
TwoListSelectionallowSortingsortingAllowed
TwoListSelectionallowItemsOrderingreorderingAllowed

 

Renamed methods:

 

ClassOld Method NameNew Method Name
org.openfaces.component.chart.PlainSeriessetIdsetKey
org.openfaces.component.chart.PlainSeriessetSeriesKeysetKey
org.openfaces.component.chart.PlainSeriesgetSeriesKeygetKey
org.openfaces.component.chart.SeriesgetIdgetKey

Client-Side API Changes

The New O$(id) Function

OpenFaces 2.0 introduces a new JavaScript function named "O$(id)" (capital letter O and a dollar sign) that locates a DOM element by its identifier. Locating element by id is a very common scenario, where the "document.getElementById(id)" function is usually invoked. The O$(id) function works in the same way and can be used as a short replacement for this expression. See the documentation for usage example.

Unified Client-Side API

In QuipuKit 1.x each method of component's client-side API was available in two ways:

  • As a "global" function prefixed with "q_" and receiving component identifier as the first parameter, for example q_showPopupLayer(popupId);
  • As a component instance method without a prefix and component id parameter, for example popup.show().

 

In OpenFaces 2.0, the first way of using the component's client-side API is not available anymore. Therefore you should replace invocations of all "global" functions, the functions that start with the "q_" prefix, with usages of the appropriate instance methods. We recommend using the new O$(id) function to simplify this process. Here are some examples of replacing the old invocations with the new ones:

 

Old-Style InvocationNew-Style Invocation
q_showPopupLayer("form:popup1")O$("form:popup1").show()
q_showPopupLayerAtXY("form:popup1", 150, 100)O$("form:popup1").showAtXY(150, 100)
q_isTableSelectionEmpty("form:dataTable1")O$("form:datatable1").isSelectionEmpty()

Client-Side Validation Functions

Validation functions have undergone a change similar to the one described above. The notation for validation function names was changed. The "q_" prefix was removed, and all functions were placed into the "O$" namespace instead. That means that now you should invoke such functions as methods of the "O$" variable. Here are the examples:

 

Old-Style InvocationNew-Style Invocation
q_validate(myComponent)O$.validate(myComponent)
q_validateForm(document.forms[0])O$.validateForm(document.forms[0])

The q_refreshTable and q_refreshTreeTable Functions

In OpenFaces 2.0, the q_refreshTable and q_refreshTreeTable functions were removed in favor of the new API that allows reloading any components and provides a wider set of possibilities. OpenFaces 2.0 introduces the new ReloadComponents component that allows reloading one or more components with Ajax. This component provides programmatic access to its functionality using the O$.reloadComponents function. q_refreshTable and q_refreshTreeTable function invocations should be replaced with O$.reloadComponents invocations as shown below.

 

Old-Style InvocationNew-Style InvocationNotes
q_refreshTable("form:dataTable1")O$.reloadComponents(["form:dataTable1"])Refreshing the table without additional options

q_refreshTable("form:dataTable1",

["form:field1","form:field2"])

O$.reloadComponents(["form:dataTable1"],
{submittedComponentIds: ["form:field1", "form:field2"]})
Refreshing the table with submitting data for two additional form fields

q_refreshTable("form:dataTable1",

["form:field1","form:field2"],

"MyBean.action1")

O$.reloadComponents(["form:dataTable1"],
{submittedComponentIds: ["form:field1", "form:field2"],
serverAction: "MyBean.action1"})
Refreshing the table with submitting data for two additional form fields and invoking the "MyBean.action1" server action

The same replacements are applicable for the q_refreshTreeTable function. See the documentation for the ReloadComponents component for more information.

API Changes

ComponentChange Description
ConfirmationThe q_runConfirmedFunctionByName/runConfirmedFunctionByName client-side function was removed. Use runConfirmedFunction function instead and pass an appropriate closure (aka anonymous function) there instead.

Other

Component/AttributeNote
All componentsAll methods that received ValueBinding/MethodBinding arguments now receive ValueExpression/MethodExpression
Calendar, FoldingPanel, TabbedPane, TabSetThese components have been made focusable by default in OpenFaces 2.0. You can make them non-focusable as they were in QuipuKit 1.x by specifying the focusable="false" attribute.
Calendar, DateChooserThe showWeekNumber and weekText attributes were removed because of their counterintuitive display and meaning. An alternative implementation can be expected in future versions if needed.
ConfirmationThe event attribute of <o:confirmation> tag now defaults to "onclick", so you can remove it for declarations where it equals to the default value.
ConfirmationConfirmation components that previously were declared without the for (former name is invokerId) attribute for explicit usage via JavaScript should now include the explicit standalone="true" attribute declaration. Otherwise these components will automatically be attached to the parent component.
Confirmation

closeButtonImageUrl and showCloseWindowButton attributes were replaced with a notion of caption areas that is a generic way of customizing caption buttons and is used in FoldingPanel and Window components in addition to the Confirmation component. Here's an example of migrating to the new API:

 

Old-style code:

<q:confirmation
   closeButtonImageUrl="close.gif"
   ...
/>

New-style code:

<o:confirmation ...>
   <o:captionArea>
     <o:closeWindowButton imageUrl="close.gif"/>
   </o:captionArea>
</o:confirmation>

The new <o:closeWindowButton> tag also provides additional attributes for customizing other aspects of button's appearance such as a style and a hint. The window closing button is displayed by default, but you can hide it just by placing an empty <o:captionArea/> tag inside of <o:confirmation> tag. See the documentation for Confirmation component for more details about customizing the caption buttons.
FoldingPanelAdding StateChangeListener to FoldingPanel doesn't trigger form submission on expanding/collapsing FoldingPanel anymore. Use onstatechange event with manual form submission script if necessary.
FoldingPanel

Changed the way of customizing toggle button's image and hint. Now there's the possibility to specify so called caption areas, which allows specifying additional buttons in the panel's caption. As a part of this, a new tag for the toggle button was created: <o:expansionToggleButton>, which now includes all of the image URL properties that were previously specified through <q:foldingPanel> (names were unchanged), the hint attribute instead of foldingPanel's buttonHint attribute and other new attributes. Usages of <q:foldingPanel> tag's buttonPlacement attribute should be replaced with using the alignment attribute of <o:captionArea> tag. Note that if you don't need customization of the toggle button itself, you should include an empty declaration of the <o:expansionToggleButton/> tag into the <o:captionArea> tag for the area to be non-empty. Here's an example of migrating to the new API:

 

Old-style code:

<q:foldingPanel
  collapsedImageUrl="collapsed.gif"
  expandedImageUrl="expanded.gif"
  buttonHint="Click here"
  buttonPlacement="left" ...>
   ...
</q:foldingPanel>

 

New-style code:

<o:foldingPanel ...>
   <o:captionArea alignment="left">
     <o:expansionToggleButton
       collapsedImageUrl="collapsed.gif"
       expandedImageUrl="expanded.gif"
       hint="Click here"/>
   </o:captionArea>
   ...
</o:foldingPanel>

 

See FoldingPanel documentation for a detailed description of how to use caption areas and the <o:expansionToggleButton> tag.
ScrollPositionChanged the way of specifying the "for" attribute to be consistent with other components. It should now be specified in the same way as a "for" attribute of <h:outputLabel>, <h:message> or <o:confirmation> components. Previously the whole tree was searched for the short id specified in this attribute. Now it's either an "absolute" id if it starts with a colon symbol, or a "relative" id otherwise. See ScrollPosition documentation for details.
ValidationThe <q:message> and <q:messages> tags were removed. Since they are identical in API with the standard counterparts, you just need to replace them with the standard <h:message> and <h:messages> tags respectively.
ValidationValidator IDs were renamed to match the traditional convention:
org.openfaces.CustomValidator -> org.openfaces.Custom
org.openfaces.EmailValidator -> org.openfaces.EMail
org.openfaces.EqualValidator -> org.openfaces.Equal
org.openfaces.RegexValidator -> org.openfaces.RegularExpression
org.openfaces.URLValidator -> org.openfaces.URL

The following message bundle keys were amended to match the updated validator names:
org.openfaces.EmailValidatorMessage -> org.openfaces.EMailValidatorMessage
org.openfaces.RegExpValidatorMessage -> org.openfaces.RegexValidatorMessage
Average User Rating
(0 ratings)




There are no comments on this document

More Like This

  • Retrieving data ...