SlideShare a Scribd company logo
1 of 31
Download to read offline
Introduction to Google Web Toolkit
                  part-1
Muhammad “Ghanoz” Ghazali
                                1

JUG Bandung board member
Who am I?
●   Muhammad Ghazali a.k.a. Ghanoz
●   JUG Bandung board member
●   Mahasiswa “tingkat akhir” Teknik Informatika
    Universitas Widyatama
●   Ketua himpunan mahasiswa teknik informatika
    Universitas Widyatama
●   OSUM leader Universitas Widyatama


                                                   2
GWT
(Google Web Toolkit)



                       3
Agenda
➔   What is GWT
➔   Why GWT
➔   GWT can do what
➔   Development Workflow
➔   Major GWT components
➔   GWT app run mode
➔   Available widgets
➔   GWT plugins for IDEs
➔   Getting Started
                                    4
➔   Resources
What is GWT

              5
Apa itu GWT
●   Web app framework
●   toolkit for building and optimizing complex
    browser-based applications




                                                  6
Why GWT

          7
Why GWT
➔   GWT handles all cross-browser issues for the
    developer.
➔   Optimize the JavaScript script downloads based on
    user profile
➔   Google Web Toolkit is open source software




                                                        8
GWT can do what

                  9
GWT can do what
➔   Help you to create an ajax-based web app using Java
➔   Avoid you to write a JavaScript code to create a cool web
    app
➔   Give web app the feel of dektop app




                                                                10
Development workflow

                       11
Development workflow
➔   Edit Java code, then view changes immediately without re-
    compiling
➔   Step through live AJAX code with your Java debugger
➔   Compile and deploy optimized, cross-browser JavaScript




                                                                12
Major GWT components


                   13
Major GWT components
➔   GWT Java-to-JavaScript Compiler
    Java → JavaScript
➔   GWT Hosted Web Browser
    run and execute app in hosted mode, commonly used for
    debugging
➔   JRE emulation library
    JavaScript implementations of the commonly used classes in
    the Java standard class library
➔   GWT Web UI class library
                                                                   14
    A set of custom interfaces and classes for creating widgets.
GWT app run mode

                   15
GWT app run mode
●   Hosted mode
    Run as Java bytecode (within JVM). Used for development,
    supporting hot swapping of code and debugging.
●   Web mode
    The app run as pure JavaScript and HTML. Used for
    deployment.




                                                           16
Available widgets

                    17
Available widgets
●   HTML primitives (Button, Radio Button, Checkbox,
    TextBox, PasswordTextBox, TextArea, Hyperlink, ListBox,
    Table etc.)
●   PushButton, ToggleButton
●   MenuBar
●   Tree
●   TabBar
●   DialogBox
●


                                                          18
Available widgets
●   Panels (PopupPanel, StackPanel, HorizontalPanel,
    VerticalPanel, FlowPanel, VerticalSplitPanel,
    HorizontalSplitPanel, DockPanel, TabPanel,
    DisclosurePanel)
●   RichTextArea
●   SuggestBox (auto-complete)




                                                       19
Available widgets




                    20
Available widgets




                    21
GWT plugin for IDEs

                      22
GWT plugin for IDEs
●   GWT4NB for NetBeans
    https://gwt4nb.dev.java.net/
●    Cypal Studio for GWT
    http://code.google.com/p/cypal-studio/
●   Eclipse
    http://code.google.com/eclipse/




                                             23
Getting Started

                  24
Getting started
●   Download GWT:
    http://code.google.com/webtoolkit/download.html
●   GWT starting guide
    http://code.google.com/webtoolkit/documentation/
●   GWT tutorial
    http://code.google.com/webtoolkit/doc/latest/tutorial/
●   GWT FAQs
    http://code.google.com/support/bin/topic.py?topic=10034
                                                              25
Resources

            26
Resource
●   GWT homepage
    http://code.google.com/webtoolkit/
●   GWT starting guide
    http://code.google.com/webtoolkit/documentation/
●   GWT FAQs
    http://code.google.com/support/bin/topic.py?topic=10034
●   GWT official Blog
    http://googlewebtoolkit.blogspot.com/
                                                              27
Resource
●   GWT application examples
    http://code.google.com/webtoolkit/examples/
●   GWT 2.0 Developers Guide
    http://code.google.com/webtoolkit/doc/latest/DevGuide.html
●   Coding Basic
    http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasics.html
●   GWT official tutorial:
    http://code.google.com/webtoolkit/doc/latest/tutorial/
                                                                             28
Questions?

             29
Let's keep in touch...
Blog: http://muhammadghazali.web.id/blog
Facebook: Muhammad Ghanoz Ghazali
Twitter: @muhghazali
Plurk: http://plurk.com/muhammadghazali
GoogleTalk: muhammadghazali2480
e-mail:
             ●   muhammadghazali@netbeans.org



                                                30
Thank You
    :)

            31

More Related Content

What's hot

Configure python and wsgi
Configure python and wsgiConfigure python and wsgi
Configure python and wsgi
Sitthykun LY
 

What's hot (20)

Vagrant and puppet: Deployment made easy
Vagrant and puppet: Deployment made easyVagrant and puppet: Deployment made easy
Vagrant and puppet: Deployment made easy
 
BreizhBeans - Web components
BreizhBeans - Web componentsBreizhBeans - Web components
BreizhBeans - Web components
 
Push notifications on Google Chrome
Push notifications on Google ChromePush notifications on Google Chrome
Push notifications on Google Chrome
 
Google web toolkit
Google web toolkitGoogle web toolkit
Google web toolkit
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?
 
Android Made Simple
Android Made SimpleAndroid Made Simple
Android Made Simple
 
Configure python and wsgi
Configure python and wsgiConfigure python and wsgi
Configure python and wsgi
 
【初心者歓迎】Gitハンズオンセミナー 導入編
【初心者歓迎】Gitハンズオンセミナー 導入編【初心者歓迎】Gitハンズオンセミナー 導入編
【初心者歓迎】Gitハンズオンセミナー 導入編
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Building a Company atop of Open Source
Building a Company atop of Open SourceBuilding a Company atop of Open Source
Building a Company atop of Open Source
 
Commit on day one thanks to vagrant & puppet!
Commit on day one thanks to vagrant & puppet!Commit on day one thanks to vagrant & puppet!
Commit on day one thanks to vagrant & puppet!
 
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
[Srijan Wednesday Webinars] Breaking Limitations using Drupal 8
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Vagrant & CFEngine - LOPSA East 2013
Vagrant & CFEngine - LOPSA East 2013Vagrant & CFEngine - LOPSA East 2013
Vagrant & CFEngine - LOPSA East 2013
 
apidays LIVE Hong Kong - Let's get started development of API client library ...
apidays LIVE Hong Kong - Let's get started development of API client library ...apidays LIVE Hong Kong - Let's get started development of API client library ...
apidays LIVE Hong Kong - Let's get started development of API client library ...
 
Grunt JS - Getting Started With Grunt
Grunt JS - Getting Started With GruntGrunt JS - Getting Started With Grunt
Grunt JS - Getting Started With Grunt
 
Gwt Presentation
Gwt PresentationGwt Presentation
Gwt Presentation
 
JLayout for extension developers
JLayout for extension developersJLayout for extension developers
JLayout for extension developers
 
jQuery #OpenExpoDay 2014
jQuery #OpenExpoDay 2014jQuery #OpenExpoDay 2014
jQuery #OpenExpoDay 2014
 
Android best practices 2015
Android best practices 2015Android best practices 2015
Android best practices 2015
 

Similar to Introduction to Google Web Toolkit - part 1

Introduction to Google Web Toolkit
Introduction to Google Web ToolkitIntroduction to Google Web Toolkit
Introduction to Google Web Toolkit
Didier Girard
 

Similar to Introduction to Google Web Toolkit - part 1 (20)

GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Tools
 
gwt-pushstate
gwt-pushstategwt-pushstate
gwt-pushstate
 
Gwt training presentation
Gwt training presentationGwt training presentation
Gwt training presentation
 
Introduction to Google Web Toolkit
Introduction to Google Web ToolkitIntroduction to Google Web Toolkit
Introduction to Google Web Toolkit
 
Google web toolkit ( Gwt )
 Google web toolkit ( Gwt ) Google web toolkit ( Gwt )
Google web toolkit ( Gwt )
 
Gerrit JavaScript Plugins
Gerrit JavaScript PluginsGerrit JavaScript Plugins
Gerrit JavaScript Plugins
 
Vaadin Jump Start
Vaadin Jump StartVaadin Jump Start
Vaadin Jump Start
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
GWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platform
 
Headless browser: puppeteer and git client : GitKraken
Headless browser: puppeteer and git client : GitKrakenHeadless browser: puppeteer and git client : GitKraken
Headless browser: puppeteer and git client : GitKraken
 
How to start with Google Web Toolkit
How to start with Google Web ToolkitHow to start with Google Web Toolkit
How to start with Google Web Toolkit
 
GWT_Framework
GWT_FrameworkGWT_Framework
GWT_Framework
 
Update on the open source browser space (16th GENIVI AMM)
Update on the open source browser space (16th GENIVI AMM)Update on the open source browser space (16th GENIVI AMM)
Update on the open source browser space (16th GENIVI AMM)
 
GWT 2.0 - December 15 2009
GWT 2.0 - December 15 2009GWT 2.0 - December 15 2009
GWT 2.0 - December 15 2009
 
GeoServer Developers Workshop
GeoServer Developers WorkshopGeoServer Developers Workshop
GeoServer Developers Workshop
 
Twitter Bootstrap for web UI development
Twitter Bootstrap for web UI development Twitter Bootstrap for web UI development
Twitter Bootstrap for web UI development
 
Volunteering at YouSee on Technology Support
Volunteering at YouSee on Technology SupportVolunteering at YouSee on Technology Support
Volunteering at YouSee on Technology Support
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
 
Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02
 
GWT 2.0 - OSCON 2010
GWT 2.0 - OSCON 2010GWT 2.0 - OSCON 2010
GWT 2.0 - OSCON 2010
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Recently uploaded (20)

Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 

Introduction to Google Web Toolkit - part 1

  • 1. Introduction to Google Web Toolkit part-1 Muhammad “Ghanoz” Ghazali 1 JUG Bandung board member
  • 2. Who am I? ● Muhammad Ghazali a.k.a. Ghanoz ● JUG Bandung board member ● Mahasiswa “tingkat akhir” Teknik Informatika Universitas Widyatama ● Ketua himpunan mahasiswa teknik informatika Universitas Widyatama ● OSUM leader Universitas Widyatama 2
  • 4. Agenda ➔ What is GWT ➔ Why GWT ➔ GWT can do what ➔ Development Workflow ➔ Major GWT components ➔ GWT app run mode ➔ Available widgets ➔ GWT plugins for IDEs ➔ Getting Started 4 ➔ Resources
  • 6. Apa itu GWT ● Web app framework ● toolkit for building and optimizing complex browser-based applications 6
  • 8. Why GWT ➔ GWT handles all cross-browser issues for the developer. ➔ Optimize the JavaScript script downloads based on user profile ➔ Google Web Toolkit is open source software 8
  • 9. GWT can do what 9
  • 10. GWT can do what ➔ Help you to create an ajax-based web app using Java ➔ Avoid you to write a JavaScript code to create a cool web app ➔ Give web app the feel of dektop app 10
  • 12. Development workflow ➔ Edit Java code, then view changes immediately without re- compiling ➔ Step through live AJAX code with your Java debugger ➔ Compile and deploy optimized, cross-browser JavaScript 12
  • 14. Major GWT components ➔ GWT Java-to-JavaScript Compiler Java → JavaScript ➔ GWT Hosted Web Browser run and execute app in hosted mode, commonly used for debugging ➔ JRE emulation library JavaScript implementations of the commonly used classes in the Java standard class library ➔ GWT Web UI class library 14 A set of custom interfaces and classes for creating widgets.
  • 15. GWT app run mode 15
  • 16. GWT app run mode ● Hosted mode Run as Java bytecode (within JVM). Used for development, supporting hot swapping of code and debugging. ● Web mode The app run as pure JavaScript and HTML. Used for deployment. 16
  • 18. Available widgets ● HTML primitives (Button, Radio Button, Checkbox, TextBox, PasswordTextBox, TextArea, Hyperlink, ListBox, Table etc.) ● PushButton, ToggleButton ● MenuBar ● Tree ● TabBar ● DialogBox ● 18
  • 19. Available widgets ● Panels (PopupPanel, StackPanel, HorizontalPanel, VerticalPanel, FlowPanel, VerticalSplitPanel, HorizontalSplitPanel, DockPanel, TabPanel, DisclosurePanel) ● RichTextArea ● SuggestBox (auto-complete) 19
  • 22. GWT plugin for IDEs 22
  • 23. GWT plugin for IDEs ● GWT4NB for NetBeans https://gwt4nb.dev.java.net/ ● Cypal Studio for GWT http://code.google.com/p/cypal-studio/ ● Eclipse http://code.google.com/eclipse/ 23
  • 25. Getting started ● Download GWT: http://code.google.com/webtoolkit/download.html ● GWT starting guide http://code.google.com/webtoolkit/documentation/ ● GWT tutorial http://code.google.com/webtoolkit/doc/latest/tutorial/ ● GWT FAQs http://code.google.com/support/bin/topic.py?topic=10034 25
  • 26. Resources 26
  • 27. Resource ● GWT homepage http://code.google.com/webtoolkit/ ● GWT starting guide http://code.google.com/webtoolkit/documentation/ ● GWT FAQs http://code.google.com/support/bin/topic.py?topic=10034 ● GWT official Blog http://googlewebtoolkit.blogspot.com/ 27
  • 28. Resource ● GWT application examples http://code.google.com/webtoolkit/examples/ ● GWT 2.0 Developers Guide http://code.google.com/webtoolkit/doc/latest/DevGuide.html ● Coding Basic http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasics.html ● GWT official tutorial: http://code.google.com/webtoolkit/doc/latest/tutorial/ 28
  • 30. Let's keep in touch... Blog: http://muhammadghazali.web.id/blog Facebook: Muhammad Ghanoz Ghazali Twitter: @muhghazali Plurk: http://plurk.com/muhammadghazali GoogleTalk: muhammadghazali2480 e-mail: ● muhammadghazali@netbeans.org 30
  • 31. Thank You :) 31