I have seen several blogs on whether how SAP Web Dynpro is related to AJAX technology and one among them claims that SAP had this technology even before the term was coined! I had been tracking on the comments on those posts, but neither of these posts cleared up my doubt regarding to which category WD really lies. So I get a copy of the book on AJAX and checked as well the Web 2 generation application concepts. Then made a little experiment by looking into the client-side codes of a Web Dynpro application and gathered relevant results, which I will present in this article. Here are the links to the blogs related to AJAX and Web Dynpro subject. I would suggest you to read these blogs as well.
Are Web Dynpros and AJAX Related? (Are Web Dynpros and Ajax Related?)
Please note that I am not a Web Dynpro expert nor related to Web Dynpro UI framework development. I am just one of those people who are asking questions like “Is Web Dynpro really an AJAX?” “+Why WD is slow compared to other AJAX apps? +”. In the next sections, I will share to you the results of my little experiment by looking into the exchanged codes &message streams.
Before proceeding into the next sections, I would like to stress out that we are talking about browser-based Web Dynpro application here and not those running on top of SmartClients.
The AJAX Definition
standards-based presentation using XHTML and CSS;0.1.
dynamic display and interaction using the Document Object Model;0.1.
data interchange and manipulation using XML and XSLT;0.1.
+asynchronous data retrieval +using XMLHttpRequest;0.1.
I won’t discuss about the incorporated technologies as there are so many references available in the internet and books explaining what they are. I will leave it to your initiative if you like to know more details about them. Now, let’s take this definition as a criteria whether a certain web application or framework conforms or not; and look into a Web Dynpro application to check it out.
The Web Dynpro Framework
Again, I won’t talk about the details of Web Dynpro. I will leave it to the reader to check on the
section for details regarding this UI framework. Let’s look at what technology or standard does Web Dynpro use in the context of UI presentation, dynamic interaction, data exchange and data retrieval. I used the NetWeaver Administrator(NWA) application to be my subject Web Dynpro application and HttpWatch for Internet Explorer to look at the streams being exchanged between the server and the client. (You may also use Ethereal to capture your network packets. Here I chose HttpWatch as its function does suffice to only capture HTTP messages.) </p>
(1) UI Presentation
I looked at the page source of the initial page of NWA just after logon. My HttpWatch captured several GET/POST interaction with the server of several types of MIME objects. The NWA’s initial page uses HTML and CSS for its presentation. Looking at the exchanged page source, you will see the header
and you will see some elements like
which is not in conformance with the XHTML syntax. For details of XHTML syntax, refer to XHTML Syntax (http://www.w3schools.com/xhtml/xhtml_syntax.asp).
How about the CSS? Yes, WD does use CSS to maintain its styles. The NWA loads a 206kb of an external CSS file named ur_ie6.css. </p>
(2) Dynamic Interaction
and W3C DOM Implementation in IE (http://msdn.microsoft.com/workshop/author/dom/domoverview.asp#implement).
(3) Data Exchange & Manipulation
I tried tracing the exchange streams between my IE browser and the server to look at their types. Unfortunately, I haven’t seen any exchange of text/xml format and as well as any XSL files being downloaded from the server. The data exchange between the browser and server is purely HTML. The browser uses the POST/ GET action, and the response where the data is, is in the text/html format.
discusses the underlying protocol of WD framework. It seems that the exchange of XML message, the <scxml> message to be specific, is only supported for SmartClient like SAPWDP Java Client; and that’s what the prefix SC stands for. For a common client, like an internet browser, message exchange is in its HTML format.
It may just happen that it was not necessary in the NWA for the data to be exhanged in XML format nor its manipulation using an XSLT.
(4) Data Retrieval
Reading on some forum posts related to AJAX, it seems that the asynchronous data retrieval using the XMLHttpRequest object is that main focus for an “AJAX” application. This XMLHttpRequest object was first supported in IE5 in the form of an XMLHttp ActiveX object. Later then it was adopted and natively implemented into the Mozilla (http://www.mozilla.org) project (I think around year 2001 or 2002?) . The support of this XMLHttpRequest object enables the client to exchange messages with the server asynchronously; retaining the UI responsiveness while the request/response is being processed by the callback function in the background. Moreover, it simplifies the data exchange in XML format with server and connectivity with XML based services.
Figure 1. WD Wait Panel
So what now?
After interacting with NWA, which is a WD application and looking into the protocol and data exchanges, personally I could not put Web Dynpro into the AJAX category. Here are my views on this matter.
First the UI presentation is not in the form of XHTML. However, I don’t consider this as one factor to disqualify WD from the AJAX category. There are many Web applications that are considered AJAX applications but are not in XHTML syntax like Gmail. Gmail presentation is still based in HTML and not XHTML. And whether the AJAX application should be client-rendered or server-rendered depends solely on the design of the architecture on which portion of the client UI should be processed at the client and at the server. AJAX does not limit the UI rendering to be done on the client alone. (see the last section of this article)
In the context of dynamic display and interaction, Web Dynpro components (might be just some of them) seem not to harness the power of DOM to the full. It seems to me that WD focus the use of DHTML object on its eventing mechanism rather than enriching its component’s features for usability. Let’s take the component shown in Figure 2. With this component, I can’t reorder my column to the left or right, or even just to change the column’s width. However, in the SmartClient client counterpart, I’m able to change the column width and their order as well. Figure 3 below is a screenshot taken from a WD application using the SAPWDP Java client and not a brower rendered table.
Figure 2. WD table component (on a browser)
Figure 3. SAPWDP Java Client table component: Column width and order customization thru user interaction
For the browser-based components, it is possible to realize these features by harnessing the power of DOM object manipulation. Perhaps the future WD components will have the functionalities of a rich-client components.
Next, regarding the data exchange, I was pretty surprised that the exchange between the browser and server for the NWA application is NOT
conducted in a DELTA-only manner. Here’s a simple interaction that I tried. (I could not show you the whole page screenshot as SDN limits the size of images to 600×400). Figures 4 and 5 are partial screenshots from the same window state. Figure 4 is the upper portion and Figure 5 is the lower portion of the window.
Figure 4. The NWA – MI Device Maintenance window
The screen in Figure 4 shows the Device Maintenance administration dialog. What I did was choose on one of the record in the table on the lower right. It triggered a selection event and posted a request to the server; the server’s response partial content is shown in Figure 5. In the next two figures (Figure 5 & 6), what I would like you to focus on is the header message “Welcome JOGELG” which appears on the upper left hand side of the NWA screen. Now, I chose another item on the table to trigger a selection event as shown Figure 6. I also captured the contents of the response stream.
Figure 5. The content stream of the response for the table item selection in Figure 4.