2.3 开始动手吧——Hello Viewer示例

2.3       开始动手吧—— Hello Viewer 示例

随手翻开任何一本编程的书，都会在介绍完基本概念之后出现一个类似“ Hello world ”的程序，用一个最简单的例子来演示语言或框架的使用方法，本书也不例外。本节中我们会用一个最简单的例子去演示如何对简单网页布局进行编程。请注意，本节这个示例的重点是明确浏览器各个框架之间的关系以及演示如何调用浏览器的 API ，所以在这个例子中，服务器端代码仅仅起到一个辅助的作用。另外，鉴于异常处理会使代码变得复杂，为保证您更容易理解代码的组织结构，这里我们只处理那些必须处理的异常。

本示例采用的编程语言为 asp.net 。浏览器端采用 AJAX 浏览器，服务器端使用的是部署在 IIS 上、使用 asp.net 编写的 web 组件。

值得一提的是， MapGuide 附带的示例中也有一个名为“ Hello Viewer ”的程序，该示例与我们本节的示例除了名称相同外，并没有任何关系。由于该示例中有更多服务器端编程的代码，如果您想对于服务器端编程有所了解，可以参考 MapGuide 提供的那个示例。

2.3.1          我们的目标在前方——明确需求

对于一个软件项目而言，明确需求就是成功的一半。因此，我们先了解一下我们这个示例要完成什么样的功能。

在本示例中，我们将为 MapGuide 增加一个对“用户区域”的支持。需求如下：

1.       用户希望能够在地图上面定义一个点，作为他的用户区域。

2.       一旦用户定义了用户区域，他可以随时通过某种方式迅速定位（平移）到他设置的用户区域位置。

3.       用户希望每个人的用户区域都被该用户专有，并且不会被其他用户访问或者修改。

4.       用户希望在他需要的时候能够重新定义他的用户区域。

另外，由于用户不习惯在地址中输入长长的参数列表，所以希望能够一个页面来输入登录信息，当用户输入登录信息并提交时，就会自动打开已经定义好的基本网页布局。

界面方面，用户希望登录页面如图 2-4 所示：

图 2-4 Hello Viewer 用户登录界面

这个界面的地址是 http://localhost/mapguide/mapviewerajax/helloviewer.html ，用户输入自己的用户名密码后，点击“登录”按钮，该界面就会自动跳转到已经定义好的地图中。

没有设定用户区域的地图页面如图 2-5 所示，设定用户区域、定位用户区域按钮需要位于工具栏、上下文菜单和任务列表中，以便用户可以随时设定和定位用户区域。如果用户在已定义用户区域的状态下设定用户区域，就表示用户不再想使用以前定义的用户区域而要重新设定一个。

再右侧的任务主页上，第一行是欢迎信息，里面包含用户名，以便用户可以知道当前登录的用户名。下面是用户可以执行的操作，也就是设定用户区域。

图 2-5 没有设定用户区域时的地图页面

已经设定了用户区域的地图页面如图 2-6 所示。

 

图 2-6 设定了用户区域的地图页面

与没有设定用户区域的地图页面唯一不同的是，设定了用户区域的地图页面的任务主页内容有所变化：该页面会在中间部分显示已经设定好的用户区域的坐标，用户可以执行的任务也变成了定位用户区域和重新设定用户区域两个。

2.3.2           挽起袖子开工—— Hello Viewer 的实现

先让我们看看我们应该如何实现用户的需求。

用户要求能够保存用户的区域信息，那么我们必然需要一种方式能够储存用户相关的信息。这里我们在服务器上放置一个文件 (data/userArea.dat) 来完成这件事。这个文件中每一行是一个用户的区域信息，其格式为“用户名 | 用户区域横坐标 | 用户区域纵坐标”，如“ Administrator|-87.7052382792109|43.7045967831076 ”。同一用户在整个数据文件中只占一行。

用户的需求可以概括为一个登录页面、一个任务主页和两个基本网页布局中使用的命令。登录页面和任务主页都相对简单，我们应该如何来实现这两个命令呢？如前文所述，能够让我们自由扩展的命令有调用脚本命令和调用 URL 命令，因此，我们有如下的几种方案：

方案一：让任务主页中包含两个脚本函数，将两个命令设置为调用任务主页中这两个函数的调用脚本命令。

方案二：让任务主页将包含脚本函数的页面加载到 scriptFrame ，将两个命令设置为调用 scriptFrame 中脚本函数的调用脚本命令。

方案三：让任务主页注册一些函数到 mapFrame 中，这两个命令会调用这些注册到 mapFrame 中的脚本。

方案四：将两个命令都实现为调用 URL 命令，执行命令时，会将指定的页面加载到 scriptFrame ，这个页面的 onload 事件会执行一些脚本来完成功能。

这四种方案都能完成用户的需求，但是前三种都使得命令与任务主页之前存在着较大的耦合。所以，这里我们采用第四种方案来实现。

我们可以用下面的方法实现这个功能：

1.       制作一个登录页面，用来向地图页面传递参数（ helloviewer.html ）。

2.       将设定用户区域和定位用户区域分别实现为两个包含有 Javascript 脚本的页面（ digitizeuserarea.aspx 和 openuserarea.aspx ）（其中设定用户区域和储存用户区域实现为两个页面，设定页面会将设定的数据提交到储存页面 saveuserarea.aspx ）。

3.       创建一个基本网页布局（ Library://HelloViewer/HelloViewer.WebLayout ），在该布局中用两个调用 URL 命令来在 scriptFrame 中调用上一步制作的两个页面，并将这两个命令加到工具栏、上下文菜单和任务列表中。

4.       为基本网页布局实现一个任务主页（ userareamain.aspx ），主页中的超链接通过在 scriptFrame 中加载包含对应脚本的页面来执行任务。

限于篇幅，这里我们只给出代码编写的思路。您可以在本书所附的源代码中找到完整的源代码。

首先，我们需要实现一个登录页面。

登录页面的关键在于如何将参数传递给 ajaxviewer.aspx ，这里我们在页面中放置了一个 form ，将 form 的 action 指向 ajaxviewer.aspx 页面，这样在提交表单的时候，浏览器便会打开 ajaxviewer 页面，也就是地图页面。由于 GET 方法会把所有提交的参数显示在地址栏中，这里我们使用 POST 方式来提交登录信息。

为了在提交的参数中加入基本网页布局参数，我们在页面中使用一个名为 weblayout ，类型为 hidden 的 input 来向 ajaxviewer.aspx 传递我们要打开的基本网页布局的资源标识。

下面是实现执行功能的页面。如前文所述，我们需要完成设定、保存和定位三个页面。

由于调用 URL 所调用的 URL 是定义在基本网页布局中的，所以并不能根据实际登录情况传递诸如会话标识等动态信息，所以我们这三个页面采用的方法都是两次访问的办法：第一次访问没有参数，所以返回的页面仅仅是一个可以在加载完毕后让 scriptFrame 通过包含会话标识参数再次访问该页面的简单页面；第二次访问的时候，由于含有会话标识，就能从服务器端获得当前登录用户的用户名，并根据用户名查找用户数据文件来做对应的处理。

对于这三个页面中的任何一个而言，如果处理过程中出现什么错误，那么该错误的内容会被写到 errorMessage 变量中，当页面发现 errorMessage 不为空的时候，会将页面加载成功的脚本变成显示错误信息而不是执行相应的功能。

设定页面会调用 mapFrame 的 DigitizePoint 函数来在地图上取一个点，取得之后，会将这个点的坐标传递给 saveuserarea 页面保存起来。如果用户已经定义了用户区域，则用户很可能是要重新定义用户区域，这样该页面就会有一个提示来让用户确认他的操作。当这个页面由任务主页调用的时候，参数列表中有可能包含值为 true 的 REDIGITIZE 参数，该参数表示用户已经确认操作，因此不会再出现让用户确认的提示。

saveuserarea 页面会对数据进行保存，并根据保存成功与否，在返回页面加载后的脚本中显示相应的信息。

openuserarea 页面会打开保存的数据，如果用户已经定义了用户区域，那么该页面加载时，脚本文件会调用 mainFrame 中的 ZoomToView 来把平移到定义的用户区域。

从这个示例的实现过程我们可以看出：

1.       通过编写登录页面（或者用一个更大的框架来包括 mainFrame ）可以让用户不再接触到地址栏中复杂的参数列表（如登录信息和网页布局文件资源标识等）。

2.       通常用命令完成一个功能的实现过程是：首先编写一个动态的脚本页面，完成功能的脚本会写在该页面的 onload 事件中，再用命令在 scriptFrame 中加载这个脚本页面。

3.       如果任务窗格内的页面要完成的功能和命令中的功能有重复，可以让任务窗格内的页面也用 scriptFrame 中加载相同脚本页面的方法，可以最大限度的重用代码，也可以较少任务窗格内页面和命令之间的耦合。