65.9K
CodeProject 正在变化。 阅读更多。
Home

第5章：使用HTML、CSS和JavaScript创建Web小部件

Raj Lal
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.88/5 (13投票s)

2010年5月14日

CPOL

10分钟阅读

viewsIcon

328109

downloadIcon

5742

书籍《使用HTML、CSS、JSON和AJAX开发Web小部件》的免费章节

Get the Developing Web Widget book from Amazon.com

up.gif 购买Web小部件书籍或访问支持网站

第5章：使用HTML、CSS和JavaScript创建Hello World Web小部件

“我听到了就忘记了。我看到了就记住了。我做了就明白了。” - 孔子

本章内容

  • 创建一个Hello World小部件
  • 如何向小部件传递参数
  • 小部件如何处理数据
  • 小部件的良好数据源可能是什么

引言

简单来说，网络小部件是一个客户端、基于浏览器的应用程序，功能较小，并显示来自不同来源的数据。

在本章中，我们将使用HTML、CSS和JavaScript创建一个基本的Hello World小部件。本章为您理解网络小部件的开发提供了一个良好的起点。如果您是初学者，我建议您跟着我一起完成本章，并很好地掌握网络小部件的所有方面。在下一节中，我们将创建一个更高级的小部件，您将学习它的所有方面，如定制、安全性和性能，就像在真实世界场景中一样。本章首先展示Hello World小部件的不同组件，然后以循序渐进的方式开发它。

我们将使用微软的Visual Web Developer Express（免费）版本来开发小部件，但您可以使用您喜欢的集成开发环境（IDE）。

Hello World小部件

在深入开发小部件之前，让我们先看看它的功能。该小部件接受两个参数，值为“Hello”和“World”，其中一个从托管它的测试页面传递，另一个来自服务器托管的数据，然后将它们连接起来并与图像一起显示，如图5.1所示。当您点击“Hello World”文本时，它会重定向到网站http://widgets-gadgets.com，该网站也作为参数从页面传递。

HelloWorld.png
图5.1

小部件概述

小部件的主要功能是根据服务器数据和页面中传递的参数显示数据。Web小部件最常用的数据是JSON（JavaScript对象表示法）文件格式。原因是JSON数据可以跨域使用，这意味着JSON数据可以驻留在不同的服务器上，而用户页面上的Web小部件可以使用函数调用包含和使用它。本质上，JSON数据成为函数调用的参数的一部分。

例如，要从服务器包含JSON数据，请包含一个JavaScript文件`data.js`，其中包含一个带JSON数据作为参数的函数，如下所示

// function which accepts JSON data
ParseData( JSONData[]);

// JSON data format
  [{ “text”: “MyText”}]

// Widget.js
ParseData(data)
{
  var jsondata = data[0]; // since the JSON data is an array
  document.write(jsondata.text);
}

实际的 JSON 数据可以是任意数量的键值对数组，它遵循 JavaScript 对象表示法。更多信息请访问 JSON.org。`ParseData` 函数将位于另一个 JavaScript 文件中，例如 `myWidget.js` 文件。当 JavaScript 文件加载后，将调用该函数，然后使用 `Document.Write` 解析并显示 JSON 数据。

这里重要的一点是，`data.js` 文件可以在服务器端动态创建，这里是 JSON 数据，但它也可以是动态创建的一系列 JavaScript `document.write` 行，直接渲染 HTML。尽管拥有 JSON 数据为这种方法提供了模块化。

现在让我们看看Hello World小部件的架构。

小部件的架构可以分为三个部分，如图5.2所示。

  • 数据：来自`data.js`的小部件数据
  • HTML：托管小部件并向小部件传递参数的页面
  • JavaScript：解析和显示数据的主要功能
  • 图像和样式：小部件的展示

在本节中，我们将创建一个小部件，它接收来自服务器的JSON数据并将其解析并显示在小部件中，作为“Hello World”。打开您喜欢的HTML编辑器，让我们开始吧。

layout.png
图5.2

开发Hello World小部件

Hello World小部件将在小部件的可视区域内显示“Hello World”以及小部件的图像。
小部件的组成部分如图5.3所示。

  • 托管小部件的网页 (`testpage.html`)
  • 实例化小部件的引导JavaScript文件 (`bootstrap.js`)
  • 小部件的核心功能 (`widget.js`)，负责获取数据并显示它
  • 托管在服务器上的JSON数据文件 (`data.js`)
  • 小部件的呈现样式 (`style.css`)
  • 两张图片，小部件和背景

小部件页面

创建一个新的HTML页面，命名为`testpage.html`，并输入下面显示的代码。页面中的小部件代码包含一些变量和JavaScript，用于包含脚本以添加`DIV`元素“`myFirstWidget`”和包含`bootstrap.js`文件。现在不用担心它们，我们稍后会创建并了解bootstrap的作用。
通过将所有行封装在一个函数中并调用该函数，变量也可以具有局部作用域。

Test Page

 <script type="’text/javascript’">
  wWidth = “260px”;
  wHeight = “195px”;
  wFColor = “#627ea6”;
  wTitle = “Hello”;
  wURL= “http://widgets-gadgets.com”;
  document.write(‘

<div id="”myFirstWidget”"></div>

’);
  document.write(‘<scr’+’ipt type="”text/JavaScript”" src="”bootstrap.js”" />’);
 </script>

请注意，我们也不是使用HTML代码而是使用JavaScript代码来包含JavaScript文件，这是为了将小部件作为一个可嵌入代码块进行分组。HTML元素`myFirstWidget`是用于渲染小部件数据的主要元素，您稍后将看到。JavaScript文件`bootstrap.js`包含加载小部件功能和数据的逻辑。接下来我们将创建`bootstrap.js`。

project.png

图5.3

Bootstrap

`bootstrap.js` 文件用于使小部件更模块化，可以将其视为随页面加载但可以根据需要加载其他文件的轻量级文件。小部件可能包含多个 JavaScript 文件，因此引导文件是包含所有初始化代码的单个文件。

创建一个名为`bootloader.js`的JavaScript文件

document.write(‘<link rel="”stylesheet”" type="”text/css”" href="”style." />’);
document.write(‘<script type="”text/javascript”" src="”widget.js”"></script>
var myElement = document.getElementById(‘myFirstWidget’);
var JavaScriptCode = document.createElement(“script”);
JavaScriptCode.setAttribute(‘type’, ‘text/javascript’);
JavaScriptCode.setAttribute(“src”, ‘data.js’);
document.getElementById(‘myFirstWidget’).appendChild(JavaScriptCode);

在我们的引导加载器中，我们有更多的 JavaScript 代码来加载小部件的数据和功能。在后面的章节中，我们将看到如何使用引导加载器来延迟小部件的加载，从而减轻页面的加载负担。请注意，`widget.js` 先加载，`data.js` 后渲染，原因是 `data.js` 调用了在 `widget.js` 中声明的函数。

在`HelloWorld`小部件中，我们需要引导加载器提供三样东西

  • 加载演示样式表，`style.css`
  • 加载JSON数据，`data.js`
  • 加载小部件的逻辑，`Widget.js`，它接收数据并进行解析

使用HTML、CSS和图像进行呈现

引导代码首先加载的是样式表，因为它应该在小部件代码中使用之前加载。小部件的呈现包括样式表和用于显示小部件数据的图像。对于我们的小部件，让我们创建一个`style.css`和用于小部件和背景的图像（参见图5-4）。

创建一个新文件`Style.css`并将其添加到您的项目中。一个单独的样式表文件允许您更改小部件的外观和感受，而无需触及小部件的功能。输入以下代码。

请注意，我们稍后将在小部件`DIV`元素上使用一个样式。图片已包含在源代码中，但您可以使用照片编辑软件来创建它们。

other.png

图5.4
#MyWidget{
 margin:2;
 padding:5;
 font:Arial;
 font-size:larger;
 font-weight:bold;
}

JavaScript 对象表示法 (JSON) 数据

bootstrap加载的第二件事是`widget.js`，但我们先看看数据，因为它将传递给`widget.js`。创建一个新的JavaScript文件并命名为`data.js`，然后输入以下内容

  WidgetCallback([
   {
    “image_url”: “images/widget.gif”,
    “text”: “ World “,
    “description”: “ My First Widget”, 
    “id”: “1”
   }
  ]);

如前所述，`data.js`本质上是一个以JSON数据为参数的函数调用。我们将在`Widget.js`文件中创建`WidgetCallback`函数。请注意每个参数的键值对，它们都可以通过点表示法在被调用的函数中访问。接下来我们将创建`Widget.js`。

JavaScript核心功能

创建一个新的JavaScript文件，并将其命名为`widget.js`。

`widget.js` 这个JavaScript文件将只有一个函数`WidgetCallBack`。该函数将读取JSON数据，并根据传入数据中的值生成HTML代码。

这是`widget.js`文件的代码。

请注意，这两种调色板都显示一组有限的颜色，这被称为网络安全颜色（下一节将详细介绍），并包括灰色。调色板已成为小部件颜色自定义的标准，因此让我们看看创建调色板需要什么。

function WidgetCallback(JSONobject) 
{
  var wHelloWorld = JSONobject[0];
  var wHTML = “”;
  wHTML += (‘<center><div id="”MyWidget”">’);
  wHTML += (‘<img border="”0”" width="0" height="0" src="”’" />’);
  wHTML += (‘<a target="”_blank”" href="”’" style="text-decoration: none; ">’);
  wHTML += ( wTitle + ‘ ‘ + wHelloWorld.text + ‘</a>’);
  wHTML += (‘</div></center>’);
  document.getElementById(‘myFirstWidget’).innerHTML = wHTML;
 }

请注意，`data.js` 完全加载后，`WidgetCallBack` 函数立即被调用。

如您所见，代码为`Hello World`创建了HTML代码。它从测试页面传递的参数以及JSON对象中的数据获取值。

  • `wWidth` 用于定义小部件的宽度
  • `wHeight` 用于小部件的高度
  • `wWidgetHelloWorld.image_url` 用于小部件的背景图片
  • `wFColor` 用于小部件文本的前景颜色
  • `wTitle` 和 `wHelloWorld.text` 一起显示“`Hello`”和“`World`”

请注意，一旦HTML渲染完成，`DIV`元素`myFirstWidget`的`innerHTML`就会更新。

就这样！现在我们已经创建了所需的文件。只需在浏览器中打开测试页面，您应该就能看到Hello World小部件正在运行。目前，我们所有的文件都在本地，所以我想让您做的是在`bootstrap.js`文件中做一些小的更改，然后再次运行测试页面。

  var myElement = document.getElementById(‘myFirstWidget’);
  var JavaScriptCode = document.createElement(“script”);
  JavaScriptCode.setAttribute(‘type’, ‘text/javascript’);
  JavaScriptCode.setAttribute(“src”, ‘http://widgets-gadges.com/
  widgetbook/chapter4/data.js’);
  document.getElementById(‘myFirstWidget’).appendChild(JavaScriptCode);

这里的重点是小部件独立于数据的位置，因此可以在任何域的任何网页中托管。

小部件数据完整显示流程

在Hello World小部件中，JSON数据是服务器端数据和小部件之间的链接。JSON数据旨在由服务器端代码动态创建，并由位于网页上的小部件使用。显示“Hello World”的过程始于参数“Hello”，该参数与其他参数一起传递给小部件。然后小部件与数据一起加载，从数据中获取文本“World”，小部件功能将这两个文本连接起来并显示在小部件元素中。图5.5显示了Hello World小部件的架构。

以下是Hello World小部件的数据显示步骤

  1. 测试页面加载带有参数的小部件
  2. 小部件调用包含动态内容的`data.js`
  3. 加载小部件演示的样式表
  4. 小部件功能包括解析动态内容
  5. 小部件功能使用传入的参数渲染最终的HTML代码
  6. 最终的小部件显示HTML被传回网页

bigpicture.png

图5.5

摘要

在这个简短的章节中，我们学习了如何创建一个简单的“`Hello World`”小部件。我们了解了小部件如何从远程服务器显示数据

  • 小部件可以分为三个部分
    • 脚本形式的核心功能
    • 来自远程主机的数据
    • 样式表和图像形式的呈现
  • 小部件互动包括
    • 从托管页面传递的参数
    • 来自服务器的动态数据
    • 根据参数和数据渲染小部件代码的脚本代码

参考文献

谢谢

希望您觉得这有用。我很乐意听到您的评论。您可以通过connectrajesh@hotmail.com发送电子邮件。保重。

- 拉杰什·拉尔

© . All rights reserved.