• 15031阅读
  • 6回复

[转载]WebApps written in QML: Not far from Reality anymore [复制链接]

上一主题 下一主题
离线XChinux
 

只看楼主 倒序阅读 楼主  发表于: 2013-07-13
转自:http://akreuzkamp.de/2013/07/10/webapps-written-in-qml-not-far-from-reality-anymore/


WebApps written in QML: Not far from Reality anymore

Haveyou ever tried to vertically center an element using CSS or wanted anelement to just use the whole remaining space or similar things? Did youever struggle with complex interfaces when writing a modern website?Did you ever use QML for a desktop-app and were in wonder how amazinglyit just works? Then there probably was also the point where youthought ”why can’t I just use QML for my webapp?”. So have I.


And in fact it is nearer to reality than you would think: Say hello to QmlWeb.


QmlWeb is a JavaScript library that is able to parse QML-code andcreate a website out of it using normal HTML/DOM elements and absolutepositions within CSS, translating the QML properties into CSSproperties. Currently it’s also able to paint into a canvas but ascanvas is far less powerful, that’s probably going to be dropped. Sousing the DOM-backend there is no need for HTML5. The webbrowser needsto support ECMAScript5 for now, though.


QmlWeb is a small project by Lauri Paimen that he’s already developingfor a few years now. In the last months, I entered into the developmentrefactoring parts of the library, so by now Lauri yielded themaintainance to me. The biggest part of the credits, though, are due tohim.
As of today, I’m proud to announce that QmlWeb will be from now on a KDE-Project.




(A small prototype of a website for QmlWeb – of course written using QML   )
QmlWeb of course doesn’t yet support everything Qt’s implementationof QML does, but it already supports a quite usable subset of it. Itsupports nearly all of the most basic QML syntax. The element types itsupports, are
  • Item
  • Rectangle
  • Text
  • Image
  • BorderImage
  • MouseArea
  • Repeater
  • ListModel
  • NumberAnimation
  • SequentialAnimation

Moreover it has support for HTML input elements (Button, TextInput, TextArea are currently supported, more to come).


Positioning using anchors works like a charm, Componentswork too, so does the signal-slot system. Basic animations work nicely(Animations in QML are most probably far more powerful, but what worksin QmlWeb is already quite nice   ). Keyboard-control is missing as well as States. Layouts (Row, Column, etc.) are currently under development.


Of course there are many more little features missing, but thelibrary is already quite usable. In fact I’m already using it for onewebapp, I’m currently writing. There are some places where I’m stillusing direct html/css, but that’s another nice feature of QmlWeb. Youcan easily integrate it with normal html/css: QmlWeb exposes theelement-id to css-classes, so you can easily include a stylesheet inyour surrounding html-file and set all css-properties, you can’t control(yet) with QML, to your QML-element.

That’s soooo awesome! How can I use it?

Just grab the latest code from git://anongit.kde.org/qmlweb, put theqmlweb folder in the same directory like your webpage and put thefollowing code into your index.html:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>QmlWeb Demo</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script type="text/javascript" src="../qmlweb/src/parser.js"></script>
  7.         <script type="text/javascript" src="../qmlweb/src/process.js"></script>
  8.         <script type="text/javascript" src="../qmlweb/src/import.js"></script>
  9.         <script type="text/javascript" src="../qmlweb/src/qtcore.js"></script>
  10.     </head>
  11.     <body style="margin: 0;">
  12.         <script type="text/javascript">
  13.             var qmlEngine = new QMLEngine(document.body, {});
  14.             qmlEngine.loadFile("main.qml");
  15.             qmlEngine.start();
  16.         </script>
  17.     </body>
  18. </html>



Then add a file main.qml containing your QML-coded website.

But it can’t do XYZ!!


Well, QmlWeb is not finished, yet. And I’m looking for people willing to help.

Just grab the code, fix it and get in touch with me: <my nick>@web.de (my nick btw. is akreuzkamp   )

A reviewboard-section, a irc-channel and a mailinglist for qmlweb will come soon.

Btw.:

Edit: I added information about how it renders QML to websites(QmlWeb is using normal HTML/DOM elements and absolute positions withinCSS, translating the QML properties into CSS properties to paintelements).


二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线彩阳

只看该作者 1楼 发表于: 2013-07-13
这是我们桌面开发者转web开发的一个好机会。
上海Qt开发联盟,热忱地欢迎你的加入!
离线XChinux

只看该作者 2楼 发表于: 2013-07-13
它这个似乎是写了个JS库,用于解析翻译.qml成HTML/CSS..
唯一的好处是能用QML写界面,似乎是比学习html/css/dom容易些.
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线XChinux

只看该作者 3楼 发表于: 2013-07-13
如果是像flash/silverlight那样做一个浏览器插件,以运行qml/js混合代码或代码包,这样如何.
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线toby520

只看该作者 4楼 发表于: 2013-07-14
关注下Webapp of QML
QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网,关注金融
开发跨平台客户端,服务于金融行业
专业定制界面
群号:312125701   373955953(qml控件定做)
离线XChinux

只看该作者 5楼 发表于: 2013-07-14
换一个方式讲,前端qml/js,后端为C++(即客户端形式)或PHP/Java/C#(服务器端)等,这样也不错。
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线voidbroken

只看该作者 6楼 发表于: 2013-07-21
关注
快速回复
限100 字节
 
上一个 下一个