CN101404021A

CN101404021A - 一种在Web页面上动态显示圆角矩形的方法和Web服务器

Info

Publication number: CN101404021A
Application number: CNA2008101676891A
Authority: CN
Inventors: 张旭
Original assignee: SHENZHEN KINGDEE MIDDLEWARE CO Ltd
Current assignee: SHENZHEN KINGDEE MIDDLEWARE CO Ltd
Priority date: 2008-10-21
Filing date: 2008-10-21
Publication date: 2009-04-08

Abstract

本发明实施例提供一种在Web页面上动态显示圆角矩形的方法和Web服务器，该方法包括：服务器接收用户终端发送的访问Web页面的请求，对于页面中的圆角矩形区域，预置的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值，绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的信息发送给用户终端；用户终端在浏览器上显示出圆角矩形。根据本发明实施例，在用户访问页面时，圆角矩形组件动态绘制图片，并由服务器传送到终端显示，当需要调整圆角矩形的显示时，只需要改变页面为圆角矩形组件指定的属性值，就可以使圆角矩形组件根据新的属性值绘制新的圆角矩形，维护方便。

Description

一种在Web页面上动态显示圆角矩形的方法和Web服务器

技术领域

本发明涉及Web页面的显示技术，尤其涉及在Web页面上显示圆角矩形的方法及Web服务器。

背景技术

在Web应用系统中，如图1所示，经常会在页面的某些展示区域使用圆角矩形作为信息的显示面板，以达到更加美观和整洁的显示效果。仅仅依靠Html提供的标准元素能够让浏览器上显示严格矩形，不能够显示带有复杂形状边界的圆角矩形。为了解决这个问题，现有技术中在Web页面上圆角矩形中的圆角部分用预先存储的图片作为背景，具体地，首先由美工人员预先绘制若干个包含圆角的图片，以图片文件的形式存储在服务器的存储媒介中，再由Web系统的页面设计人员修改样式表文件，分别指定页面中圆角矩形的四个角区域的背景图片为上述存储的包含圆角的图片，圆角矩形的其他区域放置Html提供的标准元素，当用户终端向服务器发送访问页面的请求后，服务器依次将Web页面的Html代码发送给用户终端的浏览器，浏览器将这些Html代码显示成图形或者文字，其中当浏览器解析到圆角矩形的圆角区域时，会获得作为背景的图片文件的链接地址，然后浏览器向服务器发送获得该文件信息的请求，该请求中包含文件的链接地址，服务器接收到该请求后根据链接地址，在存储媒介中找到浏览器想要获得的文件并以二进制流的形式发送给用户终端，用户终端的浏览器将接收到的二进制流显示成图片，这样圆角矩形的四个圆角部分就在浏览器上显示出来，圆角矩形的其他部分可以通过浏览器解析Html代码中预先设置的标准元素来显示。

在系统要求发生变化时，例如基于整个页面风格变化的需要，页面中的圆角矩形的颜色、圆角的尺寸和圆角弧度等参数也需要做相应调整，此时采用上述现有技术的圆角矩形若要实现这样的调整，则需要美工人员根据新的要求重新绘制包含四个圆角的矩形图片，并需要网页设计人员重新调整样式表文件，使圆角矩形的四个角区域指定新的图片文件作为背景，这样当用户终端访问该页面时，服务器可以根据新的包含圆角的背景图片文件的链接地址，将新的背景图片以二进制流的形式发送给用户终端，浏览器将新的背景图片显示在页面中的圆角矩形的圆角区域。由此可见，当需要改变圆角矩形时，不仅需要美工人员重新绘制图片，还需要网页设计人员修改样式表，维护较麻烦。

发明内容

本发明解决的技术问题是提供一种在Web页面上动态显示圆角矩形的方法，以解决目前技术中由于采用静态背景图片实现圆角矩形显示所带来的维护麻烦的问题。

为解决上述问题，本发明提供一种在Web页面上动态显示圆角矩形的方法，该方法包括：

服务器接收用户终端发送的访问Web页面的请求，对于页面中的圆角矩形区域，预置的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值，绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的信息发送给用户终端；

用户终端根据接收的包含圆角矩形的信息在浏览器上显示。

这样，在用户终端通过浏览器访问需要显示圆角矩形的页面时，服务器将包含圆角矩形组件动态绘制的圆角矩形发送给用户终端，在页面需要维护的时候，圆角矩形的显示结果也需要做相应调整，上述技术方案不需要如现有技术中美工人员重新绘制背景图片，而只需要改变页面中指定的圆角矩形的属性值，这样当用户再访问该页面时，圆角矩形组件根据指定的新属性值绘制新的圆角矩形，并由服务器发送到用户终端上的浏览器中显示，所以本发明提供的显示圆角矩形的方法更用以维护。

在上述方法中，指定的圆角矩形组件的属性值包括表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值；圆角矩形组件根据预先指定的表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值，动态绘制圆角矩形。这样只需要改变指定的表示圆角矩形的形状和颜色的特征值，就可以实现圆角矩形的变化。

上述方法中，表示圆角矩形形状特征的属性值包括：表示圆角矩形的四个角中需要使用圆角的角的Target属性值；

表示需要使用的圆角的弧度的Radius属性值；

表示圆角矩形的宽度和高度的Height属性值和Width属性值；

圆角矩形组件根据预先指定的圆角矩形组件的属性值动态绘制出圆角矩形的步骤包括：

圆角矩形组件根据预先指定的圆角矩形组件的Target属性值，识别需要使用圆角的角，并在需要使用圆角的角区域绘制与Radius属性值、BgColor属性值、Height属性值和Width属性值相对应的圆角矩形。

表示圆角矩形颜色特征的属性值包括：

表示圆角矩形的背景颜色的BgColor属性值；

表示圆角矩形的边框颜色的BorderColor属性值；

圆角矩形组件根据预先指定的所述圆角矩形组件的属性值动态绘制出圆角矩形的步骤包括：

圆角矩形组件绘制与BgColor属性值、BorderColor属性值相对应的圆角矩形。

在上述方法中，还包括服务器端在页面的圆角矩形的中间区域控制显示的文字内容的步骤。这样圆角矩形就作为文字信息的展示面板。

在上述方法中，预先指定的圆角矩形组件的属性值还包括：表示是否自动出现水平滚动条的IsHScroll属性值，或/和表示是否自动出现垂直滚动条的IsVScroll属性值；

如果所述IsHScroll属性值为是，则在圆角矩形的中间显示的文字内容超过所述圆角矩形的宽度时，所述服务器端控制在页面的圆角矩形中显示水平滚动条；

如果所述IsVScroll属性值为是，则在圆角矩形的中间显示的文字内容超过所述圆角矩形的高度时，所述服务器端控制在页面的圆角矩形中显示垂直滚动条。

这样可以达到当文字信息过多时仍然保持较好的显示效果。

在上述方法中，圆角矩形组件的定义由JAVA语言编写制作。

本发明另一方面还提供了一种Web服务器，其包括：

接收单元，用于接收用户终端发送的访问页面的请求信息；

圆角矩形处理单元，用于将Web页面中指定给圆角矩形组件的属性值传递给圆角矩形组件并接收圆角矩形组件绘制的圆角矩形；

发送单元，将包含圆角矩形的信息发送给用户终端。

这样，在用户发送访问包含圆角矩形的页面时，上述服务器能够将圆角矩形动态画出的圆角矩形发送给用户终端，用来显示，在页面需要调整时，对于圆角矩形只需要给变指定的属性即可，页面的维护方便。

在上述Web服务器中，还包括用于存储预先制作的圆角矩形组件的圆角矩形组件实现单元。

附图说明

图1是页面中显示的一种圆角矩形的示意图；

图2是本发明实施例提供的一种在Web页面上动态显示圆角矩形的方法流程图；

图3是本发明实施例中对圆角矩形区域进行划分的示意图；

图4是本发明实施例提供的一种Web服务器的结构示意图；

图5是本发明实施例提供的另一种Web服务器的结构示意图。

具体实施方式

本发明的核心是利用圆角矩形组件实现动态绘制圆角矩形，以解决目前技术中采用静态背景图片实现圆角矩形显示所带来的维护麻烦的问题。

下面结合附图对本发明作进一步的说明。

本发明实施例提供一种在Web页面上动态显示圆角矩形的方法，如图2所示，该方法包括如下步骤：

S1：用户终端发送访问包含圆角矩形的Web页面的请求至服务器；

S2：服务器接收到该用户终端发送的请求后，对于页面中的圆角矩形区域，预先制作的圆角矩形组件根据页面中为该圆角矩形组件指定的属性值，绘制出圆角矩形，并将该圆角矩形传递给服务器，服务器将包含圆角矩形的信息发送给用户终端；

其中，上述圆角矩形组件可以由Web页面设计人员预先设计制作，并在包含圆角矩形组件的Web页面中以标签的形式引用该组件。

圆角矩形组件提供若干个可以设置的属性值，这些属性值包括可以表示圆角矩形的形状和颜色特征的属性值，表示圆角矩形形状的属性值包括：表示圆角矩形四个角中哪个或哪几个角需要使用圆角的Target属性值、表示需要使用的圆角的弧度的Radius属性值、表示圆角矩形的宽度和高度的Height属性值和Width属性值；表示圆角矩形颜色的属性值包括：表示圆角矩形的背景颜色的BgColor属性值、表示圆角矩形边框颜色的BorderColor属性值。圆角矩形组件根据预先指定的上述属性值，动态绘制与这些属性值相对应的圆角矩形，并将绘制完的圆角矩形传递给服务器。

下面举例说明上述指定圆角矩形组件的各个属性值的具体方法：

1)对于Targer属性值，在圆角矩形组件中定义TL、TR、BL、BR分别表示矩形的四个角，即Top-Left(左上角)、Top-Right(右上角)、Bottom-Left(左下角)、Bottom-Right(右下角)，例如图1的例子，指定矩形的左上角和右上角需要出现圆角，则页面中相应的代码可以写为：

.....

</panelBox>

其中panelBox为本发明实施例中圆角矩形组件的名称，和普通的HTML的标记在引用规则上没有区别。

2)对于Radius属性值，该属性值表示需要达到的圆角弧度值，例如图1中的圆角矩形的圆角弧度为10，则页面中相应的代码可以写为：

.....

</panelBox>

3)对于BorderColor属性值，该属性值用于表示圆角矩形的边框颜色，通过指定不同的BorderColor属性值，可以获得圆角矩形的不同外观颜色，例如，如果需要显示带有红色边框的圆角矩形，并且假设定义红色为“R”，则页面中的相应的代码可以写为：

.....

</panelBox>

对于指定圆角矩形的其他属性值也采用类似的代码书写格式。另外，实际应用中，通常需要同时指定圆角矩形组件的多个属性值，此时的多个属性值的赋值表达式之间用空格隔开，例如，如果在指定Targer属性值为“TL，TR”的同时，还要指定圆角矩形的边框颜色为红色，则页面中的代码可以写为：

.....

</panelBox>

上述方案中圆角矩形的尺寸和颜色等特征可以通过对圆角矩形组件提供的属性进行赋值来指定，当然也可以在圆角矩形组件的定义中将其中的几个属性值设置默认值，在页面的代码中调用圆角矩形组件的时候没有指定这些设置过默认值的属性值时，则这些属性值就以默认值进行处理。

圆角矩形组件根据预先指定的属性值绘制圆角矩形的一种具体实现步骤为：圆角矩形将圆角矩形区域分成9个部分，如图3所示，其中区域A1、A3、A7和A9为圆角矩形的四个角的区域，服务器端根据Target属性值和Radius属性值利用绘图API(Application Programming Interface，应用程序接口)函数对这四个角的区域进行绘制；对于其余的区域中，圆角矩形组件在此其区域内放置标准的Html提供的元素即可。

需要说明的是，在实际应用中，在圆角矩形的中间区域通常用来显示文字信息，因此，在绘制出需要的圆角矩形的同时也要显示所需的文字内容，只需要在页面中组件的开始标签和结束标签之间加入文字内容即可，例如：

需要显示的文字内容

</panelBox>

此时，如果先前指定了圆角矩形的高度和宽度属性值，则有可能出现需要显示的文字内容超出指圆角矩形的范围，为了能够更好的显示，圆角矩形组件中可以提供表示是否自动出现滚动条的属性，具体的说包括表示是否自动出现水平滚动条的IsHScroll属性值和表示是否自动出现垂直滚动条的IsVScroll属性值，这两个属性值都分别具有两个值，即是和否。如果IsHScroll属性值为是，则在圆角矩形的中间显示的文字内容超过所述圆角矩形的宽度时，服务器端控制在页面的圆角矩形中显示水平滚动条；如果IsVScroll属性值为是，则在圆角矩形的中间显示的文字内容超过所述圆角矩形的高度时，服务器端控制在页面的圆角矩形中显示垂直滚动条。

服务器将包含圆角矩形的信息发送给用户终端的具体步骤为：服务器将圆角矩形绘制的圆角区域的圆角图片以二进制流的形式发送给用户终端，对于圆角矩形的其他区域，由于是由标准的Html元素实现的，因此服务器以字符串的形式向用户终端发送。

上述步骤中，圆角矩形组件的实现可以用JAVA语言编写制作，具体的制作过程为本领域技术人员公知常识，这里不再赘述。

S3：用户终端根据接收的包含圆角矩形的信息在浏览器上显示出圆角矩形。

其中，浏览器将服务器发送的表示圆角图片的二进制流显示成对应的圆角图片，并将表示其他区域的字符串信息显示成圆角矩形的其他区域。

这样，通过上述步骤，在用户通过终端访问带有圆角矩形的页面时，预先放置在页面中的圆角矩形组件根据指定的属性值动态绘制圆角矩形，并由服务器发送到用户终端，使得浏览器显示圆角矩形，整个过程中圆角矩形是由圆角矩形组件动态绘出，不需要另外存储作为圆角区域背景的图片文件。在页面需要改变，而圆角矩形也要做相应调整的时候，只需要调整页面文件中指定的圆角矩形组件的属性值，以使得圆角矩形组件根据新的属性值绘制的圆角矩形符合新的要求，不需要如现有技术中重新由美工人员绘制图片，所以相对于现有技术，利用本实施例提供的方法显示圆角矩形更容易维护。

相应地，本发明还提供了一种Web服务器100，如图4所示，该Web服务器100包括：

接收单元101，用于接收用户终端发送的访问页面的请求信息；

圆角矩形处理单元102，用于将Web页面中指定给圆角矩形组件的属性值传递给圆角矩形组件并接收圆角矩形组件绘制的圆角矩形；

发送单元103，将包含圆角矩形的信息发送给用户终端。

其中，接收单元101在接收到用户终端发送的请求后，对于页面中圆角矩形区域，圆角矩形处理单元102将页面中的指定给圆角矩形组件的属性值发送给圆角矩形组件，该圆角矩形组件根据上述属性值绘制圆角矩形，并发送回圆角矩形处理单元102，页面中指定给圆角矩形组件的属性值包括表示圆角矩形的形状和颜色特征的属性值。圆角矩形组件可以借助调用绘图相关的API函数来完成对圆角矩形的四个角区域的绘制，对于圆角矩形其他部分，圆角矩形组件只需要放置标准的Html元素即可。圆角矩形组件可以用JAVA等常用的网络编程语言编写制作。上述圆角矩形组件预先制作并存储在圆角矩形组件实现单元104中。

圆角矩形组件将绘制完的圆角矩形发送给圆角矩形处理单元102后，发送单元103将包含圆角矩形的信息发送给用户终端。其中，对于圆角矩形四个角区域由于是图片，所以以二进制流的形式发送，对于圆角矩形的其他区域，由于是标准的Html元素，因此只需要以字符串的形式发送。

另外，如图5所示，上述用于存储预先制作的圆角矩形组件的圆角矩形组件实现单元104也可以放置在上述Web服务器100中。

这样用户终端在接收到发送单元发送的包含圆角矩形的信息后，就可以在浏览器上显示对应的圆角矩形。在页面需要改变，而圆角矩形也要做相应调整的时候，只需要调整页面文件中指定的圆角矩形组件的属性值，然后上述Web服务器将调整后的属性值发送给圆角矩形组件，圆角矩形组件将绘制与调整后的属性值对应的新圆角矩形，并发送给服务器，服务器将新的圆角矩形发送给用户终端，用于在浏览器上显示，不需要如现有技术中重新由美工人员绘制图片，所以利用本实施例提供的Web服务器显示圆角矩形更容易维护。

以上本文中应用了具体个例对本发明实施例的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明实施例的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明实施例的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1、一种在Web页面上动态显示圆角矩形的方法，包括：

用户终端根据接收的包含圆角矩形的信息在浏览器上显示。

2、根据权利要求1所述的方法，其特征在于，所述指定的圆角矩形组件的属性值包括表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值；

所述圆角矩形组件根据预先指定的表示圆角矩形形状特征的属性值和表示圆角矩形颜色特征的属性值，动态绘制圆角矩形。

3、根据权利要求2所述的方法，其特征在于，所述表示圆角矩形形状特征的属性值包括：

表示圆角矩形的四个角中需要使用圆角的角的Target属性值；

表示需要使用的圆角的弧度的Radius属性值；

表示圆角矩形的宽度和高度的Height属性值和Width属性值；

所述圆角矩形组件根据预先指定的所述圆角矩形组件的属性值动态绘制出圆角矩形的步骤包括：

所述圆角矩形组件根据预先指定的圆角矩形组件的Target属性值，识别需要使用圆角的角，并在需要使用圆角的角区域绘制与Radius属性值、BgColor属性值、Height属性值和Width属性值相对应的圆角矩形。

4、根据权利要求2所述的方法，其特征在于，所述表示圆角矩形颜色特征的属性值包括：

表示圆角矩形的背景颜色的BgColor属性值；

表示圆角矩形的边框颜色的BorderColor属性值；

所述圆角矩形组件绘制与BgColor属性值、BorderColor属性值相对应的圆角矩形。

5、根据权利要求2所述的方法，其特征在于，所述方法还包括：服务器端在页面的圆角矩形的中间区域控制显示的文字内容。

6、根据权利要求5所述的方法，其特征在于，所述预先指定的圆角矩形组件的属性值还包括：表示是否自动出现水平滚动条的IsHScroll属性值，或/和表示是否自动出现垂直滚动条的IsVScroll属性值；，

7、根据权利要求1-6中任意一项所述的方法，其特征在于，所述圆角矩形组件的定义由JAVA语言编写制作。

8、一种Web服务器，包括：

接收单元，用于接收用户终端发送的访问页面的请求信息；

发送单元，将包含圆角矩形的信息发送给用户终端。

9、根据权利要求8所述的Web服务器，其特征在于，所述Web服务器还包括圆角矩形组件实现单元，其中所述圆角矩形组件实现单元用于存储预先制作的圆角矩形组件。