मैं HTML और JS में उबंटू एप्लिकेशन कैसे विकसित करूं?


34

मैं एक ऐप विकसित कर रहा हूं और मुझे लगता है कि HTML और जावास्क्रिप्ट भविष्य के लिए बेहतर हैं, लेकिन मुझे कोई ट्यूटोरियल नहीं मिल सकता है (मुझे सिस्टम थीम का उपयोग करने के लिए ऐप की आवश्यकता है)।

क्या एकता, संदेश मेनू और अधिसूचना, काउचडब और इतने पर के लिए बाइंडिंग हैं?


आपको यह भी ऐसा ही सवाल रोचक लग सकता है: askubuntu.com/questions/97430/…
डेविड प्लेनेला

जवाबों:


24

उबंटू पर बाइंडिंग और एपीआई के लिए एक अच्छा प्रारंभिक बिंदु developer.ubuntu.com पर पाया जा सकता है । मेरे पास इसका कोई अनुभव नहीं है, लेकिन आप शायद Gjs में देखना चाहेंगे , GNOME के ​​लिए जावास्क्रिप्ट बाइंडिंग।

आप जो करने की कोशिश कर रहे हैं, उसके आधार पर आप बस किसी भी 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
जेएस वास्तविक प्रोग्रामिंग भी है।
ओवैस लोन

17

आप एक Gtk विंडो में एम्बेडेड WebKit फ्रेम का उपयोग करके इंटरफ़ेस के लिए HTML + जावास्क्रिप्ट का उपयोग करके विकसित कर सकते हैं (यह पायथन में करना सबसे आसान है)। सबसे कठिन हिस्सा आपके HTML / जावास्क्रिप्ट एप्लिकेशन से सिस्टम के साथ संचार कर रहा है।

आप जावास्क्रिप्ट और पायथन के बीच संदेशों को पास करके ऐसा कर सकते हैं। हालाँकि, आपको सिस्टम लॉजिक को पायथन फ़ंक्शन के रूप में लिखना होगा, लेकिन ऐसा करना बहुत आसान है।

यहाँ एक सरल उदाहरण है जो पायथन और जावास्क्रिप्ट के बीच संचार दिखा रहा है। उदाहरण में, HTML / Javascript एक बटन प्रदर्शित करता है, जब क्लिक ["hello", "world"]करने पर पायथन को एक सरणी भेजता है जो सरणी को एक "हैलो वर्ल्ड" में जोड़ता है और इसे वापस जावास्क्रिप्ट में भेजता है। पायथन कोड कंसोल के लिए सरणी का प्रतिनिधित्व करता है और जावास्क्रिप्ट कोड स्ट्रिंग को प्रदर्शित करने वाले अलर्ट बॉक्स को पॉप अप करता है।

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

कार्यक्रम में कार्रवाई


1
यह बहुत बढ़िया है
फ्रांसिस्को प्रेसेनिया

5

मैंने BAT विकसित किया , जो HTML, JS और CSS के साथ डेस्कटॉप अनुप्रयोगों के निर्माण के लिए एक छोटा उपकरण है।


मैंने अपने ब्लॉग पर इसके बारे में एक लेख लिखा था ।

उदाहरण

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

जहाँ तक सीधे प्लेटफ़ॉर्म तक पहुँचने के लिए, आपको सीड की जाँच करनी चाहिए ।

आप UserWebKit , Python3 लाइब्रेरी पर भी एक नज़र डाल सकते हैं जो नोवाकोट और डेमिया यूआई द्वारा उपयोग की जाने वाली प्रमुख कार्यक्षमता प्रदान करती है (यह उपयोक्ता के रूप में बनाया गया है और माइक्रोफ़ाइबर , BTW)।

बहुत सोचने के बाद, मैंने फैसला किया कि जावास्क्रिप्ट से सीधे प्लेटफॉर्म का उपयोग करने के लिए यह अधिक दिलचस्प था , क्योंकि तब आप वैकल्पिक रूप से यूआई को एक मानक ब्राउज़र में चला सकते हैं यदि आप चाहते हैं। Novacut वास्तुकला UI और बैकएंड सर्वर नेटवर्क-पारदर्शी रखने के लिए CouchDB का उपयोग करता है। सामान्य, एकल-कंप्यूटर मामले में, सर्वर उस कंप्यूटर पर स्थानीय रूप से चलते हैं। लेकिन इसी तरह आप अन्य प्रणालियों पर सर्वर (और CouchDB) चला सकते हैं, बिना UI के अंतर को देखे बिना।


3

वैसे आप एक भाषा शामिल कर सकते हैं जो php जैसी शेल कमांड चला सकती है और इस तरह से वेबपेज से ऐप इंस्टॉल करने और कुछ कमांड को निष्पादित करने जैसे सामान का लाभ उठाती है (जैसे कि किस थीम का उपयोग करना है और सिस्टम थीम के आधार पर किस सीएसएस का उपयोग करना है)। उदाहरण के लिए आपके पास यह दो प्रश्न हैं जो मदद कर सकते हैं:

क्या एक सर्वर एक साथ शेल कमांड को हैंडल कर सकता है? (जो कई आदेशों को निष्पादित करने की बात करता है)

एक वेब से एक लाइन कमांड चलाएं (एक वेबपेज लिंक में क्लिक करना) (जो किसी लिंक पर क्लिक करने और सॉफ़्टवेयर सॉफ़्टवेयर से ऐप इंस्टॉल करने की बात करता है)

किस विषय का उपयोग किया जाता है यह जानने के लिए कि आप ubuntu फ़ाइल को पार्स कर सकते हैं, जहां डिफ़ॉल्ट थीम के लिए इसका मूल्य है और इसके आधार पर नए विषय को प्रतिबिंबित करने के लिए साइट के सीएसएस को संशोधित करें।

विषय के बारे में प्रश्न और यह कहाँ पाया जा सकता है:

किसी विषय में पाठ का रंग बदलने के लिए मुझे किस फ़ाइल को संपादित करने की आवश्यकता है?

डेस्कटॉप विषय भूल जाता है?

GTK थीम का संपादन करना (सीमा जोड़ना)

यह सब (और यदि आप खोज का उपयोग करते हैं तो अधिक) आपको यह जानने में मदद करते हैं कि पार्स करते समय आपको क्या देखना है और आप यह देखने के लिए जाँच सकते हैं कि सिस्टम किस थीम का उपयोग कर रहा है और वेब पेज में क्या उपयोग करना है।


2

हाँ, आप शुद्ध html / css / js में ऐप्स लिख सकते हैं और GObject आत्मनिरीक्षण का उपयोग करके JS के लिए हाँ बाइंडिंग उपलब्ध हैं। GnomeSeed https://live.gnome.org/Seed पर एक नज़र डालें

सीडकिट: https://live.gnome.org/SeedKit

ट्यूटोरियल: https://live.gnome.org/Seed/Tutorial


0

अब हमारे पास AppJS - https://github.com/milani/appjs है !

जैसा कि उन्होंने कहा, " यह कोर के रूप में क्रोमियम का उपयोग करता है (ताकि नवीनतम एचटीएमएल 5 एपीआई समर्थित हैं) और बैकबोन के रूप में नोड। जेएस। "

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.