用html css javascript创建自己的RIA图形教程第1/2页

生产前，建立开发环境。打开netbeans6.1，在项目工作区中右键单击新项目，然后选择Web目录下的Web应用程序。

输入RIADemo作为项目名称。

选择要运行的服务器和java ee标准。

在这里选择tomcat5.0和j2ee1.4。本文介绍的示例不依赖于服务器，因为htmlcssjavascript本身是静态的，完成后就是一个html文件。严格来说，web程序必须有服务器才能运行，netbeans仍然采用这种管理理念。这一步可以点击完成建立项目，下一步就是选择框架。这里，为了简单和纯粹，没有选择框架。建立项目后，项目工作区的项目结构如下：。

因为它是静态的，所以您不需要关注网页目录之外的任何东西。为了方便管理，需要在网页目录下创建inc和images两个新目录，这非常简单，这里不再赘述。第一个例子，请求页面时等待，效果如图：。

这个例子是在当前页面执行一个操作，在离开或返回操作结果之前，冻结页面并显示一个等待框。功能是提示用户页面正在加载。尤其是对于一些海量数据的请求，UI可以缓解客户长时间等待带来的烦躁。简单地说，这个例子包括两个要点。1，静态元素2，当盒子出现又消失。这个效果中的UI是一个加载框，在一个黑暗的背景上。对于静态元素，不管出现什么，其本质永远是html、CSS和javascript，嵌入式控件除外，比如flash。事实上，嵌入式控件不再属于静态元素(如HTML)的范围。在这个例子中，带加载的框实际上只是一个包含有滚动效果的图片和普通文本的div，但是这个div用CSS进行了美化，然后根据网页的特点用javascript来控制div的显示和消失。然后，如何做出这样的效果，为了清晰的说明整个制作过程，先不管javascript，先做div。在网页目录下，右键单击并创建-html 。

选择html并命名文件索引。页面建立后，需要的素材是具有滚动效果的图片loading.gif，并将图片复制到images文件夹中。接下来，创建一个新的CSS文件，右键单击inc文件夹，并创建-other，选择其他目录中的级联样式表，如图所示：。

命名，点击完成，生成CSS文件。新创建的CSS会自动生成一个样式根。将光标移动到根样式表的范围，netbeans会显示一个CSS的样式生成器窗口，以及一个效果预览窗口，如下图：。

编辑器右侧的生成器窗口提供了很多属性的GUI设置，并自动生成相应的代码，而编辑器底部则显示了这种样式的预览效果。例如，在字体面板中，作者选择斜体作为样式，粗体作为粗细，然后下划线和#ff0099作为颜色。选择颜色时，会弹出一个颜色选择器。如果选择了对应的颜色，预览效果如下：。

编辑器自动生成代码，预览框也显示了应用后的效果，netbeans做的相当不错。需要注意的是，该工具生成的代码虽然简单，但肯定没有手工编写的代码灵活、易于控制。在这里，定义我们需要的等候箱的样式。正在加载{ border :2 pxsolid # a3 bad 9；/*应用样式的对象的边框样式*/color : # 003366；/*应用的样式对象中内容的颜色*/padd :10 px；/*应用的样式对象中的内容与样式框架之间的距离(上、下、左、右)*/margin 33600；/*样式对象与其周围元素之间的距离(上、下、左、右)*/z-index :2000；/*网页中应用样式对象的z坐标值*/width :205 px；/*应用的样式对象的宽度*/text-align : center；/*应用的样式对象中的内容居中*/position : absolute；/*页面上应用样式对象位置的显示模式*/font-weight : bold；/*应用的样式对象中字体的样式*/font-size : 13px；/*要应用的样式对象中字体的大小*/}每个属性的具体含义。如果读者感兴趣，可以找资料进一步了解，这里就不细说了。建立CSS后，在刚刚创建的index.html文档中添加以下代码来导入CSS样式。加入该地区

页面加载.保存文件，右键单击index.html文件并选择运行文件。

浏览器会自动弹出，显示效果如下：。

出现一个框，细心的读者会发现UI和开始演示的略有不同。如果将其添加到刚才定义的加载样式中，下面的代码：背景：白色URL(./images/block-BG . gif)repeat-x；/*应用样式对象的背景并设置为水平重复*/当然需要添加背景图像块-bg.gif。添加背景图片后，效果如下：。

至此，UI完成。接下来，如何让网页变暗，不可点击。让网页变暗最简单的方法就是把网页的背景色改成深色，但这显然是没有意义的，因为网页上的元素改成深色后还是可以点击的。那么如何让背景变暗，让点击变得不可能呢？分析静态网页的原理后，我们可以看到变暗必须通过调整颜色来实现，但是如果我们不能点击，我们可以通过替换被点击的对象来实现，也就是在被点击的对象上，生成一个对象，这个对象是透明的，所以当用户点击时，他点击的实际上是一个透明的对象挡住了底层的对象，从而给用户一种点击无效的错觉，如下图所示：。

如果物体B是透明的，并且在物体A旁边，如果第三方试图接触物体A，只遇到物体B，那么所有针对物体A的接触都将无效。在这一点上，我们要做的就是用这个特效进行div，这还是CSS的制作和应用。并且通过CSS的滤镜属性可以获得深色的透明效果，新样式bgdiv . bgdiv { background : # CCC；/*背景色*/opa city 3360.3；/*透明度*/filter: alpha(不透明度=30)；/*透明滤镜*/position : absolute；/*页面上应用样式对象位置的显示模式*/z-index :1000；/*网页中应用样式对象的z坐标值*/width :500 px；/*应用的样式对象的宽度*/height :500 px；/*应用的样式对象的高度*/top : 0px；/*应用的样式对象到页面顶部的距离*/left : 0px；/*应用的样式对象与页面左端的距离*/}在正文区域，添加：运行文件，效果如下：。

至此，UI设计完成，但是我们看到的div大小是500*500，并没有填满整个页面，等待框也没有居中，效果已经出现在开头，显然不能直接使用。真正使用的时候需要背景填充整个页面，中间需要显示等待框，需要能够控制效果出现和消失的时间。然后，这些任务需要用javascript来完成。Javascript可以控制页面上几乎所有的静态元素，而以上效果是通过控制后台div和等待框来实现的。在javascript中，获取页面上的元素最简单的方法就是给目标对象的ID属性赋值，然后通过javascript的getElementbyId来获取。这里，给bgdiv的ID属性赋值。比如我们先解决第一个问题，就是通过javascript设置图层的大小来填充整个页面。函数show BG(){ var bgdiv=document . getelementbyid(' bgdiv ')；//获取bgdiv对象bgdiv . style . width=document . body . client width；//将bgdiv对象的宽度设置为宽度if(document . body . client height document . body . scroll height)//将bgdiv对象的高度设置为高度bgdiv . style . height=document . body . client height；else bgdiv . style . height=document . body . scroll height；}这里需要注意的是，clientWidh和scrollWidth都代表可视区域的宽度。不同的是，如果网页中有滚动条，scollWidth比clientWidth大，因为scollWidth包含滚动条。？到部分，但clientWidth没有，只有可见部分。在上面的width函数中，这里采用的是clientWidth，因为根据网页设计的基本原则，设计出来的网页包含水平滚动条是相当不友好的，因为鼠标只能上下滚动，而不能从左向右滚动，所以这里直接采用clientWidth，也就是保证水平滚动条不会出现在整个项目中。以下高度设置考虑了与垂直滚动条和不与垂直滚动条的兼容性。以上功能可以保证调整后的bgdiv可以充满整个屏幕。在inc文件夹下，创建一个新的javascript文件，将上面的函数复制到其中，并在页面中添加以下代码来介绍该函数。为了显示方便，添加on load=' show BG()；'在身体标签里。页面加载后，可以看到调整后的bgdiv已经填满了整个页面。调整等待盒显示位置的原理类似。函数为：函数show wait(){ show BG()；//显示BG div var loading=document . getelementbyid(' load div ')；//获取loading对象loading . style . top=document.body.clientheight/2document.body.scrolltop-50;//设置从loading到top loading . style . left=document.body.clientwidth/2-110;//设置loading到左端的距离}在onload事件中调用showwait，显示wait框处于黑暗透明的背景上。这里需要强调的是CSS属性的位置属性，必须设置为绝对，这样上面的代码才会有效果，因为上面代码的位置是根据绝对位置设置的。上面的效果是页面一打开就会显示出来。如果要自己控制是否显示，需要使用CSS的属性显示，值为block时显示，值为none时不显示。我们在上面的CSS属性中增加了显示：无。当页面打开时，不显示任何效果。然后在showbg函数中添加bgdiv . style . display=" block "；将loading.style.display="none "添加到showwait函数中；在页面主体区域添加显示，运行页面，只能看到显示链接。点击显示链接后，会显示出想要的效果，如图：。

这种影响不会消失。在平时的学习工作中，我也发现了一个现象。当服务器没有完成处理并且没有将页面返回给客户端时，单击页面上的链接(即向服务器发送请求)不会改变页面本身。所谓网速慢也是事实。点击它并不能反映它。当服务器完成处理后，html被放回给用户，页面开始改变。然后，如果在单击链接时触发showwait事件，该效果将一直出现，直到服务器处理完请求，页面被重定向并消失。例如，如果我们将显示的代码更改为显示，然后运行页面，然后单击显示，我们可以看到等待框出现，当页面消失时，孙的主页出现。回过头来看，其实这个例子并没有什么特别之处，只是对HTML、CSS、javascript的要求非常高。只有熟悉了这三个静态要素，才能很好地把握它们。而这里，对艺术家有一定的要求。需要注意的是，等待的滚动图片和背景图片不是作者制作的，而是ext帧的图片，等待帧的CSS样式也是引用ext的。值得一提的是，netbeans6.1的编辑器为javascript提供了丰富的提示支持，不仅支持关键字，还支持兼容浏览器的提示，甚至还提供了一些简单的例子。本文花了大量篇幅解释了一个不复杂的例子，旨在通过详细的思考和开发过程，给读者一个如何开发自己的RIA的透彻分析。可以看出，制作这种类型的RIA，虽然还需要一定的美术基础和页面设计能力，但其基本制作步骤无非是以下两个步骤：1。用HTML和CSS做自己的UI。2.仔细研究页面的行为模式，以及什么时候写javascipt来控制UI。在下一篇文章中，作者将介绍一个复杂而全面的例子，包括弹出对话框、弹出菜单、特效层和拖动窗口。阅读下一页的全文。