Skip to Content

h3. Overview

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.

 

AJAX @ SAP – an Old Hat!

  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

Let’s look back to the root of the term AJAX. The term AJAX which stands for Asynchronous Javascript and XML was coined by Jesse James Garrett in his article “[AJAX: A New Approach to Web Applications | http://www.adaptivepath.com/publications/essays/archives/000385.php]”. In this article, he stated that AJAX incorporates:

standards-based presentation using XHTML and CSS;0.1.

0.2.

dynamic display and interaction using the Document Object Model;0.1.

0.2.

data interchange and manipulation using XML and XSLT;0.1.

0.2.

+asynchronous data retrieval +using XMLHttpRequest;0.1.

0.2.

and JavaScript binding everything together.

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

SAP Web AS eLearning

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

Now, let’s take a look if WD uses the DOM object in displaying its UI objects dynamically. DOM specification is platform and  language independent.  In most browsers, JavaScript is the language used for accessing and manipulating DOM object. So what’s the difference with DHTML? I rather would say that the DHTML Object Model extends the W3C DOM by defining additional object properties and eventing support. Here’s a link that describes some of the added properties and events for the Document object  (http://www.w3schools.com/htmldom/dom_obj_document.asp). For details please refer to

DOM Level 2 Core Spec

and W3C DOM Implementation in IE  (http://msdn.microsoft.com/workshop/author/dom/domoverview.asp#implement). 

The NWA loads four JavaScript files on its initial screen just after logging in – the sapUrMapi_ie6.js, sapWdSsr_ie6.js, urMessageBundle.js and popup_ie6.js. I exported these scripts from my HttpWatch and saved them locally for analysis. Looking at these scripts, access and manipulation of the Document object could be seen in some of the defined functions. For example, in the following function defined in the +sapUrMapi_ie6.js, +it is evident that WD makes use of the DHTML Object Model.

(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. 

The article

An Introduction to the Web Dynpro Protocol

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.

In NWA, when clicking on the a button or a link, especially on Search button, it will show you an animated wait GIF window (see Figure 1) and disable you to interact with the page until the results are returned. The data retrieval seems not asynchronous. And almost every event like table record and tab selection, disables the user to interact with the page until the response it received and processed. Moreover, I also looked at the JavaScript codes for the declarations and usage of either the XMTHttp ActiveX or the XMLHttpRequest objects, but couldn’t find one.

image

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.

image

Figure 2. WD table component (on a browser)

image

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. 

image

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.

image

Figure 5. The content stream of the response for the table item selection in Figure 4.

!https://weblogs.sdn.sap.com/weblogs/images/27304/clickTwo.jpg|height=305|alt=image|width=530|src=https://weblogs.sdn.sap.com/weblogs/images/27304/clickTwo.jpg|border=0!</body>

To report this post you need to login first.

5 Comments

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

  1. Anonymous
    Hi!

    I mainly agree with the statements you made and I think this is a very good blog.
    For me, an application is “Ajax”, regardless of the underlying technology, when it is smart enough to offer proposals to the user in realtime (like Google Suggest) and things like that, which the user make believe, that he is using an intelligent application… Well, I am talking of this stunning wow-effect when using such an application. Web Dynpro simply implements the single-page-interface-paradigm which in my opinion is not enough to be real “Ajax”, although I like it very much. But I am expecting the Web Dynpro Model to be enhanced for Ajax-features in the future.
    Regards, Ingo

    (0) 
    1. Anonymous
      Hello Ingo,

      Thanks for the comments. I myself like the WD concepts especially from the developer’s perspective. I don’t have that much experience with WD components yet, and I really like to see a very rich-featured WD building blocks in the future just like the ones in Flash.

      Regards, Jo

      (0) 
  2. Nishant Naveen
    Hi Jo Gel Santiago,

         This was a very enlightening blog, and your findings compliment mine.

    1. I agree that when a user has to wait everytime he performs some action, it is not AJAX.

    In AJAX, users should retain the control to do some other activity, and should not wait for server’s response.

    2. I also agree that scxml is used only in case of rich clients and currently for browsers(http clients), http protocol is used for data transfer between servers and clients. This is the smart intelligence shown by webdynpro, and it uses protocols which are better suited to the requesting clients.

    As the server and clients start supporting more and more support bits, I am sure that you will find that webdynpro starts looking more and more like an implementation of AJAX. It’s support bits concept allow the technology to evolve and fulfill into its design goals in future.

    As of now, I will rather say that SAP webdynpro is a technology having support to do AJAX, rather than an AJAX implementation.

    (0) 
  3. bk kim
    hi~

    I have read “    Importing Complex JavaBean model into WebDynpro by creating relationships for the model classes ” in your blog.

    I would like to have the example sample source which is offered in your blog, If it could be possible.

    I have some problem in Web Dynpro programming.

    1.There is a table.

    2.Check the checkBox.

      2.1.1  Then, client event happens.
      2.1.2  Whenever Checking a checkbox,
             it communicates with server due to life-         cycle of Web Dynpro.

      2.1.3     Instead of commuication everytime with   server when I select an each checkbox,
    I would like to modify the checkbox information in Context by single communication
    with the server after selecting several check boxes.
                                  
           3.    JavaScript  could  solve this problem in  an Web programming environment, but Web Dynpro does not support JavaScript. To solve this problem, I want to use AJAX  to do that.

    4.   Is It possible  to solve this proble by using groovy ? otherwise is there any solution

    To solve this problem by using AJAX, I request the sample source from you.
    If you give an answer to me, I will appriciate that.
    I will look forward to hearing from you.
    Also I want to receive my mail.
    My Email address is bkkim@bsgglobal.com

    Have a good day!

    From B.K KIM

    (0) 
  4. Alexander Gahr
    I totally agree to your article. I hope some developers of webdynpro see the changes and improvemt in usability the new ajax things bring.
    Also for business programs it would be very useful to have web-application behaving more like normal programs. 

    For example if I want to scroll down in one table on a webpage the is no need to refresh all other elements on this page.

    So it would be very good if the coming versions of webdynpro would support this kind of ajax behavior. I think usability is one of the keys for future business.

    Alex

    (0) 

Leave a Reply