HTML ve JS'de bir Ubuntu uygulamasını nasıl geliştiririm?

34

Bir uygulama geliştiriyorum ve HTML ve JavaScript’in gelecek için daha iyi olduğunu düşünüyorum, ancak herhangi bir öğretici bulamıyorum (uygulamaya sistem temasını kullanmak için ihtiyacım var).

Birlik, mesaj menüsü ve bildirim, couchdb vb. İçin bağlayıcı var mı?

application-development  webapps  html5  webapp-development 
— mhall119
kaynak
Bu benzer soruyu ilginç de bulabilirsiniz: askubuntu.com/questions/97430/…
— David Planella

Yanıtlar:

24

Ubuntu'daki ciltleme ve API'ler için iyi bir başlangıç ​​noktası developer.ubuntu.com adresinde bulunabilir . Bununla ilgili hiçbir deneyimim yok, ancak muhtemelen GNOME'un Javascript ciltleri olan Gjs'ye de bakmak isteyeceksiniz .

Ne yapmaya çalıştığınıza bağlı olarak, uygulamayı herhangi bir HTML + JS uygulaması gibi oluşturabilir ve ardından bir Webkit görünümüne atabilirsiniz. Python'da yapmak son derece basittir:

#!/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()
— andrewsomething
kaynak
7
JS de gerçek bir programlama.
— Owais,
17

Gtk penceresindeki gömülü bir WebKit çerçevesini kullanarak arayüz için HTML + Javascript kullanarak geliştirebilirsiniz (bu Python'da yapmak en kolay olanıdır). En zor kısım, HTML / Javascript uygulamanızın sistemiyle iletişim kurmasıdır.

Bunu Javascript ile Python arasında mesaj ileterek yapabilirsiniz. Bununla birlikte, sistem mantığını Python işlevi olarak yazmak zorunda kalacaksınız, ancak bunu yapmak oldukça kolaydır.

Python ve Javascript arasındaki iletişimi gösteren basit bir örnek. Örnekte, HTML / Javascript, tıklandığında diziyi ["hello", "world"]"hello world" dizgisine bağlayan ve tekrar Javascript'e gönderen Python'a bir dizi gönderen bir düğme görüntüler . Python kodu, dizinin bir gösterimini konsola yazdırır ve Javascript kodu, dizeyi görüntüleyen bir uyarı kutusu açar.

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()

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

Burada dikkat etmeniz gereken tek python kodu def output(data):, dosyanın sonuna kadar anlaşılması kolay olan koddur .

Bunu çalıştırmak için emin olun python-webkitve python-gtk2yüklendikten sonra dosyaları aynı klasöre kaydedin ve çalıştırın:

python example.py

program çalışırken

— dv3500ea
kaynak
1
Bu harika
— Francisco Presencia
5

HTML, JS ve CSS ile masaüstü uygulamaları oluşturmak için küçük bir araç olan BAT'ı geliştirdim .

Blogumda bunun hakkında bir makale yazdım .

Örnek

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>

Ve şu şekilde koşuyoruz:

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

Sonuç:

— Ionică Bizău
kaynak
4

Bildiğim kadarıyla doğrudan platformu erişme gibi, size kontrol etmelisiniz Seed .

Ayrıca bir göz alabilir UserWebKit , Novacut ve Dmedia UI (Bu tepesinde yerleşik kullandığı anahtar işlevi sağlar Python3 kütüphanesinde UserCouch ve Microfiber BTW).

Düşünce çok sonra ben daha ilginç olduğuna karar verdi değil isterseniz o zaman isteğe bağlı olarak bir standart tarayıcı UI çalıştırabilir, çünkü JavaScript doğrudan platformu erişin. Novacut mimari UI ve arka uç sunucular, ağ saydam tutmak için CouchDB kullanır. Normal, tek bilgisayarlı durumda, sunucular yerel olarak o bilgisayarda çalışır. Ancak benzer şekilde UI farkını fark etmeden sunucuları (ve CouchDB) diğer sistemlerde çalıştırabilirsiniz.

— jderose
kaynak
3

Peki, php gibi kabuk komutları çalıştırabilen bir dil içerebilir ve bu yolla bir web sayfasından uygulama yükleme ve bazı komutları çalıştırma gibi özelliklerden yararlanabilirsiniz (Sistem temasına bağlı olarak hangi temanın kullanılacağını ve hangi CSS'nin kullanılacağını saptamak gibi). Örneğin, yardımcı olabilecek bu iki sorunuz var:

Bir sunucu eşzamanlı kabuk komutlarını kullanabilir mi? (Hangi çoklu komut çalıştırma hakkında konuşuyor)

Bir web'den bir satır komutu çalıştırın (Bir web sayfası bağlantısına tıklamak) (Bir bağlantıya tıklamak ve bir yazılım uygulamasını merkezden yüklemek hakkında konuşur)

Hangi temanın kullanıldığını öğrenmenin bir yolu için ubuntu dosyasını varsayılan temanın değeri olan yerde ayrıştırıp sitenin CSS'sini yeni temayı yansıtacak şekilde değiştirebilirsiniz.

Tema ve nerede bulacağıyla ilgili sorular burada bulunabilir:

Bir temada metin rengini değiştirmek için hangi dosyayı düzenlemem gerekir?

Masaüstü temasını mı unuttu?

GTK temasını düzenleme (kenarlık ekleme)

Tüm bunlar (ve eğer aramayı kullanırsanız), ayrıştırma sırasında nereye bakacağınızı ve sistemin hangi temayı kullandığını ve web sayfasında ne kullanacağınızı görmek için hangi dosyaları kontrol edebileceğinizi bilmenize yardımcı olur.

— Luis Alvarado
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.