Docstoc

Using AJAX with Windchill

Document Sample
Using AJAX with Windchill Powered By Docstoc
					Using AJAX with Windchill
Jyothi Uppala
Ingersoll Rand
Jyothi Uppala

   2004 MS Software Engineering Graduate with Bachelors in
    Mechanical Engineering.
   Currently working as a Windchill Application Developer at
    Ingersoll Rand Climate Control Technologies.
   Responsible for customizing Windchill Foundation PDM and
    ProjectLink.
Ingersoll-Rand Consists of Four Sectors
   Annual revenues more than $10 billion




                     Quarterly revenues for Q1 2007
#1 in most markets; holding or gaining market
share
Climate Control Technologies
   Three market-leading brands
Climate Control Technologies Sector

   Windchill is used for Product Lifecycle Management process
    – New Product Development
    – Changes to existing products
    – Part, BOM, Drawing, and Standards release

    – Single system of record for all Parts, BOMs, and Drawings.
                                                                           Climate Control Technologies
                                                                                                              Locations



                                                   Langeskov, DK

                                            Unicov, CZ (G)
                                            Kolin, CZ (D)
                                            Prague, CZ

                                            Galway, IE (5)

                                            Brussels, BE
Minneapolis, MN (1)                         Pamplona, ES (H)
Addison, IL                                  Peralta, ES (J)
                                          Huesca, ES (H)                                                                Gunma, JP (M)
Hastings, NE (3)      Gloversville, NY     Alcala, ES (H)
                                                                                                                        Tokyo, JP
                                         Barcelona, ES (9)
Chino, CA              Suwanee, GA                                                                                    Luoyang, CN (N)
                       Louisville, GA (2)
                                                                                                                       Suzhou, CN (E)
Bridgeton, MO (P)                                                                                                       Shanghai, CN
                                 Ciales, PR (K)
                                                                                                                     Shenzhen, CN (C)
                                 Arecibo, PR (K)
Monterrey, MX (F)                                                                                                      Hong Kong, CN



                                                                                  Bangalore, IN (L)




Londrina, BZ
                                                                                                      Auckland, NZ
                                               Windchill and Oracle Implemented
                                                                                                      Tauranga, NZ
                                               Windchill Implemented
                                               Windchill planned in 2007
                                               Windchill planned in 2008
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Interactive Web Applications

   Interactive applications using simple web technologies
    – Demonstrate the similar capabilities of applets.
    – Have ease of use and better performance than the applets.
    – Example: Google Maps

   In Google Maps everything happens almost instantly
    – No waiting of the pages to reload.
    – Only small html portions are sent/received from the server.
    – Refreshes only certain sections of the page.
    – Gives the application the feel of regular desktop applications.
Summary

   With the implementation of an interactive web based solution
    to replace the out of the box Setup Participants Applet, we
    were able to
    – Improve the load time of the page.
    – Improve the total time taken to finish the task.
    – Reduce the number of clicks required.
    – Improve overall user satisfaction.

   The Web based solution is developed using “AJAX” technology
    which is currently used in many interactive websites.
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Traditional Web Application

   Traditional Web Application submits form which is completed
    by user. The web server responds back by sending a complete
    webpage.
   Entire page including HTML formatting is resent and reloaded.
   Application runs as fast as the complexity of the page allows it.
Traditional Web Application (Synchronous)
      Time Line



      Webpage(Browser client)
      User Activity 1                User Activity 2                User Activity 3




      Server-side
       systems          processing                     processing




 Whole page is refreshed when there is a data transfer.
AJAX

   Asynchronous Javascript And XML. AJAX is not a new
    technology but it refers to a group of technologies used in
    conjunction such as XML, DHTML, Javascript and sever side
    processing.
   It uses XMLHttpRequest object with in the web browser that
    allows to transfer data Asynchronously.
   XML, preformatted HTML, plain text, JSON, EMBL can be used
    for transferring data between server and the client.
   AJAX application sends request from the client to the web
    server to retrieve only data that is needed.
   Javascript processes the web server response.
AJAX Based Web Application (Asynchronous)
      Time Line


         Client UI
                     Activity1    Activity2    Webpage




                                               Client-Side
                                               Processing




                                               Server-side
                     processing   processing    systems




 Each interaction requires incremental data transfer and
                incremental page refresh.
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Applets in Windchill 7.0

   The Setup Participants Applet in Windchill 7.0 takes lot of time
    to load over the network.
    – According to our stats, it takes 10 seconds to load in places where
      there is less network latency (North America) and 5 min in places with
      higher network latency (Asia and Europe) for the small setup
      participants applet.
    – Object requires serialization and de-serialization resulting in large
      amounts of data transfer between client and server.
   Java version plug-in conflicts.
   First time loading needs server authentication.
   Assigning user to the selected role needs 4 to 5 clicks.
   Need to save after assigning user to the role.
Integration of AJAX with Windchill

   With the new solution
    – Takes split second to load and assign users/groups to the
      role.
          • Generated page has only html and javascript.
          • For each request, the page sends and receives only required
            amount of data without the need of whole page refresh.
    – No need of additional server authentication.
    – Assigning users/groups to the selected role can be done in 2
      clicks.
    – Assignments of users/groups to the role is saved
      automatically.
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Integration of AJAX with Windchill
   Replaced heavy applet with AJAX based setup participants
    template.
Setup Participant in the task page.

  Predefined roles are        Select role from the drop
   populated automatically.    down.
Finding and Adding Users by User ID

   Users can be added to a role by typing user id and then click
    Add.

                                   Click Add




                       Type the
                     username of
                       the user
Finding/Adding Users by Partial Name

   Users can also be added by typing user‟s last name or first
    name.    Type the last name
               (Uppala) or first
             name (Jyothi) of the
                    user




                                      Click OK
             Click Find
Finding/Adding Users by Partial Name




             Click Add
Removing Users




     Highlight
    the user to
                   Click
    be removed
                  Remove
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Coding with AJAX – Simple Example

   The simple example code I have today is to display the full name of
    the Windchill user if userid is provided.
   I have a take home example to get familiar with AJAX.
   Screenshots of the AJAX Example.




                                  Click
              Enter the            OK            Result
           Windchill userid
Coding with AJAX – Simple Example




              Demo of the Example
Coding with AJAX

   Step 1: Create an XMLHTTPRequest JavaScript object.
    – The process differs slightly depending on whether you are using
      Internet Explorer (5+) with ActiveX enabled, or a standards-compliant
      browser such as IE 7.0, Mozilla Firefox.
    – In the example provided, the AJAXExample.js has a getHTTPObject()
      function which handles creation of XMLHttpRequest based on which
      browser the user is using.
    – var http = getHTTPObject(); // We create the XMLHTTPRequest Object.
Coding with AJAX
 – function getHTTPObject() {
     var xmlhttp;
     if (window.XMLHttpRequest) {//for mozilla and IE 7.0 and above browsers
         xmlhttp = new XMLHttpRequest();
     } else if (window.ActiveXObject) { //other version of IE
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            try {
              xmlhttp = new XMLHttpRequest();
              xmlhttp.overrideMimeType("text/xml");
            } catch (e) {
              xmlhttp = false; }
     }
     return xmlhttp;
 }
Coding with AJAX

   Step 2: Write an event handler.
    – Write an event handler that will be called via an event on a page and
      sends a request for data to the server.
    – The event handler will use various methods of XMLHTTPRequest
      object to:
          • Make the request to the server,
          • Check when the server says that it has completed the request, and
          • Handle the information returned by the server.
Coding with AJAX

   The example has an event handler called displayUserID that assumes
    that an XMLHTTPRequest object has been created and named http.
    The function listens to the onreadystatechange property of the
    XMLHTTPRequest object. Each time this parameter changes, it calls a
    function to handle the http response.
   Make the request to the server by using a GET method of an
    appropriate server-side script as shown in the following example:
            function displayUserID() {
                  var userId = document.getElementById("principalSelector");
                  var currentUrl = url + escape(userId.value);
                  http.open("GET", currentUrl, true);
                  http.onreadystatechange = handleHttpResponse;
                  http.send(null);
             }
Coding with AJAX

   Step 3: Write a server-side function to handle the request and
    send a response back to the client.
    – The UI page can be jsp, html, etc. The server-side code can exist in a
      jsp page. Windchill API calls can be made through the jsp page. In
      the example provided, getUserInfo.jsp takes userId as a parameter
      and returns the full name of the user. This jsp page also illustrates
      how to make Windchill API calls to make the AJAX application work
      with Windchill.
Coding with AJAX
   getUserInfo.jsp has the following code:
    String userId = request.getParameter("userId");
    if(userId != null) {
       try {
          WTUser user = OrganizationServicesHelper.manager.getUser(userId);
          String userFName = user.getFullName();
          response.getWriter().write(userFName);
          response.getWriter().flush();
       } catch (WTException e) {
          e.printStackTrace(); }
    } else {
       response.setStatus(HttpServletResponse.SC_NO_CONTENT);}
Coding with AJAX

   Step 4: Write a function that will handle when the
    response is received.
    – Write a function that will determine when the server has completed processing
      the request and handle the data that was returned. In the example provided,
      function handleHttpResponse shows how to handle the response.
           function handleHttpResponse() {
              if (http.readyState == 4) {
                        if (http.status == 200) {
                                      saveResult(http.responseText);
                        } else {
                                      saveResult("An error occured : " + http.responseText);
                        }
              }
           }
Coding with AJAX

   The function checks for a readyState value of 4. There are various
    numbered states describing the progress of a request, but the only
    state of interest is the value 4, which indicates that the request is
    complete and that the returned data can be used. In this case, the
    information has been returned as simple text via the responseText
    property of the XMLHTTPRequest object. However information can
    be returned as XML, as well.
   In the example provided, saveResult is the function that displays the
    result:
           function saveResult(message){
              var result = document.getElementById("result");
              result.innerHTML="Full Name: " + message;
           }
    Running the Example

   Extract the zip file to the directory location
    <WT_HOME>\codebase\ext
   Make sure the tomcat, method servers are up.
   http://<WT_HOME>/ext/AJAXExample/AJAXExample.jsp
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Disadvantages of AJAX

   Network Latency – interval between user request and server
    response
    – The use of visual feedback(a throbber, such as a moving
      graphical icon    in the „Internet Explorer‟ ) to alert user
      about the background activity or preloading of content, are
      often suggested solution to these latency issues.
   Javascript compatibility
    – Implemented differently by different browsers or versions of
      a particular browser.
Disadvatages of AJAX

    – Needs to be tested carefully for compatibility issues.
   Debugging javascript is difficult when compared to the
    traditional applications.
   Slight learning curve due to new approach.
Advantages of AJAX

   AJAX is an improvement to user interface.
   The result is more responsive since the data interchanged
    between the web browser and web server is vastly reduced.
   Web page loads on demand. This technique greatly cuts the
    bandwidth usage for the web applications that have complex
    logic and functionality.
Advantages of AJAX

   Separation of data, style, format and function. (Example: MVC
    pattern)
    – Programmers are free to adopt what ever works for them.
   Usability and effectiveness.
   No new technologies involved, since it involves HTML,
    Javascript & JSP, which every Windchill application developer
    should have experience with.
   PTC has already used AJAX in Windchill version 9.0 as a part of
    JCA (Java Client Architecture) framework.
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Setup Participants Demonstration




       DEMO of the AJAX based Setup Participant
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
PTC Update on AJAX Use in Windchill 9.0
Agenda

   Background
   Traditional Web pages Vs. AJAX Pages
   Windchill Applets vs. AJAX
   Implementation of Windchill application using AJAX
   Coding with AJAX
   Advantages and Disadvantages of AJAX
   Demo
   PTC Update on AJAX Use in Windchill 9.0
   Useful resources(AJAX)
Frameworks and toolkits

   Many frameworks are available in different languages.
    Some frameworks are for commercial purposes. Some of
    the java Ajax frameworks are
    – AJAX JSP Tag Library.
    – Direct Web Remoting (DWR)
    – One of the famous on is Google Web Toolkit (GWT).

   Dojo javascript toolkit
    – Open-source portable javascript toolkit that lets you build interactive
      modules, animate transactions and constructs Ajax request easily.
    – Powerful and easiest to use Ajax and DHTML.
Frameworks and toolkits

   Development plug-ins
    – ATF (Ajax toolkit framework)
    – Googlipse-GWT Eclipse Plug-in

   Firebug
    – Integrates with Firefox to edit, debug and monitor CSS, HTML and
      javascript live in and webpage
Additional Resources

   Books
    – AJAX in Action by David Crane
    – Foundations of AJAX by Ryan Asleson

   Some helpful links
    – http://ajaxpatterns.org/One-Second_Spotlight
    – http://ajaxian.com/archives/2005/03
    – http://www.javaworld.com/javaworld/jw-10-2005/jw-1017-
      ajax_p.html?page=2
    – http://ajaxpatterns.org/Java_Ajax_Frameworks
NO MORE APPLETS

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:515
posted:5/18/2011
language:English
pages:59