Tuesday, September 6, 2011

Rich web Interfaces with DHTMLX and Google App Engine


Developers building applications on top of the Google App Engine for Java can choose between several frameworks to build rich user interfaces. This post illustrates how to create a simple CRUD application, using DHTMLX Java Tag Library and JPA. The sample provided starts by creating a UI skeleton, which incorporates the DHTMLX widgets, with the use of JavaScript, to integrate the widgets with server side code.


The User Interface 



The application major features are:
  • Dynamic Loading 
    Keeping thousand of records in a data grid is a common requirement for most applications. Smart Rendering increases overall performance with big amounts of data, activating a dynamic loading to fetch data from the server when needed.

  • Edit in place
    In the great book Designing Web Interface, written by Bill Scott and Theresa Neil, they underline the value of the Make It Direct principle, allowing the user to directly edit content in place.
  • Right Click Context Menu
    The Fitts's Law highlights the value to keep the tools close, to improve the user interaction. This principle has been applied providing a  context menu, so that the user can select a row and access the related functions (delete and insert in this case) using the right click.

Client 
To create the user interface the DHTMLX Java Tag Designer has been used (useful but not mandatory). You can find step by step instructions here. Below the HTML code of  the page.


  1. <%@ taglib uri="http://www.mylaensys.com/dhtmlx" prefix="dhtmlx" %>
  2. <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5.   <title></title>
  6.   <link href="dhtmlx.css" rel="stylesheet" type="text/css" />
  7.   <link href="dhtmlx_custom.css" rel="stylesheet" type="text/css" />
  8.   <style></style>          
  9.  </head>
  10.  <script type="text/javascript" src="dhtmlx.js"/>
  11.  <body>
  12.      <!-- body -->
  13.  </body>
  14. </html>
  15. <dhtmlx:body name='initializeDHTMLX' imagePath='imgs/'>
  16.   <dhtmlx:layout name='layout' id='content'  pattern='1C' >
  17.     <dhtmlx:layoutcell name='a' text='a' hideHeader='true'>
  18.       <dhtmlx:toolbar  name='toolbar'>
  19.         <dhtmlx:toolbarButton  id='button_ins' text='Insert Row'/>
  20.         <dhtmlx:toolbarButton  id='button_del' text='Delete Row'/>
  21.       </dhtmlx:toolbar>
  22.       <dhtmlx:grid   name='grid'>
  23.         <dhtmlx:column  name='sales' header='Sales' type='ed'/>
  24.         <dhtmlx:column  name='title' header='Title' type='ed'/>
  25.         <dhtmlx:column  name='author' header='Author' type='ed'/>
  26.         <dhtmlx:column  name='price' header='Price' type='ed'/>
  27.         <dhtmlx:menu name='grid_menu'>
  28.           <dhtmlx:menuChild  id='button_ins' text='Insert Row'/>
  29.           <dhtmlx:menuChild  id='button_del' text='Delete Row'/>
  30.         </dhtmlx:menu >
  31.      </dhtmlx:grid>
  32.      <dhtmlx:statusbar name="status"/>
  33.     </dhtmlx:layoutcell>
  34.   </dhtmlx:layout>
  35. </dhtmlx:body>
  36. <script language='JavaScript' type='text/javascript'>
  38.     function initialize() {
  39.         initializeDHTMLX();
  40.     }
  42.     dhtmlxEvent(window,'load', initialize);
  43. </script>

The user interface is declared within the <dhtmlx:body> tags, using a Layout component as container for the Toolbar,  Status Bar, and Grid. 


  1. var busy = false,sort_c = "",sort_d = "";
  2. function initialize() {
  3.    initializeDHTMLX();
  5.    toolbar.attachEvent("onClick", on_click );
  6.    grid_menu.attachEvent("onClick", on_click );
  8.    grid.attachEvent("onBeforeSorting", function(ind,type,direction){
  9.       if(!busy) {
  10.          sort_c = this.getColumnId(ind);
  11.          sort_d = ((sort_d == "des") ? "asc": "des");
  12.          load_data();
  13.          grid.setSortImgState(true,ind,direction);
  14.       }
  15.       return false;
  16.    });
  18.    grid.enableSmartRendering(true);
  19.    grid.enableValidation(true, true, true, true);
  20.    grid.setColValidators("ValidInteger,NotEmpty,NotEmpty,ValidInteger");
  21.    load_data();
  23.    dp = new dataProcessor("controller");
  24.    dp.setTransactionMode("POST");
  25.    dp.setUpdateMode("cell");
  26.    dp.enableDataNames(true);
  27.    dp.init(grid);
  28. }

In first step, the event handlers for toolbar and menu are attached to the components. The initialization proceed with the grid setup, enabling the SmartRendering, setting up the validation, and loading the data. OnBeforeSorting event handler attached to the grid  provides the support for server side sort processing.   
Last step of initialization, is the data processor configuration, which takes care to send back to the server updates that occurred on the grid; calling enableDataNames ensures that the column names will be included as parameters in the POST request. 
The two additional functions defined for toolbar/menu command handling  (on_click) and data loading (load_data) are visible below :

  1. function load_data() {
  2.    if( !busy ) {
  3.       grid.clearAll();
  4.       grid.loadXML("controller?orderby="+sort_c+"&dir="+sort_d);
  5.    }
  6. }
  8. function on_click(id) {
  9.    var selected = grid.getSelectedRowId();
  10.    if( null != selected) {
  11.       if( "button_ins" == id ) {
  12.   grid.addRow((new Date()).valueOf(),[0,'','',0],grid.getRowIndex(selected));
  13.       } else if( "button_del" == id ) {
  14.          var answer = confirm("Are you sure ?")
  15.          if (answer){
  16.             grid.deleteRow(selected);
  17.          }
  18.       }
  19.    }
  20. }


The load_data function resets the grid component  and sends an ajax  request (GET) to the server to retrieve the data. The on_click detects which button or menu item has been selected by the user and performs the corresponding operation.


Server
On the server side, the Java class Book is annotated for persistence, getter and setter omitted for short. You can see that the names of the attributes match the names of the columns.
  1. @PersistenceCapable(detachable = "true")
  2. public class Book {
  3.     @PrimaryKey
  4.     @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
  5.     private Long id;
  7.     @Persistent
  8.     private Integer sales;
  10.     @Persistent
  11.     private String title;
  13.     @Persistent
  14.     private String author;
  16.     @Persistent
  17.     private BigDecimal price;
  18. }


The doGet method of the servlet retrieves the data and feeds the grid. 

  1. public class ControllerServlet extends HttpServlet {
  2.  @Override
  3.  public void doGet(HttpServletRequest request,
                       HttpServletResponse response) throws IOException {
  4.       EntityManager em = EMF.get().createEntityManager();
  5.       try {
  6.          Integer start = new Integer(0);
  7.          Integer count = new Integer(maxrows);
  8.          Integer total = new Integer(0);
  10.          if (!isEmpty(request.getParameter("posStart"))) {
  11.           start = Integer.parseInt(request.getParameter("posStart"));
  12.          }
  14.          if (!isEmpty(request.getParameter("count"))) {
  15.            count = Integer.parseInt(request.getParameter("count"));
  16.            count = count > maxrows ? maxrows : count;
  17.          }
  19.          if (start.intValue() == 0) {
  20.            Query query = em.createQuery("select count(b) from " +
               Book.class.getName() + " b");
  21.            total = (Integer) query.getSingleResult();
  22.          }
  24.          String orderBy = getOrderBy(
             request.getParameter("orderby"), request.getParameter("dir")
             );
  25.          Query query = em.createQuery("select from " +
             Book.class.getName() + orderBy );
  26.          query.setFirstResult(start);
  27.          query.setMaxResults(count);
  29.          List<Book> books = query.getResultList();
  31.          response.setContentType("text/xml");
  32.          response.getWriter().print( toXML(total, start, books) );
  33.          response.getWriter().close();
  34.      } finally {
  35.          em.close();
  36.      }
  37.   }
  38.  }
  39. }


The smart rendering option, enabled during grid initialization, adds as parameters the starting position of the record (posStart) and the number of records to be returned (count). The doGet method processes these parameters plus sort parameters, if any, executes the query on the data store, and returns the retrieved rows as XML. 
Update operations are performed in the doPost method of the ControllerServlet :


  1. public class ControllerServlet extends HttpServlet {
  2.   @Override
  3.   protected void doPost(HttpServletRequest request,
                            HttpServletResponse response)
  4.      EntityManager em = EMF.get().createEntityManager();
  5.      try {
  6.         String action = "";
  7.         String id = request.getParameter("gr_id");
  8.         String type = request.getParameter("!nativeeditor_status");
  10.         Book book = new Book();
  11.         if ("inserted".equalsIgnoreCase(type)) {
  12.            action = "insert";
  13.            BeanUtils.populate(book, request.getParameterMap());
  14.            em.persist(book);
  15.            em.refresh(book);
  16.         } else {
  17.            Query query = em.createQuery("select from " + Book.class.getName()
                             + " where id = " + id);
  18.            book = (Book) query.getSingleResult();
  20.            if ("updated".equalsIgnoreCase(type)) {
  21.                action = "update";
  22.                BeanUtils.populate(book, request.getParameterMap());
  23.                em.persist(book);
  24.            } else if ("deleted".equalsIgnoreCase(type)) {
  25.                action = "delete";
  26.                em.remove(book);
  27.            }
  29.       }
  31.       if (!isEmpty(action)) {
  32.           response.setContentType("text/xml");
  33.           response.getWriter().print("<data><action type='" + action + "' sid='" + id + "' tid='" + book.getId() + "' /></data>");
  34.           response.getWriter().close();
  35.       }
  37.    } catch (Exception e) {
  38.        e.printStackTrace();
  39.    } finally {
  40.         em.close();
  41.    }
  42.  }


DHTMLX data processor component has its own protocol to exchange information with the server (additional information is available on DHTMLX website). This sample implementation, detects the operation triggered by the data processor and performs the appropriate data store operation.
Posted by at
Labels: , ,

29 comments:

  1. Aruna RamMarch 5, 2019 at 9:23 PM

    It was a good tip! This is very helpful to increase my knowledge and Thanks for giving the valid post.


    Excel Training in Chennai
    Advanced Excel Training in Chennai
    corporate training in chennai
    Tableau Training in Chennai
    Pega Training in Chennai
    Spark Training in Chennai
    Embedded System Course Chennai
    Linux Training in Chennai
    Excel Training in Chennai
    Advanced Excel Training in Chennai

    ReplyDelete
  2. Anbarasan14May 21, 2019 at 3:59 AM

    Fabulous post. Irrespective of the age groups your post is liked by all. Thanks for sharing.

    Spoken English Class in Chennai
    IELTS Coaching Centre in Chennai
    English Speaking Course in Mumbai
    IELTS Classes in Mumbai
    IELTS Coaching in Mumbai
    IELTS Mumbai
    Best IELTS Coaching in Mumbai
    IELTS Center in Mumbai

    ReplyDelete
  3. luckysJuly 15, 2019 at 8:05 AM

    weighing machine for kitchen 

    ReplyDelete
  4. diviSeptember 13, 2019 at 1:58 AM

    Thanks to the admin you have spend a lot for this blog I gained some useful info for you. Keep doing. web design company in velachery

    ReplyDelete
  5. shreekaviFebruary 1, 2020 at 3:51 AM


    Get inspired by your blog. Keep doing like this....
    Selenium Training in Chennai
    Selenium Training in Bangalore
    Selenium Training in Coimbatore
    Best Selenium Training in Bangalore
    Selenium Training Institute in Bangalore
    Selenium Classes in Bangalore
    selenium training in marathahalli
    Selenium training in Btm
    Ielts coaching in bangalore
    German classes in bangalore

    ReplyDelete
  6. sasiApril 10, 2020 at 1:29 AM

    It's a very awesome article! Thanks a lot for sharing information.
    Selenium Training Institute in Bangalore
    Best Selenium Training Institute in Bangalore
    python course in hyderabad
    Software Testing Course in Chennai
    best angularjs training in bangalore
    web designing training institute in chennai
    python training in marathahalli
    Software Testing Training in Bangalore
    Angularjs Training in hyderabad
    Hadoop Training in Coimbatore

    ReplyDelete
  7. chandhran May 8, 2020 at 1:45 AM

    Your post is really good. it is really helpful for me to improve my knowledge in a right way..
    DOT NET Training in Bangalore
    Dot NET Training in Marathahalli
    DOT NET Training Institute in Marathahalli
    DOT NET Training Institutes in Bangalore
    DevOps Training in Bangalore
    PHP Training in Bangalore
    .Net training in chennai
    dot net course in coimbatore
    .net training in coimbatore
    DOT NET Course in Chennai

    ReplyDelete
  8. banupriyaMay 19, 2020 at 1:30 AM

    The blog you shared is very good. I expect more information from you like this blog. Thank you.
    mvc training in chennai
    mvc course in chennai
    mvc chennai
    mvc classes in chennai
    google cloud certification training in chennai
    mysql training in Chennai
    Leadership Training in chennai
    matlab Training in Chennai

    ReplyDelete
  9. bairavJuly 10, 2020 at 7:26 AM

    Nice article. I liked very much. All the informations given by you are really helpful for my research. keep on posting your views.
    German Classes in Chennai | Certification | Language Learning Online Courses | GRE Coaching Classes in Chennai | Certification | Language Learning Online Courses | TOEFL Coaching in Chennai | Certification | Language Learning Online Courses | Spoken English Classes in Chennai | Certification | Communication Skills Training

    ReplyDelete
  10. arshiyaJanuary 19, 2021 at 9:56 PM

    Such a wonderful blog, I got new information from this article.
    ios mobile application development
    ios apps development
    hadoop technologies
    importance of cloud computing
    what is cloud in cloud computing
    node js advanced interview questions

    ReplyDelete
  11. office.com/setupApril 25, 2021 at 11:40 AM

    Amazing website, Love it. Great work done.
    www.office.com/setup

    ReplyDelete
  12. vé máy bay đi CanadaJune 6, 2021 at 6:53 PM

    Aivivu chuyên vé máy bay, tham khảo

    giá vé máy bay đi Mỹ khứ hồi

    bay từ mỹ về việt nam

    vé máy bay việt nhật vietnam airline

    thuê xe đi sân bay nội bài

    ReplyDelete
  13. Mark WatsonOctober 13, 2021 at 10:39 PM

    If you encounter an issue that Orbi parental controls don’t support, then it is advisable to reset the Netgear router. Apart from this, you might accidentally change some files that might cause an error. In such a situation, it is advisable to reset the Orbi router in your home.

    ReplyDelete
  14. NickDecember 23, 2021 at 5:09 AM

    Thank you so much for sharing such an intresting blog with us.

    ReplyDelete
  15. Tamil TypingJanuary 3, 2022 at 7:02 AM

    Thanks for sharing informative post. Are looking for best Tamil typing tool online, make use of our Tamil typing software to make translation faster. Thirumana Porutham in Tamil | Samacheer Kalvi Books PDF

    ReplyDelete
  16. liftndriftpaperplaneFebruary 24, 2022 at 6:28 AM

    Incredible post I should say and a debt of gratitude is in order for the data. Schooling is certainly a tacky subject. Be that as it may, is still among the main subjects within recent memory. I appreciate your post and anticipate more. You have made some valid statements there. I looked on the web to study the issue and discovered a great many people will oblige your perspectives on this site...
    how to make a paper airplane eagle | how to make a boomerang airplane | the eagle paper airplane | best paper airplane design for distance and accuracy | best paper airplanes for distance and speed

    ReplyDelete
  17. saisatcharitraDecember 1, 2022 at 1:58 AM

    Amazing blog very interesting thanks for the post...Sai satcharitra pdf
    Sai Satcharitra Telugu Pdf
    Sai Satcharitra Tamil Pdf
    Sai Satcharitra Hindi Pdf
    Sai Satcharitra Bengali Pdf

    ReplyDelete
  18. KamranSeptember 17, 2023 at 11:16 PM

    burdur
    bursa
    çanakkale
    çankırı
    çorum
    denizli
    diyarbakır
    GOZ

    ReplyDelete
  19. ÇağdaşSeptember 20, 2023 at 4:22 AM

    aydın
    balıkesir
    bayburt
    bilecik
    bolu
    DDLF

    ReplyDelete
  20. Baha55October 6, 2023 at 9:57 AM

    van
    kastamonu
    elazığ
    tokat
    sakarya
    İEX

    ReplyDelete
  21. StardustWanderer1Q2October 20, 2023 at 1:40 AM

    tekirdağ evden eve nakliyat
    şırnak evden eve nakliyat
    bitlis evden eve nakliyat
    aksaray evden eve nakliyat
    karaman evden eve nakliyat
    3CLK

    ReplyDelete
  22. _Takipci Satin al_February 15, 2024 at 12:42 AM

    36766
    mexc
    ısırgan sabunu
    poloniex
    bitcoin hangi bankalarda var
    4g mobil proxy
    en iyi kripto para uygulaması
    mexc
    btcturk
    en eski kripto borsası

    ReplyDelete
  23. ___________Takipci-Satin-almaFebruary 29, 2024 at 3:20 PM

    2293D
    kredi kartı ile kripto para alma
    kucoin
    binance referans kod
    mexc
    bitcoin nasıl kazanılır
    paribu
    binance 100 dolar
    telegram türk kripto kanalları
    referans kod

    ReplyDelete
  24. takipci__________March 4, 2024 at 6:24 AM

    D9EF9
    bitcoin nasıl kazanılır
    July 2024 Calendar
    February 2024 Calendar
    papaya meyvesi
    telegram kripto kanalları
    bitexen
    mexc
    paribu
    sohbet canlı

    ReplyDelete
  25. A5E2ADanaeB4EAEMarch 7, 2024 at 10:52 PM

    BAE96
    Çamlıdere
    Toprakkale
    Çanakkale
    Süleymanpaşa
    Kiraz
    Sarıcakaya
    Suruç
    Doğanşar
    Kozlu

    ReplyDelete
  26. 5E79BElainaD1348April 8, 2024 at 8:00 PM

    47367
    kripto paralar
    vds satın al
    ehliyet soruları çöz
    sunucu
    gal coin yorum
    facebook reklam verme
    bat coin yorum
    facebook para kazanma
    rad coin yorum

    ReplyDelete
  27. 3DA4EMichelle633AFApril 13, 2024 at 9:39 PM

    1C891
    ----
    ----
    ----
    ----
    ----
    matadorbet
    ----
    ----
    ----

    ReplyDelete
  28. C3ACBHugo79365June 11, 2024 at 4:27 PM

    16252
    whatsapp görüntülü şov

    ReplyDelete
  29. A1A26JadeFB328July 10, 2024 at 11:44 PM

    686D6
    whatsapp görüntülü show güvenilir

    ReplyDelete

Subscribe to: Post Comments (Atom)