SlideShare a Scribd company logo
1 of 7
Implementation of GUI Framework
Masahiro Okubo @ HDE
Good evening everyone !
I am Masa.
The session of today, I will speak in English.
In order to develop an administrator screen
of our web application, we have
implemented the GUI framework.
I will describe its implementation.
My puppet. Please call me Masa-san
( Powered by google translate)
Table of Contents
Part1 : Overview of the GUI framework (Today’s session)
Part2 : How to use Bootstrap3
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
This is the table of contents.
I’ll do a Part1 today.
GUI Framework Architecture
This is the Graphical User Interface framework architecture.
We have implemented the part of the yellow. Blue is open source
products and Green is operating environment.
But … I think this is very complex ;-)
Modern Web Browsers (Ex. IE9,Firedox,Chome)
jQuery
Custom JavaScript Library (GUI Components)
Bootstrap3
Custom CSS
Application program
Apache Tomcat
JSONIC Apache Click
Service Framework
Data Access Framework
RDB
Client Side Server Side
Why did I make such a framework?
Web application development have to use various technology,
such as HTML, CSS, JavaScript, Ajax, Java, Servlet, and so on.
therefore that is essentially complex. But, Complexity cause a
bug.
We need the method of development. it hide complexity and
supply simple and unified programming interface.
Another, We want to be able to implement the Graphical User
Interface very cool.
Therefore, the goal of this framework is as follows.
1. Simple and unified programming interface.
2. Able to handle the data easily. (JSON <> POJO)
3. Able to make the cool GUI easily.
We have developed our product by using this framework.
The results
Please look at those pictures.
How is it ? Do not you think that it is verl cool ? :-P
Next
Part1 : Overview of the GUI framework (Today’s session)
Part2 : How to use Bootstrap3 (July)
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.
Next month, I am going to describe Part2. This is how to make
the GUI very cool using Bootstrap3.
See you again :-)

More Related Content

What's hot

Google Polymer Introduction
Google Polymer IntroductionGoogle Polymer Introduction
Google Polymer IntroductionDavid Price
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkBorisMoore
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser InternalsSiva Arunachalam
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerErik Isaksen
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web componentsJarrod Overson
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web componentImam Raza
 
Effective TDD - Less is more
Effective TDD - Less is moreEffective TDD - Less is more
Effective TDD - Less is moreBen Lau
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFu Cheng
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest servicesIoan Eugen Stan
 
How to build a web application with Polymer
How to build a web application with PolymerHow to build a web application with Polymer
How to build a web application with PolymerSami Suo-Heikki
 
Cloud browser testing with Gradle and Geb
Cloud browser testing with Gradle and GebCloud browser testing with Gradle and Geb
Cloud browser testing with Gradle and GebDavid Carr
 

What's hot (20)

Google Polymer Introduction
Google Polymer IntroductionGoogle Polymer Introduction
Google Polymer Introduction
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
Introduction to Browser Internals
Introduction to Browser InternalsIntroduction to Browser Internals
Introduction to Browser Internals
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Os mobile
Os mobileOs mobile
Os mobile
 
Os mobile
Os mobileOs mobile
Os mobile
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web component
 
Effective TDD - Less is more
Effective TDD - Less is moreEffective TDD - Less is more
Effective TDD - Less is more
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Zk doc1
Zk doc1Zk doc1
Zk doc1
 
Nuxt Talk
Nuxt TalkNuxt Talk
Nuxt Talk
 
How browser work
How browser workHow browser work
How browser work
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
How to build a web application with Polymer
How to build a web application with PolymerHow to build a web application with Polymer
How to build a web application with Polymer
 
Cloud browser testing with Gradle and Geb
Cloud browser testing with Gradle and GebCloud browser testing with Gradle and Geb
Cloud browser testing with Gradle and Geb
 
Jasmine 2.0
Jasmine 2.0Jasmine 2.0
Jasmine 2.0
 
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor
 
Coldfusion with Keith Diehl
Coldfusion with Keith DiehlColdfusion with Keith Diehl
Coldfusion with Keith Diehl
 

Viewers also liked

First impressions of Go
First impressions of GoFirst impressions of Go
First impressions of GoYusaku OGAWA
 
Studying Abroad in Cebu
Studying Abroad in CebuStudying Abroad in Cebu
Studying Abroad in Cebuetgjsv
 
Jun.27 fukutomi
Jun.27 fukutomiJun.27 fukutomi
Jun.27 fukutomiiyo16
 
Ui testing with splinter - Fri, 30 May 2014
Ui testing with splinter - Fri, 30 May 2014Ui testing with splinter - Fri, 30 May 2014
Ui testing with splinter - Fri, 30 May 2014Taizo Ito
 
A brief introduction to CentOS 7
A brief introduction to CentOS 7A brief introduction to CentOS 7
A brief introduction to CentOS 7Taizo Ito
 
Hello pivotal tracker
Hello pivotal trackerHello pivotal tracker
Hello pivotal trackersharu1204
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Kazuhiro Ogura
 
Do not rm_log_files
Do not rm_log_filesDo not rm_log_files
Do not rm_log_filesMasato Bito
 
Introduction to bioinformatics
Introduction to bioinformaticsIntroduction to bioinformatics
Introduction to bioinformaticsphilmaweb
 
Implement server push in flask framework
Implement server push in flask frameworkImplement server push in flask framework
Implement server push in flask frameworkChi-Chia Huang
 
Introduction to systemd
Introduction to systemdIntroduction to systemd
Introduction to systemdYusaku OGAWA
 
Garbled text in email
Garbled text in emailGarbled text in email
Garbled text in emailtas-hiro
 
Self Created Load Balancer for MTA on AWS
Self Created Load Balancer for MTA on AWSSelf Created Load Balancer for MTA on AWS
Self Created Load Balancer for MTA on AWSsharu1204
 

Viewers also liked (20)

AWS Cost Visualizer
AWS Cost VisualizerAWS Cost Visualizer
AWS Cost Visualizer
 
First impressions of Go
First impressions of GoFirst impressions of Go
First impressions of Go
 
Studying Abroad in Cebu
Studying Abroad in CebuStudying Abroad in Cebu
Studying Abroad in Cebu
 
DockerCon 14
DockerCon 14DockerCon 14
DockerCon 14
 
Jun.27 fukutomi
Jun.27 fukutomiJun.27 fukutomi
Jun.27 fukutomi
 
Ui testing with splinter - Fri, 30 May 2014
Ui testing with splinter - Fri, 30 May 2014Ui testing with splinter - Fri, 30 May 2014
Ui testing with splinter - Fri, 30 May 2014
 
A brief introduction to CentOS 7
A brief introduction to CentOS 7A brief introduction to CentOS 7
A brief introduction to CentOS 7
 
How to study english
How to study englishHow to study english
How to study english
 
Overview pcidss
Overview pcidssOverview pcidss
Overview pcidss
 
Hello pivotal tracker
Hello pivotal trackerHello pivotal tracker
Hello pivotal tracker
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)
 
Do not rm_log_files
Do not rm_log_filesDo not rm_log_files
Do not rm_log_files
 
Introduction to bioinformatics
Introduction to bioinformaticsIntroduction to bioinformatics
Introduction to bioinformatics
 
Implement server push in flask framework
Implement server push in flask frameworkImplement server push in flask framework
Implement server push in flask framework
 
Introduction to systemd
Introduction to systemdIntroduction to systemd
Introduction to systemd
 
Garbled text in email
Garbled text in emailGarbled text in email
Garbled text in email
 
Authentication
AuthenticationAuthentication
Authentication
 
I18n of java script
I18n of java scriptI18n of java script
I18n of java script
 
The language barrier.
The language barrier.The language barrier.
The language barrier.
 
Self Created Load Balancer for MTA on AWS
Self Created Load Balancer for MTA on AWSSelf Created Load Balancer for MTA on AWS
Self Created Load Balancer for MTA on AWS
 

Similar to Implementation of gui framework part1

Single page applications
Single page applicationsSingle page applications
Single page applicationsDiego Cardozo
 
Catching-up web technologies - an endless story
Catching-up web technologies - an endless storyCatching-up web technologies - an endless story
Catching-up web technologies - an endless storyCleber Jorge Amaral
 
BlackBerry 10 Browser
BlackBerry 10 BrowserBlackBerry 10 Browser
BlackBerry 10 BrowserErik Johnson
 
Agile Software Development by Sencha
Agile Software Development by SenchaAgile Software Development by Sencha
Agile Software Development by SenchaLael Rukius
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Bruce Pentreath
 
INTRODUCTION.docx
INTRODUCTION.docxINTRODUCTION.docx
INTRODUCTION.docxKaiSane1
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Webaleemb
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textToma Velev
 
Svelte the future of frontend development
Svelte   the future of frontend developmentSvelte   the future of frontend development
Svelte the future of frontend developmenttwilson63
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)patrick.t.joyce
 
Micronaut: A new way to build microservices
Micronaut: A new way to build microservicesMicronaut: A new way to build microservices
Micronaut: A new way to build microservicesLuram Archanjo
 
[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진NAVER D2
 
S02 hybrid app_and_gae_restful_architecture_v2.0
S02 hybrid app_and_gae_restful_architecture_v2.0S02 hybrid app_and_gae_restful_architecture_v2.0
S02 hybrid app_and_gae_restful_architecture_v2.0Sun-Jin Jang
 
React for non techies
React for non techiesReact for non techies
React for non techiesAmy Crimmens
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) Sascha Sambale
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDave Malouf
 
F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)
F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)
F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)Tomáš Milata
 

Similar to Implementation of gui framework part1 (20)

Single page applications
Single page applicationsSingle page applications
Single page applications
 
Catching-up web technologies - an endless story
Catching-up web technologies - an endless storyCatching-up web technologies - an endless story
Catching-up web technologies - an endless story
 
BlackBerry 10 Browser
BlackBerry 10 BrowserBlackBerry 10 Browser
BlackBerry 10 Browser
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
Agile Software Development by Sencha
Agile Software Development by SenchaAgile Software Development by Sencha
Agile Software Development by Sencha
 
Swing is not dead
Swing is not deadSwing is not dead
Swing is not dead
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
 
GWT Architectures and Lessons Learned (WJAX 2013)
GWT Architectures and Lessons Learned (WJAX 2013)GWT Architectures and Lessons Learned (WJAX 2013)
GWT Architectures and Lessons Learned (WJAX 2013)
 
INTRODUCTION.docx
INTRODUCTION.docxINTRODUCTION.docx
INTRODUCTION.docx
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
 
Svelte the future of frontend development
Svelte   the future of frontend developmentSvelte   the future of frontend development
Svelte the future of frontend development
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 
Micronaut: A new way to build microservices
Micronaut: A new way to build microservicesMicronaut: A new way to build microservices
Micronaut: A new way to build microservices
 
[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진
 
S02 hybrid app_and_gae_restful_architecture_v2.0
S02 hybrid app_and_gae_restful_architecture_v2.0S02 hybrid app_and_gae_restful_architecture_v2.0
S02 hybrid app_and_gae_restful_architecture_v2.0
 
React for non techies
React for non techiesReact for non techies
React for non techies
 
LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :) LAMP is so yesterday, MEAN is so tomorrow! :)
LAMP is so yesterday, MEAN is so tomorrow! :)
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 
F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)
F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)
F3-DP-2015-Milata-Tomas-java-ee-batch-editor (1)
 

Recently uploaded

Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VThermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VDineshKumar4165
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXssuser89054b
 
Design For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the startDesign For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the startQuintin Balsdon
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Arindam Chakraborty, Ph.D., P.E. (CA, TX)
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxSCMS School of Architecture
 
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptDineshKumar4165
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.Kamal Acharya
 
kiln thermal load.pptx kiln tgermal load
kiln thermal load.pptx kiln tgermal loadkiln thermal load.pptx kiln tgermal load
kiln thermal load.pptx kiln tgermal loadhamedmustafa094
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapRishantSharmaFr
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueBhangaleSonal
 
Engineering Drawing focus on projection of planes
Engineering Drawing focus on projection of planesEngineering Drawing focus on projection of planes
Engineering Drawing focus on projection of planesRAJNEESHKUMAR341697
 
Moment Distribution Method For Btech Civil
Moment Distribution Method For Btech CivilMoment Distribution Method For Btech Civil
Moment Distribution Method For Btech CivilVinayVitekari
 
DC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationDC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationBhangaleSonal
 
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...Amil baba
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdfKamal Acharya
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxJuliansyahHarahap1
 
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best ServiceTamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Servicemeghakumariji156
 

Recently uploaded (20)

Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VThermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - V
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 
Design For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the startDesign For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the start
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
 
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
 
Integrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - NeometrixIntegrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - Neometrix
 
kiln thermal load.pptx kiln tgermal load
kiln thermal load.pptx kiln tgermal loadkiln thermal load.pptx kiln tgermal load
kiln thermal load.pptx kiln tgermal load
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
 
Engineering Drawing focus on projection of planes
Engineering Drawing focus on projection of planesEngineering Drawing focus on projection of planes
Engineering Drawing focus on projection of planes
 
Moment Distribution Method For Btech Civil
Moment Distribution Method For Btech CivilMoment Distribution Method For Btech Civil
Moment Distribution Method For Btech Civil
 
DC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationDC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equation
 
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdf
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptx
 
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best ServiceTamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
 

Implementation of gui framework part1

  • 1. Implementation of GUI Framework Masahiro Okubo @ HDE
  • 2. Good evening everyone ! I am Masa. The session of today, I will speak in English. In order to develop an administrator screen of our web application, we have implemented the GUI framework. I will describe its implementation. My puppet. Please call me Masa-san ( Powered by google translate)
  • 3. Table of Contents Part1 : Overview of the GUI framework (Today’s session) Part2 : How to use Bootstrap3 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 This is the table of contents. I’ll do a Part1 today.
  • 4. GUI Framework Architecture This is the Graphical User Interface framework architecture. We have implemented the part of the yellow. Blue is open source products and Green is operating environment. But … I think this is very complex ;-) Modern Web Browsers (Ex. IE9,Firedox,Chome) jQuery Custom JavaScript Library (GUI Components) Bootstrap3 Custom CSS Application program Apache Tomcat JSONIC Apache Click Service Framework Data Access Framework RDB Client Side Server Side
  • 5. Why did I make such a framework? Web application development have to use various technology, such as HTML, CSS, JavaScript, Ajax, Java, Servlet, and so on. therefore that is essentially complex. But, Complexity cause a bug. We need the method of development. it hide complexity and supply simple and unified programming interface. Another, We want to be able to implement the Graphical User Interface very cool. Therefore, the goal of this framework is as follows. 1. Simple and unified programming interface. 2. Able to handle the data easily. (JSON <> POJO) 3. Able to make the cool GUI easily. We have developed our product by using this framework.
  • 6. The results Please look at those pictures. How is it ? Do not you think that it is verl cool ? :-P
  • 7. Next Part1 : Overview of the GUI framework (Today’s session) Part2 : How to use Bootstrap3 (July) 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. Next month, I am going to describe Part2. This is how to make the GUI very cool using Bootstrap3. See you again :-)