尝试HTML + JavaScript 编写Windows App
一直以来博文中使用最多的就是C# + XAML。进入Windows App时代，又多了一对 Javascript + HTML组合，这对于Web开发的程序员来说再熟悉不过了。其实小编也做过几年的Web开发，算不上什么大拿，但那时无时不刻的在网络上寻找Javascript、AJAX、JQuery代码，研究各种动态Web效果。每次打开VS总是看到Javascript项目选项，但从来也没创建过。随着Windows 8.1 Preview、Visual Studio 2013 Preview发布，我也来体验一下Javascript开发Windows App是什么感觉。
打开Visual Studio 2013 Preview，新建一个空Javascript项目，在工程目录中有三个default文件，后缀分别为css、js、html，看到这三个文件不用打开就应该知道是干什么的。Default.css控制界面显示效果，比如字体大小、间距、颜色等。Default.js程序逻辑处理，如事件、动态效果等。Default.html这个就是界面展示了，程序的UI效果都通过它来展示。
在Default.html的<Body>标签里添加一些简单的代码，我们的目的是当点击Go！按钮时，显示username填写的名字。个人喜好用Blend进行界面编辑，用起来比VS方便一些。
<body>
<div class="apptitle">Hello World!</div>
<div class="appname" id="showname"></div>
<div class="appinput">
<input id="username" type="text" /> <button id="nameBtn" type="button">Go!</button>
</div>
</body>
接下来，需要在Default.js里定义按钮点击事件，事件写好后需要在app.onactivated中注册该事件，这样才能使点击按钮生效。
function showNameBtnClick(eventInfo) {
var userName = document.getElementById("username").value;
var showString = "This is " + userName + "!";
document.getElementById("showname").innerText = showString;
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
var nameBtn = document.getElementById("nameBtn");
nameBtn.addEventListener("click", showNameBtnClick, false);
}
};
运行F5启动程序，在Input中输入名字，点击Go！按钮，达到预期效果。
尝试HTML + JavaScript 编写Windows App的更多相关文章
- 如何使用 App Studio 快速定制你自己的 Universal Windows App
之前我为大家介绍过 App Studio 这只神器可以帮助大家快速制作一个 Windows Phone 8 的应用,今天之所以在写一篇关于 App Studio 的文章是因为,App Studio 经 ...
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- 用Xamarin和Visual Studio编写iOS App
一说开发 iOS app,你立马就会想到苹果的开发语言 Objective C/Swift 和 Xcode.但是,这并不是唯一的选择,我们完全可以使用别的语言和框架. 一种主流的替换方案是 Xamar ...
- 怎样使用 App Studio 高速定制你自己的 Universal Windows App
今天之所以在写一篇关于 App Studio 的文章是由于,App Studio 经过了几次升级功能得到了明显提升还能够调用系统功能了.而且能够更方便的和应用商店关联公布 Universal Wind ...
- 【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐 新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...
- 通过Intel XDK编写跨平台app(一)
Intel XDK 是一个新的跨平台手机应用开发工具.它努力把整个开发流程变的简单,尽可能把所有的平台都封装到一个包中,通过收集各种开发工具来使你的开发变的简单. 在这篇文章中,我将会向你介绍什么是I ...
- 用React Native编写跨平台APP
用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时.原生组件渲染的应用程序的框架.它基于React,Facebook的JavaScript的 ...
- c# 编写windows 服务，并制作安装包
对服务的认识有很多个阶段. 第一阶段:当时还在用c++,知道在一个进程里while(True){},然后里面做很多很多事情,这就叫做服务了,界面可能当时还用Console控制台程序. 第二阶段:知道了 ...
- 用Kotlin语言重新编写Plaid APP：经验教训(I)
原文标题:Converting Plaid to Kotlin: Lessons learned (Part 1) 原文链接:http://antonioleiva.com/plaid-kotlin- ...
随机推荐
- java 实现（代码） -- 水仙花数 + 杨辉三角形
/* 在控制台输出所有的“水仙花数” 水仙花:100-999 在以上数字范围内:这个数=个位*个位*个位+十位*十位*十位+百位*百位*百位 例如:xyz=x^3 +y^3 +z^3 怎么把三位数字拆 ...
- iOS开发--关于TableViewCell的可视化设置细节
由于时间问题,本篇博文很简略. 1.关于设置Cell的边距问题
- django 基于proxy实现用户权限管理
项目中经常会遇到用户权限管理的问题,django adminsite已经提供非常实用的用户权限管理机制.不过有些时候,我们希望根据相关用户属性来过滤adminsite中显示的内容.下文将结束如何实现: ...
- macbook安装win7
通常大家都喜欢购买苹果电脑,因为配置高,速度快,但是却不喜欢使用ios系统,这时候需要在macbook上安装windows系统 全新的macbook进行windows的安装,基本大家都会,使用boot ...
- Java Gradle入门指南之内建与定制任务类（buildSrc、Groovy等）
上一篇随笔介绍了Gradle的安装与任务管理,这篇着重介绍Gradle的内建任务(in-built tasks)与自定义任务(custom tasks),借助Gradle提供的众多内建任务类型 ...
- .Net Attribute详解(下) - 使用Attribute武装枚举类型
接上文.Net Attribute详解(上)-Attribute本质以及一个简单示例,这篇文章介绍一个非常实用的例子,相信你一定能够用到你正在开发的项目中.枚举类型被常常用到项目中,如果要使用枚举To ...
- .NET领域驱动设计—看DDD是如何运用设计模式颠覆传统架构
阅读目录: 1.开篇介绍 2.简单了解缘由(本文的前期事宜) 3.DomainModel扩展性(运用设计模式设计模型变化点) 3.1.模型扩展性 3.2.设计模式的使用(苦心专研的设计模式.设计思想可 ...
- Servlet/JSP-04 JSP基础
一. JSP概述 Servlet 是 Java 程序,可以在 Java 程序内部返回一段 HTML 代码(字符串形式)到浏览器,供浏览器解释展示. JSP 是一种脚本语言,在 HTML 内部通过嵌入 ...
- html5 如何进行自定义属性的定义和查询
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>T ...
- Js 关于console 在IE 下的兼容问题
程序员在开发代码的过程中,使用console作为调试代码过程的一种手段. 发布到测试生产环境,发现IE8 出现加载错误.使用开发者工具调试,发现可以绕过问题. 通过网络搜索和在项目中进行修正. 以下办 ...