试用TideSDK及Windows 7下TideSDK的安装方法

一直想用WEB技术来开发桌面应用,今天在OSC看到了一个叫TideSDK的开源项目,好像是基于WebKit,它能用WEB技术(HTML5,CSS3和JavaScript)创建多平台的桌面应用程序,就特别感兴趣,所以自己试用了一下。

TideSDK介绍:

TideSDK(http://www.tidesdk.org/) 是一个让你使用你的 Web 开发技能(HTML5, CSS3 and JavaScript)来创建漂亮而且独特桌面应用的开发工具包,支持跨平台开发(Mac OSX/Linux/Windows)。

TideSDK 当前支持的编程语言包括:C/C++、Python、Ruby、PHP、JavaScript,接下来将支持:Lua、Falcon、C# (maybe through Mono)、Java。

试用TideSDK及Windows 7下TideSDK的安装方法_第1张图片

Windows 7下TideSDK的安装方法: 

1、打开 http://www.tidesdk.org/ 点击下载TideSDK,截止2012-12-20 11:36:38 最新版本是 TideSDK-1.3.1-beta-win-x86.zip,解压到:C:\ProgramData\TideSDK;

2、下载 Download TideSDK Developer for Windows : https://github.com/downloads/TideSDK/TideSDK/TideSDK-Developer-1.4.2-win-x86.msi , 接着安装;

3、为了最后能打包输出msi安装文件,所以我们还要下载并安装:
     1) Imagemagick :http://www.imagemagick.org/script/binary-releases.php#windows 
     2) Wix 3.0 : http://wix.codeplex.com/releases/view/44406

4、下载官方示例HelloWorld:https://github.com/TideSDK/TideSDK-HelloWorld , 然后解压;

5、打开TideSDK Developer,点击“Import Projects”,选择官方示例的解压目录,OK!,接下来你就可以根据官方示例和API开发WEB桌面应用了!

试用TideSDK及Windows 7下TideSDK的安装方法_第2张图片

试用TideSDK及Windows 7下TideSDK的安装方法_第3张图片


示例代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="pandao QQ:272383090" />
<title>TestWebApp</title>
<style type="text/css">
*{margin:0;padding:0;} 
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#666;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<h1>Welcome to TideSDK Developer</h1>
<script type="text/javascript">
	var menu = Ti.UI.createMenu(),
	fileItem = Ti.UI.createMenuItem('文件(F)'),
	openWindow = fileItem.addItem("打开", function() {
		var window = Ti.UI.currentWindow;
		window.setHeight(300);
		window.height = 300;

		/*Ti.UI.createWindow({
			id: "propertyWindow",
			url: "app://page2.html",
			title: "My New Window",
			contents: "foo!"
			baseURL: "app://page_url"
			x: 300,
			y: 400,
			width: 500,
			minWidth: 500,
			maxWidth: 500,
			height: 500,
			minHeight: 500,
			maxHeight: 500,
			maximizable: true,
			minimizable: true,
			closeable: true,
			resizable: true,
			fullscreen: false,
			maximized: false,
			minimized: false,
			usingChrome: true,
			topMost: false,
			visible: true,
			transparentBackground: false,
			transparency: false*/
		});
	}),
	exitItem = fileItem.addItem('退出', function() {
		if (confirm('确定要退出吗?')) {
			Ti.App.exit();
		}
	});

	menu.appendItem(fileItem);
	Ti.UI.setMenu(menu); 
</script>
<script type="text/php">
	date_default_timezone_set('America/Chicago');
	ini_set('default_charset', 'utf8');
	ini_set('display_errors', 'Off');
	function getPhpInfo() {
	   ob_start();
	   echo "<pre>";
	   phpinfo();
	   echo "</pre>";
	   return ob_get_clean();
	}
</script>
</head>
<body>
  <script type="text/php">
      $document->write(''.getPhpInfo().'');
  </script>
</body>
</html>

附注:

要打包为MSI安装文件,就点击“Package With Runtime”(包含运行环境,最终文件较大),或者点击“Package Without Runtime”(不包含运行环境,最终文件较小)。

相关链接:

Github : https://github.com/TideSDK
官方示例:https://github.com/TideSDK/TideSDK-Examples
在线API : http://tidesdk.multipart.net/docs/user-dev/generated/#!/api
API文档下载:https://github.com/downloads/TideSDK/TideSDK/TideSDK-1.3.1-docs.zip

Support

Documentation: http://tidesdk.multipart.net/docs/user-dev/generated
Source Code: https://github.com/TideSDK/TideSDK
Tutorials: Get started easily http://tidesdk.multipart.net/docs/user-dev/generated/#!/guide
Q & A on Stack Overflow: Get help http://stackoverflow.com/questions/tagged/tidesdk
Report a Bug: Help us improve https://github.com/TideSDK/TideSDK/issues.
IRC: Chat with us on #tidesdk on freenode.net
Twitter: Follow TideSDK @tidesdk.
Blog: Read our blog at http://tidesdk.org/blog.
Knowledge Base: Read the wiki https://github.com/TideSDK/TideSDK/wiki
Google Groups: Join our mailing list https://groups.google.com/forum/#!forum/tidesdk.


你可能感兴趣的:(JavaScript,PHP,html5,css3,TideSDK)