HTML 및 JS로 Ubuntu 응용 프로그램을 어떻게 개발합니까?

34

앱을 개발 중이며 앞으로 HTML 및 JavaScript가 더 낫다고 생각하지만 자습서를 찾을 수 없습니다 (시스템 테마를 사용하려면 앱이 필요합니다).

Unity, 메시지 메뉴 및 알림, couchdb 등에 대한 바인딩이 있습니까?

application-development  webapps  html5  webapp-development 
— mhall119
소스
이 비슷한 질문이 흥미로울 수도 있습니다 : askubuntu.com/questions/97430/…
— David Planella

답변:

24

Ubuntu의 바인딩 및 API에 대한 좋은 출발점은 developer.ubuntu.com 에서 찾을 수 있습니다 . 나는 그것에 대한 경험이 없지만 아마도 그놈의 자바 스크립트 바인딩 인 Gjs 를 살펴보고 싶을 것입니다 .

수행하려는 작업에 따라 HTML + JS 앱과 같은 앱을 빌드 한 다음 웹킷보기에 넣을 수 있습니다. 파이썬에서하는 것은 매우 간단합니다 :

#!/usr/bin/env python

from gi.repository import Gtk, WebKit
import os, sys

class Browser:
    def __init__(self):
        self.window = Gtk.Window()
        self.window.set_default_size(800, 600)
        view = WebKit.WebView()
        view.load_html_string("<strong>Hello World!</strong>", "file:///")  
        self.window.add(view)

        self.window.show_all()
        self.window.connect('destroy', lambda w: Gtk.main_quit())

def main():
    app = Browser()
    Gtk.main()

if __name__ == "__main__":
    main()
— 앤드류
소스
7
JS도 실제 프로그래밍입니다.
— Owais Lone
17

Gtk 창에 내장 된 WebKit 프레임을 사용하여 인터페이스에 HTML + Javascript를 사용하여 개발할 수 있습니다 (Python에서 가장 쉬운 방법). 가장 어려운 부분은 HTML / Javascript 응용 프로그램에서 시스템과 통신하는 것입니다.

Javascript와 Python간에 메시지를 전달하여이를 수행 할 수 있습니다. 그러나 시스템 로직을 Python 함수로 작성해야하지만 이것은 매우 쉽습니다.

다음은 Python과 Javascript 간의 통신을 보여주는 간단한 예입니다. 이 예제에서 HTML / 자바 스크립트는 버튼을 클릭합니다.이 버튼을 클릭하면 배열 ["hello", "world"]을 파이썬으로 보내어 배열 을 문자열 "hello world"에 결합하고 다시 자바 스크립트로 보냅니다. Python 코드는 배열의 표현을 콘솔에 인쇄하고 Javascript 코드는 문자열을 표시하는 경고 상자를 팝업합니다.

example.py

import gtk
import webkit
import json
import os

JAVASCRIPT = """
var _callbacks = {};
function trigger (message, data) {
    if (typeof(_callbacks[message]) !== "undefined") {
        var i = 0;
        while (i < _callbacks[message].length) {
            _callbacks[message][i](data);
            i += 1;
        }
    }
}
function send (message, data) {
    document.title = ":";
    document.title = message + ":" + JSON.stringify(data);
}
function listen (message, callback) {
    if (typeof(_callbacks[message]) === "undefined") {
        _callbacks[message] = [callback];
    } else {
        _callbacks[message].push(callback);
    }
}
"""

class HTMLFrame(gtk.ScrolledWindow):
    def __init__(self):
        super(HTMLFrame, self).__init__()
        self._callbacks = {}
        self.show()
        self.webview = webkit.WebView()
        self.webview.show()
        self.add(self.webview)
        self.webview.connect('title-changed', self.on_title_changed)

    def open_url(self, url):
        self.webview.open(url);
        self.webview.execute_script(JAVASCRIPT)

    def open_path(self, path):
        self.open_url("file://" + os.path.abspath(path))

    def send(self, message, data):
        self.webview.execute_script(
            "trigger(%s, %s);" % (
                json.dumps(message),
                json.dumps(data)
            )
        )

    def listen(self, message, callback):
        if self._callbacks.has_key(message):
            self._callbacks[message].append(callback)
        else:
            self._callbacks[message] = [callback]

    def trigger(self, message, data, *a):
        if self._callbacks.has_key(message):
            for callback in self._callbacks[message]:
                callback(data)

    def on_title_changed(self, w, f, title):
        t = title.split(":")
        message = t[0]
        if not message == "":
            data = json.loads(":".join(t[1:]))
            self.trigger(message, data)

def output(data):
    print(repr(data))    

if __name__ == "__main__":
    window = gtk.Window()
    window.resize(800, 600)
    window.set_title("Python Gtk + WebKit App")
    frame = HTMLFrame()
    frame.open_path("page.html")
    def reply(data):
        frame.send("alert", " ".join(data))
    frame.listen("button-clicked", output)
    frame.listen("button-clicked", reply)
    window.add(frame)
    window.show_all()
    window.connect("destroy", gtk.main_quit)
    gtk.main()

page.html

<html>
<body>
<input type="button" value="button" id="button" />
<script>
document.getElementById("button").onclick = function () {
    send("button-clicked", ["hello", "world"]);
};
listen("alert", function (data) {alert(data);});
</script>
</body>
</html>

여기에 실제로주의를 기울여야 할 유일한 파이썬 코드 def output(data):는 파일 끝에서 끝까지의 코드이며 이해하기 쉽습니다.

이것을 실행 python-webkit하고 python-gtk2설치되어 있는지 확인한 다음 파일을 동일한 폴더에 저장하고 다음을 실행하십시오.

python example.py

작동중인 프로그램

— dv3500ea
소스
1
이것은 훌륭합니다
— Francisco Presencia
5

HTML, JS 및 CSS를 사용하여 데스크톱 응용 프로그램을 빌드하기위한 작은 도구 인 BAT를 개발했습니다 .

내 블로그에 기사를 썼습니다 .

예

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                font-family: Monaco, monospace;
                color: white;
                background: #3C3B38;
            }
            h1 { text-align: center; }
            p { text-align: justify; }
            button {
                padding: 10px 20px;
                -moz-border-radius: 4px 4px 4px 4px;
                -webkit-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                display: block;
                font-size: 14px;
                text-decoration: none;
                border: 1px solid #c0b7b0;
                cursor: pointer;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p> Ipsum deserunt architecto necessitatibus quasi rerum dolorum obcaecati aut, doloremque laudantium nisi vel sint officia nobis. Nobis ad nemo voluptatum molestiae ad. Nisi ipsum deserunt a illo labore similique ad?  </p>
        <p> Ipsum veniam laborum libero animi quo dignissimos. Possimus quidem consequatur temporibus consequatur odio, quidem deleniti! Similique totam placeat sint assumenda nulla dolor. Voluptatibus quasi veritatis distinctio consectetur nobis. Nemo reprehenderit?  </p>
        <p> Ipsum molestiae nesciunt commodi sint et assumenda recusandae! Earum necessitatibus sequi nulla fugit architecto omnis. Maiores omnis repellat cupiditate iure corporis dolorem sed amet nesciunt. Mollitia sapiente sit repellendus ratione.  </p>
        <p> Consectetur architecto ratione voluptate provident quis. At maiores aliquam corporis sit nisi. Consectetur ab rem unde a corporis reiciendis ut dolorum, tempora, aut, minus. Sit adipisci recusandae doloremque quia vel!  </p>
        <button onclick="BAT.closeWindow()">Close</button>
    </body>
</html>

그리고 우리는 이것을 다음과 같이 실행합니다.

bat -d index.html -t "BAT Hello World" -s 800x500

결과는 다음과 같습니다.

— 이오니아 우자 우
소스
4

플랫폼에 직접 액세스하는 한 Seed를 확인해야합니다 .

또한 한 번 봐 걸릴 수 있습니다 UserWebKit 의 Novacut 및 Dmedia UI (이 꼭대기으로 구축에 사용되는 주요 기능을 제공하는 Python3 라이브러리 UserCouch 및 마이크로 화이버 BTW을).

많은 생각을 한 후에 JavaScript에서 직접 플랫폼에 액세스 하지 않는 것이 더 흥미 로웠다고 판단 할 수 있습니다. 원하는 경우 표준 브라우저에서 UI를 선택적으로 실행할 수 있기 때문입니다. Novacut 아키텍처 는 UI와 백엔드 서버가 네트워크에 투명하게 유지하기 위해 CouchDB를 사용합니다. 일반적인 단일 컴퓨터의 경우 서버는 해당 컴퓨터에서 로컬로 실행됩니다. 그러나 UI의 차이를 인식하지 않고도 다른 시스템에서 서버 (및 CouchDB)를 실행할 수도 있습니다.

— jderose
소스
3

php와 같은 셸 명령을 실행할 수있는 언어를 포함 할 수 있으며이 방법으로 웹 페이지에서 앱을 설치하고 일부 명령 (시스템 테마에 따라 사용할 테마와 사용할 CSS를 감지하는 것과 같은)을 실행하는 등의 이점을 활용할 수 있습니다. 예를 들어 다음 두 가지 질문이 있습니다.

서버가 동시 쉘 명령을 처리 할 수 ​​있습니까? (여러 명령을 실행하는 것에 대해 이야기합니다)

웹에서 라인 명령 실행 (웹 페이지 링크 클릭) ( 링크 를 클릭하고 소프트웨어 센터에서 앱을 설치하는 방법에 대해 이야기하는)

어떤 테마가 사용되는지 배우기 위해 기본 테마에 대한 값이있는 위치에서 우분투 파일을 구문 분석하고 새 테마를 반영하도록 사이트의 CSS를 수정할 수 있습니다.

주제 및 주제를 찾는 위치에 대한 질문은 여기에서 찾을 수 있습니다.

테마에서 텍스트 색상을 변경하려면 어떤 파일을 편집해야합니까?

데스크탑이 테마를 잊어 버리셨습니까?

GTK 테마 편집 (테두리 추가)

이 모든 (및 검색을 사용하는 경우 더 많은 것)은 구문 분석 할 때 볼 위치와 시스템이 사용하는 테마 및 웹 페이지에서 사용할 항목을 확인할 수있는 파일을 알 수 있도록 도와줍니다.

— 루이스 알바라도
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.