Introduction • I’m from Arlington, WA • Sencha GXT Support Engineer • I’ve been working with GWT a long time • I enjoy working with structured GWT Apps • Passion for making development easier • My wife and I have 5 kids, 1 llama, 2 alpacas, 4 goats, dog, cat and some chickens. 2
What is GXT • We provide GWT Components for building your application • So it’s like building a house • And you want to go shopping at the Hardware store for components to do the job • And we provide the pretty kitchen cabinets, bathroom fixtures and lighting fixtures • You don’t have to pick all Sencha components to do the job, but I think you’ll like the options. • Stop by and ask about all the Sencha GXT Java components options
3 Goals • Provide and overview of the GXT engine • Provide you an glimpse into GXT responsive layouts • And provide an intro into our component options
A Bolder Plan GXT 5 is a bold new release designed from the ground up to usher in the future of web development with Java. • Starting with a clean slate - A lot can change in 10 years - Time for a fresh start • Focusing on the future - Addressing GWT 3 head on - Modern, mature web technologies • Aiming to be the #1 Java solution for the web - Leave nothing on the table
Bold Ideas from Experience Java has decades of experience offering GUI frameworks: JavaFX, Swing, AWT, etc. We wanted to draw on that familiarity & experience and bring it to the modern web. • New concepts in GXT 5 include: - Scene graphs - Clear separation of concerns • Component model • Component appearance • Component behavior - Observable properties - Observable collections 7
Better by Design It’s better because it offers responsive design, true mobile widgets, material design, and a radical new theming system. • Flexbox layouts - Responsiveness is baked in - Almost entirely CSS layout • Responsive grid layouts - Traditional 12 column grid - New 12x12 grid • Responsive width and height
Better Theming • We have an all new theming system • CSS3 standards based • Native Google Closure Stylesheets + more • No special tools • Easy, centralized changes • Mix & match themes • Fully customizable 10
Modern Is Faster We’ve gone to the metal to make it faster by using CSS3, HTML5, lightweight DOM access, and eliminated legacy baggage by only supporting evergreen browsers. • CSS3 - Strong preference for CSS based layouts • HTML5 - New input & UI elements • Foundation DOM - JsInterop with the browser apis • Evergreen browsers only !!!
Stronger Ideas Expedite Implementation GXT 5 is stronger and more flexible than ever thanks to an abstracted & unified event mechanism, extensible gesture tracking, observable lists and properties, and a robust model-view-controller pattern that decouples component appearance and behavior from state. • Simple ideas. Extensible ideas. Your ideas. • No matter what you want to do, we want to let you do it… - Component level separation of concerns (MVC pattern) - Everything is observable (properties, lists, maps, sets) - Unified & custom events (with hierarchy, filters & handlers) - Extensible gestures (including multi-touch & mouse)
Stronger Separation of Concerns 16 • Components have adopted a micro-MVC pattern - Clear responsibilities leads to cleaner, simpler code - Easy to customize, no rigid contracts • Component maintains state - State exposed via observable properties & collections • Appearance renders to the screen - Listens for state changes & updates the browser • Behavior monitors event and updates state - Listens for user input & updates the component state
Stronger Events • Abstracted & normalized to unify browser event differences - Touch? Pointers? Mouse? Who cares… - Browser, action & custom events are handled the same way • Hierarchical events support ‘classes’ of events - Listen for MouseEvent.ANY, InputEvent.ANY, etc. • Event Filters & Handlers - Both capture and bubble phases are supported - Filters preview/capture events before components - Handlers respond/consume events after components • Gesture recognizers - Customizable 17
Stronger Gestures • Gesture recognizers - Configurable options for taps, direction, velocity, etc. - Recognizer tracks begin, changed, recognized, failed & canceled states - Recognizer emits gesture events • Simultaneous gestures - Multiple gestures can be recognized together (pinch & rotate) • Dependent gestures - Single-tap only if not a double-tap or triple-tap • Custom gestures - Write your own gesture recognizer classes 18
The Challenges • Hard to fake responsive layout in earlier versions • GXT 4 relies heavily on programmatic sizing • Extremely difficult to make responsive • Debugging and nested debugging are challenging! • Monolithic sets of programmatic source
Ripping Out your Hair • Mixing Flow Sizing with Programmatic sizing • Spending hours on what should take minutes • It works on some but not others • The grid just won’t size when I enlarge • Zooming doesn’t work • Too many resolutions to account for
Responsive Layout • According to MDN, “the defining aspect of the flex layout is the ability to alter its items’ width and/or height to best fill the available space on any display device.”
One set of sourceto rule them all! • You won’t need a separate Phone, Tablet and Desktop UI view • One UI view for all of your device views and resolutions • Simply simpler to write!
Introducing the New Responsive Grid Layout in GXT 5 • Like the Bootstrap Grid System • Like the Material Design Responsive Grid • Built into the GXT Foundation
The Goal • Make writing layouts easy and intuitive!!!!! • Eliminate edge cases in building components • Use merely one container • Simpler nesting architecture • Less time spent on layouts!!! • Simplified construction, simplified rendering , simplified debugging!
Multiple ResponsiveStyles • Use combinations of Extra Small, Small, Medium, Large and Extra Large layouts to build the responsiveness • And use Extra Small, Small, Medium, Large and Extra Large Offsets
Get more, Pivot Grid, Charts, Grids… • Ext Js has a pivot grid • Ext Js has Trees and Grids • Ext Js has Split Grid and Grids with Range Selection • Ex Js has a Calendar • Aria support • And much, much more, ask us in back… • Wrapping with JsInterop provides awesome buying power
Java Ext Js Construction • GXT uses the same terminology as Ext Js, so the construction patterns are similar • Example constructing a Grid Using Jsinterop • It’s Easy to write Javascript with GWT 2.8 JsInterop Java Types • Writing Javascript with Java is awesome!
Get Help Fast • Professional Sencha hands on support at your finger tips • GWT Development Mode (Super Dev Mode) hands on help • Get the job done faster with in depth GWT/GXT help
Want more • Follow GXT tips and tricks on a regular basis • On Linked in GXT User Group • On Google+ - Tips and Tricks • On Twitter @branflake2267 • Find me roaming Gitter
gwtcon
takufujii
aiji42
kentosuzuki
chiroruxx
ganota
gen519
mii3king
mamohacy
koic
kako351
mako5656
tomohisa
danielanewman
mongodb
lynnandtonic
ufuk
chrisshort
holman
mclloyd
matthewcrist
garrettdimon
sachag
smashingmag
geeforr