Skip to content

A QML engine in a web browser. Current state: merging the numerous out-of-date forks.

License

Notifications You must be signed in to change notification settings

stephenmdangelo/qmlweb

 
 

Repository files navigation

JavaScript powered QML Engine

Join the chat at https://gitter.im/qmlweb/qmlweb Build Status codecov

npm Bower GitHub tag

CSS and HTML are boring and lame. And they suck at designing cool, interactive interfaces. Qt came up with a much better answer for its renowned framework: QML, a declarative language perfect for designing UIs (and much more). Here's a sample of how QML looks like:

import QtQuick 2.0

Rectangle {
   width: 500; height: 200
   color: "lightgray"

   Text {
       id: helloText
       text: "Hello world!"
       anchors.verticalCenter: parent.verticalCenter
       anchors.horizontalCenter: parent.horizontalCenter
       font.pointSize: 24; font.bold: true
   }
}

This project aims at bringing the power of QML to the web browser.

How to use

Add the library to your web page

Using one of the methods below, install the qmlweb JavaScript library:

  • npm:

    npm install qmlweb
    
  • Bower:

    bower install qmlweb
    
  • GitHub releases:

    tar -xzvf v0.0.4.tar.gz
    
  • Manually using gulp (recommended if you cloned from git):

    npm install
    npm run build
    

Next, simply add lib/qt.js to the list of other JavaScript files in your app's HTML file:

<script type="text/javascript" src="/lib/qt.js"></script>

Auto-load

You may then modify the <body> element to specify what QML file to load when the page is opened.

<!DOCTYPE html>
<html>
  <head>
    <title>QML Auto-load Example</title>
  </head>
  <body style="margin: 0;" data-qml="qml/main.qml">
    <script type="text/javascript" src="/lib/qt.js"></script>
  </body>
</html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

When implementing new features, you may need to get away from QML and create your own QML components from scratch, using directly the engine's API.

registerQmlType({
  module:   'MyModule',
  name:     'MyTypeName',
  baseClass: 'QtQuick.Item',
  versions: /^1(\.[0-3])?$/, // that regexp must match the version number for the import to work
  constructor: function(meta) {
    callSuper(this, meta);

    var self = this;

    // Managing properties
    createProperty("var", this, "data"); // creates a property 'data' of undefined type
    // creates a property 'name' of type string, with a default value
    createProperty("string", this, "name", { initialValue: 'default name' });

    // Signals
    this.somethingHappened = Signal(); // creates a signal somethingHappened

    this.somethingHappened.connect(this, function() {
      console.log('You may also connect to signals in JavaScript');
    });
  
    // Using the DOM
    function updateText() {
      var text = '';
      for (var i = 0 ; i < self.data.length ; ++i)
        text += '[' + data[i] + '] ';
      self.dom.textContent = text; // Updating the dom
      self.somethingHappened(); // triggers the 'somethingHappened' signal.
    }

    // Run updateText once, ensure it'll be executed whenever the 'data' property changes.
    updateText();
    this.onDataChanged.connect(this, updateText);
  }
});

And here's how you would use that component in a regular QML file:

import MyModule 1.3

MyTypeName {
  name: 'el nombre'
  data: [ 1, 2, 3 ]

  onSomethingHappened: console.log(data)
}

History

  1. git://anongit.kde.org/qmlweb, see Webapps written in qml not far from reality anymore,
  2. @JoshuaKolden/qmlweb,
  3. @Plaristote/qmlweb,
  4. @labsin/qmlweb,
  5. @arnopaehler/qmlweb.

About

A QML engine in a web browser. Current state: merging the numerous out-of-date forks.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 93.3%
  • QML 6.7%