This discussion is archived
12 Replies Latest reply: Feb 3, 2013 11:12 PM by Timo Hahn RSS

DVT Graphs in carousel causes some clipping.

Neliel Newbie
Currently Being Moderated
Dear All,

Use Case:
I am putting a DVT graph inside the ADF Carousel component and I thought that this is easy to do but currently I am encountering some problem when it comes to layout.

Kindly see this image http://imageshack.us/photo/my-images/338/dvto.jpg

As you can see, the graph is 'clip' and does not display the whole image. According to the documentation, carousel item automatically stretches its child component.
The carousel component itself should be stretched by the panelstretchlayout. But from the project itself you will notice that the carouselitem does not stretch its child which in this case is a dvt graph.

I have uploaded a sample test project here for you to try http://my-dev-projects.googlecode.com/files/DVTCarousel.zip

Not sure if there is any workaround for this.

Hoping for some DVT expert to glance at this please.
    <af:document id="d1">
      <af:form id="f1">
        <af:panelStretchLayout id="psl1" dimensionsFrom="children" styleClass="AFStretchWidth">
          <f:facet name="bottom"/>
          <f:facet name="center">
            <af:carousel id="c1" value="#{viewScope.SampleBean.dummyList}"
                         var="item" contentDelivery="immediate" >
              <f:facet name="nodeStamp">
                <af:carouselItem id="ci1" >
                  <dvt:lineGraph id="lineGraph1" subType="LINE_VERT_ABS"
                                 shortDesc="Sample"
                                 tabularData="#{viewScope.SampleBean.tabularData}"
                                 contentDelivery="immediate">
                    <dvt:graphTitle text="#{item.title}"/>
                    <dvt:background>
                      <dvt:specialEffects/>
                    </dvt:background>
                    <dvt:graphPlotArea/>
                    <dvt:seriesSet>
                      <dvt:series/>
                    </dvt:seriesSet>
                    <dvt:o1Axis/>
                    <dvt:y1Axis/>
                    <dvt:legendArea automaticPlacement="AP_NEVER"/>
                  </dvt:lineGraph>
                </af:carouselItem>
              </f:facet>
            </af:carousel>
          </f:facet>
          <f:facet name="start"/>
          <f:facet name="end"/>
          <f:facet name="top"/>
        </af:panelStretchLayout>
      </af:form>
    </af:document>
Is there any workaround?

Thanks.

JDEV 11G PS5
  • 1. Re: DVT Graphs in carousel causes some clipping.
    Timo Hahn Oracle ACE
    Currently Being Moderated
    Have you tried to put the af:carouselItem into a layout component (e.g. an af:panelStretchLayout)?

    Timo
  • 2. Re: DVT Graphs in carousel causes some clipping.
    Neliel Newbie
    Currently Being Moderated
    Timo Hahn wrote:
    Have you tried to put the af:carouselItem into a layout component (e.g. an af:panelStretchLayout)?

    Timo
    Hi Timo,

    I have put the carousel component inside the panel stretch layout center facet. So I thought it would stretch the component.

    If you are saying about putting the DVT inside a panel stretch layout, similar to the code below.
    <af:panelStretchLayout id="psl1" dimensionsFrom="children"
                                styleClass="AFStretchWidth">
      <f:facet name="center">
         <af:carousel id="c1" value="#{viewScope.SampleBean.dummyList}"
                         var="item" contentDelivery="immediate">
           <f:facet name="nodeStamp">
              <af:carouselItem id="ci1">
                <af:panelStretchLayout id="psl2">
                   <f:facet name="center">
                     <dvt:lineGraph id="lineGraph1" subType="LINE_VERT_ABS"
                                        shortDesc="Sample"
                                        tabularData="#{viewScope.SampleBean.tabularData}"
                                        contentDelivery="immediate">
                     </dvt:lineGraph>
                   </f:facet>
                </af:panelStretchLayout>
              </af:carouselItem>
           </f:facet>
         </af:carousel>
      </f:facet>
    </af:panelStretchLayout>
    This wont work either.

    The carouselitem child component is only the DVT and I was thinking that the size of the carouselitem would match the size of the dvt graph but I think this is not the case.

    Thanks
  • 3. Re: DVT Graphs in carousel causes some clipping.
    Timo Hahn Oracle ACE
    Currently Being Moderated
    I meant the other way around
    <af:panelStretchLayout id="psl1" dimensionsFrom="children"
                                styleClass="AFStretchWidth">
      <f:facet name="center">
         <af:carousel id="c1" value="#{viewScope.SampleBean.dummyList}"
                         var="item" contentDelivery="immediate">
           <f:facet name="nodeStamp">
                <af:panelStretchLayout id="psl2">
              <af:carouselItem id="ci1">
                   <f:facet name="center">
                     <dvt:lineGraph id="lineGraph1" subType="LINE_VERT_ABS"
                                        shortDesc="Sample"
                                        tabularData="#{viewScope.SampleBean.tabularData}"
                                        contentDelivery="immediate">
                     </dvt:lineGraph>
                   </f:facet>
              </af:carouselItem>
                </af:panelStretchLayout>
           </f:facet>
         </af:carousel>
      </f:facet>
    </af:panelStretchLayout>
    The child which gets stretched is the carousel, not the nodes inside the carousel (the images).

    Timo

    Edited by: Timo Hahn on 01.02.2013 10:09
  • 4. Re: DVT Graphs in carousel causes some clipping.
    Neliel Newbie
    Currently Being Moderated
    Timo Hahn wrote:
    I meant the other way around
    Hi Timo,

    I think this isn't feasible either as Jdev would warn you that you cannot insert the panel stretch layout inside this facet.

    Also, according to the tag documentation
    nodeStamp - the component to use to stamp each element in the carousel. A carouselItem child is required 
    so only the carouselitem is a valid child of the nodestamp facet.

    Thanks
  • 5. Re: DVT Graphs in carousel causes some clipping.
    Timo Hahn Oracle ACE
    Currently Being Moderated
    Yep, you are right, I did not check this before writing it :(
    I'll look into your sample later today and try to find something out.


    Timo
  • 6. Re: DVT Graphs in carousel causes some clipping.
    Neliel Newbie
    Currently Being Moderated
    Timo Hahn wrote:
    Yep, you are right, I did not check this before writing it :(
    I'll look into your sample later today and try to find something out.


    Timo
    That's okay...thanks for taking time to look into this.
    Eagerly awaiting to what you can find out later.... :)
  • 7. Re: DVT Graphs in carousel causes some clipping.
    Timo Hahn Oracle ACE
    Currently Being Moderated
    OK, I checked out this and came to this solution:
    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
              xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces">
      <jsp:directive.page contentType="text/html;charset=UTF-8"/>
      <f:view>
        <af:document id="d1">
          <af:form id="f1">
            <af:panelStretchLayout id="psl1">
              <f:facet name="bottom"/>
              <f:facet name="center">
                <af:carousel id="c1" value="#{viewScope.SampleBean.dummyList}" var="item" contentDelivery="immediate">
                  <f:facet name="nodeStamp">
                    <af:carouselItem id="ci1">
                      <af:panelGroupLayout id="pgl1">
                        <dvt:lineGraph id="lineGraph1" subType="LINE_VERT_ABS" shortDesc="Sample" tabularData="#{viewScope.SampleBean.tabularData}"
                                       contentDelivery="immediate">
                          <dvt:graphTitle text="#{item.title}"/>
                          <dvt:background>
                            <dvt:specialEffects/>
                          </dvt:background>
                          <dvt:graphPlotArea/>
                          <dvt:seriesSet>
                            <dvt:series/>
                          </dvt:seriesSet>
                          <dvt:o1Axis/>
                          <dvt:y1Axis/>
                          <dvt:legendArea automaticPlacement="AP_NEVER"/>
                        </dvt:lineGraph>
                      </af:panelGroupLayout>
                    </af:carouselItem>
                  </f:facet>
                </af:carousel>
              </f:facet>
              <f:facet name="start"/>
              <f:facet name="end"/>
              <f:facet name="top"/>
            </af:panelStretchLayout>
          </af:form>
        </af:document>
      </f:view>
    </jsp:root>
    Timo
  • 8. Re: DVT Graphs in carousel causes some clipping.
    Shay Shmeltzer Employee ACE
    Currently Being Moderated
    Can you try setting the graph's dynamicResize property to DYNAMIC_RESIZE ?
    http://docs.oracle.com/cd/E15523_01/apirefs.1111/e12418/tagdoc/dvt_lineGraph.html
  • 9. Re: DVT Graphs in carousel causes some clipping.
    Neliel Newbie
    Currently Being Moderated
    Shay Shmeltzer wrote:
    Can you try setting the graph's dynamicResize property to DYNAMIC_RESIZE ?
    http://docs.oracle.com/cd/E15523_01/apirefs.1111/e12418/tagdoc/dvt_lineGraph.html
    This wont work Shay...

    I tried this one, there is some bug into it I believe as you would notice that the graph becomes smaller and smaller as you move your carousel...
  • 10. Re: DVT Graphs in carousel causes some clipping.
    Neliel Newbie
    Currently Being Moderated
    Timo Hahn wrote:
    OK, I checked out this and came to this solution:

    Timo
    Hi Timo,

    Tried this code and this seems to work. However, the UI requirement says that the carousel should be in the topmost part of the page and not on the center

    If I try to place at the topmost part of the page like the code below then you would notice that the problem would re-appear.
    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
              xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces">
      <jsp:directive.page contentType="text/html;charset=UTF-8"/>
      <f:view>
        <af:document id="d1">
          <af:form id="f1">
            <af:panelStretchLayout id="psl1" topHeight="auto">
              <f:facet name="bottom"/>
              <f:facet name="center">
                <af:spacer width="10" height="10" id="s1"/>
              </f:facet>
              <f:facet name="start"/>
              <f:facet name="end"/>
              <f:facet name="top">
                <af:carousel id="c1" value="#{viewScope.SampleBean.dummyList}"
                             var="item" contentDelivery="immediate">
                  <f:facet name="nodeStamp">
                    <af:carouselItem id="ci1">
                      <af:panelGroupLayout id="pgl1">
                        <dvt:lineGraph id="lineGraph1" subType="LINE_VERT_ABS"
                                       shortDesc="Sample"
                                       tabularData="#{viewScope.SampleBean.tabularData}"
                                       contentDelivery="immediate">
                          <dvt:graphTitle text="#{item.title}"/>
                          <dvt:background>
                            <dvt:specialEffects/>
                          </dvt:background>
                          <dvt:graphPlotArea/>
                          <dvt:seriesSet>
                            <dvt:series/>
                          </dvt:seriesSet>
                          <dvt:o1Axis/>
                          <dvt:y1Axis/>
                          <dvt:legendArea automaticPlacement="AP_NEVER"/>
                        </dvt:lineGraph>
                      </af:panelGroupLayout>
                    </af:carouselItem>
                  </f:facet>
                </af:carousel>
              </f:facet>
            </af:panelStretchLayout>
          </af:form>
        </af:document>
      </f:view>
    </jsp:root>
    I am just not sure why the resizing behavior is affected depending on what particular facet you place the component.
  • 11. Re: DVT Graphs in carousel causes some clipping.
    Timo Hahn Oracle ACE
    Currently Being Moderated
    You are doing it the wrong way around. You need to keep the carousel in the center facet. To move it upwards you can put another panelStretchLayout into the bottom facet like :
    <?xml version='1.0' encoding='UTF-8'?>
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
              xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces">
      <jsp:directive.page contentType="text/html;charset=UTF-8"/>
      <f:view>
        <af:document id="d1">
          <af:form id="f1">
            <af:panelStretchLayout id="psl1" bottomHeight="550px" topHeight="0px" endWidth="0px" startWidth="0px">
              <f:facet name="bottom">
                <af:panelStretchLayout id="psl2">
                  <f:facet name="bottom"/>
                  <f:facet name="center">
                    <af:spacer width="10" height="10" id="s1"/>
                  </f:facet>
                  <f:facet name="start"/>
                  <f:facet name="end"/>
                  <f:facet name="top"/>
                </af:panelStretchLayout>
              </f:facet>
              <f:facet name="center">
                <af:carousel id="c1" value="#{viewScope.SampleBean.dummyList}" var="item" contentDelivery="immediate">
                  <f:facet name="nodeStamp">
                    <af:carouselItem id="ci1">
                      <af:panelGroupLayout id="pgl1" layout="scroll">
                        <dvt:lineGraph id="lineGraph1" subType="LINE_VERT_ABS" shortDesc="Sample" tabularData="#{viewScope.SampleBean.tabularData}"
                                       contentDelivery="immediate">
                          <dvt:graphTitle text="#{item.title}"/>
                          <dvt:background>
                            <dvt:specialEffects/>
                          </dvt:background>
                          <dvt:graphPlotArea/>
                          <dvt:seriesSet>
                            <dvt:series/>
                          </dvt:seriesSet>
                          <dvt:o1Axis/>
                          <dvt:y1Axis/>
                          <dvt:legendArea automaticPlacement="AP_NEVER"/>
                        </dvt:lineGraph>
                      </af:panelGroupLayout>
                    </af:carouselItem>
                  </f:facet>
                </af:carousel>
              </f:facet>
              <f:facet name="start"/>
              <f:facet name="end"/>
              <f:facet name="top"/>
            </af:panelStretchLayout>
          </af:form>
        </af:document>
      </f:view>
    </jsp:root>
    One problem is that the bargraph needs some height to display and your test data don't reveal the height needed to display correct. I set the panelGroupLayout to scroll to get a scroll bar if the remaining space on the page is too small to show the whole graph.

    Timo
  • 12. Re: DVT Graphs in carousel causes some clipping.
    Neliel Newbie
    Currently Being Moderated
    Timo Hahn wrote:
    You are doing it the wrong way around. You need to keep the carousel in the center facet. To move it upwards you can put another panelStretchLayout into the bottom facet like :
    One problem is that the bargraph needs some height to display and your test data don't reveal the height needed to display correct. I set the panelGroupLayout to scroll to get a scroll bar if the remaining space on the page is too small to show the whole graph.

    Timo
    Hmm..interesting thought.. I will get back to you after some more checking..
    Thanks for giving time on my use case. :)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points