Presentation material from QTWS 2019.

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

2. 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

3. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 3

4. 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.
How to Build QML App for webOS and Qt Creator webOS Plugin 4

5. How to Build QML App for webOS and Qt Creator webOS Plugin 5
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

6. Built-in QML App (cont.)
• QML App sample : com.example.app.qml
How to Build QML App for webOS and Qt Creator webOS Plugin 6
(click)

7. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 7

8. 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.
How to Build QML App for webOS and Qt Creator webOS Plugin 8

9. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 9

10. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 10

11. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 11

12. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 12

13. How to Build QML App for webOS and Qt Creator webOS Plugin 13
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

14. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 14

15. Setting Options (cont.)
• webOS Device
– Add Auto-detected webOS devices
– Available to access using
ssh and CLI tools
How to Build QML App for webOS and Qt Creator webOS Plugin 15

16. Setting Options (cont.)
• Kit for webOS target
– Configs and Environment for
webOS SDK target build
How to Build QML App for webOS and Qt Creator webOS Plugin 16

17. How to Build QML App for webOS and Qt Creator webOS Plugin 17
Project Creation using templates
• webOS QML/Qt application
• QML only ( .qml )
• Hybrid app ( .qml + .cpp)
• Native (.cpp)
• webOS Device templates wizard
– Location
– Kits
– Summary

18. Run Configurations
• Deployment using CLI
• Run
– ares-launch : CLI tool
– qml-runner : QML application
launcher in webOS
– qml-runner-dev : enabled debug
How to Build QML App for webOS and Qt Creator webOS Plugin 18

19. How to Build QML App for webOS and Qt Creator webOS Plugin 19
Debugging
• Start debugging of
Qml-Runner-Dev
• QML debugging
available
– Inspector
– Breakpoint
– QML Debugger Console

20. 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
How to Build QML App for webOS and Qt Creator webOS Plugin 20