LomoX界面库-高仿QQ2011、QQ音乐盒等

本帖最后由 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

1. calcPlugin.cpp
   
2. class CalcPlugin implements Plugin
   
3. {
   
4. private:
   
5.       string action_add = "call_add";
   
6.       string action_sub = "call_sub";
   
7. public:
   
8.       PluginResult execute(string action,JSONArray jsonParams,string callBackID)
   
9.       {
   
10.            string resultStatus = PluginResult.Status.OK;  //PluginResult.OK|ERR
    
11. 
    
12.           if(action.equal(action_add))
    
13.            {
    
14.                 int num1 = jsonParams.getNumber(0);     //Get First number
    
15.                 int num2 = jsonParams.getNumber(1);     //Get Second number
    
16.                 int sum = num1 + num2;
    
17.                 JSONObject jsonObj = new JSONObject();
    
18.                 jsonResult.put("sum",sum);
    
19.                 return new PluginResult(resultStatus,jsonResult);
    
20.            }
    
21.            else if(action.equal(action_sub))
    
22.            {
    
23.                 int num1 = jsonParams.getNumber(0);     //Get First number
    
24.                 int num2 = jsonParams.getNumber(1);     //Get Second number
    
25.                 int sub = num1 - num2;
    
26.                 JSONObject jsonObj = new JSONObject();
    
27.                 jsonResult.put("sub",sub);
    
28.                 return new PluginResult(resultStatus,jsonResult);
    
29.            }
    
30.       }
    
31. }

复制代码

那么对于Javascript来说：Javascript主要是为了调用C++中的函数：CalcPlugin

1. plugins.js
   
2. //define the Calc class:
   
3. var Calc = function(){
   
4. };
   
5. /*if the status is "PluginResult.Status.OK" that call successCallBack, and if the status is "PluginResult.Status.ERR", then call errorCallBack.*/
   
6. 
   
7. Calc.prototype.add=function(successCallBack,errorCallBack,num1,num2){
   
8.      Lomox.calcPlugin.execute(successCallBack,errorCallBack,"call_add",[num1,num2]);
   
9. }
   
10. 
    
11. Calc.prototype.sub=function(successCallBack,errorCallBack,num1,num2){
    
12.      Lomox.calcPlugin.execute(successCallBack,errorCallBack,"call_sub",[num1,num2]);
    
13. }
    

复制代码

最后一步，则在html页面中引入js.

1. <script src="lomox.js"></script>
   
2. <script src="plugins.js"></script>
   

复制代码

1. var calc = new Calc();
   
2. 
   
3. function sumSuccess(result){
   
4.   alert("result:"+result.sum)
   
5. }
   
6. 
   
7. function sumError(result){
   
8.   alert("result:"+result.msg)
   
9. }
   
10. 
    
11. calc.add(sumSuccess,sumError,12,14);
    
12. 
    
13. function subSuccess(result){
    
14.   alert("result:"+result.sub)
    
15. }
    
16. function subError(result){
    
17.   alert("result:"+result.msg)
    
18. }
    
19. calc.add(subSuccess,subError,12,14);
    

复制代码

同样的，对于Javascript，也就是说，UI界面调用C++插件层。举个例子：

1. class CalcPlugin implements Plugin
   
2. {
   
3. private:
   
4.       string action_add = "call_showmsg";
   
5. public:
   
6.       PluginResult execute(string action,JSONArray jsonParams,string callBackID)
   
7.       {
   
8.            string resultStatus = PluginResult.Status.OK;  //PluginResult.OK|ERR
   
9.           if(action.equal(action_add))
   
10.            {
    
11.                 string msg jsonParams.getString(0);     //Get the Text you want to show
    
12.                 //Here call our JavaScript function "ShowMsg"
    
13.                 Lomox.execJS( "ShowMsg("+msg+");" );              
    
14.                 JSONObject jsonObj = new JSONObject();
    
15.                 return new PluginResult(resultStatus,jsonResult);
    
16.            }      
    
17.       }
    
18. }

复制代码

举一些开源的例子与商业例子：

QQ2011：


QQ音乐盒：


谷歌浏览器：


Metro风格电话软件：


界面仿QQ股票软件、数据使用广发证券API：




GIS系统（B/S版）转换成LomoX桌面版。LomoX特性之一。离线客户端开发。