Win10系列:VC++调用自定义组件1
通过20.9.1小节中的代码和步骤编写了一个名为"FilePickerComponent"的WinRT组件,接下来将在上一小节所新建的项目基础上,继续介绍如何在不同的语言所编写的应用中调用这个WinRT组件。
(1)JavaScript调用WinRT组件
在解决方案资源管理器中右键点击解决方案图标,选择添加一个JavaScript的Windows应用商店的空白应用程序项目,并命名为FileJS。接着右键点击FileJS项目的项目名,选择"添加引用",弹出"引用管理器-FileJS"窗口,并在"解决方案"的"项目"栏中选择FilePickerComponent组件,单击"确定"按钮,将这个WinRT组件引入到项目中。
引入WinRT组件后,接下来打开default.html文件,并在body元素中添加如下的前台代码,用于布局前台界面。
<div>
<h1>JavaScript中调用WinRT组件</h1>
</div>
<div>
<textarea id="FileText" style="font-size: 40px" rows="10" cols="40"></textarea>
</div>
<div>
<button id="FileReaderButton" style="font-size: 40px">打开文件</button>
<button id="ShowFileButton" style="font-size: 40px">读取文件</button>
</div>
在上面的代码中,添加了一个textarea控件和两个按钮。其中textarea控件用于显示读取到的文件中的内容,两个按钮分别为"打开文件"和"读取文件","打开文件"按钮用来通过文件打开选取器选择文件,"读取文件"按钮用来将读取到的文件内容显示到textarea控件中。
添加了上述的前台代码以后,接下来打开default.css文件,为前台的控件添加样式,代码如下所示:
body {
background: #fff;
}
#FileText {
color: #000;
border: 3px solid LightBlue;
word-wrap: break-word;
}
#FileReaderButton {
color: #000;
border: 3px solid LightBlue;
}
#ShowFileButton {
color: #000;
border: 3px solid LightBlue;
}
h1 {
color: #000;
}
在上面的代码中,首先设置body元素的背景为白色,然后设置id为FileText的textarea控件的字体颜色为黑色,并设置此textarea控件的边框颜色为淡蓝色,边框粗细为3px,接着设置此textarea控件中的文本可以自动换行。再分别设置"打开文件"按钮和"读取文件"按钮的字体颜色为黑色,按钮的边框颜色为淡蓝色。最后设置h1元素中的字体颜色为黑色。
添加了上面的前台代码以后,接着在解决方案资源管理器窗口中右键点击FileJS项目下的js文件夹图标,在弹出的菜单栏中选中"添加",并在"添加"的子菜单栏中选择"新建项",然后在出现的"添加新项"窗口中选中"JavaScript文件",添加名为"script.js"的文件。接下来打开script.js文件,并添加如下的代码:
(function () {
WinJS.UI.Pages.define("default.html", {
// 每当用户导航至此页面时都要调用此功能。它
// 使用应用程序的数据填充页面元素。
ready: function (element, options) {
var openButton = document.getElementById("FileReaderButton");
openButton.addEventListener("click", ReadFile, false);
var readBtton = document.getElementById("ShowFileButton");
readBtton.addEventListener("click", ShowFile, false);
}
});
//创建FilePicker类的对象
var filePicker = new FilePickerComponent.FilePicker();
//打开文件
function ReadFile() {
filePicker.readFile();
}
//将文件内容显示到textarea
function ShowFile() {
var fileText = document.getElementById("FileText");
fileText.innerHTML = filePicker.fileContent;
}
})();
在上面的代码中,分别为"打开文件"按钮和"读取文件"按钮添加单击事件处理函数ReadFile和ShowFile。接着创建FilePicker类的对象filePicker,此类定义在名为"FilePickerComponent"的WinRT组件中。接下来定义ReadFile函数,并在此函数中调用filePicker对象的readFile函数读取文件。然后定义ShowFile函数,在这个函数中通过document对象的 getElementById函数得到名为"FileText"的textarea控件,并将filePicker对象的fileContent属性的值显示到这个textarea控件中。
添加了上述的代码以后,接下来在default.html文件的head元素中添加如下的代码,引用前面添加的script.js文件。
<script src="/js/script.js"></script>
运行FileJS项目,单击"打开文件"按钮将显示如图20-24所示的文件打开选取器界面。
图20-24 文件打开选取器
在文件打开选取器中选取一个名为"Text.txt"的文本文件,然后单击"读取文件"按钮,将文本文件中的内容显示到textarea控件中,如图20-25所示。
图20-25 JavaScript调用WinRT组件
Win10系列:VC++调用自定义组件1的更多相关文章
- Win10系列:VC++调用自定义组件3
(3)C++/CX调用WinRT组件 在解决方案资源管理器中右键点击解决方案图标,选择添加一个Visual C++的Windows应用商店的空白应用程序项目,并命名为FileCPP.接着右键点击Fil ...
- Win10系列:VC++调用自定义组件2
(2)C#调用WinRT组件 在解决方案资源管理器中右键点击解决方案图标,选择添加一个Visual C#的Windows应用商店的空白应用程序项目,并命名为FileCS.接着右键点击FileCS项目的 ...
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- Win系列:VC++编写自定义组件
在Visual Studio 中新建一个Visual C++的 Windows应用商店的Windows运行时组件项目,并将项目命名为FilePickerComponent.然后在项目的解决方案资源管理 ...
- Yii2.0 高级模版编写使用自定义组件(component)
翻译自:http://www.yiiframework.com/wiki/760/yii-2-0-write-use-a-custom-component-in-yii2-0-advanced-tem ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- Android自定义组件系列【7】——进阶实践(4)
上一篇<Android自定义组件系列[6]--进阶实践(3)>中补充了关于Android中事件分发的过程知识,这一篇我们接着来分析任老师的<可下拉的PinnedHeaderExpan ...
随机推荐
- Qt5.WebView.添加节点的测试代码
1.代码: #include "mainwindow.h" #include "ui_mainwindow.h" #include <QWebFrame& ...
- Codeforces 934D - A Determined Cleanup
934D - A Determined Cleanup 思路: 找规律,和k进制的求法差不多,答案的奇数位是p%k,偶数位如果p%k!=0,那么答案是k-p%k,否则为0. 代码: #include& ...
- 第 7 章 多主机管理 - 045 - 安装 Docker Machine
安装 Docker Machine 先安装docker 官方安装docker-machine的文档地址:https://docs.docker.com/machine/install-machine/ ...
- C# winform 窗体怎么隐藏标题栏,不显示标题栏
//没有标题 this.FormBorderStyle = FormBorderStyle.None; //任务栏不显示 this.S ...
- MySQL数据库索引之B+树
一.B+树是什么 B+ 树是一种树型数据结构,通常用于数据库和操作系统的文件系统中.B+ 树的特点是能够保持数据稳定有序,其插入与修改操作拥有较稳定的对数时间复杂度.B+ 树元素自底向上插入,这与二叉 ...
- RMQ 解决区间查询问题
线段树写法不管,比较灵活.这里主要讨论DP实现. 其实单纯说RMQ解决的是区间最值查询是不准确的,只要满足一个区间的信息可以从它的覆盖区间获得(即[L,R]<=[L,r],[l,R] (l< ...
- centos6 安装python3.5后pip无法使用的处理
现象:安装pip后发现命令无法识别command not found 原因:which查看找到不到执行路径 find搜索发现安装后存放在/usr/local/python3.5/bin下,于是判断 ...
- Myeclipse项目中Source、Projects、Libraries、Order and export含义
Myeclipse 新建一个项目时,会出现如下界面 输入项目名,点击next Source source folder:存放.java源文件的根目录:output folder:.class编译输出的 ...
- drf 认证、权限、限流、过滤、排序、分页器
认证Authentication 准备工作:(需要结合权限用) 1. 需要使用到登陆功能,所以我们使用django内置admin站点并创建一个管理员. python manage.py creates ...
- 1.numpy_overview
官网文档:https://www.numpy.org.cn/ Numpy 简介 导入numpy Numpy是Python的一个很重要的第三方库,很多其他科学计算的第三方库都是以Numpy为基础建立的. ...