This document provides an overview of building rich internet applications (RIAs) using Google Web Toolkit (GWT). It introduces GWT and discusses its key features and advantages, such as allowing developers to write RIA frontends completely in Java instead of JavaScript. The document covers GWT architecture, common widgets and layouts, stylesheets, and supported browsers. It also provides instructions on setting up a basic GWT project and deploying GWT applications in hosted or web mode.
Infrastructure as data with Ansible: systems and cloud
deployment and management for the lazy developer
Abstract: Great programmers and sysadmins are lazy people: rightly,
they prefer avoiding manual, time consuming and error-prone tasks such
as installing and configuring a Linux/Apache/Tomcat cluster for the
tenth time.
Ansible, an infrastructure (server, cloud) deployment automation &
configuration both powerful AND simple (in most cases simpler than
shell scripts and maven poms!), will make developers and it staff more
productive and effective.
http://www.ansible.cc
Infrastructure as data with Ansible: systems and cloud
deployment and management for the lazy developer
Abstract: Great programmers and sysadmins are lazy people: rightly,
they prefer avoiding manual, time consuming and error-prone tasks such
as installing and configuring a Linux/Apache/Tomcat cluster for the
tenth time.
Ansible, an infrastructure (server, cloud) deployment automation &
configuration both powerful AND simple (in most cases simpler than
shell scripts and maven poms!), will make developers and it staff more
productive and effective.
http://www.ansible.cc
Web components are coming! This presentation gives you a solid intro on web components and why they are the future of the web. After an introduction to the tools and concepts you will see hands-on how easy it is to develop modular web apps with Polymer and Vaadin Components.
The new polymer ecosystem makes really easy to share UI components between developers. Let's GWT take advantage of the JS ecosystem to create amazing UIs.
GWTcon Florence 2015
Headless Drupal: A modern approach to (micro)services and APIssparkfabrik
Drupal offre agli sviluppatori un ambiente di lavoro moderno, che permette di modellare dati ed esporli via API nativamente; questo lo rende un ottimo candidato sia per sviluppare un CMS headless usando un frontend framework moderno, sia per lo sviluppo di microservizi.
In questo talk vi presenteremo alcuni casi d’uso per sfruttare al meglio le potenzialità di Drupal fuori dal classico contesto CMS.
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)Igalia
Antia Puentes and Lorenzo Tilve talk about Igalia's work on the Automotive Grade Linux Demo Platform with Chromium and the Web Application Manager, from the March 17-18th 2021 Automotive Grade Linux All Members Meeting.
https://www.youtube.com/watch?v=35SgM_g8ePk&t=1s
Quick overview of building plugins using pure JavaScript or Google Web Toolkit (GWT), and a group discussion to identify important UI extension points for Gerrit contributors to make available.
React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.
Web components are coming! This presentation gives you a solid intro on web components and why they are the future of the web. After an introduction to the tools and concepts you will see hands-on how easy it is to develop modular web apps with Polymer and Vaadin Components.
The new polymer ecosystem makes really easy to share UI components between developers. Let's GWT take advantage of the JS ecosystem to create amazing UIs.
GWTcon Florence 2015
Headless Drupal: A modern approach to (micro)services and APIssparkfabrik
Drupal offre agli sviluppatori un ambiente di lavoro moderno, che permette di modellare dati ed esporli via API nativamente; questo lo rende un ottimo candidato sia per sviluppare un CMS headless usando un frontend framework moderno, sia per lo sviluppo di microservizi.
In questo talk vi presenteremo alcuni casi d’uso per sfruttare al meglio le potenzialità di Drupal fuori dal classico contesto CMS.
HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)Igalia
Antia Puentes and Lorenzo Tilve talk about Igalia's work on the Automotive Grade Linux Demo Platform with Chromium and the Web Application Manager, from the March 17-18th 2021 Automotive Grade Linux All Members Meeting.
https://www.youtube.com/watch?v=35SgM_g8ePk&t=1s
Quick overview of building plugins using pure JavaScript or Google Web Toolkit (GWT), and a group discussion to identify important UI extension points for Gerrit contributors to make available.
React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.
Javascript Essentials - Cisco Live Barcelona 2019Cisco DevNet
Find how to build applications with Cisco: http://cs.co/cleur191444 ~ Get a broad overview of the Javascript language, platforms, and ecosystems, to better identify when to use the programming language, but also start creating your own scripts, and feel comfortable enough to run and extend existing scripts.
If you have some basic programming skills and are looking forward to understanding more about Javascript, this session is for you! Expect lots of demos showing how Javascript is used at Cisco: from command line tools to custom scripts running on devices, dynamic Web pages, and Web APIs exposing enterprise data.
Node.js is a powerful JavaScript platform that helps you build server applications. It has become a popular option for building network applications and web servers. Explore how Node.js interacts with the multitude of add-on open source modules to build a modern web application in no time.
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
Java EE 7 provides a strong foundation for developing the back end for your HTML5 mobile applications. This heavily code-driven session shows you how you can effectively utilize Java EE 7 as a back end for your Apache Cordova mobile applications. The session demonstrates Java EE 7 technologies such as JAX-RS 2.0, WebSocket, JSON-P, CDI, and Bean Validation. It provides an overview of the basics of Apache Cordova as well as the tooling support added in NetBeans 8. The session also demonstrates an integrated approach to rapidly developing HTML5 mobile applications with Java EE 7 and NetBeans and concludes with best practices and pitfalls.
This presentation takes a pragmatic approach to comparing JavaFX and HTML5, using an application written in JavaFX versus the same functionality written in HTML5 to illustrate the pros and cons of each.
This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891Cisco DevNet
The React library for Webex Teams (formally Cisco Spark) allows developers to easily incorporate Cisco Cloud Collaboration capabitilies into your application.
Throughout this session, we'll describe the architecture of the Webex Widgets, and detail how to start from the existing React opensource project on github to create a customized version of the Webex Teams Widgets.
DEVNET-3891
https://www.ciscolive.com/us/learn/sessions/session-catalog/?search=DEVNET-3891
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
Building Rich Internet Applications Using Google Web Toolkit
1. Building Rich Internet Applications
Using Google Web Toolkit (GWT)
Karthik Shyamsunder
October 2008
Karthik Shyamsunder
2. Who am I?
+ Karthik Shyamsunder
▪ Principal Engineer, VeriSign Inc.
▪ Application Architect for the VeriSign Naming Division
▪ Adjunct Faculty at Johns Hopkins University
▪ Speak at conferences on Architecture, Security, Performance, Distributed
Computing, Language/Design
2
VeriSign Proprietary and Confidential Information
3. Overall Goal of this Session
1. Introduce you to the GWT framework and
application development
2. Discuss key features in GWT that will
allow you to build no compromise AJAX
applications
3
VeriSign Proprietary and Confidential Information
4. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
4
VeriSign Proprietary and Confidential Information
5. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
5
VeriSign Proprietary and Confidential Information
6. What are Rich Internet Applications?
+ Web applications that have the features and
Backend
functionality of traditional desktop applications
Processes
+ Typically do the following: Server Logic
▪ run in a web browser, or do not require software
installation
▪ run locally in a secure environment called a Server
sandbox
+ Typically transfer the processing necessary for the
user interface to the web client but keep the bulk of
the data back on the application server
(Sandbox
+ Make asynchronous/synchronous calls to the Client Engine)
backend based on user actions/events
+ “Thick Client” Application
VeriSign Proprietary and Confidential Information
7. Technologies for Building RIAs
+ Several technologies available for building
Rich Internet Applications Backend
Processes
+ Key Technologies for building RIAs Server Logic
▪ Adobe Flex
▪ Microsoft Silverlight Server
▪ Java Applets/WebStart
▪ AJAX
+ Other Technologies and Frameworks for
(Sandbox
building RIAs Client Engine)
▪ Java FX
▪ Open Laszlo
VeriSign Proprietary and Confidential Information
8. Building RIAs using Java EE and AJAX
We can classify building applications in AJAX into 2 :
1. Client Side AJAX Development
– Presentation using HTML/JSP pages using client side frameworks such as
Scriptaculous, JQuery, Dojo client side components
– Presentation logic using JavaScript
– Server Side development using traditional Java EE Servlets/Services
exposing backend services as REST, XML RPC Web Services
– Call backend business logic in the background using the JavaScript
language and XMLHttpRequest object built into the browser
2. Server Side AJAX Development
– Presentation using component frameworks JSTL tag libraries such as JBoss
RichFaces, Icesoft Icefaces built on on top of JSF
– Presentation logic done as event handlers in JSF component model
– Call to backend business logic using JSF event Model
VeriSign Proprietary and Confidential Information
9. Challenges with typical AJAX development
+ JavaScript
▪ Not a strongly typed language
▪ Static Type checking?
▪ Code completion?
▪ Runtime-only bugs
+ Browser compatibilities = “if/else soup”
▪ OK, we have frameworks
▪ Too many frameworks!
+ Juggling multiple languages (JavaScript, JSP tags,
Java, XML, HTML etc.)
▪ Less modularization
▪ Maintenance nightmare
+ Poor debugging
▪ Window.alert(), Firebug
▪ But what about end to end
+ Back button
+ Limited IDE support
9
VeriSign Proprietary and Confidential Information
11. Introducing GWT
+ What is GWT?
▪ GWT is an open source Java development framework
▪ Provides set of tools for building AJAX apps in the Java language
+ What makes GWT interesting?
▪ Write, run, test, and debug everything in JAVA!
+ GWT ≠ applets
▪ GWT converts your Java source into equivalent JavaScript
+ Is GWT a compiler?
▪ GWT has a compiler, but it has lot more to offer…
11
VeriSign Proprietary and Confidential Information
12. Why Use Java Language for AJAX Development?
+ Static type checking in the Java language boosts productivity while
reducing errors
+ Common JavaScript errors (typos, type mismatches) are easily
caught at compile time rather than by users at runtime
+ Code prompting/completion is widely available
+ Automated Java refactoring is pretty snazzy these days
+ Java-based OO designs are easier to communicate and understand,
thus making your AJAX code base more comprehensible with less
documentation.
12
VeriSign Proprietary and Confidential Information
13. Advantages of GWT
+ No need to learn/use JavaScript language
▪ Leverage Java programming knowledge you already have
+ No need to handle browser incompatibilities and quirks
▪ GWT handles them for you
+ No need to learn/use DOM APIs
▪ Use Java APIs
+ No need to handle forward/backward buttons browser-history
▪ GWT handles it for you
+ No need to build commonly used Widgets
▪ Most of them come with GWT
+ Can send complex Java types to/from the server
▪ Data gets serialized across network
13
VeriSign Proprietary and Confidential Information
14. Advantages of GWT
+ Leverage various tools of Java programming language for
writing/debugging/testing
▪ For example, NetBeans or Eclipse
+ Internationalization
▪ GWT includes a flexible set of tools to help you internationalize your
applications and libraries
▪ GWT internationalization support provides a variety of techniques
+ JUnit integration
▪ GWT's direct integration with JUnit lets you unit test both in a debugger
and in a browser and you can even unit test asynchronous RPCs
+ Support by major company
▪ From the company that popularized Ajax in the first place
▪ Company won't go away like perhaps with AjaxTags
14
VeriSign Proprietary and Confidential Information
15. Disadvantages of GWT
+ Only for Java developers
▪ Most Ajax environments do JavaScript on the client and have a choice
for the server. GWT is based entirely around Java.
+ Big learning curve
▪ Java developers can deploy with AjaxTags in just a few minutes,
whereas it takes much longer to get anything running with GWT.
+ Cumbersome deployment
▪ Clumsy and poorly documented process to deploy on a regular Java-
based Web server.
+ Nonstandard approach to integrate JavaScript
▪ You never put direct JavaScript in your HTML. Instead, you use JSNI to
wrap JavaScript in Java.
– Very powerful in the long run, but hard to get used to at first.
+ Unusual approach
▪ Fundamentally different strategy than all other Ajax environments
makes evaluation and management buyoff harder
15
VeriSign Proprietary and Confidential Information
16. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
16
VeriSign Proprietary and Confidential Information
17. Downloading and Installing GWT
+ Official Site for GWT is http://code.google.com/webtoolkit/
+ Downloading GWT
▪ You can download the latest version of software from
http://code.google.com/webtoolkit/download.html
▪ Licensed under Apache 2.0 open source license scheme
▪ Latest version of the software is GWT 1.5
+ Installing GWT
▪ Extract the ZIP file into wherever you want to install the toolkit
▪ That’s it!
+ Setting up the development environment
▪ Add {INSTALL-DIR}gwt-windows-1.5.2 to your PATH
▪ This is so that the many of the toolkit commands are available
+ Since GWT is java based tool ensure that you have JDK 1.5 or
above and JAVA_HOME is set
17
VeriSign Proprietary and Confidential Information
18. Application Development Steps
+ Create an Eclipse application
▪ Use projectCreator and applicationCreator scripts
▪ You can make non-Eclipse projects also, but the tutorial examples
assume Eclipse. I use MyEclipse, but it is similar in both versions.
+ Edit auto-generated HTML file
▪ Called AppName.html
– Under src/package.../public folder in Eclipse
▪ Give ids to regions where controls will be placed
+ Edit auto-generated Java application class
▪ Class: package...client.AppName
– Under src folder in Eclipse
▪ Method: onModuleLoad
▪ Create controls and give them event handlers
▪ Insert controls into HTML page
– RootPanel.get(quot;htmlIDquot;).add(control);
18
VeriSign Proprietary and Confidential Information
19. Application Development Steps
1. Make sure PATH includes GWT install directory
▪ Or specify full path for scripts
2. Make a temporary directory for your project
▪ Directory name is arbitrary
3. Make a blank Eclipse project
Names must match
▪ DOS> projectCreator –eclipse GwtTestProject
4. Make a starting-point application
▪ DOS> applicationCreator –eclipse GwtTestProject
myPackage.client.GwtTestApplication Name of driver class
that will be created.
5. Start Eclipse and import project Rightmost package
name must be quot;clientquot;.
▪ File > Import > Existing Projects into Workspace
– Browse to directory from (2) above and click quot;Finishquot;
– If you specify quot;copy filesquot; (usual approach), then delete the
temporary directory from (2) above
19
VeriSign Proprietary and Confidential Information
20. Application Development Steps
Starting-point HTML file. You will edit this extensively.
When you make server-side code, register servlet in here.
Client-side code must be in quot;clientquot; package. Server-
side code can also import and call classes in this
package (other than main app). All code in this
package will eventually get translated into JavaScript.
Starting point client-side code. You will edit this extensively.
After you have finished testing and debugging, you can
double-click this to generate www directory containing HTML
and JavaScript that can run in a regular browser. But an
easier way to build these files is to run in hosted mode and
then click Compile/Browse (see later slides).
Not needed if you run within an IDE.
20
VeriSign Proprietary and Confidential Information
21. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
21
VeriSign Proprietary and Confidential Information
23. Google Web Toolkit - Architecture
Server Side Client Side
.java .java
Web/Application
Server
D
E
Java GWT P
L HTTP/
Compiler Compiler O REST/
Y Web Services
XML/
JSON/
(AJAX Runtime
RPC
Engine)
.class .html .html
.html . js
VeriSign Proprietary and Confidential Information
24. Running GWT Applications
Hosted Mode
▪ Application is run as Java byte
code within the JVM
▪ Developers spend most of their
time in hosted mode to take
advantage of Java's debugging
facilities and other features
+ Web mode
▪ Application is run as pure
JavaScript and HTML, compiled
from your original Java source
code with the GWT Java-to-
JavaScript compiler
▪ You deploy this JavaScript and
HTML to production, so end users
sees web version of your app
24
VeriSign Proprietary and Confidential Information
25. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
25
VeriSign Proprietary and Confidential Information
26. What browsers does GWT Support?
+ Officially as of mid 2008, GWT supports the following browsers:
▪ Firefox 1.0, 1.5, 2.0 and 3.0
▪ Internet Explorer 6 and 7
▪ Safari 2 and 3
▪ Opera 9.0
26
VeriSign Proprietary and Confidential Information
27. GWT Widgets and Layout
27
VeriSign Proprietary and Confidential Information
28. UI components & Event Programming Model
+ Programming model similar UI frameworks such as Swing
+ Primary difference between Swing and GWT is here widgets are
dynamically transformed to HTML rather than pixel-oriented graphics
+ Using widgets makes it much easier to quickly build interfaces that will
work correctly on all browsers
Button btnOk = new Button(“OK”);
CheckBox married= new CheckBox(“Married”);
+ Events in GWT use the quot;listener interfacequot; model similar to other user
interface frameworks (like Swing)
btnOk.addClickListener(new MyClickListener());
+ Possible to manipulate the browser's DOM directly using the DOM
interface, but better to use Java classes from Widget library
28
VeriSign Proprietary and Confidential Information
29. Style with CSS
+ Each widget class has an associated style name that binds it to a
CSS rule
▪ For example GWT Button has a style called “gwt-Button”
+ A widget’s style name can be set using
▪ setStyleName(String)
+ Also possible to assign an id to a particular component to create a
CSS rule that applies to just one component
▪ <div id=“my-button-id”/>
+ To set the id for a GWT widget, retrieve its DOM Element and then set
the id attribute as follows
▪ Button b = new Button();
▪ DOM.setElementAttribute(b.getElement(), quot;idquot;, quot;my-button-idquot;)
+ Allows you to reference a specific widget in a stylesheet as follows
#my-button-id { font-size: 100%; }
29
VeriSign Proprietary and Confidential Information
30. Style with CSS (Contd.)
+ Including Stylesheets in the HTML Host Page
▪ Stylesheets are placed in the module's public path
▪ Refer to them them by simply using a <link> tag in the page:
<link rel=quot;stylesheetquot; href=quot;mystyles.cssquot; type=quot;text/cssquot;/>
+ GWT comes with 3 default visual themes that you can choose from
▪ Standard, Chrome, and Dark
+ By default new applications use standard theme
+ Other themes can be selected by adding inherits tag in the
Main.gwt.xml file
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<inherits name=quot;com.google.gwt.user.theme.chrome.Chromequot;/>
<inherits name=quot;com.google.gwt.user.theme.dark.Darkquot;/>
30
VeriSign Proprietary and Confidential Information
31. Third Party Visual Builder - Instantiations
+ Instantiations, a software company in Portland Oregon, USA
+ Has a product called GWT Designer which is a powerful
bi0directional WYSIWYG tool that may be worth looking into
31
VeriSign Proprietary and Confidential Information
32. RPC
+ RPCs give you the opportunity to move all UI logic to the client, thus
▪ Geatly improving performance
▪ Reducing bandwidth
▪ Reducing web server load, and a pleasantly fluid user experience
+ Creating a Service
1. Define an service interface that extends RemoteService with methods
2. Implement the service by extending RemoteServiceServlet and
implementing the business methods in the service
3. Define an asynchronous interface for the service to be called by the
client-side
+ GWT RPC makes it easy for the client and server to pass Java
objects back and forth over HTTP
32
VeriSign Proprietary and Confidential Information
33. RPC (Contd.)
package com.example.foo.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface MyService extends RemoteService {
public String myMethod(String s);
}
package com.example.foo.server;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.example.client.MyService;
public class MyServiceImpl extends RemoteServiceServlet implements MyService{
public String myMethod(String s) {
// Do something interesting with 's' here on the server.
return s;
}
}
package com.example.foo.client;
interface MyServiceAsync {
public void myMethod(String s, AsyncCallback<String> callback);
33 }
VeriSign Proprietary and Confidential Information
34. RPC (Contd.)
+ GWT RPC Plumbing
34
VeriSign Proprietary and Confidential Information
35. RPC (Contd.)
+ Asynchronously making the call involves the following steps
//(1) Instantiate the service
MyEmailServiceAsync myService = (MyService) GWT.create(MyService.class);
//(2) Create an asynchronous callback to handle the result.
AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
// do some UI stuff to show success
}
public void onFailure(Throwable caught) {
// do some UI stuff to show failure
}
};
// (3) Make the call.
myService.mymethod(“abc”);
35
VeriSign Proprietary and Confidential Information
36. Image Bundle
+ Images in AJAX and Web applications
▪ Typically applications use a lot of images
▪ Each image is a separate file
▪ Browser fetches each separately
+ Studies have shown the following
▪ Large overhead:
– Web applications have icons which are typically smaller than size of the
request
– Hence most of the traffic is overhead and very little of it actual content
▪ Useless freshness checks :
– Even when the images have been cached by the client, a 304 (quot;Not Modifiedquot;)
request is still sent to check and see if the image has change
– Since images change infrequently, these freshness checks are also wasteful
▪ Blocking HTTP connections :
– HTTP 1.1 requires browsers to limit the number of outgoing HTTP
connections to two per domain/port
– A multitude of image requests will tie up the browser's available connections,
thus preventing real RPC requests that do the real work
36
VeriSign Proprietary and Confidential Information
37. Image Bundle (Contd.)
+ GWT solves performance problems by introducing a construct called
Image Bundle
+ GWT Image Bundle bundles a bunch of image files into a single large
file and manages as a single Java Object
+ Since filename is based on the hash of the file's contents, the
filename will change only if the composite image is changed
▪ Hence, it is safe for clients to cache the composite image permanently,
which avoids the unnecessary freshness checks for unchanged images
▪ To make this work, the server configuration needs to specify that
composite images never expire.
37
VeriSign Proprietary and Confidential Information
38. Image Bundle (Contd.)
+ To define an image bundle, the developer needs to extend the
ImageBundle interface
▪ The ImageBundle interface is a marker interface
▪ The derived interface can have zero or more methods, where each
method must have the following characteristics
– The method takes no parameters
– The method has a a return type of AbstractImagePrototype
– The method may have an optional gwt.resource metadata tag which
specifies the name of the image file in the module's classpath
+ If the gwt.resource metadata tag is not specified, then the following
assumptions are made
▪ The image filename is assumed to match the method name
▪ The extension is assumed to be either .png, .gif, or .jpg
▪ The file is assumed to be in the same package as the derived interface
38
VeriSign Proprietary and Confidential Information
39. Image Bundle (Contd.)
public interface WordProcessorImageBundle extends ImageBundle {
/**
* Would match file 'new_file_icon.png', 'new_file_icon.gif', or
* 'new_file_icon.png' located in the same package as this type.
*/
public AbstractImagePrototype new_file_icon();
/**
* Would match the file 'open_file_icon.gif' located in the same
* package as this type.
* @gwt.resource open_file_icon.gif
*/
public AbstractImagePrototype openFileIcon();
/**
* Would match the file 'savefile.gif' located in the package
* 'com.mycompany.mygwtapp.icons', provided that this package is
* part of the module's classpath.
* @gwt.resource com/mycompany/mygwtapp/icons/savefile.gif
*/
public AbstractImagePrototype saveFileIcon();
39 }
VeriSign Proprietary and Confidential Information
40. Image Bundle (Contd.)
+ Using Image bundle in the application
public void useImageBundle() {
WordProcessorImageBundle wpImageBundle =
(WordProcessorImageBundle)
GWT.create(WordProcessorImageBundle.class);
HorizontalPanel tbPanel = new HorizontalPanel();
tbPanel.add(wpImageBundle.new_file_icon().createImage());
tbPanel.add(wpImageBundle.openFileIcon().createImage());
tbPanel.add(wpImageBundle.saveFileIcon().createImage());
}
+ Image bundles are immutable, so you can keep a reference to a singleton
instance of an image bundle instead of creating a new instance every time
the image bundle is needed
40
VeriSign Proprietary and Confidential Information
41. History
+ Ajax apps sometimes fail to meet user's expectations because they
do not interact with the browser in the same way as static web pages
▪ Back button, forward button, bookmarking
+ The basic premise is to keep track of the application's quot;internal statequot;
in the url fragment identifier
+ For each page that is to be navigable in the history, the application
should generate a unique history token
+ For example, a history token named quot;page1quot; would be encoded in a
URL as follows
▪ http://www.example.com/com.example.gwt.HistoryExample/
HistoryExample.html#page1
41
VeriSign Proprietary and Confidential Information
42. History (Contd.)
+ When the application wants to push a placeholder onto the browser's
history stack, it simply invokes History.newItem(token)
+ When the user uses the back button, a callback will be passed to any
object that was added as a listener to History.addHistoryListener()
▪ It is up to the app to restore the state according to the value of the token
+ To use GWT History support, you must first embed an iframe into your
host HTML page
<iframe src=quot;javascript:''quot; id=quot;__gwt_historyFramequot;
style=quot;width:0;height:0;border:0quot;></iframe>
+ When the onHistoryChanged() method is invoked, your application must
handle two cases:
▪ The application was just started and was passed a history token.
▪ The application is already running and was passed a history token.
42
VeriSign Proprietary and Confidential Information
43. Internationalization and Configuration
+ GWT provides several techniques that can aid in Internationalization
and configuration of your AJAX application
+ GWT provides 2 mechanisms
▪ Static String inclusion at compile time
– Accomplished by GWT Constants interface which has pure messages
– Accomplished by GWT Messages interface which allows parameterization
▪ Dynamic String inclusion at run time
– Accomplished by GWT Dictionary class
+ Static Inclusion
public interface MySettings extends Constants {
String welcomeMessage();
String logoImage();
}
public interface MySettings extends Messages {
String welcomeMessage(String fname, String lname);
String logoImage();
}
43
VeriSign Proprietary and Confidential Information
44. Internationalization and Configuration (Contd.)
+ In the static approach, you define a default properties file of the format
Filename.properties where Filename is the static property interface
name such as MySettings.properties
+ For locale specific, you can also specific FileName_xx_YY.properties
file where xx would be ISO Language code and YY ISO country code
+ Referencing constants from a resource file
▪ MySettings mySettings =(MySettings)GWT.create(MySettings.class);
▪ Label newLabel = new Label(Constants.labelText());
+ Static initialization are advantageous because
▪ Properties are statically included in compiled JavaScript, hence the
performance is really good, same as hard coded string
▪ Compiler only includes properties that are refernces
+ Modules that use this interface should inherit com.google.gwt.i18n.I18N.
<inherits name=quot;com.google.gwt.i18n.I18Nquot;/>
44
VeriSign Proprietary and Confidential Information
45. Internationalization and Configuration (Contd.)
+ Dynamic String Inclusion for Internationalization
▪ Allows existing i18n apps to be quickly incorporated into GWT applications
▪ Helpful if existing apps used JavaScript associate array objects for i18n
var userInterfaceEN = { var userInterfaceSV {
hello: Hello, hello: Hejsan,
yes: Yes, yes: Ja,
no: No no: Nej
} }
+ Referencing constants from a resource file
Disctionary uiText = Dictionary.getDictionary(“userInterfaceSV”);
uiText.get(hello);
+ Advantage of Dynamic String initialization
▪ You can quickly incorporate existing i18n approach into the application
+ Disadvantage
▪ GWT provides no help whether constants you are referring to exist
▪ Compiler cannot perform any optimization
45
VeriSign Proprietary and Confidential Information
46. JavaScript Native Interface
+ GWT code is written in Java which gets translated into JavaScript, but
sometimes there is a need to make JavaScript calls
▪ May need to call browser’s API for which no GWT equivalent exists
▪ May want to use some super-cool JavaScript lib
+ JavaScript Native Interface lets you execute JavaScript from Java as
well as execute Java from JavaScript
+ Made possible because of the GWT compiler which can merge native
JavaScript code with the JavaScript code generated from Java
+ Calling JavaScript from java
public native int addTwoNumbers(int x, int y) {
/*-{
var result result = x+ y;return result;
}-*/;
46
VeriSign Proprietary and Confidential Information
47. JavaScript Native Interface (Contd.)
+ Calling JavaScript from java
public static native void alert(String msg) /*-{
$wnd.alert(msg);
}-*/
public static native int badExample() /*-{
throw(quot;Not A Number“);
}-*/;
public void onClick () {
try {
int myValue = badExample();
GWT.log(quot;Got value quot; + myValue, null);
} catch (Exception e) {
GWT.log(quot;JSNI method badExample() threw an exception:quot;, e);
}
}
47
VeriSign Proprietary and Confidential Information
48. JavaScript Native Interface (Contd.)
+ Accessing Java from JavaScript
▪ [instance-expr.]@class-name::[field-name|method-name{}]
▪ instance-expr could be this or blank for static
package mypackage;
public MyUtilityClass {
public static int calcLoanInterest(int amt, float intRate,
int term) { ... }
public static native void exportStaticMethod() /*-{
$wnd.computeLoanInterest =
@mypackage.MyUtilityClass::calcLoanInterest(IFI);
}-*/;
}
+ Writing JSNI methods is powerful idea, but should be used sparingly
▪ because writing bulletproof JavaScript code is tricky
▪ JSNI code is potentially less portable across browsers
▪ Less amenable to Java tools
Harder for the compiler to optimize
48
VeriSign Proprietary and Confidential Information
49. Packaging and Deploying a GWT Application
+ Output of the GWT compiler is purely static content
+ All one has to do is copy the GET generated content files from
www/<package>.<modulename> into WAR file folder
+ GWT generated files can be put anywhere in the war file as long as it
is URL accessible
+ But special steps have to be taken if the application uses GWT RPC
▪ Copy the gwt-servlet.jar from the GWT distribution to the WEB-
INF/lib folder
▪ Compile all server side classes which are classes under server and copy
them into WEB-INF/classes folder
49
VeriSign Proprietary and Confidential Information
50. JavaScript Obfuscation and Minimization
+ By default, GWT obfuscates the JavaScript it produces
+ Obfuscation done by the compiler partly
▪ To protect the intellectual property of the application you develop
▪ To reduce the size of the generated JavaScript files, thus making them faster to
download and parse
+ If you prefer not to have GWT obfuscate its output, then you can use
the quot;-stylequot; flag on the GWT Compile
▪ -style OBFUSCATED (small, efficient, and fast) – default style
▪ -style PRETTY (Human readable output)
▪ -style DETAILED (Similar to PRETTY with even more details – verbose
variable names etc.)
+ If you are curious about what GWT's generated JavaScript is doing,
then you can use quot;-style PRETTY“
+ On If you are debugging GWT's output, then quot;-style DETAILEDquot; might
be helpful
50
VeriSign Proprietary and Confidential Information
51. GWT and JUnit Integration
+ Best practice in software engineering is to write automated tests
+ JUnit is best of breed Java Test Framework
+ GWT has integrated with JUnit
+ In order to write a new Test case, yo write a class that inherits from
GWTTestCase which extends JUnit’s TestCase
+ You also need to implement one methods called
“getModuleName()” at a minimum and then any number of test
methods
51
VeriSign Proprietary and Confidential Information
52. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
52
VeriSign Proprietary and Confidential Information
53. Summary
+ Paradigm shift in AJAX web development
+ Turn AJAX development into software engineering
+ Ph.D. in browser quirks is no longer a hiring pre requisite
+ Reusable UI components
+ Ease of development, debugging and maintenance
+ High performant
+ Developed, Backed by Google!
53
VeriSign Proprietary and Confidential Information
54. Agenda
+ RIA Technologies, Frameworks and GWT
+ GWT Quickstart
+ GWT Architecture
+ Key GWT Features
+ Summary
+ Q&A
54
VeriSign Proprietary and Confidential Information