This blog describes our technical presentation at Sap Inside Track Milan 2011. Together with [Alessandro Spadoni | http://openid.sap.com/ale.spadoni], I will describe native HTML5®
drag & drop and integration with SAP HTTP SICF Services.
What is Html5®Drag&Drop?
The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page. There are a number of different events to attach to monitor the entire DnD process:
drag
dragenter
dragover
dragleave
drop
dragend
Reasons to use Html5®Drag&Drop:
0.1. Independency. It’doesn’t require any Javascript plugin or external Frameworks.
0.2.
Built-in Browser Support: it’s supported by Firefox 3.5+, Chrome 3.0+ , Safari 3.0 , IE 6+</li><li>Integration with other Web page applications: Html5 DnD works across frames, browser tabs and browser windows.</li></ul><p>In this blog I will describe the first one (of two) example pages prepared for Sap Inside Track Milan: an Html Table Drag to Excel .</p><p>An Html5® draggable element requires draggable+ attribute set “true”.
Given a +draggable element of type <table>, we can export his contents (DOM innerHTML) in excel format by calling a *Sap SICF Service* synchronously submitting an HTML form via POST method.</p><p>SAP Service parses HTML code as XML using class CL_IXML and our custom class ZCL_HTML_TABLEPARSER (soon on Code Exchange) . HTTP Response will return a binary Excel as Attachment.</p><p>As the following code and image show, we have a draggable element <table/> and a target element <div/> (an html Widget )</p><p>!https://weblogs.sdn.sap.com/weblogs/images/252056204/script.png|height=242|alt=Html Code|width=447|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/script.png!</p><p> !https://weblogs.sdn.sap.com/weblogs/images/252056204/sito_nologo.png|height=255|alt=Html page with widget|width=263|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/sito_nologo.png!</p><p>The table can be dragged inside the widget. </p><p>The <code>dataTransfer</code> property is core of the DnD. It holds the piece of data sent in a drag action. <code>dataTransfer</code> is set in the <code>dragstart</code> event and read/handled in the <code>drop</code> event. </p><p>Drop event makes an HTTP request to SAP (Submit Html Form). </p><p>We have created Javascript Utility Class TableDrag to bind Events :</p><p>Event dragstart + (HtmlTable setData)
TableDrag.source(, icon:'res/excel_icon.png' });
Event drop (getData HtmlTable and Submit Form to SAP)
TableDrag.target(, class_active:'widget_active',class_inactive:'widget_inactive' }); // css classes
!https://weblogs.sdn.sap.com/weblogs/images/252056204/codice2.jpg|height=105|alt=Html Code|width=435|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/codice2.jpg!
Complete flow chart
!https://weblogs.sdn.sap.com/weblogs/images/252056204/flow2_nologo.jpg|height=500|alt=Flow Chart|width=357|src=https://weblogs.sdn.sap.com/weblogs/images/252056204/flow2_nologo.jpg!</body>
7 Comments
