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

Turn leadership mistakes into a better future.pptx
Turn leadership mistakes into a better future.pptxTurn leadership mistakes into a better future.pptx
Turn leadership mistakes into a better future.pptxStephen Sitton
 
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMSHigh Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMSsandhya757531
 
Katarzyna Lipka-Sidor - BIM School Course
Katarzyna Lipka-Sidor - BIM School CourseKatarzyna Lipka-Sidor - BIM School Course
Katarzyna Lipka-Sidor - BIM School Coursebim.edu.pl
 
11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdf11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdfHafizMudaserAhmad
 
Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________Romil Mishra
 
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptJohnWilliam111370
 
THE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTION
THE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTIONTHE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTION
THE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTIONjhunlian
 
Earthing details of Electrical Substation
Earthing details of Electrical SubstationEarthing details of Electrical Substation
Earthing details of Electrical Substationstephanwindworld
 
US Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionUS Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionMebane Rash
 
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...Sumanth A
 
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...Stork
 
Energy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptxEnergy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptxsiddharthjain2303
 
multiple access in wireless communication
multiple access in wireless communicationmultiple access in wireless communication
multiple access in wireless communicationpanditadesh123
 
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor CatchersTechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catcherssdickerson1
 
Robotics Group 10 (Control Schemes) cse.pdf
Robotics Group 10  (Control Schemes) cse.pdfRobotics Group 10  (Control Schemes) cse.pdf
Robotics Group 10 (Control Schemes) cse.pdfsahilsajad201
 
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.elesangwon
 
Engineering Drawing section of solid
Engineering Drawing     section of solidEngineering Drawing     section of solid
Engineering Drawing section of solidnamansinghjarodiya
 
Immutable Image-Based Operating Systems - EW2024.pdf
Immutable Image-Based Operating Systems - EW2024.pdfImmutable Image-Based Operating Systems - EW2024.pdf
Immutable Image-Based Operating Systems - EW2024.pdfDrew Moseley
 
Mine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxMine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxRomil Mishra
 

Recently uploaded (20)

Turn leadership mistakes into a better future.pptx
Turn leadership mistakes into a better future.pptxTurn leadership mistakes into a better future.pptx
Turn leadership mistakes into a better future.pptx
 
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMSHigh Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
 
Katarzyna Lipka-Sidor - BIM School Course
Katarzyna Lipka-Sidor - BIM School CourseKatarzyna Lipka-Sidor - BIM School Course
Katarzyna Lipka-Sidor - BIM School Course
 
11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdf11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdf
 
Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________
 
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
 
THE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTION
THE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTIONTHE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTION
THE SENDAI FRAMEWORK FOR DISASTER RISK REDUCTION
 
Earthing details of Electrical Substation
Earthing details of Electrical SubstationEarthing details of Electrical Substation
Earthing details of Electrical Substation
 
US Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionUS Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of Action
 
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
 
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
 
Energy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptxEnergy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptx
 
multiple access in wireless communication
multiple access in wireless communicationmultiple access in wireless communication
multiple access in wireless communication
 
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor CatchersTechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
 
Robotics Group 10 (Control Schemes) cse.pdf
Robotics Group 10  (Control Schemes) cse.pdfRobotics Group 10  (Control Schemes) cse.pdf
Robotics Group 10 (Control Schemes) cse.pdf
 
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
 
Engineering Drawing section of solid
Engineering Drawing     section of solidEngineering Drawing     section of solid
Engineering Drawing section of solid
 
Immutable Image-Based Operating Systems - EW2024.pdf
Immutable Image-Based Operating Systems - EW2024.pdfImmutable Image-Based Operating Systems - EW2024.pdf
Immutable Image-Based Operating Systems - EW2024.pdf
 
Mine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxMine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptx
 
Designing pile caps according to ACI 318-19.pptx
Designing pile caps according to ACI 318-19.pptxDesigning pile caps according to ACI 318-19.pptx
Designing pile caps according to ACI 318-19.pptx
 

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 :-)