com.smartgwt.client.docs.MobileDevelopment Maven / Gradle / Ivy
Show all versions of smartgwt Show documentation
package com.smartgwt.client.docs;
/**
* Mobile Application Development
* Smart GWT supports building web applications that can be accessed by mobile devices that support modern web browsers,
* specifically: - Safari on iOS devices (iPad, iPhone, iPod Touch)
- Android's default (WebKit-based) browser
*
- Blackberry devices that use a WebKit-based browser (future)
- Palm OS devices that use a WebKit-based browser
* (future)
- Windows Phone 7 (future: once IE mobile is based on IE9)
Via "packaging" technologies such as
* Titanium and Phonegap, a Smart GWT web application can be +link{packaged as an installable native
* application,nativeMobileApps} that can be delivered via the "App Store" for the target mobile platform. Applications
* packaged in this way have access to phone-specific data and services such as contacts stored on the phone, or the
* ability to invoke the device's camera.
Finger / touch events
Mobile and touch devices support "touch
* events" that correspond to finger actions on the screen. By default, Smart GWT simply sends touch events to UI
* components as normal mouse events. Specifically:
- a finger tap gesture will trigger mouseDown, mouseUp and
* click events
- a touch-and-slide interaction will trigger drag and drop, firing the normal Smart GWT sequence of
* dragStart, dragMove, and dragStop
- a touch-and-hold interaction will trigger a contextMenu event, and will trigger a
* hover if no contextMenu is shown
This means that most applications that are written initially to target
* desktop computers need little or no modification in order be able to run on tablet-sized devices (eg the iPad). For
* handset-sized devices (phones, iPod touch), conditional logic may need to be added to make different use of the screen
* real estate.
Mobile look and feel
The "Mobile" skin should be used whenever mobile devices are
* detected. This skin roughly mimics the appearance of the iOS default widgets wherever there is an iOS widget that
* corresponds closely to a given Smart GWT widget. It also makes extensive use of CSS3 to minimize the use of images
* while still providing an attractive look and feel.
In addition, this skin also changes the behavior of some Smart
* GWT widgets to match the UI idioms common on mobile devices. For example, the TabSet component switches to
* bottom-oriented tabs, which are flush together (no gaps). If there are more than a certain number of tabs, a special
* "More" tab appears which lists other remaining tabs. Among other examples, this is the behavior of the "iPad"
* application on iOS devices, and is an efficient use of minimal screen real estate which feels natural when used on a
* mobile device.
In order to detect whether to use the Mobile skin, because of the rapid proliferation of mobile
* devices, we recommend using server-side detection based on the User-Agent HTTP header, and using conditional logic (such
* as logic in a .jsp) to load the "Mobile" skin specifically for these devices.
Adapting to Screen Size and
* Orientation Change
Safari on the Apple iPod/iPhone supports explicitly configuring the viewport as detailed
* here: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.
* Including these meta tags in your bootstrap HTML file will allow you to set a default "zoom level" - how many pixels
* show up on the screen in landscape or portrait mode as well as disabling the user's standard zoom interactions. We also
* have {@link com.smartgwt.client.util.Page#updateViewport an API} to configure the viewport programmatically at runtime.
*
Note that the {@link com.smartgwt.client.util.Page#getOrientation Page.getOrientation} API may be used to determine
* the current orientation of the application, and {@link com.smartgwt.client.types.PageEvent the page orientationChange
* event} will fire whenever the user rotates the screen allowing applications to directly respond to the user pivoting
* their device.
* @see com.smartgwt.client.util.Page#getOrientation
* @see com.smartgwt.client.util.Page#updateViewport
*/
public interface MobileDevelopment {
}