Могу ли я разработать гибридное приложение / HTML5 для Ubuntu Phone?

8

Могу ли я разработать гибридное приложение, которое использовалось в сочетании с нативным API и HTML5 в телефоне Ubuntu?

Я знаю, что возможно разработать либо нативное приложение, либо приложение HTML5.

Тем не менее, я хочу знать, как разработать собственное приложение, которое имеет пользовательский интерфейс HTML5 (гибрид) в Ubuntu Phone.

application-development ubuntu-touch html5 ubuntu-sdk user1793335
источник
Если вы имеете в виду нечто большее, чем просто пользовательский интерфейс на основе QML, на который был дан ответ Салема, есть нюансы в нативном коде через Apache Cordova. Я все еще изучаю Cordova, поэтому у меня нет полного ответа для вас, но есть источник для чтения / загрузки здесь: git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree
OYRM

Ответы:

10

Я не уверен, что вы имеете в виду под «гибридным» (приложение C ++, которое отображает веб-приложение? Распространять код приложения между C ++ / QML / javascript?), Но вы можете использовать компонент WebView для отображения веб-страницы / веб-приложения в приложении qml , Это должно работать и на Ubuntu Phone.

Возьмем это простое приложение, составленное из: «app.qml», «app.html» и «app.js» (да, я знаю, это «приложение» довольно слабое ...). Это было проверено только с помощью qmlviewer, поэтому, если вы попытаетесь запустить его через IDE, вам, вероятно, придется что-то изменить в зависимости от используемых относительных путей.

app.qml

import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
        width: 800
        height: 600
        WebView {
                url: "app.html"
                anchors.fill: parent
                preferredWidth: 800
                preferredHeight: 600
                smooth: false
                settings.developerExtrasEnabled : true 
                settings.javascriptEnabled: true
        }
}

app.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Hi</title>
        <style>
        body {
                margin: 20px;
        }
        </style>
</head>
<body>
        <a href="#" id="test_me">Click me!</a>
</body>
<script src="app.js"></script>
</html>

app.js

var x = document.getElementById("test_me");
x.onclick = function(){
        console.log("Hi there");
        new_elem = document.createElement("h2");
        new_elem.textContent = "Hi there!";
        document.getElementsByTagName("body")[0].appendChild(new_elem);
};

Надеюсь, поможет.

Salem
источник