Applies To: This is applicable to web application development using BSP technology. Summary Macromedia Flash MX has now become the professional standard authoring tool for producing high-impact web experiences. In this article, I will illustrate a simple but impressive and flexible real-time animated graphing solution using BSP. In this solution the BSP application supplies data in the required fashion to a Flash component; whereas the actual plotting or rendering and animation part will be handled by the Flash component at the client-side. By: Sandesh Darne Company: Larsen & Toubro Infotech, LTD. Date: 05 Jan 2006 Table of Contents Applies To:...1 Summary...1 Table of Contents...1 BSP Application - Flash BAR Chart...2 Chart Flash Component...3 HTML Code for Flash Component...3 Dynamically Changing Data/Attributes of Flash Component...4 BSP Application Components...5 graph.html...5 graph_code.htm...7 Flash.js...7 data.xml...8 Final Touch...9 Alternative Approach...10 Conclusion...12 Author Bio...12 Disclaimer & Liability Notice...12 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 1
BSP Application - Flash BAR Chart The following screen shows a BSP application displaying a BAR chart for PO document counts per plant. This filter option can be used to display a chart of plant wise documents count where document price greater than inputted value. Graph individual BAR will show the value of axis in the hover as follows. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 2
Single click on the BAR will display description of plant for that BAR. Chart Flash Component I was in search of flash component to display chart with features like 1. XML data input 2. Further navigation from individual Bar of chart 3. Animate while graph render 4. Dynamic runtime ability to change attribute and data of graph using JavaScript. While surfing on net; I have come across www.infosoftglobal.com where I got variety set of flash components which is specifically design and develop to satisfy various business graph solution. I have selected simple bar graph flash component which has all the above typical requirements. To display graph on web page we need flash file and related HTML coding. HTML Code for Flash Component The typical HTML coding do display Flash component on Web page is done in <OBJECT> tag is as follows. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 3
Among all attributes of OBJECT tag the most important is handler or ID/NAME of it. This handler will be use further in JavaScript to pass the XML data. OBJECT tag has child nodes PARAM tags with NAME & VALUE attribute along with it. Tag PARAM with value attribute starts with dataxml contain actual XML data require to render graph. See in red area in above code. The <GRAPH> node's attributes merely specify aesthetic settings. The actual plotted data for the graph is contained within individual <SET> elements, which is a child node of the root <GRAPH> element. The attributes used to define the data are NAME, VALUE, COLOR and LINK. These <SET> children is actual data to render the graph bars. Similarly LINK attribute of SET node will provide us further navigation. In short the required XML structure should be as follows. <GRAPH> <SET name= value= color= link= > <SET name= value= color= link= > </GRAPH> Server should able to send data in this XML format only. Dynamically Changing Data/Attributes of Flash Component As we are interested in dynamically data change for chart; we first understand related JavaScript coding. This coding is specific to selected flash component design. If you are using any flash component check the related coding for the same. Generally developer of flash component provides the related coding. I have copied code from www.infosoftglobal.com and little modified just to suit to our page. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 4
JavaScript function setfcnewdata shown above takes strxml as importing parameter. This string is nothing but XML data string. In this function, first get the OBJECT DHTML object wherein flash component is define on HTML page. Here we will use the handler of DHTML object. Simply set the variables using SetVariable method on this Object. Parameter strxml will be set as new XML data for the Object. BSP Application Components After getting required flash component I develop application. Here are the components details of application. I have uploaded related flash component SWF file in the MIME folder. Let s understand code of related components. graph.html This is main HTML page which get displayed and render flash component. Coding of this page is follows. <%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %> <htmlb:content design="design2003" > <htmlb:page title = "Flash Demo" onload = "javascript:getxml(0)" > <%@include file="flash.js" %> <htmlb:form id="myformid" > <xml id="myxml"> <?xml version="1.0"?> </xml> <table cellpadding=0 STYLE="table-layout:fixed"> <tr> <td valign="top"> <htmlb:group id = "Group" title = "Filter Criteria" > <htmlb:groupbody> <htmlb:button text = "Net Price greater than" 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 5
onclientclick = "javascript:getxml(document.all.item('flt001').value)" /> <htmlb:inputfield id="flt001" /> </htmlb:groupbody> </htmlb:group> </td> </tr> <tr> <td valign="top"> <htmlb:group id = "Group" title = "Flash Graph" > <htmlb:groupbody> <%@include file="graph_code.htm" %> </htmlb:groupbody> </htmlb:group> </td> </tr> </table> </htmlb:form> </htmlb:page> </htmlb:content> Let s understand some of the important HTML objects define on this page. Page layout is to produce two parts one for filter area and other for graph area. This is accomplished by HTML TABLE object. First TR tag has button and input box. Since I plan to use AJAX technique to pull data; I set HTMLB button onclientclick, which invokes JavaScript getxml As user click button it give call to server for XML data. Second TR tag is meant for graph display. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 6
Include graph_code.htm is a required code for flash object. To store the XML data, I have defined XML object on the HTML page as follows. XML object Handler myxml will be used in JavaScript to load XML data stream. HTMLB page is define with onload event. JavaScript function getxml (same function define for client click on HTML button as describe earlier) will get call when page first time get render at client side. Include page fragment flash.js is collection of JavaScript functions. Related page fragment details are listed below. graph_code.htm This page fragment will have OBJECT tag code as mentioned earlier. <OBJECT name="myembed" id="myembed" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="750" HEIGHT="500" ALIGN="middle"> <PARAM NAME=movie VALUE="FC_2_3_Column2D.swf"> <PARAM NAME=FlashVars VALUE="&chartWidth=750&chartHeight=400&dataXML=<graph xaxisname='plant' yaxisname='total PO count' caption='total Purchase Orders' decimalprecision='0'> <set name='ltc1' value='30' color='0099ff'/> <set name='sg01' value='55' color='0099ff'/></graph>"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> </OBJECT> Flash.js The JavaScript functions are as follows. <script> function getxml( filteramt ){ var url = "data.xml?amt=" + filteramt; req = new ActiveXObject("Microsoft.XMLHTTP"); if (req){ req.onreadystatechange = processreqchange; req.open("get", url, true); req.send(null); 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 7
else{ alert("failed to Create XML Request Object."); function processreqchange(){ if (req.readystate == 4){ if (req.status == 200){ var response; response = req.responsetext; setfcnewdata(response); function setfcnewdata(strxml) { //This function updates the data of a FusionCharts present on the page //Get a reference to the movie var FCObject = document.all.item("myembed"); //Set dataurl to null FCObject.SetVariable('_root.dataURL',""); //Set the flag FCObject.SetVariable('_root.isNewData',"1"); //Set the actual data FCObject.SetVariable('_root.newData',strXML); //Go to the required frame FCObject.TGotoLabel('/', 'JavaScriptHandler'); </script> Function getxml has importing integer parameter. This function will give call to data.xml file with along with AMT = <import parameter integer value>. In turn data.xml file will return XML string which will assign to response string type variable in processreqchange function. Variable response further passes to flash component OBJECT as discuss earlier. To understand AJAX technique you can ref my code sample Create a Web Application Using AJAX and XML Data-Binding https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/cc6e91a1-0801-0010-939e- 9a5a5d46efec Last but important page is data.xml which provides the required XML data string. data.xml Page attributes are as follows. Page layout details are as follows. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 8
I have used page event OnRequest. The coding is as follows. DATA : MYBUKRS TYPE EKPO-BUKRS, MYNETPRSUM TYPE I, MYCOUNT TYPE N, BUTXT TYPE T001-BUTXT. XML = SPACE. SELECT DISTINCT BUKRS COUNT( * ) INTO (MYBUKRS, MYNETPRSUM) FROM EKPO WHERE NETPR > AMT GROUP BY BUKRS. MYCOUNT = MYNETPRSUM. CONCATENATE XML '<set name=''' MYBUKRS ''' value=''' MYCOUNT ''' color=''' '0099FF''' INTO XML. SELECT SINGLE BUTXT INTO BUTXT FROM T001 WHERE BUKRS EQ MYBUKRS. CONCATENATE XML ' link=' '''javascript:alert("' BUTXT '");' '''/>' INTO XML. ENDSELECT. Final Touch BSP application property settings are as follows: 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 9
If you wish to use XML data back for further processing select stateful setting. BSP Web Application is now ready for use. Alternative Approach If selected flash component does not have capability to dynamically change data or attribute then different approach can be apply. In such case data.xml flow logic page and JavaScript page fragment are not required. Change the page fragment graph_code.htm as follows. Main page graph.html will be modified to have attributes AMT and XML. Modify little on graph.html page layout in the following piece of HTML code. Page onload event and XML data objects are no more required. Layout could be as follows. <%@page language="abap" %> <%@extension name="htmlb" prefix="htmlb" %> <htmlb:content design="design2003" > <htmlb:page title = "Flash Demo" > <htmlb:form id="myformid" > <table cellpadding=0 STYLE="table-layout:fixed"> 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 10
<tr> <td valign="top"> <htmlb:group id = "Group" title = "Filter Criteria" > <htmlb:groupbody> <htmlb:button text = "Net Price greater than" onclick = "filter_now" /> <htmlb:inputfield id="flt001" /> </htmlb:groupbody> </htmlb:group> </td> </tr> <tr> <td valign="top"> <htmlb:group id = "Group" title = "Flash Graph" > <htmlb:groupbody> <%@include file="graph_code.htm" %> </htmlb:groupbody> </htmlb:group> </td> </tr> </table> </htmlb:form> </htmlb:page> </htmlb:content> Check delta handling property setting for Main page graph.html. Make a use of oncreate page event handler. The possible coding will be as follows. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 11
DATA : MYBUKRS TYPE EKPO-BUKRS, MYNETPRSUM TYPE I, MYCOUNT TYPE N, BUTXT TYPE T001-BUTXT. XML = SPACE. amt = runtime->server->request->get_form_field( 'flt001' ). SELECT DISTINCT BUKRS COUNT( * ) INTO (MYBUKRS, MYNETPRSUM) FROM EKPO WHERE NETPR > AMT GROUP BY BUKRS. MYCOUNT = MYNETPRSUM. CONCATENATE XML '<set name=''' MYBUKRS ''' value=''' MYCOUNT ''' color=''' '0099FF''' INTO XML. SELECT SINGLE BUTXT INTO BUTXT FROM T001 WHERE BUKRS EQ MYBUKRS. CONCATENATE XML ' link=' '''javascript:alert("' BUTXT '");' '''/>' INTO XML. ENDSELECT. BSP application is now ready to work as defined earlier. Conclusion Today for web development, Macromedia Flash components are certainly a top choice of developer. Flash components offers sleek-looking, animated and interactive graph with options like hover caption, animation patterns, hot spots and much more. Approach of flash component usage reduces server burden for creation and rendering of graph. Server role is fully dedicated to supply of data in required fashion. Once data reach to client then Flash component perform the job of rendering. User can take full advantage of resource capacity of client machine which of course required very less for light weight flash component. Client-side requirement is only macromedia flash plug-in, which is very common now-a-days. Default features of Flash components like zoom, panning, play, rewind, etc. also makes viewing a pleasure to user. Author Bio Sandesh Darne has more than seven years experience with SAP and three years of other IT experience. He has expertise on the subjects of ABAP, JAVA, VB, COBOL, DB2, CICS, and JCL. He has rich experience in Web technologies such as BSP, Web Dynpro Java, XML, XSLT, JavaScript, and VBScript. He works extensively with SAP BW, SEM, and SAP HR module in details. Disclaimer & Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 12
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document. 2005 SAP AG The SAP Developer Network: http://sdn.sap.com 13