例程：让HelpBalloons飘在你的GSP上空！

由 huwh 于 一, 03/08/2010 - 16:49 发表

在进行网页开发的时候，常常需要显示提示或者帮助信息，实现方法有很多种。这里介绍一种简单易用的Gails插件--HelpBalloon。可以把这个可爱的气球放在GSP的任何地方。

要使用HelpBalloon，请先做好如下两项准备工作：

  1. 安装HelpBalloon插件，执行：grails install-plugin help-balloons ；
  2. 在需要使用HelpBalloon的GSP的<head>中添加<g:helpBalloons />，它会将Prototype的JS库以及HelpBalloon相关的JS库引入到GSP中，如果你的Prototype的JS库不是在缺省位置，可以使用这个标签的base属性来指定JS库的位置，比如：<g:helpBalloons base="/myApp/myDir/" />；

下面就开始HelpBalloon之旅了！

  • 在GSP中写入：

    <g:each var="c" in="${grailsApplication.controllerClasses}">
      <li class="controller">
	  <g:link controller="${c.logicalPropertyName}">
	     ${c.fullName}
	  </g:link>
	  <g:helpBalloon title="my Help"
	    content="How to display a help balloon in GSP? "/>
      </li>
</g:each>

    下图是上述代码的效果图：

  • 上图中显示的图标都是HelpBalloon的缺省值，如果需要使用自定义的图标，可以设置<head>中的<g:helpBalloons />标签的icon、button、balloonPrefix属性，比如：

    	<g:helpBalloons
		 icon="${resource(dir:'images',file:'balloon-icon1.gif')}"
 		 button="${resource(dir:'images',file:'myButton.png')}" 
 		 balloonPrefix="${resource(dir:'images')}/balloon-" />

    如下是使用自定义图标的效果图:

  • HelpBalloon要显示的信息也可以由message文件进行统一管理，比如message.properties文件中：“codename.suffixname= help content!!”，就可以使用HelpBalloon的code、suffix属性来显示，如下：

    <g:helpBalloon title="关于书籍的说明" code="codename" suffix=".suffixname"/>

    读者需要注意，suffix为可选内容，缺省值为“.help”，如果代码中没有设置suffix，HelpBalloon将message文件中codename.help的内容显示出来

    效果图如下：

  • 对于HelpBalloon中的内容，可以类似上述示例中的用法，也可以从对象中获取到，请看如下代码：

    	<g:helpBalloon 
		 title="Book Info"
		 content="${bookInstance.moreInfo()}"/>

    上述代码的意思是，可以通过book的moreInfo()方法将更多的book信息显示在HelpBalloon中，如下是book的代码：

    	class Book {
	  String name
	  String descript
	  String author="Magnolia"
	  Date dateCreated=new Date()
	  int pages=100
	  String isbn="ISBN 2010-03-06"
	  String shortname

	  String moreInfo(){
		"""$name <br/>
		<img src='/GrailsUI/images/${shortname}.jpg'/><br>
		  by $author /pg: $pages /ISBN: $isbn <br/>
		  published in $dateCreated<br/>
		"""
	  }
	}

    下图是如上代码的效果图：

文章中的源代码可以从这里下载。

By huwh - Posted on 08 三月 2010