Hybrid Application Generator

From Qt Wiki
Jump to navigation Jump to search

Template:ArticleMetaData

Template:FeaturedArticle

Template:ArticleNeedsUpdate

Introduction[edit | edit source]

x250px

This article introduces the Hybrid Application Generator (currently available as Alpha release), which allows developers to create native Qt applications that show HTML-based content, including applications that use JavaScript™ and Cascading Style Sheets (CSS).

What are hybrid apps?[edit | edit source]

x250px

Hybrid application in this context means an application that combines Qt with web technologies. With QtWebKit, Qt developers can create applications that have web UI, utilizing new powerful features of web, like HTML 5 and CSS 3. QtWebKit allows

  • Intuitive use of network resources
  • Easily embedding web content into an application
  • Exposing QWidget to HTML and QObject to JavaScript
  • Calling JavaScript from Qt and vice versa
  • Content that may be enhanced with native controls

Hybrid applications enable developers to

  • Use their web skills (HTML, CSS, JavaScript) to construct the UI
  • Write JavaScript to access platform features
  • Build a Qt application – a native application
  • Create an application that works on all platforms where Qt is supported

Hybrid Application Generator[edit | edit source]

File:Hybrid generator.png

With the Hybrid Application Generator, web developers can easily develop Qt applications, without writing a single line of C++ code. Secondly, no SDK is needed for application development.

The hybrid application framework serves as an interface between JavaScript functionality (such as that found in Web Runtime widgets) and Qt APIs. For example, when your program requests the application to switch to full screen mode, the framework connects the JavaScript function call to relevant native platform functionality. Hybrid applications can target Symbian as well as Maemo devices.

The result is a system that allows developers to use web technologies to quickly create services that can then be converted to Qt applications to enable simple delivery and installation to a variety of mobile devices. However, unlike pure widget applications, hybrid applications retain the power and flexibility of native code.

Features[edit | edit source]

Remote Compilation[edit | edit source]

By enabling the remote compilation feature, you don't need to install local Symbian or Maemo SDKs(nor Nokia Qt SDK) to get the applications built.

File:Remote.png

Login to remote compilation only requires Nokia Developer account

File:Build options.png

The remote compiler lists all the available build options from the server

Preview launcher[edit | edit source]

The preview launcher lets you to have a look on how the build result will appear on device.

x400px

Web content can be tested on the preview launcher without building

File:Resolution options.png

The preview launcher provides several device resolutions to test with

Settings[edit | edit source]

The settings are useful for quickly adjusting the release options.

File:Settings.png

The settings view covers the needed adjustments according to the selected build option

File:Window options.png

Window options are used to select the screen layout in the application

Use cases and examples[edit | edit source]

Hybrid Application Generator can be used to create hybrid applications from WRT widgets, directories containing HTML content, or by grabbing live web pages.

The Alpha release comes with a few example applications, which demonstrate some of the different use cases:

BreakDown widget[edit | edit source]

BreakDown is a simple Breakout clone in JavaScript. The game uses motion sensors to control the paddle. Thus, you won’t be able to preview this demo in your workstation – instead, you should make a Symbian build and install it to your device. The BreakDown demo works only with resolution 360x640 (for example, N97 in portrait mode).

MeeGo.com web page[edit | edit source]

This is a grab of the MeeGo.com site showing MeeGo architecture. The purpose of the demo is to show an example of a hybrid application made out of a web page. The page still allows normal navigation via hyperlinks.

x300px

Menu example web page[edit | edit source]

This example demonstrate adding two menu items to the application’s menu, accessible via the left soft key. In preview mode, the items will be shown in the window’s menu bar.

File:Menu.jpg

GPS example web page[edit | edit source]

This example takes the current GPS location and shows an alert box containing the device’s latitude, longitude, and altitude.

File:Gps.jpg

IDE Integration[edit | edit source]

Hybrid Application Generator has a command-line interface that can be used to provide functionality to e.g. third party IDEs. An example of Aptana Studio 2.0 integration is available at Hybrid Application Generator pages at Nokia Developer Wiki.

To enable the plugin, copy the .jar file to Aptana Studio plugins directory and restart Aptana. New functionality should appear: an icon to the Aptana toolbar, and a new menu for creating an application of the current project.

File:Aptana.png

The Aptana integration is still experimental and can be used only with local SDKs. Remote generator support is a planned feature for upcoming releases.

Download[edit | edit source]

Download the Hybrid Application Generator Alpha (hybrid.zip in root of Media:QtHybrid.zip). The package includes User's Guide with the installation and system requirements instructions. Currently we're offering the installer only for windows.

Download the Aptana Studio 2.0 plugin Media:QtHybrid.zip - /files/com.nokia.hag_1.0.0.201005031455.jar . This is a .jar file that should be copied to the Aptana plugin folder.

The project is open source. Get the full source code and start contributing from Media:QtHybrid.zip

Also please feel free to provide feedback about the project and its documentation on the project's space.