初识heX，利用javascript开发桌面应用程序

最近看了一个开源的新技术，就是利用js和html开发桌面应用，就像写web页面一样，它就是heX，一个利用Node,js和HTML5来实现开发的技术。

而且维护这个开源技术的竟然是网易有道的一个团队，真是不错，这说明国内的技术真是提升了啊，不过目前好像只支持windows。

下面就来写个HelloWorld来试试，究竟运行出来的效果到底怎样。

先下载下来

解压之：

首先看到的是这个程序：hexclient.exe，它就是程序的入口，用来运行你写的html的一个启动项。

创建一个项目hello

目前项目比较简单，只有一个html页面，不过估计以后如果真正做项目的话也应该只有一个index.html文件吧，就像用jquerymobile一样的单页面项目。

首先测试测试一下对web基本元素的渲染情况怎么样：

<input type="button" id="bt" value="button"/>
	<input type="text"/>
	<Button>button2</Button>
	<select>
		<option>qqq</option>
		<option>qqq</option>
		<option>qqq</option>
	<select>
	<textarea></textarea>

把hello文件夹啊放在hex_3.1453.1188_windows下，然后打开manifest.json，修改

设置成自己的文件，然后保存，运行hexclient.exe就看到上图的结果了。感觉和在浏览器看起来没什么差别！

然后试试html5的东西

<form action="a.action">  
    <p>  
              <label for="email">电子邮箱：</label>  
              <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">  
    </p>  
    <p>  
              <label for="username">用户名：</label>  
              <input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符">  
              <input type="search" placeholder="用户名搜索" results="5" name="username-search" id="username-search">  
    </p>  
    <p>  
              <label for="username-search">生日：</label>  
              <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">  
    </p>  
    <p>  
              <label for="blog">博客地址：</label>  
              <input type="url" name="blog" placeholder="您的博客地址" id="blog">  
    </p>  
    <p>  
              <label for="mobile">手机：</label>  
              <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手机号">  
    </p>  
    <p>  
              <label id="label-working-year" for="working-year">工作年限：</label>  
              <input type="range" min="1" step="1" max="20" name="slider" name="working-year" id="working-year" placeholder="您的工作年限" value="3">  
    </p>  
    <p>  
              <label for="age">年龄：</label>  
              <input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年龄">  
    </p>  
    <p>  
              <label for="avatar">头像：</label>  
              <input type="submit" value="aaa">  
			  <input type="file" multiple onChange="uploadFile(this.files)">
    </p>  
</form>  

ok，还行，试试css3

<div id="demo" style="transition: all 700ms ease; -webkit-transition: all 700ms ease; -webkit-transform: rotate(40deg);">
						<h4><span>Profile</span></h4>
						<h5><span>We ♥ color</span></h5>											
	</div>

-webkit-backface-visibility: hidden;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) -1px -1px 3px 0px, rgba(0, 0, 0, 0.4) 11px 11px 18px 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform-origin: 32.5px 360px;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.7s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(202, 13, 134);
background-image: url(http://tympanus.net/Tutorials/SwatchBook/images/fabric.png);
background-origin: padding-box;
background-size: auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.0980392) -1px -1px 3px 0px, rgba(0, 0, 0, 0.4) 11px 11px 18px 0px;
box-sizing: border-box;
color: rgb(51, 51, 51);
cursor: pointer;
display: block;
font-family: 'Open Sans Condensed', 'Arial Narrow', serif;
font-size: 15px;
font-weight: normal;
height: 400px;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
top: 0px;
transition-delay: 0s;
transition-duration: 0.7s;
transition-property: all;
transition-timing-function: ease;
width: 130px;

ok，试试动画效果：

<input type="button" id="bt" value="show" onClick="show()">
	<input type="button" id="bt" value="hide" onClick="hide()">
	<div id="showDiv" class="">
	
		<h1>aaaaa</h1>
	</div>

function show(){
	$("#showDiv").show();
	
	$("#showDiv").addClass("from-below");
	setTimeout(function(){$("#showDiv").addClass("effeckt-show");},300);
	
}
function hide(){
	$("#showDiv").removeClass("effeckt-show");
	
}

总结，感觉效果还不错，由此感叹js多么重要，未来的发展方向啊，而且可以不用那么繁琐的利用java或者c++来开发桌面程序，为那些复杂的动画效果而头疼了，只用学习

html5的css3效果就够了，更多效果请读者自己试验吧！

利用heX开发的有道词典：http://download.ydstatic.com/cidian/static/6.0/20130812/YoudaoDict.exe

官网：http://hex.youdao.com/

完！