ICEfaces
  1. ICEfaces
  2. ICE-10638

New ace:panelStack with custom tag-handler rendering optimization and client capabilities

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P02, EE-4.0.0.GA
    • Fix Version/s: 4.1, EE-3.3.0.GA_P04
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ace tagHandler

      Description

      create a custom component to incorporate old features of ice:panelStack but to also include performance optimizations with ability of children to not be included in the server-side component tree and to not continually update a child if content is static. Each panelStack would only show the selected panel, but each child would determine whether it would be included in the server-side tree (facelet="false" would be default so same as regular jsf managed content) for example:-
      <ace:panelStack selectedId="pane2">
          <ace:stackPane id="pane1" client="true">
               <!-- some content here-->
          </ace:stackPane>
          <ace:stackPane id="pane2" >
              <!-- some content here but this content would be regular
                      jsf handled content and managed by domdiff algorithm
                      and rendered flag to either show the content or not-->
          </ace:stackPane>
          <ace:stackPane id="pane3" facelet="true">
               <!-- some content here but this would NOT be part of the server side
                    component tree unless it were the selectedId of the parent-->
          </ace:stackPane>
      </ace:panelStack>
      ........
      The panelStack would require a proxy so that each child could contain it's own form and the panelStack would always be updated as to which child is selected.
      facelet="true" would act same as ui:include, but these components can be nested without worrying about the issues regarding ui:include and jstl tags since the div is always rendered, it's just the content of the divs which would be either included in the component tree (or not if facelet="true").

      if you want other content to be rendered, you would nest your panelStacks:-
      Modification to this could be having a list of selectedId's instead of a single selectedId, but easiest to implement a singleId to be included than a list of them. (take longer to implement).
      for example:-
      <ace:panelStack id="stack1" selectedId="pane1">
         <ace:stackPane id="pane1" client="true">
               <!-- some content here-->
          </ace:stackPane>
          <ace:stackPane id="pane2" >
              <!-- some content here but this content would be regular
                      jsf handled content and managed by domdiff algorithm
                      and rendered flag to either show the content or not-->
          </ace:stackPane>
          <ace:stackPane id="pane3" facelet="true">
                <ace:panelStack id="stack2" seletedId="pane5">
                      <ace:stackPane id="pane4" facelet="true">
                             <!-- note this panes content is not in the tree unless pane 3 and
                                      pane4 are both selected -->
                      </ace:stackPane>
                      <ace:stackPane id="pane5" facelet="true">
                             <!-- note this panes content is not in the tree unless pane 3 and
                                      pane5 are both selected -->
                      </ace:stackPane>
                     <ace:stackPane id="pane6">
                           <!-- note this panes content is not in the tree unless pane 3 and
                                      is selected even if pane6 is not selected-->
                      </ace:stackPane>
               </ace:panelStack>
          </ace:stackPane>
      </ace:panelStack>

      The client="true" does not have to immediately be part of this component, but might be something to consider down the road....(?). Main difference between this component and ice:panelStack is that child pane's content can be removed from component tree unless it is "selected".
      1. ist3.png
        1023 kB
      2. list1.png
        1009 kB
      3. list2.png
        1008 kB

        Issue Links

          Activity

          Hide
          Mircea Toma added a comment -

          Modified StackPane.visitTree method to visit only the children of the selected stack pane.

          Show
          Mircea Toma added a comment - Modified StackPane.visitTree method to visit only the children of the selected stack pane.
          Hide
          Judy Guglielmin added a comment - - edited

          Remaining problems exists with ace:checkboxButton / f:selectBooleanCheckbox and ace:comboBox when used with ace:ajax / f:ajax. This is visible in the showcase example using either ace:checkboxButton or h:selectBooleanCheckbox. ice:selectBooleanCheckbox works as it does NOT use ace:ajax or f:ajax. ace:comboBox does not work either (see first simple example). By do not work, they do not get decoded properly and save their state.

          fixed the other 2 showcase example which did not even show the checkbox stackPane (application code)
          problem with these components not keeping their state in the first example -request is good, but it is not decoding/saving state correctly. ice component does.

          Note that now was the following js console error for the component/widgets in the stackPanes:-
          Uncaught TypeError: Cannot read property 'updateProperties' of undefined
          ....
          fixed this by using mandatory configuration for tabSet.

          Show
          Judy Guglielmin added a comment - - edited Remaining problems exists with ace:checkboxButton / f:selectBooleanCheckbox and ace:comboBox when used with ace:ajax / f:ajax. This is visible in the showcase example using either ace:checkboxButton or h:selectBooleanCheckbox. ice:selectBooleanCheckbox works as it does NOT use ace:ajax or f:ajax. ace:comboBox does not work either (see first simple example). By do not work, they do not get decoded properly and save their state. fixed the other 2 showcase example which did not even show the checkbox stackPane (application code) problem with these components not keeping their state in the first example -request is good, but it is not decoding/saving state correctly. ice component does. Note that now was the following js console error for the component/widgets in the stackPanes:- Uncaught TypeError: Cannot read property 'updateProperties' of undefined .... fixed this by using mandatory configuration for tabSet.
          Hide
          Judy Guglielmin added a comment -

          fixed showcase examples for checkbox and resource loading tabSet rev 45260 IF4 and rev 45259 for IF 3.3 mtce.

          Show
          Judy Guglielmin added a comment - fixed showcase examples for checkbox and resource loading tabSet rev 45260 IF4 and rev 45259 for IF 3.3 mtce.
          Hide
          Judy Guglielmin added a comment -

          iceads1.icesoft.domain/Public/Users/mircea/iceMock3.war
          location of new test case for problem with ice:selectInputDate and ice:selectInputText which do not popup or work within ace:panelStack.
          choose medium or large button (top example and small is the one that is not in the panelStack).

          Still issue with ace:checkboxButton and ace:comboBox as well not maintaining state in showcase examples

          Show
          Judy Guglielmin added a comment - iceads1.icesoft.domain/Public/Users/mircea/iceMock3.war location of new test case for problem with ice:selectInputDate and ice:selectInputText which do not popup or work within ace:panelStack. choose medium or large button (top example and small is the one that is not in the panelStack). Still issue with ace:checkboxButton and ace:comboBox as well not maintaining state in showcase examples
          Hide
          Mircea Toma added a comment -

          Modified StackPane.visitTree method once again to visit only the children of the selected stack pane but avoid to shortcut the tree visiting when non-selected stack panes are encountered.

          Show
          Mircea Toma added a comment - Modified StackPane.visitTree method once again to visit only the children of the selected stack pane but avoid to shortcut the tree visiting when non-selected stack panes are encountered.

            People

            • Assignee:
              Mircea Toma
              Reporter:
              Judy Guglielmin
            • Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: