You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by hl...@apache.org on 2009/02/26 23:44:49 UTC
svn commit: r748340 - in /tapestry/tapestry5/trunk/tapestry-core/src:
main/java/org/apache/tapestry5/corelib/components/
main/resources/org/apache/tapestry5/
main/resources/org/apache/tapestry5/corelib/components/ test/app1/
test/java/org/apache/tapest...
Author: hlship
Date: Thu Feb 26 22:44:48 2009
New Revision: 748340
URL: http://svn.apache.org/viewvc?rev=748340&view=rev
Log:
TAP5-236: Implement a progressive enhancement component that loads its content via Ajax
Added:
tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/ProgressiveDisplay.java
tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.js
tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.properties
tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.tml
tapestry/tapestry5/trunk/tapestry-core/src/test/app1/ProgressiveDemo.tml
tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/ProgressiveDemo.java
Modified:
tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/default.css
tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/IntegrationTests.java
tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/Index.java
Added: tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/ProgressiveDisplay.java
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/ProgressiveDisplay.java?rev=748340&view=auto
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/ProgressiveDisplay.java (added)
+++ tapestry/tapestry5/trunk/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/ProgressiveDisplay.java Thu Feb 26 22:44:48 2009
@@ -0,0 +1,103 @@
+// Copyright 2009 The Apache Software Foundation
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package org.apache.tapestry5.corelib.components;
+
+import org.apache.tapestry5.*;
+import org.apache.tapestry5.annotations.Environmental;
+import org.apache.tapestry5.annotations.IncludeJavaScriptLibrary;
+import org.apache.tapestry5.annotations.Parameter;
+import org.apache.tapestry5.annotations.SupportsInformalParameters;
+import org.apache.tapestry5.dom.Element;
+import org.apache.tapestry5.ioc.annotations.Inject;
+import org.apache.tapestry5.ioc.internal.util.InternalUtils;
+import org.apache.tapestry5.json.JSONObject;
+
+/**
+ * A component used to implement the <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">progressive
+ * enhancement</a> web design strategy; the component renders itself with a simplified initial content (i.e., "loading
+ * ...") and an Ajax request then supplies the component's true body. This results in much faster page loads. You can
+ * even nest these!
+ * <p/>
+ * The component simply does not render its body on initial render, but then supplies its body as the partial render
+ * content in the Ajax request.
+ *
+ * @since 5.1.0.1
+ */
+@SupportsInformalParameters
+@IncludeJavaScriptLibrary("ProgressiveDisplay.js")
+public class ProgressiveDisplay
+{
+ /**
+ * The initial content to display until the real content arrives. Defaults to "Loading ..." and an Ajax activity
+ * icon.
+ */
+ @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "block:defaultInitial")
+ private Block initial;
+
+ @Inject
+ private ComponentResources resources;
+
+ @Environmental
+ private RenderSupport renderSupport;
+
+ /**
+ * Name of a function on the client-side Tapestry.ElementEffect object that is invoked after the elements's body
+ * content has been updated. If not specified, then the basic "highlight" method is used, which performs a classic
+ * "yellow fade" to indicate to the user that and update has taken place.
+ */
+ @Parameter(defaultPrefix = BindingConstants.LITERAL)
+ private String update;
+
+ Block beginRender(MarkupWriter writer)
+ {
+ String clientId = renderSupport.allocateClientId(resources);
+ String elementName = resources.getElementName("div");
+
+ Element e = writer.element(elementName, "id", clientId);
+
+ resources.renderInformalParameters(writer);
+
+ e.addClassName("t-zone");
+
+ Link link = resources.createEventLink(EventConstants.ACTION);
+
+ JSONObject spec = new JSONObject();
+
+ if (InternalUtils.isNonBlank(update))
+ spec.put("update", update.toLowerCase());
+
+ spec.put("element", clientId);
+ spec.put("url", link.toAbsoluteURI());
+
+ renderSupport.addInit("progressiveDisplay", spec);
+
+ return initial;
+ }
+
+ Block onAction()
+ {
+ return resources.getBody();
+ }
+
+ boolean beforeRenderBody()
+ {
+ return false;
+ }
+
+ void afterRender(MarkupWriter writer)
+ {
+ writer.end();
+ }
+}
Added: tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.js
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.js?rev=748340&view=auto
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.js (added)
+++ tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.js Thu Feb 26 22:44:48 2009
@@ -0,0 +1,20 @@
+// Copyright 2009 The Apache Software Foundation
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+Tapestry.Initializer.progressiveDisplay = function(spec)
+{
+ var mgr = new Tapestry.ZoneManager(spec);
+
+ mgr.updateFromURL.bind(mgr).defer(spec.url);
+};
\ No newline at end of file
Added: tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.properties
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.properties?rev=748340&view=auto
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.properties (added)
+++ tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.properties Thu Feb 26 22:44:48 2009
@@ -0,0 +1 @@
+progressive-display-loading=Loading ...
Added: tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.tml
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.tml?rev=748340&view=auto
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.tml (added)
+++ tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/ProgressiveDisplay.tml Thu Feb 26 22:44:48 2009
@@ -0,0 +1,6 @@
+<t:container xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"
+ xmlns:p="tapestry:parameter">
+ <t:block id="defaultInitial">
+ <div class="t-loading">${message:progressive-display-loading}</div>
+ </t:block>
+</t:container>
\ No newline at end of file
Modified: tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/default.css
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/default.css?rev=748340&r1=748339&r2=748340&view=diff
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/default.css (original)
+++ tapestry/tapestry5/trunk/tapestry-core/src/main/resources/org/apache/tapestry5/default.css Thu Feb 26 22:44:48 2009
@@ -46,14 +46,14 @@
margin-left: 4px;
width: 16px;
height: 16px;
- background: url( field-error-marker.gif );
+ background: url(field-error-marker.gif);
}
IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
- background: url( ajax-loader.gif );
+ background: url(ajax-loader.gif);
}
IMG.t-sort-icon {
@@ -348,7 +348,7 @@
}
DIV.t-palette-controls BUTTON[disabled] IMG {
- filter: alpha( opacity = 25 );
+ filter: alpha(opacity = 25);
-moz-opacity: .25;
}
@@ -392,7 +392,7 @@
}
DIV.t-error-popup SPAN {
- background: transparent url( 'error-bevel-left.gif' ) no-repeat;
+ background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
@@ -400,11 +400,11 @@
}
HTML>BODY DIV.t-error-popup SPAN {
- background: transparent url( 'error-bevel-left.png' ) no-repeat;
+ background: transparent url('error-bevel-left.png') no-repeat;
}
DIV.t-error-popup {
- background: transparent url( 'error-bevel-right.gif' ) no-repeat scroll top right;
+ background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
@@ -417,7 +417,7 @@
}
HTML>BODY DIV.t-error-popup {
- background: transparent url( 'error-bevel-right.png' ) no-repeat scroll top right;
+ background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}
UL.t-data-list LI {
@@ -468,4 +468,12 @@
background-color: red;
padding: 5px 2px 10px 2px;
color: yellow;
+}
+
+DIV.t-loading {
+ display: inline;
+ width: auto;
+ font-weight: bold;
+ padding-right: 20px;
+ background: transparent url(ajax-loader.gif) no-repeat right top;
}
\ No newline at end of file
Added: tapestry/tapestry5/trunk/tapestry-core/src/test/app1/ProgressiveDemo.tml
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/test/app1/ProgressiveDemo.tml?rev=748340&view=auto
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/test/app1/ProgressiveDemo.tml (added)
+++ tapestry/tapestry5/trunk/tapestry-core/src/test/app1/ProgressiveDemo.tml Thu Feb 26 22:44:48 2009
@@ -0,0 +1,28 @@
+<t:border xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"
+ xmlns:p="tapestry:parameter">
+
+ <t:progressiveDisplay t:id="disp1">
+ <p id="content1">
+ Progressive Display content #1.
+ </p>
+ </t:progressiveDisplay>
+
+ <t:progressivedisplay t:id="disp2">
+
+ <p>
+ Progressive display content #2.
+ </p>
+
+ <h3 id="content2">Music Library</h3>
+
+ <p>Time is ${now}.</p>
+
+ <t:progressivedisplay update="slidedown">
+
+
+ <t:grid inplace="true" t:id="music" source="musicLibrary.tracks"/>
+
+ </t:progressivedisplay>
+ </t:progressivedisplay>
+
+</t:border>
\ No newline at end of file
Modified: tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/IntegrationTests.java
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/IntegrationTests.java?rev=748340&r1=748339&r2=748340&view=diff
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/IntegrationTests.java (original)
+++ tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/IntegrationTests.java Thu Feb 26 22:44:48 2009
@@ -2690,13 +2690,24 @@
private void assertBubbleMessage(String fieldId, String expected)
{
- String condition = String.format(
- "selenium.browserbot.getCurrentWindow().document.getElementById('%s:errorpopup')",
- fieldId);
+ String popupId = fieldId + ":errorpopup";
- waitForCondition(condition, PAGE_LOAD_TIMEOUT);
+ waitForElementToAppear(popupId);
- assertText(String.format("//div[@id='%s:errorpopup']/span", fieldId), expected);
+ assertText(String.format("//div[@id='%s']/span", popupId), expected);
+ }
+
+ /**
+ * TAP5-236
+ */
+ public void progressive_display()
+ {
+ start("ProgressiveDisplay Demo");
+
+ waitForElementToAppear("content1");
+ assertText("content1", "Progressive Display content #1.");
+ waitForElementToAppear("content2");
+ assertText("content2", "Music Library");
}
}
\ No newline at end of file
Modified: tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/Index.java
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/Index.java?rev=748340&r1=748339&r2=748340&view=diff
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/Index.java (original)
+++ tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/Index.java Thu Feb 26 22:44:48 2009
@@ -65,6 +65,8 @@
private static final List<Item> ITEMS = CollectionFactory.newList(
+ new Item("ProgressiveDemo", "ProgressiveDisplay Demo", "Progressive Enhancement via a component"),
+
new Item("ClientNumericValidationDemo", "Client-Side Numeric Validation",
"Client-side locale-specific validation"),
Added: tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/ProgressiveDemo.java
URL: http://svn.apache.org/viewvc/tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/ProgressiveDemo.java?rev=748340&view=auto
==============================================================================
--- tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/ProgressiveDemo.java (added)
+++ tapestry/tapestry5/trunk/tapestry-core/src/test/java/org/apache/tapestry5/integration/app1/pages/ProgressiveDemo.java Thu Feb 26 22:44:48 2009
@@ -0,0 +1,33 @@
+// Copyright 2009 The Apache Software Foundation
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package org.apache.tapestry5.integration.app1.pages;
+
+import org.apache.tapestry5.annotations.Property;
+import org.apache.tapestry5.integration.app1.services.MusicLibrary;
+import org.apache.tapestry5.ioc.annotations.Inject;
+
+import java.util.Date;
+
+public class ProgressiveDemo
+{
+ @Inject
+ @Property
+ private MusicLibrary musicLibrary;
+
+ public Date getNow()
+ {
+ return new Date();
+ }
+}