Qtws19 how-to-build-qml-app-for-webos

How to Build QML App for webOS
and Qt Creator webOS Plugin
Yunkwan Kim
yunkwan.kim@lge.com
LG Electronics

Contents
• App Development on webOS Open Source Edition
• Built-in QML App
• External QML app with QtCreator webOS plugin
How to Build QML App for webOS and Qt Creator webOS Plugin 2

App Development on webOS OSE
• Target Device : Raspberry Pi (RPi) 3 Model B / 4
– Use OpenEmbedded build of Yocto Project
• Support three type of app with different deploy location
• Development manners as location
– Built-in app : OE build
– External app : SDK tools to build and deploy
Built-in app
External app
Web app
QML app
Native app
Application type Deploy location

QML App Development
• QML apps are executed within application containers which wrap the Qt QML
engine.
• webOS QML plugins for QML applications
– qml-webos-bridge: A bridge to the Luna Bus, which allows QML apps to call luna-based
webOS services.
– qml-webos-framework : Provides window components such as WebOSWindow.
– qml-webos-components: Contains miscellaneous QML components.
• PmLog, PmTrace, … and FpsCounter.
※ Luna Bus, also called LS2, is a system bus used by webOS OSE as the IPC mechanism used between components in webOS.

Built-in QML App
• Built-in QML App Development Workflow
Implement
• Writing QML app co
de(main.qml)
Configure
• Configuring app me
tadata
(appinfo.json)
• Configuring the qm
ake project
(.pro)
Build
• Writing a recipe on
Yocto build
• Configuring local so
urce directory
• Building the app
Run
• Installing
• Running
• Verifying the app fu
nctionality
Deploy
• Adding app to build
recipe
• Building image
• Flashing image

Built-in QML App (cont.)
• QML App sample : com.example.app.qml
(click)

Implement
import QtQuick 2.4
import WebOSServices 1.0
import Eos.Window 0.1
import PmLog 1.0
WebOSWindow {
appId: "com.example.app.qml"
title: "QML app“
...
Service {
id: systemService
appId: "com.example.app.qml"
function getTime() {
call("luna://com.webos.service.systemservice","/clock/getTime","{}")
}
onResponse: {
var jsonObject = JSON.parse(payload);
pmLog.info("GETTIME", {"utc": jsonObject.utc});
mainText.text = "UTC : " + jsonObject.utc
}}
PmLog {
id: pmLog
context: "QMLApp"
Directory Structure main.qml

Configure
{
"id": "com.example.app.qml",
"version": "1.0.0",
"vendor": "My Company",
"type": "qml",
"main": "main.qml",
"title": "QML App",
"icon": "icon.png",
"requiredPermissions" : ["time"]
}
appinfo.json com.example.app.qml.pro
TEMPLATE = aux
!load(webos-variables):error("Cannot load webos-variables.prf")
# install
defined(WEBOS_INSTALL_WEBOS_APPLICATIONSDIR, var) {
INSTALL_APPDIR =
$$WEBOS_INSTALL_WEBOS_APPLICATIONSDIR/com.example.app.qml
target.path = $$INSTALL_APPDIR
appinfo.path = $$INSTALL_APPDIR
appinfo.files = appinfo.json
base.path = $$INSTALL_APPDIR
base.files = main.qml
icon.path = $$INSTALL_APPDIR
icon.files = icon.png
INSTALLS += target appinfo base icon
}
- requiredPermissions :
Specify the group to which the external
service’s method called by the app belongs.

Build
Recipe File webos-local.conf
build-webos$ source oe-init-build-env
build-webos$ bitbake com.example.app.qml
INHERIT += "externalsrc"
PRJ_DIR = "/home/project/com.example.app.qml/"
EXTERNALSRC_pn-com.example.app.qml = "${PRJ_DIR}"
EXTERNALSRC_BUILD_pn-com.example.app.qml = "${PRJ_DIR}/build/"
PR_append_pn-com.example.app.qml =".local0"
• To build a component that is located on the local system, you must
specify the directory information
${PRJ_DIR}/oe-workdir/deploy-ipks/raspberrypi3/
com.example.app.qml_1.0.0-r0.local0_raspberrypi3.ipk
Location of output package
SUMMARY = "QML App"
SECTION = "webos/apps"
DEPENDS = "qtbase qtdeclarative "
DEPENDS += "qt-features-webos pmloglib"
RDEPENDS_${PN} += "qml-webos-framework"
RDEPENDS_${PN} += "qml-webos-bridge"
WEBOS_VERSION="1.0.0"
PR = "r0"
inherit webos_qmake5
inherit webos_submissions
inherit webos_app
FILES_${PN} += "${webos_applicationsdir}"
Build and packaging

Run and Verify
• Copy com.example.app.qml_1.0.0-r0.local0_raspberrypi3.ipk to target
• opkg install, reboot
• Launch the app on Launcher
root@raspberrypi3:/# luna-send -i -f
luna://com.webos.service.applicationmanager/running '{}'
{
"subscribed": true,
"running": [
{
"id": "com.example.app.qml",
"webprocessid": "",
"defaultWindowType": "card",
"appType": "native_qml",
"processId": "2779"
}
],
"returnValue": true
}
Launch using luna command

Deploy to image
...
RDEPENDS_${PN} = "
activitymanager
audiod
...
com.example.app.qml
…
build-webos/BUILD/deploy/images/raspberrypi3/webos-image-raspberrypi3-master-yyyymmddhhmmss.rpi-sdimg
build-webos$ source oe-init-build-env
build-webos$ bitbake webos-image
Location of output package
Build image
• Add QML app to the package recipe file : packagegroup-webos-extended.bb
Update image recipe

External QML app with QtCreator webOS plugin
• Qt Creator webOS Plugin
• webOS SDK toolchain set from ‘populate_sdk’
• webOS CLI
• Packaging, installation, launching
• Templates
• QML only ( .qml )
• Hybrid app ( .qml + .cpp)
• Debugging QML application
• Launching via qml-runner-dev
Host
Qt Creator
webOS plugin
webOS
SDK
CLITemplates
Target
webOS OSE
Luna command
qml-runner

External QML app with QtCreator webOS plugin (cont.)
• QML App Development Workflow with QtCreator
Setting
Options
• Set path and
update Kits
Implement
• Create project
• Writing QML ap
p code
(main.qml)
Configure
• Configuring ap
p metadata
(appinfo.json)
Build Run
• packaging the a
pp
• Installing
• Running / Debu
gging
Deploy
• Writing a recipe
on Yocto build
• Adding app to b
uild recipe
• Building image
• Flashing image

Setting Options
• Set webOS SDK path
– Generated by ‘populate_sdk’ build
• Set CLI path
– Used for device management,
package, install and launch
• Correct setting make auto-
detected configs
– Devices, Qt Version, Compiler,
debugger and Kit

Setting Options (cont.)
• webOS Device
– Add Auto-detected webOS devices
– Available to access using
ssh and CLI tools

Setting Options (cont.)
• Kit for webOS target
– Configs and Environment for
webOS SDK target build

Project Creation using templates
• webOS QML/Qt application
• QML only ( .qml )
• Hybrid app ( .qml + .cpp)
• Native (.cpp)
• webOS Device templates wizard
– Location
– Kits
– Summary

Run Configurations
• Deployment using CLI
• Run
– ares-launch : CLI tool
– qml-runner : QML application
launcher in webOS
– qml-runner-dev : enabled debug

Debugging
• Start debugging of
Qml-Runner-Dev
• QML debugging
available
– Inspector
– Breakpoint
– QML Debugger Console

Summary
• Introduce QML application development for webOS OSE
– https://www.webosose.org
• Different workflow to deploy location
– Built-in
• Build and package : OE build
• Deploy : copying file and opkg
– External
• Build and package : CLI tools
• Deploy : CLI tool
• Future plan
– Support Built-in app development
– webOS plugin will be available in https://github.com/webosose
– Support QmlLive for webOS

Qtws19 how-to-build-qml-app-for-webos

More Related Content

What's hot (20)

Similar to Qtws19 how-to-build-qml-app-for-webos (20)

Recently uploaded (20)

Qtws19 how-to-build-qml-app-for-webos