QML for the Web

README.md

JavaScript powered QML Engine

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

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 element to specify what QML file to load when the page is opened.

<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',
  versions: /^1(.[0-3])?$/, // that regexp must match the version number for the import to work
  constructor: function(meta) {
    QMLItem.call(this, meta);

    var self = this;

    // Managing properties
    createSimpleProperty("string", this, "name"); // creates a property 'name' of type string
    createSimpleProperty("var", this, "data"); // creates a property 'data' of undefined type
    this.name = 'default name'; // sets a default value for the property '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.


Original URL: http://feedproxy.google.com/~r/feedsapi/BwPx/~3/nsgRkdA_LCk/qmlweb

Original article

Comments are closed.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑

%d bloggers like this: