Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajax interactivity improvements #917

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
<li><webobject name = "UpdatesLink">Ajax Updates</webobject></li>
<li><webobject name = "UpdateContainerInContainerLink">Container in Container</webobject></li>
<li><webobject name = "UpdateTriggerLink">Update Trigger</webobject></li>
<li><webobject name = "MultiUpdateExample">Multiple container updates</webobject></li>
<li><webobject name = "AutocompletionLink">Autocompletion</webobject></li>
<li><webobject name = "DependentListsExample">Dependent Popups</webobject></li>
<li><webobject name = "SliderLink">Slider</webobject></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ UpdateTriggerLink : WOHyperlink {
pageName = "UpdateTriggerExample";
}

MultiUpdateExample : WOHyperlink {
pageName = "MultiUpdateExample";
}

AutocompletionLink : WOHyperlink {
pageName = "AutoCompleteExample";
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<webobject name = "AjaxExampleComponent">
<p>
This example demonstrates the AjaxTrigger component, which allows you to enqueue a series of updates to
occur. Note that these happen in series as multiple requests, not as a single request, so you will want
to limit the number of updates you do in a single pass.
</p>

<webobject name = "AjaxUpdateContainer">
<h1>Container 1</h1>
<webobject name = "Now"/>

<webobject name = "WOForm">
<webobject name = "AjaxSubmitButton"></webobject>, and also update:
<p>
<webobject name = "WOCheckBox"></webobject> Container 2
</p>
<p>
<webobject name = "WOCheckBox1"></webobject> Container 3
</p>
</webobject>
</webobject>

<webobject name = "AjaxUpdateContainer1">
<h1>Container 2</h1>
<webobject name = "Now1"/>
</webobject>

<webobject name = "AjaxUpdateContainer2">
<h1>Container 3</h1>
<webobject name = "Now2"/>
</webobject>
</webobject>
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
AjaxExampleComponent : AjaxExampleComponent {
title = "Update Trigger";
}

AjaxUpdateContainer : AjaxUpdateContainer {
id = "container1";
style = "background: green; color: white; padding: 10px";
}

Now : WOString {
value = now;
}

WOForm : WOForm {
multipleSubmit = true;
}

AjaxSubmitButton : AjaxSubmitButton {
updateContainerID = containerIdsToUpdate;
value = "Update Container 1";
}

WOCheckBox : WOCheckBox {
checked = updateContainer2;
}

WOCheckBox1 : WOCheckBox {
checked = updateContainer3;
}

AjaxUpdateContainer1 : AjaxUpdateContainer {
id = "container2";
style = "background: blue; color: white; padding: 10px";
}

Now1 : WOString {
value = now;
}

AjaxUpdateContainer2 : AjaxUpdateContainer {
id = "container3";
style = "background: red; color: white; padding: 10px";
}

Now2 : WOString {
value = now;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"WebObjects Release" = "WebObjects 5.0";
encoding = "UTF-8";
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<webobject name = "AjaxExampleComponent">
<p>
This example demonstrates the AjaxTrigger component, which allows you to enqueue a series of updates to
occur. Note that these happen in series as multiple requests, not as a single request, so you will want
to limit the number of updates you do in a single pass.
AjaxTrigger gives you multiple container updates in one series. This exmaple shows, how you can
achieve the same result in one RR cycle by supplying a NSArray of container ids (alternatively a
comma separate string with multiple container ids). You see from the timestamps that all updates are generated at exactly the same time.
</p>

<webobject name = "AjaxUpdateContainer">
Expand Down
56 changes: 56 additions & 0 deletions Examples/Ajax/AjaxExample/Sources/MultiUpdateExample.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import com.webobjects.appserver.WOComponent;
import com.webobjects.appserver.WOContext;
import com.webobjects.foundation.NSArray;
import com.webobjects.foundation.NSMutableArray;

public class MultiUpdateExample extends WOComponent {

private NSMutableArray<String> _updateContainerIDs = new NSMutableArray<>("container1");
private long now;

public MultiUpdateExample(WOContext context) {
super(context);
}

@Override
public void awake() {
now = System.currentTimeMillis();

super.awake();
}

public long now() {
return now;
}

public NSArray containerIdsToUpdate() {
return _updateContainerIDs;
}

public void setUpdateContainer2(boolean updateContainer2) {
setUpdateContainer("container2", updateContainer2);
}

public boolean updateContainer2() {
return _updateContainerIDs.containsObject("container2");
}

public void setUpdateContainer3(boolean updateContainer3) {
setUpdateContainer("container3", updateContainer3);
}

public boolean updateContainer3() {
return _updateContainerIDs.containsObject("container3");
}

protected void setUpdateContainer(String id, boolean updateContainer3) {
if (updateContainer3) {
if (!_updateContainerIDs.containsObject(id)) {
_updateContainerIDs.addObject(id);
}
}
else {
_updateContainerIDs.removeObject(id);
}
}
}
13 changes: 10 additions & 3 deletions Examples/Ajax/AjaxExample/Sources/UpdateTriggerExample.java
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,25 @@
import com.webobjects.appserver.WOContext;
import com.webobjects.foundation.NSArray;
import com.webobjects.foundation.NSMutableArray;
import com.webobjects.foundation.NSTimestamp;

public class UpdateTriggerExample extends WOComponent {

private NSMutableArray<String> _updateContainerIDs = new NSMutableArray<>();
private long now;

public UpdateTriggerExample(WOContext context) {
super(context);
}

public NSTimestamp now() {
return new NSTimestamp();
@Override
public void awake() {
now = System.currentTimeMillis();

super.awake();
}

public long now() {
return now;
}

public NSArray otherIDsToUpdate() {
Expand Down
1 change: 1 addition & 0 deletions Frameworks/Ajax/Ajax/Components/AjaxObserveField.api
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@
<binding name="onSuccess"/>
<binding name="onFailure"/>
<binding name="onException"/>
<binding name="actOnInput"/>
</wo>
</wodefinitions>
13 changes: 9 additions & 4 deletions Frameworks/Ajax/Ajax/Sources/er/ajax/AjaxObserveField.java
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@
* @binding style CSS style to use on the container. (Only used if you leave off observeFieldID)
* @binding onCreate Takes a JavaScript function which is called after the form has been serialized,
* but before the Ajax request is sent to the server. Useful e.g. if you want to disable the
* form while the Ajax request is running.
* form while the ajax request is running.
* @binding actOnInput When true, input events in text input fields lead to an immediate action
*/
public class AjaxObserveField extends AjaxDynamicElement {
public AjaxObserveField(String name, NSDictionary<String, WOAssociation> associations, WOElement children) {
Expand Down Expand Up @@ -102,6 +103,7 @@ public void appendToResponse(WOResponse response, WOContext context) {
String updateContainerID = AjaxUpdateContainer.updateContainerID(this, component);
NSMutableDictionary<String, String> options = createAjaxOptions(component);
boolean fullSubmit = booleanValueForBinding("fullSubmit", false, component);
boolean actOnInput = booleanValueForBinding("actOnInput", false, component);
boolean observeFieldDescendents;
if (observeFieldID != null) {
observeFieldDescendents = false;
Expand All @@ -125,11 +127,14 @@ public void appendToResponse(WOResponse response, WOContext context) {
response.appendContentString("</" + elementName + ">");
}
AjaxUtils.appendScriptHeader(response);
AjaxObserveField.appendToResponse(response, context, this, observeFieldID, observeFieldDescendents, updateContainerID, fullSubmit, options);
AjaxObserveField.appendToResponse(response, context, this, observeFieldID, observeFieldDescendents, updateContainerID, fullSubmit, options, actOnInput);
AjaxUtils.appendScriptFooter(response);
}

public static void appendToResponse(WOResponse response, WOContext context, AjaxDynamicElement element, String observeFieldID, boolean observeDescendentFields, String updateContainerID, boolean fullSubmit, NSMutableDictionary<String, String> options) {
public static void appendToResponse(WOResponse response, WOContext context, AjaxDynamicElement element, String observeFieldID, boolean observeDescendentFields, String updateContainerID, boolean fullSubmit, NSMutableDictionary options) {
appendToResponse(response, context, element, observeFieldID, observeDescendentFields, updateContainerID, fullSubmit, options, false);
}
public static void appendToResponse(WOResponse response, WOContext context, AjaxDynamicElement element, String observeFieldID, boolean observeDescendentFields, String updateContainerID, boolean fullSubmit, NSMutableDictionary options, boolean actOnInput) {
WOComponent component = context.component();
String submitButtonName = nameInContext(context, component, element);
NSMutableDictionary<String, String> observerOptions = new NSMutableDictionary<>();
Expand Down Expand Up @@ -158,7 +163,7 @@ public static void appendToResponse(WOResponse response, WOContext context, Ajax
response.appendContentString(observeDelay);
response.appendContentString(", ");
AjaxOptions.appendToResponse(observerOptions, response, context);
response.appendContentString(");");
response.appendContentString(", " + actOnInput +");");
}

public static String nameInContext(WOContext context, WOComponent component, AjaxDynamicElement element) {
Expand Down
Loading