Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Implementation of GUI Framework part3

Implementation of GUI Framework part3

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Implementation of GUI Framework part3

  1. 1. Implementation of GUI Framework Part3 : Introduction of GUI Components using JavaScript Masahiro Okubo @ HDE
  2. 2. Table of Contents Part1 : Overview of the GUI framework Part2 : How to use Bootstrap Part3 : Introduction of GUI Components using JavaScript (Today’s session) Part4 : Communitation with the server using Ajax and JSON Part5 : How to convert a POJO (Plain Old Java Object) JSON Part6 : Web application architecture on the server side I am glad to see you again to everyone. Today, I would like to tell about GUI Components of our products.
  3. 3. GUI Framework Architecture Client Side Server Side Application program Custom JavaScript Library (GUI Components) jQuery Custom CSS Bootstrap Modern Web Browsers (Ex. IE9,Firedox,Chome) RDB Data Access Framework Service Framework JSONIC Apache Click Apache Tomcat There are a lot of JavaScript based UI framerowk but I made it by myself.
  4. 4. Look back ■Separation of control and screen design I want to do to free the screen layout. I want to use the excellent CSS such as BootStrap. ■Simple and unified interface I think if you have developed in JavaScript with leave to the skill of the programmer, be disastrous to happen. Need some framework. ■Ease of data handling Retrive a value from form, check, and post to server , processed, and stored in the DB… too cumbersome !
  5. 5. Flow of processing Form Table Control Model Server Side submit attach nofity (onSubmit) get & check insert insert (JSON-RPC) result result display result notify find find result display data
  6. 6. Write HTML of Form <form id="ac-form"> <input type="hidden" name="status" value="0"> <input type="hidden" name="lastLoginDate" value=""> <div class="form-group"> <label>$messages.user.dialog.account</label> <div class="col-sm-6"> <input type="text" name="account"> </div> </div> <div class="form-group"> <label>$messages.user.dialog.username</label> <div class="col-sm-6"> <input type="text" name="username"> </div> </div> <div class="form-group"> <label>$messages.user.dialog.password</label> <div class="col-sm-6"> <input type="password" name="password" autocomplete="off" disabled> </div> </div> <div class="form-group"> <label>$messages.user.dialog.confPassword</label> <div class="col-sm-6"> <input type="password" name="confPassword" autocomplete="off" disabled> </div> </div> </form>
  7. 7. Write JavaScript persimmon.app.Account = function(id, prop) { this.init_(id, prop); }; persimmon.app.Account.prototype = { init_ : function(id, prop) { this.model_ = persimmon.lib.DataSource.getInstance(“Account”); this.form_ = persimmon.lib.component.Form(“ac-form”, null); this.submit_ = $(document).find(“ac-submit”); // using jQuery this.submit_.on(‘click’, this, this.insertData); }, insertData : function(event) { var my = event.data; var account = my.form.get(); if (my.confirmPassword(account)) { my.model.insert(account); } else { // display error message. } } }; var account = { status : 0, lastLoginDate : “”, account : “okubo”, username : “Masahiro Okubo”, password : “mypassword”, confPassword : “mypassword” };
  8. 8. Write HTML of Table <table id="ac-table"> <thead> <tr> <th data-name="account" data-link="id">$messages.user.table.list.account</th> <th data-name="name">$messages.user.table.list.name</th> <th data-name="lastLoginDate">$messages.user.table.list.lastLoginDate</th> </tr> </thead> <tbody> </tbody> </table>
  9. 9. Write JavaScript persimmon.app.Account = function(id, prop) { this.init_(id, prop); }; persimmon.app.Account.prototype = { init_ : function(id, prop) { this.model_ = persimmon.lib.DataSource.getInstance(“Account”); this.form_ = persimmon.lib.component.Form(“ac-form”, null); this.submit_ = $(document).find(“ac-submit”); // using jQuery this.submit_.on(‘click’, this, this.insertData); this.table_ = persimmon.lib.Table(“ac-table”, { source : this.model, order : [ { name : “account”, ascending : true } ], rows : 10 }); this.table_.refresh(); // display data }, insertData : function(event) { var my = event.data; var account = my.form.get(); if (my.confirmPassword(account)) { my.model.insert(account); } else { // display error message. } } };
  10. 10. Next Part1 : Overview of the GUI framework Part2 : How to use Bootstrap (Today’s session) Part3 : Introduction of GUI Components using JavaScript Part4 : Communitation with the server using Ajax and JSON Part5 : How to convert a POJO (Plain Old Java Object) JSON Part6 : Web application architecture on the server side Thank you for your attention. I would like to describe the server communication using Ajax and JSON next time.

×