Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结

原创 2017年02月03日 13:36:30

Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结

 

 

1.1. 理解Atwood定律 1

1.2. H5做出个htmlui是很方便的,跨平台 2

1.3. 启动exe。。使用chrome app模式启动即可 2

1.4. Js ide使用webstorm,支持js单点调试 3

1.5. 使用ajax技术连接界面ui与后端 3

1.6. H5技术调用本地文件选择对话框 4

1.7. 结论,使用javascript技术制作桌面gui程序已经比较成熟了。但是依然有一些小坑 6

 

 

1.1. 理解Atwood定律

Jeff Atwood发表于2007年的这篇博客里,他提出了著名的“Atwood定律”,即”任何能够用JavaScript实现的应用系统,最终都必将用JavaScript实现。“ (Any application that can be written in JavaScript, will eventually be written in JavaScript.

 

这应该就是Jeff Atwood定律的由来:JavaScript既能独立完成所有互联网应用所需的功能开发,同时又是主流编程语言中最为轻量级的

 

编程语言的可读性与开发效率提升,也是从机器语言>>asm汇编》》native类型语言(vb pb c c++ delphi) >>vm类型语言(java c#) >>script脚本语言(js python php) >>dsl类型语言(halcon matlab h5  autoit shell sql脚本等)。。

 

脚本语言和dslGUI领域一个非常好的一个选择,主流脚本基本语言有js python  php等,当然还要集大成者h5。。Attilax更加的看好js python的缩进很蛋疼。。脚本语言最大的优点就是不用编译啊,方便修改,体积小巧。部署友好性较好。。

 

 

 

1.2. H5做出个htmlui是很方便的,跨平台

但是还是有一些坑要填的啊。。特此记录。。

 

H5 ui方面的ide就是dw了。。我用的dreamweaver cc 2015版本还不错

H5方面的资源就很多了,浩如烟海,这里我使用jq操作dom,使用bootstrap这个css框架稍微美化下界面

 

 

 

1.3. 启动exe。。使用chrome app模式启动即可

以往我们桌面gui程序使用h5做界面,需要使用webkit browser控件作为主控件,比如c#.netwpf,或者javajavafx,还是有些麻烦的。。

 

现在,经过我孜孜不倦的研究,使用chrome这些浏览器的app模式即可啊。。现在的浏览器功能真是越来越强大了啊。。

如果全屏程序,全屏模式:kiosk

 

启动命令  C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --app=http://localhost:8088/imgSearch/imgSearch.html

 

效果如下图,和使用javafx技术制作桌面gui程序是一模一样的。。

 

 

 

 

1.4. Js ide使用webstorm,支持js单点调试

后端的js调试使用这个ws。。前段js调试使用chrome的开发者工具即可了。。。

1.5. 使用ajax技术连接界面ui与后端

还有一种浏览器扩展对象技术,可以直接连接后端,单貌似不好调试。。也许是我研究的不够。。

使用ajax技术连接后端有个好处就是方便调试,毕竟chrome这些浏览器的debug工具很强大的。

不过使用ajax,就得要一个web server了。这里直接使用nodejs +express web模块

 

var path = require('path');
var express = require('express');
var app = express();
console.log("__dirname:"+__dirname)
webroot=path.join(__dirname, '..');
console.log("webroot:"+webroot)

//return;

app.use(express.static(webroot));

app.get('/', function(req, res) {
    res.send('Hello world');
});

var server = app.listen(8088, function() {
    console.log('Express is listening to http://localhost:8088');
});

 

1.6. H5技术调用本地文件选择对话框

默认h5是不能调用本地文件路径的。。所以我们使用ajax技术后端调用即可。。不过,js貌似比较难以直接调用osapi。。还好,使用cli接口调用一个exe打开文件选择框即可。。。这个exe文件使用autoit脚本即可制作。。Autoit是个调用os功能的很好的dsl,其次使用shell脚本也是个调用os功能的强大dsl。。。

这样就可以直接打开本地的文件筐了

 

 

 

 

 

 

 

 

 

确认后,会把本地路径显示到文本框里面去

 

 

function  main() {
    $("#openTmpPic").click(function () {
        //note must add ati  ext ...beir   backcall/?xxxx
        
$.get("../backcall.ati", {cls: null, meth: "openTmpPic", p1: "v1", p1_type: "int", rdm: Math.random()}, function (arry) {
                    $("#tmppath").val(arry);
        });

    });

 

nodejs后端,增加一个调用即可


app.get('/backcall.ati', function(req, res) {
 //   reqG=
    
var meth=req.query.meth;
    eval(meth+"(req,res)");
    var p1=req.query.p1
    console
.log("---p:"+p1);
 //   res.send('Hello world');
});
 function openTmpPic(req, res)
{
    var fsrMode = require("../com.attilax/ui/FileSelector.js");
    var fsr=new fsrMode.FileSelector();
    fsr.folderSelector(function(path){
        res.send(path);
    })
}

 

1.7. 结论,使用javascript技术制作桌面gui程序已经比较成熟了。但是依然有一些小坑

比如调用osapi,。稍微麻烦些。还好可以通过cli接口调用autoit shellos dsl来解决。。

js目前不能直接调用dll貌似。貌似有时候还得通过调用autoit来解决。。

其次,一些类库比如opencvjs的支持还不够,需要通过py来中转。。

 

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher  kok  虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王

简称:: Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴

全名::Emir Attilax Akbar bin Mahmud bin  attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当  阿尔 拉帕努伊

常用名:艾提拉(艾龙),  EMAIL:1466519819@qq.com

 

 

头衔:uke总部o2o负责人,全球网格化项目创始人,

uke宗教与文化融合事务部部长, uke宗教改革委员会副主席

Emir Uke部落首席大酋长,

uke制度与重大会议委员会委员长,uke保安部首席大队长,uke制度检查委员会副会长,

uke 首席cto  奶牛科技首席cto , 软件部门总监 技术部副总监  研发部门总监主管  产品部副经理 项目部副经理

uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人,莱恩群岛区连锁负责人,uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人

 Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长

 

uke终身教育学校副校长   Uke医院 与医学院方面的创始人

 Uke 户外运动协会理事长  度假村首席大村长  uke交友协会会长

 uke出版社编辑总编

 

转载请注明来源:attilax的专栏  ?http://blog.csdn.net/attilax

--Atiend  v4

 

 

HTML+CSS+python+qtwebkit打造跨平台桌面应用(一)

目录 引言与环境配置 数据交互问题(这应该是最先想到,html使用js控制的,如何跟python交互数据呢) 文件编码问题,为了国际化、通用化,要用unicode否则汉字不能正常显示 界面问题,具体...
  • lonely_wm
  • lonely_wm
  • 2015年07月12日 14:12
  • 3100

用HTML5打造本地桌面应用

HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优...
  • qq_32609883
  • qq_32609883
  • 2015年12月11日 16:06
  • 1537

Atitit 使用js nodejs进行图像处理ocr的解决方案attilax总结

Atitit 使用js nodejs进行图像处理ocr的解决方案attilax总结     1.1. 导出类库以及class的调用 1 1.2. Cli接口处理  var exec = re...
  • attilax
  • attilax
  • 2017年02月01日 19:44
  • 835

Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持

Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持   1. 设置 document.domain为一致  推荐1 2. Apache 反向代理...
  • attilax
  • attilax
  • 2016年01月21日 15:27
  • 578

Atitit 桌面软件跨平台gui解决方案 javafx webview

Atitit 桌面软件跨平台gui解决方案 javafx webview   1.1. 双向js交互1 1.2. 新弹出窗口解决1 1.3. 3.文档对象入口dom解析1 1....
  • attilax
  • attilax
  • 2016年11月07日 02:49
  • 440

Atitit easyui翻页组件与vue的集成解决方案attilax总结

Atitit easyui翻页组件与vue的集成解决方案attilax总结     ===============使用 1 ===========\paggingUtil_easyui_vue...
  • attilax
  • attilax
  • 2017年04月11日 00:17
  • 901

Atitit 手机图片备份解决方案attilax总结

Atitit 手机图片备份解决方案attilax总结   1.1. 图片分类 相机图片与app图片 1 1.2. 增量备份,只能使用按照时间法备份。。 1 1.3. 备份工具选型 1 1....
  • attilax
  • attilax
  • 2017年04月07日 22:05
  • 144

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结   1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2...
  • attilax
  • attilax
  • 2015年07月31日 02:56
  • 1826

Atitit.attilax重要案例 项目与解决方案与成果 v6 qa15

Atitit.attilax重要案例 项目与解决方案与成果 v6 qa15     1. attilax重要案例的分类(atiuse,auBackTech,bizImp)3 1.1. 两个...
  • attilax
  • attilax
  • 2016年10月18日 23:51
  • 327

Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案     1. 业务场景 android+webview h5 css背景...
  • attilax
  • attilax
  • 2016年04月16日 21:24
  • 304
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
举报原因:
原因补充:

(最多只允许输入30个字)