IBM®Rational®Application Developer版本7引入了几个新的Java™Server Faces技术（JSF）组件，这些组件使构建富Web应用程序变得更加容易。 其中有一个ProgressBar组件，您可以使用该组件以直观的方式指示任务正在运行。
对于用户而言，单击浏览器中的按钮而没有立即获得任何反馈可能会非常令人沮丧。 不知道发生了什么，用户可能会尝试一次又一次单击同一按钮，或者重新加载页面，或者关闭应用程序。
为了避免此类问题，通常建议以进度条的形式提供视觉反馈，该进度条会根据正在运行的任务的进度进行移动。 当您在服务器或浏览器中执行长期任务时，此组件非常方便，并且您不想让用户怀疑应用程序是否正常运行。
您可以使用JavaScript或其他图像创建进度条，但是JavaServer Faces组件提供了所需的所有功能。 您可以简单地将其添加到您的任何网页中，而无需执行任何实现工作。
有关如何创建动态Web项目和Web页面的详细说明，请参见参考资料 ，包括该作者的developerWorks文章： “使用JSF，AJAX和Web服务使用预输入字段来提高Web应用程序的可用性。在Rational Application Developer V7中” 。
要使用Rational Application Developer ProgressBar组件，请完成以下任务：
使用Faces Project配置创建一个动态Web项目。 创建一个网页。 将进度条从面板的“ Enhanced Faces Components”抽屉中拖动到Web页面上。该组件将在“ 设计”视图中可见，并且其属性将在“ 属性”视图中可用（请参见图1）。
ProgressBar需要简单JavaScript代码来控制其行为。 因此，在将组件放到Web页面上之后，还需要添加几行JavaScript，具体取决于您将如何使用ProgressBar。 本文的其余部分将说明并演示如何执行此操作。
Rational Application Developer ProgressBar组件具有两种操作模式：自动和手动。
在自动模式下启动后，进度栏将继续更新任务的状态，直到使用指定的时间间隔和百分比增量值将其停止为止。 条可以从左向右或从中心向外移动。 在您知道任务何时开始和停止但无法知道任务进行了多长时间的情况下，此模式很有用。 在这种模式下，您可以使用两个JavaScript调用来控制ProgressBar： start()和stop() 。 它们的名称不言而喻：您可以通过start()调用来启动进度条，而通过stop()调用来stop()进度条。 两种方法都可以将字符串参数用作条上方显示的消息文本。 在手动模式下，进度条不会独立移动。 相反，您必须使用JavaScript调用upDatePercentage(integer)手动更新其值。 您可以提供介于0（零）和100之间的任何值以反映完成百分比（例如，10表示完成百分比为10）。 当您确切地知道任务已进行了多长时间并且可以直观地表示进度（“可视化”进度）时，此模式很有用。要访问代表ProgressBarJavaScript对象，可以使用Rational Application Developer JavaScript库中可用的getComponentById(id)帮助方法。 例如，如果希望用户单击按钮时启动进度条，则可以使用清单1中的代码向按钮添加onclick事件。
传递给getComponentById()函数的ID是JSF发出的ProgressBar的客户机ID，而不是您在Java™Server Page（JSP）中分配的组件ID。 根据ProgressBar在页面上的位置，其客户端ID将更改。 例如，如果ID为bar1的ProgressBar位于ID为form1的表单内，则其客户ID将为form1:bar ，如前面的代码片段（清单1）所示。
表1列出了ProgressBar组件的所有可用JavaScript方法。
本文附带一个示例项目文件，名为ProgressBarSample.zip 。 它显示了在两种模式下以及在不同场景下对ProgressBar的使用。 下一节将介绍每个示例。
随附的示例项目中的Basic.jsp页面演示了自动和手动模式下的ProgressBar组件。 自动栏上有“开始”和“停止”按钮，而手动栏上有“前进”和“重置”按钮。 让我们看看如何定义这些进度条以及按钮的作用。
自动进度条看起来像JSP源代码中的清单2。
表2中显示的<hx:progressBar>标记的属性定义了条在运行时的行为。
小费： 您可以在本文末尾的“ 如何自定义ProgressBar组件”部分中找到ProgressBar属性的完整列表。
另外， styleClass属性定义了条形图对用户的外观， message属性提供了在条形图上方显示的文本。
进度条下面的Start和Stop按钮是普通的JSF按钮，它们通过onclick事件来控制进度条（参见清单3）。
重要： 请注意，按钮的类型设置为button而不是默认的submit 。 这很重要，因为您不希望按钮向服务器提交任何内容。 您只希望它在浏览器中调用JavaScript函数。
清单4显示了启动和停止栏JavaScript函数。
这两个函数都首先使用getComponentById()调用来访问ProgressBar对象，然后在该对象上执行相应的操作。
页面上的手动进度栏非常相似，如清单5所示。
注意： 请注意，手动栏的auto属性设置为false ，并且不使用在自动栏上设置的timeInterval或proportion属性。
控制手动进度条的按钮与清单5中使用的按钮相同，之前使用清单6中JavaScript代码来控制组件：
再次在这里，您遵循以下三个步骤：
首先，使用getComponentById()调用找到ProgressBar对象。 然后通过使用upDatePercentage调用并指定一个新值来设置进度操作。 resetPB函数使用零，而在advancePB调用中，您首先获得当前状态（ pb.percentageDone ），然后将其增加5％。 完成此操作后，您需要使用redraw()调用更新屏幕上的手动进度条。这个basic.jsp页面很好地演示了ProgressBar组件，但是由于没有显示进度条的任务，因此它几乎不适用于实际的Web应用程序。 在下一节中，您将看到更实际的示例。
从所附的示例项目中打开auto.jsp页面。 该页面上有一个按钮，可在服务器上启动耗时的操作。 当用户单击按钮时，服务器将等待10秒钟，然后响应浏览器。 在实际应用中，服务器可能正在忙于查询数据库，计算路线或执行一些需要一段时间才能完成的类似任务。 即使您不知道服务器响应需要多长时间，也可以让用户知道任务正在运行，用户应该等待。
一种方法是显示自动进度条，该进度条将一直运行到服务器响应并刷新页面为止。 该页面上的按钮和进度栏（请参见清单7）与之前在basic.jsp页面上看到的按钮和进度栏非常相似。
此标签创建一个自动进度条，该进度条每50毫秒移动1％。 它最初也被隐藏（通过使用initHidden属性），直到用户单击该按钮才可见。
该按钮在服务器上启动一个任务（ action属性），同时启动浏览器中的进度栏（ onclick属性）。 它使用清单9中所示JavaScript函数来执行此操作。
您已经熟悉getComponentById()和start()方法。 此外，该按钮调用visible()以使进度条对用户可见。
从随附的示例项目中打开manual.jsp页面。 该页面演示了在纯客户端环境中使用的ProgressBar组件，无需与服务器进行任何交互。 通常在要求用户执行许多操作或步骤（例如填写大表格或参加测试）的页面上可以找到这种情况。
例如，manual.jsp页面要求用户解决四个简单的数学方程式。 一旦修改了答案之一，进度条就会更新，以反映出正确答案的数量并显示总体进度。
要构建此页面，请在手动模式下使用ProgressBar组件，类似于basic.jsp页面上使用的组件（清单10）。
每个输入字段都调用一个JavaScript函数来通过使用onkeyup事件来更新进度条（清单11）。
JavaScript代码检查答案，并通过更改百分比和消息文本来相应地更新进度条（请参见清单12）。 您可以在图4中看到结果。
在较早的示例（ auto.jsp ， 图3 ）中，有一个长时间运行的服务器端任务，并且您不知道任务完成需要多长时间或任务已经完成了多长时间。 因此，使用自动的ProgressBar是合适的，它一直运行直到服务器完成处理任务为止。
有关如何将Ajax与Rational Application Developer V7中的JSF组件一起使用的更多详细信息，请参阅“ JSF和Ajax：通过Rational Application Developer V7简化Web 2.0应用程序”
通常，您会发现自己处在不同的情况下，服务器端代码会精确地监视事情的运行方式，任务进行的距离以及完成任务所需的时间。 例如，您可能正在逐行处理数据库，并且知道有多少行以及已经处理了多少行。 在这种情况下，如果可以根据服务器端的状态而不是盲目地更新浏览器中的进度条，将很有用。 也就是说，如果处理了1000行中的300行，进度条将显示恰好30％的进度。
为此，您需要使用AJAX技术（异步JavaScript和XML，通常称为Ajax）使浏览器与服务器通信。 随附的示例项目中的ajax.jsp页面显示了如何执行此操作。
首先，您需要使用清单13中所示的代码添加一个ProgressBar组件。
您不希望进度条仅继续独立运行，因此您可以通过将auto属性设置为false来使其手动。 乍一看这可能并不明显-毕竟，您实际上并不会每次都手动对其进行更新。 但是，由于将通过JavaScript函数设置进度，因此手动模式正是您所需要的。
要让服务器报告正在运行的任务的状态，请创建一个隐藏状态字段（当前进度百分比）的隐藏输入字段，然后将该字段放入可通过Ajax更新的面板中。
现在，可以使用Ajax更新隐藏字段的值。 每次浏览器向服务器发送Ajax请求时，将执行pbValue属性的get方法，并将返回的任何值放入浏览器的隐藏输入字段中。 在示例应用程序中， pbValue的get方法仅在会话中保留一个计数器，并在每次调用get方法时将其递增。 页面上还有一个“重置”按钮，可将计数器重置为零。
发送Ajax请求的最简单方法是有一个按钮，当用户单击该按钮时，按钮就会执行该操作（请参见清单15）。
请记住，此按钮的目的是在进度条上自动触发Ajax刷新操作。 因此，可以通过将style属性设置为display:none来使按钮不可见。 要自动启动Ajax刷新操作，您将在按钮上设置一个JavaScript计时器（清单16）。
这个JavaScript片段可确保poll()函数每秒运行一次。 poll()函数所做的所有poll()都是模拟单击按钮。 该单击将Ajax请求发送到服务器，服务器返回当前进度状态，并且隐藏字段已更新。 这一切在没有任何用户交互的情况下发生。
在隐藏的输入字段中更新了当前进度之后，剩下要做的就是相应地更新ProgressBar组件。 如果您注意到了，Ajax标记还具有与之关联JavaScript函数，如清单17所示。
每当服务器响应Ajax请求时， oncomplete事件都会运行。 一旦发生这种情况，就可以获取隐藏的输入字段的值并更新进度条（请参见清单18）。 图5显示了对用户界面的影响。
您可以使用表3中列出的属性来自定义ProgressBar组件的行为。
进度条的显示由表4显示CSS类控制。
有关Rational Application Developer的最新功能（将其与Ajax和Java技术结合使用）的更多信息以及相关信息，请参阅参考资料。
翻译自: https://www.ibm.com/developerworks/rational/library/07/0626_kats/index.html
