第1章 脸面问题——关于网页布局

-----------------以下内容与正文无关-----------------

本来想一开始就写基本网页布局的，但突然觉得有必要先介绍一下什么是网页布局和网页布局的相关知识，所以才临时加入了这一章。

----------------------下面开始正文--------------------

 

 

第1章 脸面问题——关于网页布局

    对于一个像MapGuide这样的地图引擎来说，允许使用者对界面进行自由定制是很重要的。这是因为：

1.   不同的客户对于功能的要求不同。有的人可能只需要浏览地图，那么地图只需要提供简单的平移缩放功能，对于这些用户来说，就已经足够了；有的用户可能还需要了解诸如某块区域有多大这样的跟尺寸相关的信息，那么他们就需要“测量”功能。总的来说，需要的功能越多，界面元素也就越复杂。
2.   不同的客户使用习惯不同。有的人经常使用众多不同的功能，这样他就很可能习惯把所有常用功能都放置在工具栏中，以便寻找；有的人只需要浏览地图，那么他们就很可能希望所有的功能都放置在右键菜单中，这样可以让放置地图的空间最大，而且界面简洁。

    MapGuide的网页布局正好解决了这个问题。所谓“网页布局”，其实就是一个对于网页中所使用的界面元素如何排列的定义。用户可以自由选择在界面中放置哪些功能，元素是放在工具栏中，还是放置在右键菜单中。网页布局打破了功能和界面之间的耦合。通过使用“网页布局”这一概念，负责定制界面的人员（通常是网站管理人员）可以自由地按照自己的想法（其实还是有一些限制的）安排各个功能所处的位置，而功能开发人员可以不必关心布局问题，从而专注于功能的开发上。

1.1 淡妆浓抹总相宜——MapGuide的两种网页布局

    MapGuide提供了两种网页布局，一种称为基本网页布局(Basic Web Layout)，另一种称为灵活网页布局(Flexible Web Layout)。对于最终用户来说，除了界面不太一样之外，这两种布局并没有太大的不同。任何一张MapGuide的地图，都既可以放置在基本网页布局中，也可以放置在灵活网页布局中。甚至通过配置，可以让灵活网页布局看起来跟基本网页布局一样（但是反过来不行）。然而，对于功能开发人员来说，这两种网页布局所采用的代码（不管是服务器端代码，还是页面脚本），除了都使用了MapGuide网页服务器扩展API之外，可以说是基于两套完全不同的框架。因此，在任何一种布局中开发的功能，是不能直接应用在另一种布局上面的。

    图1-1和图1-2示意的是同一张MapGuide示例地图在不同网页布局下的界面。比较这两张图，细心的读者不难发现，同样的一张地图，灵活网页布局不仅提供更多的功能，如有圆、多边形等各种不同的选择要素的方式，被称之为“鹰眼”的概览地图(Overview Map)等，而且也更为美观。其实更好的用户体验仅仅是灵活网页布局的众多优势中的一部分。对于利用MapGuide进行二次开发的人员来说，由于灵活网页布局所用的页面脚本代码模块化程度更高，大部分代码都使用的是面向对象的编程风格，因此它具有更好的灵活性和扩展性，可以方便的修改现有功能或者添加新的功能。这也是为什么在开发新的MapGuide程序时，Autodesk推荐用户使用灵活网页布局的原因。

图1-1 基本网页布局示例

图1-2 灵活网页布局示例

    那么，是不是基本网页布局就一无是处了呢？其实不然，基本网页布局也有它自己的优势。通过下表1-1的比较，我们不难发现，尽管基本网页布局提供的功能简单，但也因此使得基本网页布局中网页的代码较少，这就使得浏览器加载基本网页布局起来要远快于灵活网页布局，而且基本网页布局对于浏览器所在的客户机的计算能力要求也相对较低。另外，由于网页中代码较少，所以网页在网络上传递时，对于网络负载的压力就不会太大。所以，如果用户对于功能的要求不是很复杂，客户机也可能较为陈旧，网络带宽也较低，但却对网页的响应速度有很高要求（比如一个政府部门想要在主页上放置一个地图以便公众查询，公众的客户机就可能很旧，网速也可能较慢）。那么，基本网页布局也许更为适合这样的项目。

布局方式 比较项目	基本网页布局	灵活网页布局
界面与功能
默认提供的功能	较少	较多
是否支持布局定制	不支持	支持
是否支持样式定制（如界面颜色、字体等）	不支持	支持
性能
页面加载时间	较少	较多
网络负载	较低	较高
客户机性能要求	较低	较高
浏览器与服务器交互次数	较少	较多
第三方开发
网页脚本代码结构	封装成函数，模块化程度较低	封装成类，模块化程度较高
自带脚本库代码量	较少	较多
可以使用的API数量	较少	较多
适合项目	对性能要求较高的项目	对功能有较多要求的项目

表1-1 基本网页布局和灵活网页布局的比较

1.2 扒开现象看本质——网页布局的存储

    网页布局这个概念听起来是蛮玄的。只需要对网页布局这个东西修修改改配置一下就能让界面发生翻天覆地的变化。那么网页布局究竟是什么呢？其实网页布局就是一个存储在服务器上的一个基于XML格式的配置文件。对于一个基本网页布局，其后缀是WebLayout；而对于一个灵活网页布局，其后缀是ApplicationDefinition。

    也许您很想知道究竟网页布局这个配置文件是什么样子。幸运的是，MapGuide给我们提供了一个机制，能够让我们看到服务器端所储存的文件内容。

    MapGuide有一个用来快速访问地图代理（MapAgent）的页面。我们会在后面的篇幅中详细介绍这一功能，而且会经常利用这一功能访问一些服务器的信息。目前您可以先把它看作是一个获取服务器信息的页面。如果您安装的是MapGuide开源版，该页面的位置是"http://<MachineName>/mapguide/mapagent/index.html " ，其中您需要用安装服务器的机器名称或者IP地址来替换其中的<MachineName>（如果是在本机访问，您可以使用“localhost”）。如果您安装的是MapGuide企业版，该页面的位置是"http://<MachineName>/mapguide<VersionNumber>/mapagent/index.html "，其中您除了要替换<MachineName>外，还需要用MapGuide的版本（如2010）来替换掉其中的<VersionNumber>。

    首先，用您的浏览器您将看到如图1-3这样的页面：

图1-3 地图代理页面

    然后，让我们点击左方下面红框内示意的超链接（GetResourceContent），这时你就能看到如图1-4所示的获取资源内容的页面。

图1-4 获取资源内容页面

    在红框标识出的位置填入您所要访问的网页布局在服务器上的资源标识（比如本例中我们填入的是“Library://Samples/Sheboygan/Layouts/Sheboygan.WebLayout”），点击“Submit按钮”，在弹出的登录框中输入管理员用户名的密码（默认的管理员用户名为“Administrator”，密码是“admin”），您就能够在新页面中看到该资源的内容信息。

    鉴于一个网页布局定义文件较大，我们这里就不一一列举各部分的含义了，而且我们也不建议用户直接编辑该文件。如果您想知道该定义文件需要满足什么样的规则，在MapGuide安装目录下有一个文件夹，包含有所有MapGuide资源文件的XML模式文件。如果您安装的是MapGuide开源版，这个文件夹默认位于“C:/Program Files/OSGeo/MapGuide/Server/Schema ”;如果您安装的是MapGuide企业版，这个文件夹默认位于“C:/Program Files/Autodesk/MapGuide<VersionNumber>/Server/Schema ”。其中的WebLayout-1.0.0.xsd就是基础网页布局的XML模式；而ApplicationDefinition-1.0.0.xsd就是灵活网页布局的XML模式。