Merge pull request wocommunity#322 from johnnykahalawai/integration

Mootools and Mootools Examples Updates

Examples/Ajax/MooToolsExample/Components/MTAjaxAutoCompleteTestPage.wo/MTAjaxAutoCompleteTestPage.html

@@ -0,0 +1,102 @@
+<wo:Main pageTitle = "Auto Complete Test Page">
+ <style type="text/css">
+	.auto_complete {
+	  position:absolute;
+	  width:250px;
+	  background-color:white;
+	  border:1px solid #888;
+	  margin:0px;
+	  padding:0px;
+	}
+	ul.contacts  {
+	  list-style-type: none;
+	  margin:0px;
+	  padding:0px;
+	}
+	ul.contacts li.selected { 
+	   background-color: #ffb; 
+	}
+	li.contact {
+	  list-style-type: none;
+	  display:block;
+	  margin:0;
+	  padding:2px;
+	  height:32px;
+	}
+	li.contact div.image {
+	  float:left;
+	  width:32px;
+	  height:32px;
+	  margin-right:8px;
+	}
+	li.contact div.name {
+	  font-weight:bold;
+	  font-size:12px;
+	  line-height:1.2em;
+	}
+	li.contact div.email {
+	  font-size:10px;
+	  color:#888;
+	}
+	#list {
+	  margin:0;
+	  margin-top:10px;
+	  padding:0;
+	  list-style-type: none;
+	  width:250px;
+	}
+	#list li {
+	  margin:0;
+	  margin-bottom:4px;
+	  padding:5px;
+	  border:1px solid #888;
+	  cursor:move;
+	}
+	.auto_complete {
+	  width: 350px;
+	  background: #fff;
+	}
+	.auto_complete ul {
+	    border:1px solid #888;
+	    margin:0;
+	    padding:0;
+	    width:100%;
+	    list-style-type:none;
+	}
+	.auto_complete ul li {
+	    margin:0;
+	    padding:3px;
+	}
+	.auto_complete ul li.selected { 
+	    background-color: #ffb; 
+	}
+	.auto_complete ul strong.highlight { 
+	    color: #800; 
+	    margin:0;
+	    padding:0;
+	}
+</style>
+
+	<h2>Auto Compelte Test Page</h2>
+	<hr/>
+	<p>I created a MooTools version of AutoCompleter.Base, Ajax.Autocompleter and Autocompleter.Local check out AutoCompleter.js</p>
+
+	<webobject name = "WOForm">
+	    <label>Simple field, just the values gets displayed:</label>
+	    <span id="simpleComplete"><webobject name="SimpleAjaxAutoComplete"></webobject></span>
+	    <br />
+		<label>Complex field, using component content to render:</label>
+		<span id="complexComplete">
+			<webobject name="ComplexAjaxAutoComplete">
+				<span class="name">
+					<webobject name="Item"></webobject>
+					<span class="informal"> 
+						(<webobject name="ItemLength"></webobject> chars)
+					</span>
+				</span>
+			</webobject>
+		</span>
+		<webobject name = "SubmitButton"/>
+	</webobject>
+
+</wo:Main>

Examples/Ajax/MooToolsExample/Components/MTAjaxAutoCompleteTestPage.wo/MTAjaxAutoCompleteTestPage.wod

@@ -0,0 +1,32 @@
+ComplexAjaxAutoComplete: MTAjaxAutoComplete {
+	list = currentValues;
+	value = value;
+	item = currentValue;
+	selection = selectedValue;
+}
+
+Item : WOString {
+	value = currentValue.name;
+}
+
+ItemLength : WOString {
+	value = currentValue.value;
+}
+
+SimpleAjaxAutoComplete: MTAjaxAutoComplete {
+	list = currentValues2;
+	value = value2;
+	item = currentValue;
+	displayString = currentValue.name;
+	selection = selectedValue2;
+}
+
+SubmitButton : WOSubmitButton {
+  action = submitted;
+}
+
+WOForm : WOForm {
+	class = "well";
+}
+
+

Examples/Ajax/MooToolsExample/Components/MTAjaxAutoCompleteTestPage.wo/MTAjaxAutoCompleteTestPage.woo

@@ -0,0 +1,4 @@
+{
+	"WebObjects Release" = "WebObjects 5.0";
+	encoding = "UTF-8";
+}

Examples/Ajax/MooToolsExample/Components/MTAjaxExpansionTestPage.wo/MTAjaxExpansionTestPage.html

@@ -0,0 +1,64 @@
+<wo:Main pageTitle = "Ajax Expansion Demonstration">
+	<h2>Ajax Expansion...</h2>
+	<hr />
+	<p>
+		AjaxExpansion provides an easy way to make expansion areas that appear and disappear by clicking a link (for instance, expandable options areas).
+	</p>
+	<p>
+		Should work like the original.
+	</p>
+	<p>
+		TODO: Work on the effects.
+	</p>
+	<hr/>
+	<div class = "personInfo">
+		<h1><wo:WOImage src = "img/avatar.png"/> Brazil Nut</h1>
+		<wo:MTAjaxUpdateContainer id = "profile" class = "profile">
+			<wo:if condition = "$optionsVisible">
+				<wo:MTAjaxUpdateLink action = "$toggleOptions" updateContainerID = "profile"><wo:WOImage filename = "img/triangleDown.gif"/> profile</wo:MTAjaxUpdateLink>
+				<dl>
+					<dt>Phone Number</dt>
+					<dd>
+						808.EAT.BRDS
+					</dd>
+
+					<dt>Address</dt>
+					<dd>
+						123 MaccaDangDang Hwy.<br/>
+						Maui, HI 96761
+					</dd>
+
+					<dt>URL</dt>
+					<dd>
+						<a href = "http://kahalawai.com/">http://kahalawai.com/</a>
+					</dd>
+				</dl>
+			</wo:if>
+			<wo:else>
+				<wo:MTAjaxUpdateLink action = "$toggleOptions" updateContainerID = "profile"><wo:WOImage filename = "img/triangleRight.gif"/> profile</wo:MTAjaxUpdateLink>
+			</wo:else>
+		</wo:MTAjaxUpdateContainer>
+	</div>
+	<div class = "personInfo">
+		<h1><wo:WOImage src = "img/avatar2.png"/> Coco Nut</h1>
+		<wo:MTAjaxExpansion id="profile2" class="profile" string="profile">
+				<dl>
+					<dt>Phone Number</dt>
+					<dd>
+						808.EAT.BRDS
+					</dd>
+
+					<dt>Address</dt>
+					<dd>
+						123 MaccaDangDang Hwy.<br/>
+						Maui, HI 96761
+					</dd>
+
+					<dt>URL</dt>
+					<dd>
+						<a href = "http://kahalawai.com/">http://kahalawai.com/</a>
+					</dd>
+				</dl>
+		</wo:MTAjaxExpansion>
+	</div>
+</wo:Main>

Examples/Ajax/MooToolsExample/Components/MTAjaxExpansionTestPage.wo/MTAjaxExpansionTestPage.woo

@@ -0,0 +1,4 @@
+{
+	"WebObjects Release" = "WebObjects 5.0";
+	encoding = "UTF-8";
+}

Examples/Ajax/MooToolsExample/Components/MTStyledPopUpButtonTestPage.wo/MTStyledPopUpButtonTestPage.html

@@ -0,0 +1,22 @@
+<wo:Main pageTitle = "Media Box Advanced - A Lightbox Variant For MooTools">	
+	<h2>MTStyledPopUpButton</h2>
+	<hr />
+	<p>MTStyledPopUpButton is a non-obtrusive image dropdown menu that extends and replaces a standard HTML Select control.  Based upon "FancySelect" @ <a href = "https://github.com/lorenzos/FancySelect/wiki" target = "_blank">https://github.com/lorenzos/FancySelect/wiki</a></p>
+	<hr/>
+	<h3>Sample using a component action.</h3>
+	<wo:form action = "$selectFruit" class = "well form-inline">
+		<label>Select your favorite fruit:</label>
+		<webobject name = "MTStyledPopUpButton" />
+		<webobject name = "SubmitButton"></webobject>
+	</wo:form>
+	<h3>Sample using a direct action.</h3>
+	<wo:form directActionName = "PageAction/MTStyledPopUpButtonTestPage" class = "well form-inline" method = "GET">
+		<label>Select your favorite fruit:</label>
+		<webobject name = "MTStyledSelectedValuePopUpButton" />
+		<webobject name = "DirectActionSubmitButton"></webobject>
+	</wo:form>
+	<wo:ERXNonNullConditional condition = "$selectedItem">
+		<hr/>
+		<h2>Your favorite fruit is: <wo:str value = "$selectedItem" /></h2>
+	</wo:ERXNonNullConditional>	
+</wo:Main>	

Examples/Ajax/MooToolsExample/Components/MTStyledPopUpButtonTestPage.wo/MTStyledPopUpButtonTestPage.wod

@@ -0,0 +1,27 @@
+DirectActionSubmitButton : WOSubmitButton {
+	class = "btn btn-primary";
+	directActionName = "PageAction/MTStyledPopUpButtonTestPage";
+}
+
+MTStyledPopUpButton : MTStyledPopUpButton {
+	item = item;
+	list = list;
+	selection = selectedItem;
+	showImages = false;
+	onShow = "function() { console.log('showing popup options...') }";
+}
+
+MTStyledSelectedValuePopUpButton : MTStyledPopUpButton { 
+	item = item;
+	list = list;
+	name = "FavFruit";
+	selectedValue = selectedItem;
+	showImages = false;
+	onShow = "function() { console.log('showing popup options...') }";
+	value = item;
+}
+
+SubmitButton : WOSubmitButton {
+	action = selectFruit;
+	class = "btn btn-primary";
+}

Examples/Ajax/MooToolsExample/Components/MTStyledPopUpButtonTestPage.wo/MTStyledPopUpButtonTestPage.woo

@@ -0,0 +1,4 @@
+{
+	"WebObjects Release" = "WebObjects 5.0";
+	encoding = "UTF-8";
+}

Examples/Ajax/MooToolsExample/Components/Main.wo/Main.html

@@ -77,8 +77,19 @@
 						<li><wo:link directActionName = "PageAction/MTAjaxInPlaceTestPage">
 							<i class="icon-edit"></i>
 							Ajax In Place
-						</wo:link></li>					
-
+						</wo:link></li>	
+						<li><wo:link directActionName = "PageAction/MTStyledPopUpButtonTestPage">
+							<i class="icon-edit"></i>
+							Styled PopUp Button
+						</wo:link></li>											
+						<li><wo:link directActionName = "PageAction/MTAjaxExpansionTestPage">
+							<i class="icon-edit"></i>
+							Ajax Expansion
+						</wo:link></li>											
+						<li><wo:link directActionName = "PageAction/MTAjaxAutoCompleteTestPage">
+							<i class="icon-edit"></i>
+							Ajax Auto Complete
+						</wo:link></li>											
 					</ul>	
 				</div>
 				<div class = "span9">
@@ -87,4 +98,4 @@
 			</div>
 		</div>
 	</body>
-</html>
+</html>

Examples/Ajax/MooToolsExample/Sources/er/ajax/mootools/example/components/MTAjaxAutoCompleteTestPage.java

@@ -0,0 +1,54 @@
+package er.ajax.mootools.example.components;
+
+import java.util.Enumeration;
+
+import com.webobjects.appserver.WOActionResults;
+import com.webobjects.appserver.WOContext;
+import com.webobjects.foundation.NSArray;
+import com.webobjects.foundation.NSMutableArray;
+
+public class MTAjaxAutoCompleteTestPage extends Main {
+
+	public String value;
+	public String value2;
+
+	public NSArray allValues;
+    public Word currentValue;
+    public Word selectedValue;
+    public Word selectedValue2;
+
+	public MTAjaxAutoCompleteTestPage(WOContext context) {
+        super(context);
+        allValues = ExampleDataFactory.allWords();
+	}
+
+    /**
+     * This method gets called after every keystroke, we check the value variable and return the 10 entries
+     * in allValues that contain this value.
+     */
+    public NSArray currentValues(String v) {
+        NSMutableArray<Word> result = new NSMutableArray<Word>();
+        for(Enumeration e = allValues.objectEnumerator(); e.hasMoreElements() && result.count() < 10;) {
+        	Word c = (Word) e.nextElement();
+            if(v == null || c.name.toLowerCase().indexOf(v.toLowerCase()) >= 0) {
+                result.addObject(c);
+            }
+        }
+        return result;
+    }    
+
+    public NSArray currentValues() {
+    	return currentValues(value);
+    }
+
+    public NSArray currentValues2() {
+    	return currentValues(value2);
+    }    
+
+    public WOActionResults submitted() {
+    	System.out.println("AutoCompleteExample.submitted: " + value + ", " + selectedValue);
+    	System.out.println("AutoCompleteExample.submitted: " + value2 + ", " + selectedValue2);
+    	return null;
+    }    
+
+}

Examples/Ajax/MooToolsExample/Sources/er/ajax/mootools/example/components/MTAjaxExpansionTestPage.java

@@ -0,0 +1,27 @@
+package er.ajax.mootools.example.components;
+
+import com.webobjects.appserver.WOActionResults;
+import com.webobjects.appserver.WOContext;
+import com.webobjects.appserver.WOResponse;
+
+import er.ajax.mootools.MTAjaxUtils;
+
+public class MTAjaxExpansionTestPage extends Main {
+
+	public boolean _optionsVisible;
+
+    public MTAjaxExpansionTestPage(WOContext context) {
+        super(context);
+    }
+
+    public void appendToResponse(WOResponse response, WOContext context) {
+    	super.appendToResponse(response, context);
+    	MTAjaxUtils.addStylesheetResourceInHead(context, response, "app", "css/ToggleDetails.css");
+    }
+
+    public WOActionResults toggleOptions() {
+    	_optionsVisible = !_optionsVisible;
+    	return null;
+    }
+
+}