Skip to Content

     import mx.collections.ArrayCollection;

     import mx.effects.easing.*;

     import mx.rpc.soap.SOAPFault;

       import sap.FlashIsland;

       import mx.graphics.IFill;

       import mx.graphics.SolidColor;

       import mx.charts.series.items.PieSeriesItem;

       import mx.charts.events.ChartItemEvent;

    

      (Bindable) public var dataSource: ArrayCollection;/* = new ArrayCollection([

+     ,</p><p align=”left”>     ,</p><p align=”left”>     </p><p align=”left”>     ]); /+</p><p align=”left”>     </p><p align=”left”>      (Bindable*) public var label_status: String;</p><p align=”left”>      (Bindable) public var count_status: String;</p><p align=”left”>                  public var label_status_fill:IFill = new SolidColor(0xbcd0df, 1.0);</p><p align=”left”>                public var count_status_fill:IFill = new SolidColor(0xFFD965, 1.0);              </p><p align=”left”> </p><p align=”left”>     private function pieChart_itemClick(evt:ChartItemEvent):void {</p><p align=”left”>                var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;</p><p align=”left”>                var degrees:Number = radiansToDegrees(item.startAngle);</p><p align=”left”>                var arr:Array = [];</p><p align=”left”>                if (checkBox.selected) {</p><p align=”left”>                    arr[item.index] = 0.2;</p><p align=”left”>                }</p><p align=”left”>                pieSeries.perWedgeExplodeRadius = arr;</p><p align=”left”>                pieSeries.startAngle = degrees;</p><p align=”left”> </p><p align=”left”>                dataSource.refresh();</p><p align=”left”>            }</p><p align=”left”>            private function radiansToDegrees(radians:Number):Number {</p><p align=”left”>                return radians * (180 / Math.PI);</p><p align=”left”>            }</p><p align=”left”>         </p><p align=”left”>     public function initApp():void</p><p align=”left”>     {</p><p align=”left”>     FlashIsland.register(this);</p><p align=”left”>     }       </p><p align=”left”>  ]]></p><p align=”left”>  </mx:Script></p><p align=”left”>  <mx:Panel title=”Pie Chart Example”></p><p align=”left”>  <mx:CheckBox id=”checkBox” label=”Explode per Wedge” labelPlacement=”right” selected=”true”/></p><p align=”left”>     <mx:PieChart id=”pie” </p><p align=”left”>        dataProvider=”” </p><p align=”left”>        showDataTips=”true”</p><p align=”left”>        itemClick=”pieChart_itemClick(event);”</p><p align=”left”>        height=”100%”</p><p align=”left”>        width=”100%” color=”#8F2121″ themeColor=”#7B9ACD”></p><p align=”left”>        <mx:series></p><p align=”left”>           <mx:PieSeries id=”pieSeries”</p><p align=”left”>                field= ““</p><p align=”left”>                nameField= ““>     <mx:Legend dataProvider=”” direction=”horizontal” width=”309″ height=”36″/>

 

 

 

4. Save and Export the Release Build.!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image3.jpg|height=275|alt=image|width=544|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image3.jpg|border=0!

This will create a SWF File in the bin-debug folder.

!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image4.jpg|height=241|alt=image|width=641|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image4.jpg|border=0!”

Creating Webdynpro ABAP Application:

  • Create a Webdynpro Component/ Interface ZISL_RM_FLX.

Go to the Component Controller of ZISL_RM_FLX and create a node PIE_DATA, add the following attributes label_status and count_status.!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image5.jpg|height=234|alt=image|width=597|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image5.jpg|border=0!

 

1. Create Views Main and V_ISLAND

image

 

View V_ISLAND acts as the place holder for the Flash Island.

 

0.1. 5. In the Main View, Create a Table Element which will act as an Input for the Data Changes to be seen in the flash islands.

image

6. Create a mapping from the context of the component controller to the view controller of the View Main

0.1.

7. The data Source Property of the Table Element needs to be bound to PIE_DATA.0.1. 8. Create a View Container UI Element.

0.2. 9. Go to View V_ISLAND, Right Click on ROOTUIELEMENTCONTAINER and select Swap Root Element. This will allow you to create a Flash Island in the ROOTUIELEMENTCONTAINER. When you swap the root element a pop up will show up and you can choose the Flash Island Element.

0.3. 10. Click on the ROOTUIELEMENTCONTAINER and create a GACDATASOURCE this is the data source of the Flash Island.

0.4. 11. Map the context of the View V_ISLAND with that of the component controller.

0.5. 12. Bind the data source property of GACDATASOURCE to PIE_DATA.

0.6.

13. Create two GACPROPERTIES one to hold the label name which is label_status and the count values count_status.</li></ul><p align=”left”>!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image8.jpg|height=313|alt=image|width=369|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image8.jpg|border=0!</p><ul><li>14. Bind the value property of GACPROPERTY to label_status and count_status.</li><li>15. Import the SWF File created using the Flex Builder into the MIME Repository. The MIME Object can be Imported as follows, </li></ul><p>!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image9.jpg|height=256|alt=image|width=623|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image9.jpg|border=0!</p><ul><li>16. Once the SWF File is imported go to the ROOTUIELEMENTCONTAINER of V_ISLAND and define the properties as follows,</li></ul><p> </p><p>!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image10.jpg|height=388|alt=image|width=365|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image10.jpg|border=0!</p><p align=”left”> </p><ul><li>17. Copy the following code into the WDDOINIT of the component controller.</li></ul><table border=”1″ cellspacing=”0″ cellpadding=”0″><tbody><tr><td width=”638″ valign=”top”><p>DATA lo_nd_pie_data TYPE REF TO if_wd_context_node.<br />  DATA lt_pie_data TYPE wd_this->elements_pie_data.<br /><br />  lo_nd_pie_data = wd_context->get_child_node( name = wd_this->wdctx_pie_data ).<br /><br />  FIELD-SYMBOLS <wa_data> LIKE LINE OF lt_pie_data.<br /><br />  APPEND INITIAL LINE TO lt_pie_data ASSIGNING <wa_data>.<br />  <wa_data>-label_status = ‘Open’.<br />  <wa_data>-count_status = 20.<br />  APPEND INITIAL LINE TO lt_pie_data ASSIGNING <wa_data>.<br />  <wa_data>-label_status = ‘Staffed’.<br />  <wa_data>-count_status = 20.<br />  APPEND INITIAL LINE TO lt_pie_data ASSIGNING <wa_data>.<br />  <wa_data>-label_status = ‘Closed’.<br />  <wa_data>-count_status = 60.<br />  lo_nd_pie_data->bind_table( new_items = lt_pie_data set_initial_elements = abap_true ).</p></td></tr></tbody></table><ul><li>18. Navigate to the Window and embed the V_ISLAND in the View Container UI Element of MAIN View.</li></ul><p> </p><p>!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image11.jpg|height=134|alt=image|width=474|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image11.jpg|border=0!</p><ul><li>19. Create a Webdynpro application and our Interactive Pie Chart is ready.</li></ul><p align=”left”> </p><p>Output:</p><p>!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image12-InputPart.jpg|height=168|alt=image|width=341|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image12-InputPart.jpg|border=0!</p><p>!https://weblogs.sdn.sap.com/weblogs/images/251854772/Image12-OutputPart.jpg|height=489|alt=image|width=403|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image12-OutputPart.jpg|border=0!</p><p> </p><p>Data Illustration

 !https://weblogs.sdn.sap.com/weblogs/images/251854772/Image13.jpg|height=430|alt=image|width=412|src=https://weblogs.sdn.sap.com/weblogs/images/251854772/Image13.jpg|border=0!</body>

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Guillaume GARCIA
    Hi,

    To my opinion, visualization with Flex can help a lot in improving the user experience of Web Dynpro applications. IGS is not powerful enough when compared with RIA on this aspect (it is my personal view on it, I may be completely wrong!).
    I think what would really make a difference would be a standard SAP Flash Islands component that would be easily configured on the Web Dynpro side.

    Indeed, not all WD developers are willing to spend that much time learning all various aspects of Flex/ActionScript coding. A “clickable” configuration (analoguous to what is proposed in Visual Composer) would be a great step!!

    Best regards,
    Guillaume

    (0) 
    1. Sai Krishna Kowluri Post author
      Standard SAP Flash Islands component. I’m with you on this Guillaume. It would really help a lot of WD ABAP Developers. As of Flex Coding, we have a lot of code samples in Adobe Help. The only part that I had to concentrate was the Integration. It didn’t seem to difficult to me understanding MXML.
      (0) 
  2. Vidhya Thiagesan
    Hello Sai,

    I am getting a syntax error “1120: Access of undefined property FlashIsland.” after pasting the code given in step 3.

    Please advise.

    Thanks,
    Vidhya T

    (0) 

Leave a Reply