Win10系列:VC++调用自定义组件1

时间:2022-09-07 22:47:29

通过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所示的文件打开选取器界面。

Win10系列:VC++调用自定义组件1

图20-24 文件打开选取器

在文件打开选取器中选取一个名为"Text.txt"的文本文件,然后单击"读取文件"按钮,将文本文件中的内容显示到textarea控件中,如图20-25所示。

Win10系列:VC++调用自定义组件1

图20-25 JavaScript调用WinRT组件