创建自适应的用户界面.pdf

Flash FlexBuilder AS3 使用FFllaasshh，FFlleexxBBuuiillddeerr和AASS33创建自适应的用户界面 原文地址 /devnet/flash/articles/liquid_gui.html 原作 James OReilly （） 翻译 Tangbin （) 翻译完成时间 2007年2月27日 一、概述 1.1 11..11 关于作者 James OReilly，Adobe认证专家，SynergyMedia公司（一家位于纽约的Flash咨询和培 训公司）的首席技术官（CTO）。他的Blog（）中收集了许多他本人关于Flash和 Flex开发的经验和思考。 随着用户体验需求的提高，越来越多的开发者在思考和探索如何在web中实现如同桌面应 用那样丰富体验的方法。而本文正是关于这方面的内容，它将要告诉你如何创建动态的、自动 根据屏幕范围调整显示大小的图形用户界面。 众所周知，液体（liquid）是一个分子的集合体，这些分子互相自由的运动并且紧密结 合不分离。而在web开发中，“自适应页面”就如同“liquid”一样，自适应页面中的内容将 自动而独立的调整大小来适应不同的web浏览器窗口的或者其他给定的宽度，而让整个页面看 起来就想专门为这个大小而设计的一样。这和“定宽页面”形成很鲜明的对比。所谓“定宽页 面”，是指按照特定的宽度来设计的页面，多出来的地方则直接用空白或其他背景填充。如 今，自适应页面在很多地方已经渐渐地被定宽页面所代替。 不管自适应页面的前途如何，很多用户依旧希望自己所使用的桌面应用具有一个能够自 适应的界面，这让能使应用程序界面看起来更人性化。当你打开一个应用程序并改变它的大 小，你希望看到所有的图形化界面的内容能自动排列来适应新的大小，而不是出现空白或显示 不完整。 为了表述得更清楚，图1显示了两个Gaim（一种及时通讯工具）的消息窗口的截图。你可 以看到，无论如何改变Gaim的大小，界面都会自动的适应窗口的大小。用户已经渐渐了习惯了 桌面应用中的自适应大小功能。而目前，越来越多的桌面应用已经有了基于web的RIA（rich internet application 富网络应用）实现，因此，相信大部分用户都希望RIA能看起来和用起 来如同桌面应用一样。 图1，两种不同大小下的Gaim及时消息窗口 1.2 11..22 看看我们要做的东西 在此教程中，我将通过Flash中Stage对象的一些特性，来创建一个自适应的应用界面。 我将做一个简单的、传统的图片库作为列子，这个例子可以放在网页上以供浏览查看。当然， 将这个例子中将在一个新的浏览器窗口中探出来，可以令其看起来更象是一个桌面应用而不是 网页的一部分。 这个图片库将包含三个部分：头部，主体和底部。头部部分将包含应用的名称和一些按 钮，包括让用户改变背景的按钮，以及在“原始大小”和“最合适大小”之间切换的按钮。主 体部分允许用户查看所选择的图片。底部部分包含一个有多张图片的队列提供给用户选择要查 看的图片。总之，我们要做的东西，你肯定在曾经在哪儿看见过的，或者你也许已经做过类似 的东西。 图2，在改大小的窗口中的非拉伸界面 在图2中，图片库被设置成具有一个不可以拉的伸界面，在这个情况下，无论怎么拉伸窗 口，应用程序的界面看起来都没有错误。如果不使用非拉伸界面而让应用程序跟随显示窗口直 接拉伸，在浏览器窗口被拉伸到一个和原始SWF文件的长宽比不一样的大小的时候，应用程序 的界面看起来就是扭曲的，如图3所示。 图3，应用程序界面的大小和浏览器窗口一样的例子 这些情况会让用户感觉很不友好。如果应用程序使用如图2的不可拉伸界面，用户将无法 把窗口拉得更大一些。假如用户的显示器有1600 x 1200或者更高的分辨率，而只能看到如此 小的一个图片，是很令人郁闷的。同样，如果一个应用程序的界面一拉伸就变得扭曲和比例失 衡，也同样难以给用户留下好的印象。 看看图4，我们想要做的就是这样的。如同桌面应用一样，使用浏览器打开的应用程序可 以自动的根据浏览器的大小而从新调整大小。用户会很乐意的使用这样的应用程序，并将其拉 伸到最适合自己使用的大小。用户甚至可能忘记自己使用的是一个从浏览器中打开的应用程 序。 图4，应用程序自适应浏览器窗口 1.3 11..33 读者需求 如果需要测试本教程中的例子，你需要下面的软件和文件： Flash Professional 9 ActionScript