本帖最后由 shawken 于 2012-11-13 09:23 编辑 UI界面开发的新思想,不像传统的DirectUI的方式,而是以Html做为软件的界面布局,这种效果可以达到很多DirectUI达不到的效果,关键没难度。 Windows 8 的Metro风格开发,也是采用了与此一致的思想,对于Windows 8,布局使用的是xaml,而对于本项目,界面是html. LomoX是一款基于QT开发,跨平台,已支持Linux,以html,css,javascript来布局软件界面,逻辑由C++实现。 支持html5。目前正在开发MAC支持、windows phone支持。 已发布C++插件版本。 网站:www.lomox.hk 论坛:bbs.lomox.hk QQ群:41830909 更多项目描述,请访问本人博客或项目网站: http://www.windowscoder.org 目前已开源:UI层库,插件源码。 插件机制: 插件主要是使用C++来开发业务逻辑层,通过与JavaScript进行交互,达到逻辑的实现,例如:C++写的一个简单的dll
- calcPlugin.cpp
- class CalcPlugin implements Plugin
- {
- private:
- string action_add = "call_add";
- string action_sub = "call_sub";
- public:
- PluginResult execute(string action,JSONArray jsonParams,string callBackID)
- {
- string resultStatus = PluginResult.Status.OK; //PluginResult.OK|ERR
- if(action.equal(action_add))
- {
- int num1 = jsonParams.getNumber(0); //Get First number
- int num2 = jsonParams.getNumber(1); //Get Second number
- int sum = num1 + num2;
- JSONObject jsonObj = new JSONObject();
- jsonResult.put("sum",sum);
- return new PluginResult(resultStatus,jsonResult);
- }
- else if(action.equal(action_sub))
- {
- int num1 = jsonParams.getNumber(0); //Get First number
- int num2 = jsonParams.getNumber(1); //Get Second number
- int sub = num1 - num2;
- JSONObject jsonObj = new JSONObject();
- jsonResult.put("sub",sub);
- return new PluginResult(resultStatus,jsonResult);
- }
- }
- }
复制代码
那么对于Javascript来说:Javascript主要是为了调用C++中的函数:CalcPlugin
- plugins.js
- //define the Calc class:
- var Calc = function(){
- };
- /*if the status is "PluginResult.Status.OK" that call successCallBack, and if the status is "PluginResult.Status.ERR", then call errorCallBack.*/
- Calc.prototype.add=function(successCallBack,errorCallBack,num1,num2){
- Lomox.calcPlugin.execute(successCallBack,errorCallBack,"call_add",[num1,num2]);
- }
- Calc.prototype.sub=function(successCallBack,errorCallBack,num1,num2){
- Lomox.calcPlugin.execute(successCallBack,errorCallBack,"call_sub",[num1,num2]);
- }
复制代码
最后一步,则在html页面中引入js.
- <script src="lomox.js"></script>
- <script src="plugins.js"></script>
复制代码
- var calc = new Calc();
- function sumSuccess(result){
- alert("result:"+result.sum)
- }
- function sumError(result){
- alert("result:"+result.msg)
- }
- calc.add(sumSuccess,sumError,12,14);
- function subSuccess(result){
- alert("result:"+result.sub)
- }
- function subError(result){
- alert("result:"+result.msg)
- }
- calc.add(subSuccess,subError,12,14);
复制代码
同样的,对于Javascript,也就是说,UI界面调用C++插件层。举个例子:
- class CalcPlugin implements Plugin
- {
- private:
- string action_add = "call_showmsg";
- public:
- PluginResult execute(string action,JSONArray jsonParams,string callBackID)
- {
- string resultStatus = PluginResult.Status.OK; //PluginResult.OK|ERR
- if(action.equal(action_add))
- {
- string msg jsonParams.getString(0); //Get the Text you want to show
- //Here call our JavaScript function "ShowMsg"
- Lomox.execJS( "ShowMsg("+msg+");" );
- JSONObject jsonObj = new JSONObject();
- return new PluginResult(resultStatus,jsonResult);
- }
- }
- }
复制代码
举一些开源的例子与商业例子: QQ2011: ![](http://www.windowscoder.org/usr/uploads/2012/02/1209035372.jpg) QQ音乐盒: ![](http://www.windowscoder.org/usr/uploads/2012/02/1791104165.jpg) 谷歌浏览器: ![](http://www.windowscoder.org/usr/uploads/2012/02/2075697087.png) Metro风格电话软件: ![](http://www.windowscoder.org/usr/uploads/2012/09/2270433753.jpg) 界面仿QQ股票软件、数据使用广发证券API: ![](http://www.windowscoder.org/usr/uploads/2012/08/2637185647.png) ![](http://www.windowscoder.org/usr/uploads/2012/08/3725221970.png) GIS系统(B/S版)转换成LomoX桌面版。LomoX特性之一。离线客户端开发。 ![](http://www.windowscoder.org/usr/uploads/2012/01/518709660.jpg) ![](http://www.windowscoder.org/usr/uploads/2012/01/3802950649.jpg) |