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组件