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