PowerPoint Presentation
Taking Your GWT Apps to Tablets with GXT 4.0David
ChandlerDeveloper Advocate - GXT
CONFIDENTIAL Sencha Inc. 2015We can build this
CONFIDENTIAL Sencha Inc. 2015Something has changed?
CONFIDENTIAL Sencha Inc. 2015The Tablets are coming
CONFIDENTIAL Sencha Inc. 2015to work
Source:
http://itmanagementstudy.blogspot.com/2014/05/byod-issues-challenges.html
CONFIDENTIAL Sencha Inc. 2015users expect
CONFIDENTIAL Sencha Inc. 2015in a browser?
CONFIDENTIAL Sencha Inc. 2015but wait, we need
CONFIDENTIAL Sencha Inc. 2015
gesturejes-chernoun1. a movement of a finger, stylus, orother
pointing device to express anintended action
CONFIDENTIAL Sencha Inc. 2015Touch support in GXT 4
CONFIDENTIAL Sencha Inc. 2015GXT 4 Touch Demo11
CONFIDENTIAL Sencha Inc. 2015GXT 4 Triton Theme
12
CONFIDENTIAL Sencha Inc. 2015GXT 4 Triton Theme
13
CONFIDENTIAL Sencha Inc. 2015GXT 4 Executive Dashboard App
14
CONFIDENTIAL Sencha Inc. 2015Getting started with touch in GXT
4
CONFIDENTIAL Sencha Inc. 2015Set the viewportAvoid conflict with
system gestures like double-tap to zoomOption 1: lock the
viewport
Option 2: limit scaling
CONFIDENTIAL Sencha Inc. 20153 ways to enable touch
CONFIDENTIAL Sencha Inc. 20151. Use a widgetMost widgets
automatically respond to touchButtons fire SelectEventExpand /
collapse works without delayEditable cells respond to single or
double tap based on setClicksToEdit()etc.If youve implemented
onMouseClick/Up/Down*may* also need to override
onTap/onTouchStart/onTouchEndMany widgets expose new methods for
touchSliderCell example
CONFIDENTIAL Sencha Inc. 20151. Use a Widgetpublic SliderCell
sliderCell = new SliderCell() { @Override protected void onTap() {
super.onTap(t, context, parent, value, valueUpdater); }
@Override protected void onTouchMove() { super.onTouchMove(t,
context, parent, value, valueUpdater); }};
CONFIDENTIAL Sencha Inc. 20152. Use a
GestureRecognizeraddCellGestureAdapter(new
LongPressOrTapGestureRecognizer.CellLongPressOrTapGestureRecognizer()
{ @Override protected void onLongPress() { Window.alert(Im feeling
pressed.); }});
CONFIDENTIAL Sencha Inc. 20152. Use a GestureRecognizer
CONFIDENTIAL Sencha Inc. 20152. Use a GestureRecognizerWhere to
call addGestureRecognizer()Widget constructor (if all vars
available)Example: SliderCell, Tree, as soon as you canExample:
LiveGridView.onAfterRenderView()
CONFIDENTIAL Sencha Inc. 20152. Use a GestureRecognizerExample:
in Tree constructor
CONFIDENTIAL Sencha Inc. 20153. Listen for an eventEach GR
defines events such as TapGestureEventBy default, GR fires events
to the Component, Cell, or Widget which registered it*Listen using
Widget.addHandler()
* you can change this by calling GR.setDelegate() after
registering
CONFIDENTIAL Sencha Inc. 2015Under the coversTwo pieces required
for GestureRecognizers to workmust listen for the raw DOM
eventsforward events to the GestureRecognizerWeve wired this for
you in Component and AbstractEventCelladdGestureRecognizer() sinks
the eventsonBrowserEvent() => recognizer.handle()You only have
to call addGestureRecognizer/Adapter()
CONFIDENTIAL Sencha Inc. 2015Understanding JS touch
eventshttps://developer.mozilla.org/en-US/docs/Web/Events/touchstarttouches
vs. changedTouchesgotcha: target property will always be the
element where touch beganevents bubble up through the DOM until
stoppedto stop bubbling, call event.stopPropagation()at the top
level, the browser will handle in its default wayexample: right
click shows context menucan prevent this using
event.preventDefault()
CONFIDENTIAL Sencha Inc. 2015Eliminating the 300ms delayIf no
touch handlers, mobile browser will fire synthetic mouse click
AFTER 300msYour old code will work, but will feel sluggishBest
answer: implement touchEnd handlersGXT 4 has mostly done this for
youOr you can do it in your custom widgets:Use
Widget.addDomHandler() oronBrowserEvent switch / casedont forget to
sink the event(s)
CONFIDENTIAL Sencha Inc. 2015Pro tipsKEEP MOUSE AND TOUCH PATHS
SEPARATEWhy not onTouchEnd -> onMouseClick()?Because your code
might have this hiding in it:if (mouseDown) {...}
CONFIDENTIAL Sencha Inc. 2015Pro tipsAvoid this:
Do this instead:
CONFIDENTIAL Sencha Inc. 2015Pro tipsProblem: mobile browsers
dont blur fields when you touch SubmitSolution: programmatically
focus the Submit button when tappedprotected void onTap() {
getInputElement(parent).focus();}
CONFIDENTIAL Sencha Inc. 2015Pro tipshandle touchEnd rather than
touchStartotherwise, you might select things when you really wanted
to scrollin general, touchEnd is the better method to use in
TapGRonTouchStart() should also preventDefault()otherwise, long
press might show browsers context menu as well as a tool tipwe
solved this in GXTs PanelTab
CONFIDENTIAL Sencha Inc. 2015other niceties in GXT 4.0property
binding: gxt.device=tablet|desktopcan be used in CSS
conditionalsalso GXT.isTablet()caveat: its pretty
basic!GestureRecognizers are independent of GXT widgetscan use with
your own widgetsnew TouchEventToGestureAdapter(Widget w,
GestureRecognizer gr)raw events flow through as normal
CONFIDENTIAL Sencha Inc. 2015Dev tricks
CONFIDENTIAL Sencha Inc. 2015Device emulationalias
chrome='/Applications/Google\ Chrome.app/Contents/MacOS/Google\
Chrome --touch-eventsemulate devicedont auto-launch
start dev mode and wait for this: Click the link or Cmd+Shift+R
in browser
CONFIDENTIAL Sencha Inc. 2015reduce initial compile timeTypical
gwt.xml:
With *
* not for prod. Size will increase 15-20%[INFO] Compiling 12
permutations[INFO] Compilation succeeded -- 144.760s[INFO]
Compiling 1 permutation[INFO] Compilation succeeded -- 78.085s
CONFIDENTIAL Sencha Inc. 2015Chrome remote debugginglaunch GWT
with dev mode param bindAddress 0.0.0.0 to connect via wifilaunch
Chrome devicehit GWT URL(AirDroid rocks!)plug in your device
USBchrome://inspect
CONFIDENTIAL Sencha Inc. 2015Super Dev ModeProblem:SDM sometimes
doesnt automatically recompile on mobile
Solution:1. force save in IDEA (tab switch or Ctrl+S)2. refresh
browser
CONFIDENTIAL Sencha Inc. 2015Upcoming GWT 3.0
CONFIDENTIAL Sencha Inc. 2015GWT 3.0 is for Modern BrowsersGWT
2.8 will be a long-lived maintenance branchGWT 3 is a complete
rewrite of the compilerJava to JS transpiler onlySuperior JS
InteroperabilityNew DOM implementationNo more WidgetNo more
GWT-RPCNo more permutations (use static factory methods
instead)
CONFIDENTIAL Sencha Inc. 2015Senchas PlanGXT 4 with GWT 2.7/2.8
will continue to support new browsersStill very early GWT 3 not
expected till next yearLot depends on JS InteroperabilityAreas were
looking hard at:Touch WidgetsResponsive DesignEasier Theming40
CONFIDENTIAL Sencha Inc. 2015Q & ADownload GXT 4 Early
Accesshttps://www.sencha.com/blog/announcing-gxt-4-early-access/
Join Sencha GXT community on G+
CONFIDENTIAL Sencha Inc. 2015Bonus: working with touch events in
MVP
CONFIDENTIAL Sencha Inc. 2015Touch events in MVPGrid or ListView
are typically members of a View classbut touch events happen in the
Cellhow to invoke a Presenter method from a Cell?via interface,
just like View invokes Presenter
CONFIDENTIAL Sencha Inc. 2015Define Handler interface in
Cell
CONFIDENTIAL Sencha Inc. 2015Delegate to Handler
CONFIDENTIAL Sencha Inc. 2015Let View implement Handler
CONFIDENTIAL Sencha Inc. 2015
