extend QmlWeb/RestModel.js

[semiworks]

Hi,

I would like to create a model that gets data from the webserver and implements
some application logic. I found QmlWeb/RestModel.js which is a good starting
point. So I thought I could derive my model from RestModel.js and add the
functions I need.
I tried to use qmlweb as is and converted with babel. Both without luck.

approach 1: use qmlweb with babel conversion (es2015)

This approach uses qmlweb by including lib/qt.js in my index.html. Then I tried
to derive from QmlWeb.RestModel.js in the following way:

<script>
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }


function getBaseClass(namespace, classname)
{
    var modulesArray = QmlWeb.modules[namespace];
    var arrayLength = modulesArray.length;
    for (var i = 0; i < arrayLength; i++)
    {
        if (modulesArray[i].name == classname)
        {
            return modulesArray[i].constructor
        }
    }
    return undefined;
}

QmlWeb.registerQmlType({
    module: "SemiHub.Visu",
    name: "PageModel",
    versions: /.*/,
    baseClass: "QmlWeb.RestModel",
    properties: {}
}, function (_QmlWeb$RestModel) {
    _inherits(_class99, _QmlWeb$RestModel);

    function _class99(meta) {
        _classCallCheck(this, _class99);

        return _possibleConstructorReturn(this, (_class99.__proto__ || Object.getPrototypeOf(_class99)).call(this, meta.parent));
    }

    return _class99;
}(getBaseClass("QmlWeb", "RestModel")));
</script>

When instantiating such a PageModel in my main.qml I get the following error:

modules.js:176 Uncaught TypeError: Cannot read property '$qmlTypeInfo' of undefined
at Object.callSuper (modules.js:176)
at new _class2 (RestModel.js:21)
at _class99 ((index):46)
at Object.construct (modules.js:233)
at QMLProperty.$setVal (QMLProperty.js:45)
at QMLProperty.set (QMLProperty.js:172)
at applyProperty (properties.js:201)
at Object.applyProperties (properties.js:89)
at Object.construct (modules.js:296)
at QMLComponent.$createObject (Component.js:83)

I'm not really sure what the problem is here. I this the right way to extend
RestModel?

approach 2: use qmlweb as is without babel conversion

I thought I can make use of new javascript features in ES2015. Especially the
class definition that I could use to extend RestModel.js.

Therefore I created an index.html that creates the global QmlWeb object like it is done in lib/qt.js

<script>
(function(global) {
var QmlWeb = {};

global.QmlWeb = QmlWeb;
}(typeof global != "undefined" ? global : window));
</script>

<script type="text/javascript" src="/webvisu/qmlweb/src/qtbase/QObject.js"></script>
<script type="text/javascript" src="/webvisu/qmlweb/src/qtbase/JSItemModel.js"></script>
<script type="text/javascript" src="/webvisu/qmlweb/src/qtbase/QColor.js"></script>
 :
 :
 :

 <script>
   QmlWeb.qmlEngine = new QmlWeb.QMLEngine();
   QmlWeb.qmlEngine.loadFile('main.qml');
   QmlWeb.qmlEngine.start();
 </script>

My main.qml is just an empty qml Item. But this ends up in the following error:

Uncaught TypeError: Class constructor cannot be invoked without 'new'
at Object.callSuper (modules.js:178)
at Object. (Item.js:39)
at Object.construct (modules.js:233)
at QMLComponent.$createObject (Component.js:83)
at QMLEngine.loadQMLTree (QMLEngine.js:183)
at QMLEngine.loadFile (QMLEngine.js:158)
at (index):108

With this approach it is not even possible for me to get qmlweb running and I
did not come to the point where I could implement my own model.
Is it not possible to run qmlweb without babel conversion?

Thanks,
Sebastian