diff options
| author | Fabio Bas <ctrlaltca@gmail.com> | 2015-11-09 00:33:08 +0100 |
|---|---|---|
| committer | Fabio Bas <ctrlaltca@gmail.com> | 2015-11-09 00:33:08 +0100 |
| commit | 151b2f7d102a5988b63255d27c9ad78202c16355 (patch) | |
| tree | eb5a790407c79ea3a2c74e26c1d97473effae2a2 /demos/quickstart/protected/pages/Advanced | |
| parent | c198ade3610cecd190b74d8519947ad734a0bcca (diff) | |
Added (partial) website + misc updates for release
* recreated the prado website in demos/
* updated some docs to reflect the usage of jquery; removed guide to
prototype
* updated composer
* added task for apigen4 (theme still missing)
Diffstat (limited to 'demos/quickstart/protected/pages/Advanced')
7 files changed, 19 insertions, 1008 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts1.page b/demos/quickstart/protected/pages/Advanced/Scripts1.page deleted file mode 100755 index 96ab7760..00000000 --- a/demos/quickstart/protected/pages/Advanced/Scripts1.page +++ /dev/null @@ -1,96 +0,0 @@ -<com:TContent ID="body" >
-
-<h1 id="6601">Developer Notes for prototype.js</h1>
-This guide is based on the <a href="http://www.sergiopereira.com/articles/prototype.js.html">
-Developer Notes for prototype.js</a> by Sergio Pereira.
-
-<h2 id="6603">What is that?</h2>
-<p id="830726" class="block-content">
-In case you haven't already used it, <a href="http://prototype.conio.net">prototype.js</a> is a
- JavaScript library written by <a href="http://www.conio.net">Sam Stephenson</a>.
- This amazingly well thought and well written piece of <b>standards-compliant</b> code takes a lot of
- the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.
-</p>
-
-<p id="830727" class="block-content">
- If you tried to use this library recently, you probably noticed that documentation is not one
- of its strongest points. As many other developers before me, I got my head around prototype.js by
- reading the source code and experimenting with it. I thought it would be nice to take notes while
- I learned and share with everybody else.
-</p>
-<p id="830728" class="block-content">
- As you read the examples and the reference, developers familiar with the Ruby
- programming language will notice an intentional similarity between Ruby's
- built-in classes and many of the extensions implemented by this library.
-</p>
-
-
-<h2 id="6604">Using the <tt>$()</tt> function</h2>
-<p id="830729" class="block-content">
- The <tt>$()</tt> function is a handy shortcut to the all-too-frequent <tt>document.getElementById()</tt> function
- of the DOM. Like the DOM function, this one returns the element that has the id passed as an argument.
-</p>
-
-<p id="830730" class="block-content">
- Unlike the DOM function, though, this one goes further. You can pass more than one id and
- <tt>$()</tt> will return an <tt>Array</tt> object with
- all the requested elements. The example below should illustrate this.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_830252">
-<com:TClientScript UsingClientScripts="prado" />
-<div id="myDiv">
- <p id="830731" class="block-content">This is a paragraph</p>
-</div>
-
-<div id="myOtherDiv">
- <p id="830732" class="block-content">This is another paragraph</p>
-</div>
-
-<input type="button" value=Test1 onclick="test1();" />
-<input type="button" value=Test2 onclick="test2();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function test1()
-{
- var d = $('myDiv');
- alert(d.innerHTML);
-}
-
-function test2()
-{
- var divs = $('myDiv','myOtherDiv');
- for(i=0; i<divs.length; i++)
- {
- alert(divs[i].innerHTML);
- }
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-<p id="830733" class="block-content">
- Another nice thing about this function is that you can pass either the <tt>id</tt> string or the element object itself,
- which makes this function very useful when creating other functions that can also take either form of argument.
-</p>
-
-<h2 id="6605">Using the <tt>$F()</tt> function</h2>
-
-<p id="830734" class="block-content">
- The <tt>$F()</tt> function is a another welcome shortcut. It returns the value of any field input control,
- like text boxes or drop-down lists. The function can take as argument either the element <tt>id</tt> or the element object itself.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_830253">
-<input type="text" id="userName" value="Joe Doe" />
-<input type="button" value=Test3 onclick="test3();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function test3()
-{
- alert($F('userName'));
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-
-</com:TContent>
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts2.page b/demos/quickstart/protected/pages/Advanced/Scripts2.page deleted file mode 100755 index 5d88b065..00000000 --- a/demos/quickstart/protected/pages/Advanced/Scripts2.page +++ /dev/null @@ -1,253 +0,0 @@ -<com:TContent ID="body" >
-<h1 id="6701">DOM Events and Javascript</h1>
-
-<h2 id="6702">Basic event handling</h2>
-
-<p id="840735" class="block-content">The syntax for working with events looks like the code below.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840254">
-Event.observe(element, name, observer, [useCapture]);
-</com:TTextHighlighter>
-
-<p id="840736" class="block-content">Assuming for a moment that we want to observe when a link was clicked,
-we could do the following:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840255">
-// <a id="clicker" href="http://foo.com">Click me</a>
-Event.observe('clicker', 'click', function(event)
-{
- alert('clicked!');
-});
-</com:TTextHighlighter>
-
-<p id="840737" class="block-content">If we wanted to get the element that fired the event, we'd do this:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840256">
-Event.observe('clicker', 'click', function(event)
-{
- alert(Event.element(event));
-});
-</com:TTextHighlighter>
-
-<h2 id="6703">Observing keystrokes</h2>
-
-<p id="840738" class="block-content">If we wanted to observe keystrokes for the entire document, we could do the following:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840257">
-Event.observe(document, 'keypress', function(event)
-{
- if(Event.keyCode(event) == Event.KEY_TAB)
- alert('Tab Pressed');
-});
-</com:TTextHighlighter>
-
-<p id="840739" class="block-content">And lets say we wanted to keep track of what has been typed :</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840258">
-Event.observe('search', 'keypress', function(event)
-{
- Element.update('search-results', $F(Event.element(event)));
-});
-</com:TTextHighlighter>
-
-<p id="840740" class="block-content">Prototype defines properties inside the event object for some
-of the more common keys, so feel free to dig around in Prototype to
-see which ones those are.</p>
-
-<p id="840741" class="block-content">A final note on keypress events; If you'd like to detect a
-left click you can use <tt>Event.isLeftClick(event)</tt>.</p>
-
-<h2 id="6704">Getting the coordinates of the mouse pointer</h2>
-
-<p id="840742" class="block-content">Drag and drop, dynamic element resizing, games, and
-much more all require the ability to track the X and Y location of
-the mouse. Prototype makes this fairly simple. The code below tracks
-the X and Y position of the mouse and spits out those values into
-an input box named mouse.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840259">
-Event.observe(document, 'mousemove', function(event)
-{
- $('mouse').value = "X: " + Event.pointerX(event) +
- "px Y: " + Event.pointerY(event) + "px";
-});
-</com:TTextHighlighter>
-
-<p id="840743" class="block-content">If we wanted to observe the mouse location when it was
-hovering over a certain element, we'd just change the document argument to
-the id or element that was relevant.</p>
-
-<h2 id="6705">Stopping Propagation</h2>
-
-<p id="840744" class="block-content"><tt>Event.stop(event)</tt> will stop the propagation of an event .</p>
-
-<h2 id="6706">Events, Binding, and Objects</h2>
-
-<p id="840745" class="block-content">Everything has been fairly straight forward so far, but things
-start getting a little trickier when you need to work with events in
-and object-oriented environment. You have to deal with binding and funky
-looking syntax that might take a moment to get your head around.</p>
-
-<p id="840746" class="block-content">Lets look at some code so you can get a better understanding of what I'm talking about.</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840260">
-EventDispenser = Class.create();
-EventDispenser.prototype =
-{
- initialize: function(list)
- {
- this.list = list;
-
- // Observe clicks on our list items
- $$(this.list + " li").each(function(item)
- {
- Event.observe(item, 'click', this.showTagName.bindEvent(this));
- }.bind(this));
-
- // Observe when a key on the keyboard is pressed.
- // In the observer, we check for
- // the tab key and alert a message if it is pressed.
- Event.observe(document, 'keypress', this.onKeyPress.bindEvent(this));
-
- // Observe our fake live search box. When a user types
- // something into the box, the observer will take that
- // value(-1) and update our search-results div with it.
- Event.observe('search', 'keypress', this.onSearch.bindEvent(this));
-
- Event.observe(document, 'mousemove', this.onMouseMove.bindEvent(this));
- },
-
- // Arbitrary functions to respond to events
- showTagName: function(event)
- {
- alert(Event.element(event).tagName);
- },
-
- onKeyPress: function(event)
- {
- var code = event.keyCode;
- if(code == Event.KEY_TAB)
- alert('Tab key was pressed');
- },
-
- onSearch: function(event)
- {
- Element.update('search-results', $F(Event.element(event)));
- },
-
- onMouseMove: function(event)
- {
- $('mouse').value = "X: " + Event.pointerX(event) +
- "px Y: " + Event.pointerY(event) + "px";
- }
-}
-</com:TTextHighlighter>
-<p id="840747" class="block-content">Whoa! What's going on here? Well, we've defined our a
-custom class <tt>EventDispenser</tt>. We're going to be using this class
-to setup events for our document. Most of this code is a
-rewrite of the code we looked at earlier except this time, we
-are working from inside an object.</p>
-
-<p id="840748" class="block-content">Looking at the <tt>initialize</tt> method, we can really see how
-things are different now. Take a look at the code below:</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840261">
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
-{
- Event.observe(item, 'click', this.showTagName.bindEvent(this));
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840749" class="block-content">We've got iterators, binding and all sorts of stuff going on.
-Lets break down what this chunk of code is doing.</p>
-
-<p id="840750" class="block-content">First we are hunting for a collection of elements based on
-it's CSS selector. This uses the Prototype selector function <tt>$$()</tt>.
-After we've found the list items we are dealing with we send
-those into an each iteration where we will add our observers.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840262">
-Event.observe(item, 'click', this.showTagName.bindEvent(this));
-</com:TTextHighlighter>
-
-<p id="840751" class="block-content">Now looking at the code above, you'll notice the <tt>bindEvent</tt> function.
-This takes the method before it <tt>showTagName</tt> and treats it as the
-method that will be triggered when, in this case,
-someone clicks one of our list items.</p>
-
-<p id="840752" class="block-content">You'll also notice we pass this as an argument to the <tt>bindEvent</tt> function.
-This simply allows us to reference the object in context <tt>EventDispenser</tt>
-inside our function <tt>showTagName(event)</tt>. If the <tt>showTagName</tt> function
-requires additional parameters, you can attach them to the later parameters of <tt>bindEvent</tt>. For example</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840263">
-this.showTagName.bindEvent(this, param1, param2);
-
-//where the showTagName function is defined as
-showTime : function (event, param1, param2) { ... }
-</com:TTextHighlighter>
-
-<p id="840753" class="block-content">Moving on, you'll see <tt>bind(this)</tt> attached to our iterator function.
-This really has nothing to do with events, it is only here to allow me to
-use <tt>this</tt> inside the iterator. If we did not use <tt>bind(this)</tt>, I could not
-reference the method <tt>showTagName</tt> inside the iterator.</p>
-
-<p id="840754" class="block-content">Ok, so we'll move on to looking at our methods that actually get
-called when an event occurs. Since we've been dealing with <tt>showTagName</tt>, lets look at it.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840264">
-showTagName: function(event)
-{
- alert(Event.element(event).tagName);
-}
-</com:TTextHighlighter>
-
-<p id="840755" class="block-content">As you can see, this function accepts one argument--the event.
-In order for us to get the element which fired the event we need to
-pass that argument to <tt>Event.element</tt>. Now we can manipulate it at will.</p>
-
-<p id="840756" class="block-content">This covers the most confusing parts of our code. The text above is also
-relevant to the remaining parts of our code. If there is anything about
-this you don't understand, feel free to ask questions in the forum.</p>
-
-<h2 id="6707">Removing Event Listeners</h2>
-
-<p id="840757" class="block-content">This one threw me for a loop the first time I tried to use it.
-I tried something similar to what I did in the <tt>Event.observe</tt>
-call with the exception of using <tt>stopObserving</tt>, but nothing seemed
-to change. In other words, the code below does <b>NOT</b> work.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840265">
-$$(this.list + " li").each(function(item)
-{
- Event.stopObserving(item, 'click', this.showTagName);
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840758" class="block-content">What's the deal here? The reason this does not work is because there
-is no pointer to the observer. This means that when we passed <tt>this.showTagName</tt>
-in the <tt>Event.observe</tt> method before hand, we passed it as an
-anonymous function. We can't reference an anonymous function
-because it simply does not have a pointer.</p>
-
-<p id="840759" class="block-content">So how do we get the job done? All we need to do is give the
-observing function a pointer, or the jargon free version: Set a variable
-that points to <tt>this.showTagName</tt>. Ok, lets change our code a bit.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840266">
-this.showTagObserver = this.showTagName.bindEvent(this);
-
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
-{
- Event.observe(item, 'click', this.showTagObserver);
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840760" class="block-content">Now we can remove the event listeners from our list like this:</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840267">
-$$(this.list + " li").each(function(item)
-{
- Event.stopObserving(item, 'click', this.showTagObserver);
-}.bind(this));
-</com:TTextHighlighter>
-
-</com:TContent>
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts3.page b/demos/quickstart/protected/pages/Advanced/Scripts3.page index 3f41abe1..b937e274 100755 --- a/demos/quickstart/protected/pages/Advanced/Scripts3.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts3.page @@ -19,22 +19,31 @@ $this->getPage()->getClientScript()->registerPradoScript("effects"); </ul>
The available packaged libraries included in Prado are
<ul id="u2" class="block-content">
- <li><tt>prado</tt> : basic PRADO javascript framework based on Prototype</li>
- <li><tt>effects</tt> : visual effects from script.aculo.us</li>
- <li><tt>ajax</tt> : ajax and callback related based on Prototype</li>
- <li><tt>validator</tt> : validation</li>
+ <li><tt>jquery</tt> : <a href="https://jquery.com/">jQuery</a> javascript framework</li>
+ <li><tt>prado</tt> : basic PRADO javascript framework based on jQuery</li>
+ <li><tt>bootstrap</tt> : <a href="http://getbootstrap.com/">Bootstrap</a> front-end framework</li>
+ <li><tt>effects</tt> : visual effects based on <a href="https://jqueryui.com/">jQueryUI</a></li>
+ <li><tt>ajax</tt> : ajax and callback related based on jQuery</li>
+ <li><tt>validator</tt> : widgets validation</li>
<li><tt>logger</tt> : javascript logger and object browser</li>
- <li><tt>datepicker</tt> : datepicker control</li>
- <li><tt>colorpicker</tt> : colorpicker control</li>
+ <li><tt>datepicker</tt> : TDatepicker control</li>
+ <li><tt>colorpicker</tt> : TColorPicker control</li>
<li><tt>dragdrop</tt> : basic support for "drag and drop" control</li>
<li><tt>dragdropextra</tt> : extra support for "drag and drop" controls</li>
- <li><tt>slider</tt> : slider control</li>
+ <li><tt>slider</tt> : TSlider control</li>
<li><tt>keyboard</tt> : software keyboard control</li>
- <li><tt>tabpanel</tt> : tabpanel control</li>
+ <li><tt>tabpanel</tt> : TTabPanel control</li>
+ <li><tt>inlineeditor</tt> : TInPlaceTextBox. control</li>
<li><tt>activedatepicker</tt> : ajax version of the datepicker control</li>
<li><tt>activefileupload</tt> : ajax version of the fileupload control</li>
- <li><tt>accordion</tt> : accordion control</li>
- <li><tt>htmlarea</tt> : tinymce control</li>
+ <li><tt>accordion</tt> : TAccordion control</li>
+ <li><tt>ratings</tt> : TRatingList control</li>
+ <li><tt>htmlarea</tt> : <a href="http://www.tinymce.com/">tinyMCE</a> version 3 editor</li>
+ <li><tt>htmlarea4</tt> : <a href="http://www.tinymce.com/">tinyMCE</a> version 4 editor</li>
+ <li><tt>prototype</tt> : <a href="http://prototypejs.org/">prototype</a> javascript framework (only for compatibility with old custom controls)</li>
+ <li><tt>dragdrop</tt> : compatibility package for old, prototype-based drag&drop controls</li>
+ <li><tt>dragdropextra</tt> : compatiblity package for old, prototype-based drag&drop controls</li>
+ <li><tt>autocomplete</tt> : compatibility package for prototype-based TAutoComplete control</li>
</ul>
<p id="850761" class="block-content">The dependencies for each library are automatically resolved. Components
diff --git a/demos/quickstart/protected/pages/Advanced/es/Scripts1.page b/demos/quickstart/protected/pages/Advanced/es/Scripts1.page deleted file mode 100755 index 96ab7760..00000000 --- a/demos/quickstart/protected/pages/Advanced/es/Scripts1.page +++ /dev/null @@ -1,96 +0,0 @@ -<com:TContent ID="body" >
-
-<h1 id="6601">Developer Notes for prototype.js</h1>
-This guide is based on the <a href="http://www.sergiopereira.com/articles/prototype.js.html">
-Developer Notes for prototype.js</a> by Sergio Pereira.
-
-<h2 id="6603">What is that?</h2>
-<p id="830726" class="block-content">
-In case you haven't already used it, <a href="http://prototype.conio.net">prototype.js</a> is a
- JavaScript library written by <a href="http://www.conio.net">Sam Stephenson</a>.
- This amazingly well thought and well written piece of <b>standards-compliant</b> code takes a lot of
- the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.
-</p>
-
-<p id="830727" class="block-content">
- If you tried to use this library recently, you probably noticed that documentation is not one
- of its strongest points. As many other developers before me, I got my head around prototype.js by
- reading the source code and experimenting with it. I thought it would be nice to take notes while
- I learned and share with everybody else.
-</p>
-<p id="830728" class="block-content">
- As you read the examples and the reference, developers familiar with the Ruby
- programming language will notice an intentional similarity between Ruby's
- built-in classes and many of the extensions implemented by this library.
-</p>
-
-
-<h2 id="6604">Using the <tt>$()</tt> function</h2>
-<p id="830729" class="block-content">
- The <tt>$()</tt> function is a handy shortcut to the all-too-frequent <tt>document.getElementById()</tt> function
- of the DOM. Like the DOM function, this one returns the element that has the id passed as an argument.
-</p>
-
-<p id="830730" class="block-content">
- Unlike the DOM function, though, this one goes further. You can pass more than one id and
- <tt>$()</tt> will return an <tt>Array</tt> object with
- all the requested elements. The example below should illustrate this.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_830252">
-<com:TClientScript UsingClientScripts="prado" />
-<div id="myDiv">
- <p id="830731" class="block-content">This is a paragraph</p>
-</div>
-
-<div id="myOtherDiv">
- <p id="830732" class="block-content">This is another paragraph</p>
-</div>
-
-<input type="button" value=Test1 onclick="test1();" />
-<input type="button" value=Test2 onclick="test2();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function test1()
-{
- var d = $('myDiv');
- alert(d.innerHTML);
-}
-
-function test2()
-{
- var divs = $('myDiv','myOtherDiv');
- for(i=0; i<divs.length; i++)
- {
- alert(divs[i].innerHTML);
- }
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-<p id="830733" class="block-content">
- Another nice thing about this function is that you can pass either the <tt>id</tt> string or the element object itself,
- which makes this function very useful when creating other functions that can also take either form of argument.
-</p>
-
-<h2 id="6605">Using the <tt>$F()</tt> function</h2>
-
-<p id="830734" class="block-content">
- The <tt>$F()</tt> function is a another welcome shortcut. It returns the value of any field input control,
- like text boxes or drop-down lists. The function can take as argument either the element <tt>id</tt> or the element object itself.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_830253">
-<input type="text" id="userName" value="Joe Doe" />
-<input type="button" value=Test3 onclick="test3();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function test3()
-{
- alert($F('userName'));
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-
-</com:TContent>
diff --git a/demos/quickstart/protected/pages/Advanced/es/Scripts2.page b/demos/quickstart/protected/pages/Advanced/es/Scripts2.page deleted file mode 100755 index 5d88b065..00000000 --- a/demos/quickstart/protected/pages/Advanced/es/Scripts2.page +++ /dev/null @@ -1,253 +0,0 @@ -<com:TContent ID="body" >
-<h1 id="6701">DOM Events and Javascript</h1>
-
-<h2 id="6702">Basic event handling</h2>
-
-<p id="840735" class="block-content">The syntax for working with events looks like the code below.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840254">
-Event.observe(element, name, observer, [useCapture]);
-</com:TTextHighlighter>
-
-<p id="840736" class="block-content">Assuming for a moment that we want to observe when a link was clicked,
-we could do the following:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840255">
-// <a id="clicker" href="http://foo.com">Click me</a>
-Event.observe('clicker', 'click', function(event)
-{
- alert('clicked!');
-});
-</com:TTextHighlighter>
-
-<p id="840737" class="block-content">If we wanted to get the element that fired the event, we'd do this:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840256">
-Event.observe('clicker', 'click', function(event)
-{
- alert(Event.element(event));
-});
-</com:TTextHighlighter>
-
-<h2 id="6703">Observing keystrokes</h2>
-
-<p id="840738" class="block-content">If we wanted to observe keystrokes for the entire document, we could do the following:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840257">
-Event.observe(document, 'keypress', function(event)
-{
- if(Event.keyCode(event) == Event.KEY_TAB)
- alert('Tab Pressed');
-});
-</com:TTextHighlighter>
-
-<p id="840739" class="block-content">And lets say we wanted to keep track of what has been typed :</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840258">
-Event.observe('search', 'keypress', function(event)
-{
- Element.update('search-results', $F(Event.element(event)));
-});
-</com:TTextHighlighter>
-
-<p id="840740" class="block-content">Prototype defines properties inside the event object for some
-of the more common keys, so feel free to dig around in Prototype to
-see which ones those are.</p>
-
-<p id="840741" class="block-content">A final note on keypress events; If you'd like to detect a
-left click you can use <tt>Event.isLeftClick(event)</tt>.</p>
-
-<h2 id="6704">Getting the coordinates of the mouse pointer</h2>
-
-<p id="840742" class="block-content">Drag and drop, dynamic element resizing, games, and
-much more all require the ability to track the X and Y location of
-the mouse. Prototype makes this fairly simple. The code below tracks
-the X and Y position of the mouse and spits out those values into
-an input box named mouse.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840259">
-Event.observe(document, 'mousemove', function(event)
-{
- $('mouse').value = "X: " + Event.pointerX(event) +
- "px Y: " + Event.pointerY(event) + "px";
-});
-</com:TTextHighlighter>
-
-<p id="840743" class="block-content">If we wanted to observe the mouse location when it was
-hovering over a certain element, we'd just change the document argument to
-the id or element that was relevant.</p>
-
-<h2 id="6705">Stopping Propagation</h2>
-
-<p id="840744" class="block-content"><tt>Event.stop(event)</tt> will stop the propagation of an event .</p>
-
-<h2 id="6706">Events, Binding, and Objects</h2>
-
-<p id="840745" class="block-content">Everything has been fairly straight forward so far, but things
-start getting a little trickier when you need to work with events in
-and object-oriented environment. You have to deal with binding and funky
-looking syntax that might take a moment to get your head around.</p>
-
-<p id="840746" class="block-content">Lets look at some code so you can get a better understanding of what I'm talking about.</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840260">
-EventDispenser = Class.create();
-EventDispenser.prototype =
-{
- initialize: function(list)
- {
- this.list = list;
-
- // Observe clicks on our list items
- $$(this.list + " li").each(function(item)
- {
- Event.observe(item, 'click', this.showTagName.bindEvent(this));
- }.bind(this));
-
- // Observe when a key on the keyboard is pressed.
- // In the observer, we check for
- // the tab key and alert a message if it is pressed.
- Event.observe(document, 'keypress', this.onKeyPress.bindEvent(this));
-
- // Observe our fake live search box. When a user types
- // something into the box, the observer will take that
- // value(-1) and update our search-results div with it.
- Event.observe('search', 'keypress', this.onSearch.bindEvent(this));
-
- Event.observe(document, 'mousemove', this.onMouseMove.bindEvent(this));
- },
-
- // Arbitrary functions to respond to events
- showTagName: function(event)
- {
- alert(Event.element(event).tagName);
- },
-
- onKeyPress: function(event)
- {
- var code = event.keyCode;
- if(code == Event.KEY_TAB)
- alert('Tab key was pressed');
- },
-
- onSearch: function(event)
- {
- Element.update('search-results', $F(Event.element(event)));
- },
-
- onMouseMove: function(event)
- {
- $('mouse').value = "X: " + Event.pointerX(event) +
- "px Y: " + Event.pointerY(event) + "px";
- }
-}
-</com:TTextHighlighter>
-<p id="840747" class="block-content">Whoa! What's going on here? Well, we've defined our a
-custom class <tt>EventDispenser</tt>. We're going to be using this class
-to setup events for our document. Most of this code is a
-rewrite of the code we looked at earlier except this time, we
-are working from inside an object.</p>
-
-<p id="840748" class="block-content">Looking at the <tt>initialize</tt> method, we can really see how
-things are different now. Take a look at the code below:</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840261">
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
-{
- Event.observe(item, 'click', this.showTagName.bindEvent(this));
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840749" class="block-content">We've got iterators, binding and all sorts of stuff going on.
-Lets break down what this chunk of code is doing.</p>
-
-<p id="840750" class="block-content">First we are hunting for a collection of elements based on
-it's CSS selector. This uses the Prototype selector function <tt>$$()</tt>.
-After we've found the list items we are dealing with we send
-those into an each iteration where we will add our observers.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840262">
-Event.observe(item, 'click', this.showTagName.bindEvent(this));
-</com:TTextHighlighter>
-
-<p id="840751" class="block-content">Now looking at the code above, you'll notice the <tt>bindEvent</tt> function.
-This takes the method before it <tt>showTagName</tt> and treats it as the
-method that will be triggered when, in this case,
-someone clicks one of our list items.</p>
-
-<p id="840752" class="block-content">You'll also notice we pass this as an argument to the <tt>bindEvent</tt> function.
-This simply allows us to reference the object in context <tt>EventDispenser</tt>
-inside our function <tt>showTagName(event)</tt>. If the <tt>showTagName</tt> function
-requires additional parameters, you can attach them to the later parameters of <tt>bindEvent</tt>. For example</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840263">
-this.showTagName.bindEvent(this, param1, param2);
-
-//where the showTagName function is defined as
-showTime : function (event, param1, param2) { ... }
-</com:TTextHighlighter>
-
-<p id="840753" class="block-content">Moving on, you'll see <tt>bind(this)</tt> attached to our iterator function.
-This really has nothing to do with events, it is only here to allow me to
-use <tt>this</tt> inside the iterator. If we did not use <tt>bind(this)</tt>, I could not
-reference the method <tt>showTagName</tt> inside the iterator.</p>
-
-<p id="840754" class="block-content">Ok, so we'll move on to looking at our methods that actually get
-called when an event occurs. Since we've been dealing with <tt>showTagName</tt>, lets look at it.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840264">
-showTagName: function(event)
-{
- alert(Event.element(event).tagName);
-}
-</com:TTextHighlighter>
-
-<p id="840755" class="block-content">As you can see, this function accepts one argument--the event.
-In order for us to get the element which fired the event we need to
-pass that argument to <tt>Event.element</tt>. Now we can manipulate it at will.</p>
-
-<p id="840756" class="block-content">This covers the most confusing parts of our code. The text above is also
-relevant to the remaining parts of our code. If there is anything about
-this you don't understand, feel free to ask questions in the forum.</p>
-
-<h2 id="6707">Removing Event Listeners</h2>
-
-<p id="840757" class="block-content">This one threw me for a loop the first time I tried to use it.
-I tried something similar to what I did in the <tt>Event.observe</tt>
-call with the exception of using <tt>stopObserving</tt>, but nothing seemed
-to change. In other words, the code below does <b>NOT</b> work.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840265">
-$$(this.list + " li").each(function(item)
-{
- Event.stopObserving(item, 'click', this.showTagName);
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840758" class="block-content">What's the deal here? The reason this does not work is because there
-is no pointer to the observer. This means that when we passed <tt>this.showTagName</tt>
-in the <tt>Event.observe</tt> method before hand, we passed it as an
-anonymous function. We can't reference an anonymous function
-because it simply does not have a pointer.</p>
-
-<p id="840759" class="block-content">So how do we get the job done? All we need to do is give the
-observing function a pointer, or the jargon free version: Set a variable
-that points to <tt>this.showTagName</tt>. Ok, lets change our code a bit.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840266">
-this.showTagObserver = this.showTagName.bindEvent(this);
-
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
-{
- Event.observe(item, 'click', this.showTagObserver);
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840760" class="block-content">Now we can remove the event listeners from our list like this:</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840267">
-$$(this.list + " li").each(function(item)
-{
- Event.stopObserving(item, 'click', this.showTagObserver);
-}.bind(this));
-</com:TTextHighlighter>
-
-</com:TContent>
diff --git a/demos/quickstart/protected/pages/Advanced/id/Scripts1.page b/demos/quickstart/protected/pages/Advanced/id/Scripts1.page deleted file mode 100755 index 51535de1..00000000 --- a/demos/quickstart/protected/pages/Advanced/id/Scripts1.page +++ /dev/null @@ -1,86 +0,0 @@ -<com:TContent ID="body" >
-
-<h1 id="6601">Catatan Pengembang untuk prototype.js</h1>
-Bimbingan ini didasarkan pada <a href="http://www.sergiopereira.com/articles/prototype.js.html">
-Catatan Pengembang untuk prototype.js</a> oleh Sergio Pereira.
-
-<h2 id="6603">Apa itu?</h2>
-<p id="830726" class="block-content">
-Dalam hal Anda tidak pernah menggunakannya, <a href="http://prototype.conio.net">prototype.js</a> adalah librari
- JavaScript yang ditulis oleh <a href="http://www.conio.net">Sam Stephenson</a>.
- Pemikiran yang hebat ini dan kode <b>sesuai-standar</b> yang ditulis dengan baik mengambil banyak beban terkait dengan pembuatan halaman web sangat interaktif dan kaya yang mengkarakterkan Web 2.0 di belakang Anda.
-</p>
-
-<p id="830727" class="block-content">
- Jika Anda baru saja mencoba menggunakan librari ini, Anda mungkin mencatat bahwa dokumentasi bukanlah salah satu titik yang terkuat. Seperti banyak pengembang lain sebelum saya, saya mempelajari prototype.js dengan membaca kode sumber dan melakukan percobaan denganya. Saya pikir akan baik jika mengambil catatan selama saya mempelajari dan berbagi dengan orang lain.
-</p>
-<p id="830728" class="block-content">
- Setelah Anda membaca contoh dan referensi, para pengembang yang terbiasa dengan bahasa pemrograman Ruby akan mencatat kesamaan maksud antara kelas built-in Ruby dan banyak ekstensi diimplementasikan oleh librari ini.
-</p>
-
-
-<h2 id="6604">Menggunakan fungsi <tt>$()</tt></h2>
-<p id="830729" class="block-content">
- Fungsi <tt>$()</tt> adalah jalan pintas yang siap digunakan untuk fungsi yang semua-terlalu-sering <tt>document.getElementById()</tt> terhadap DOM. Seperti fungsi DOM, fungsi ini mengembalikan elemen yang id-nya dikirimkan sebagai sebuah argumen.
-</p>
-
-<p id="830730" class="block-content">
- Tidak seperti fungsi DOM, bagaimanapun juga, yang satu ini melampauinya. Anda dapat mengirimkan lebih dari satu id dan
- <tt>$()</tt> akan mengembalikan obyek <tt>Array</tt> dengan semua elemen yang diminta. Contoh di bawah seharunya menggambarkan ini.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_830252">
-<com:TClientScript UsingClientScripts="prado" />
-<div id="myDiv">
- <p id="830731" class="block-content">This is a paragraph</p>
-</div>
-
-<div id="myOtherDiv">
- <p id="830732" class="block-content">This is another paragraph</p>
-</div>
-
-<input type="button" value=Test1 onclick="test1();" />
-<input type="button" value=Test2 onclick="test2();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function test1()
-{
- var d = $('myDiv');
- alert(d.innerHTML);
-}
-
-function test2()
-{
- var divs = $('myDiv','myOtherDiv');
- for(i=0; i<divs.length; i++)
- {
- alert(divs[i].innerHTML);
- }
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-<p id="830733" class="block-content">
- Hal baik lainnya dari fungsi ini adalah bahwa Anda bisa mengirimkan baik string <tt>id</tt> ataupun elemen obyek itu sendiri, yang menjadikan fungsi ini sangat berguna ketika membuat fungsi lain yang juga mengambil bentuk argumen.
-</p>
-
-<h2 id="6605">Menggunakan fungsi <tt>$F()</tt></h2>
-
-<p id="830734" class="block-content">
- Fungsi <tt>$F()</tt> adalah jalan pintas penyambutan lainnya. Ia mengembalikan nilai dari setiap kontrol input field, seperti kotak teks atau daftar drop-down. Fungsi bisa diambil sebagai argumen baik elemen <tt>id</tt> ataupun elemen obyek itu sendiri.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_830253">
-<input type="text" id="userName" value="Joe Doe" />
-<input type="button" value=Test3 onclick="test3();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function test3()
-{
- alert($F('userName'));
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-
-</com:TContent>
diff --git a/demos/quickstart/protected/pages/Advanced/id/Scripts2.page b/demos/quickstart/protected/pages/Advanced/id/Scripts2.page deleted file mode 100755 index 80277628..00000000 --- a/demos/quickstart/protected/pages/Advanced/id/Scripts2.page +++ /dev/null @@ -1,214 +0,0 @@ -<com:TContent ID="body" >
-<h1 id="6701">Event DOM dan Javascript</h1>
-
-<h2 id="6702">Penanganan event dasar</h2>
-
-<p id="840735" class="block-content">Sintaks untuk bekerja dengan event terlihat seperti kode di bawah.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840254">
-Event.observe(element, name, observer, [useCapture]);
-</com:TTextHighlighter>
-
-<p id="840736" class="block-content">Menganggap untuk saat ini kita ingin mengamati sebuah link yang diklik, kita dapat melakukan yang berikut:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840255">
-// <a id="clicker" href="http://foo.com">Click me</a>
-Event.observe('clicker', 'click', function(event)
-{
- alert('clicked!');
-});
-</com:TTextHighlighter>
-
-<p id="840737" class="block-content">Jika kita menginginkan untuk mendapatkan elemen yang memicu event, kita melakukan ini:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840256">
-Event.observe('clicker', 'click', function(event)
-{
- alert(Event.element(event));
-});
-</com:TTextHighlighter>
-
-<h2 id="6703">Mengamati tekanan tombol</h2>
-
-<p id="840738" class="block-content">Jika kita ingin mengamati tekanan tombol untuk seluruh dokumen, kita dapat melakukan yang berikut:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840257">
-Event.observe(document, 'keypress', function(event)
-{
- if(Event.keyCode(event) == Event.KEY_TAB)
- alert('Tab Pressed');
-});
-</com:TTextHighlighter>
-
-<p id="840739" class="block-content">Dan katakanlah kita ingin melacak apa yang telak diketikan:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840258">
-Event.observe('search', 'keypress', function(event)
-{
- Element.update('search-results', $F(Event.element(event)));
-});
-</com:TTextHighlighter>
-
-<p id="840740" class="block-content">Prototipe mendefinisikan properti di dalam obyek event untuk beberapa dari tombol yang lebih umum, maka jangan ragu-ragu untuk mencari di sekitar Prototype guna melihat yang mana saja itu.</p>
-
-<p id="840741" class="block-content">Catatan terakhir pada event tekanan tombol; Jika Anda ingin mendeteksi klik kiri, Anda bisa menggunakan <tt>Event.isLeftClick(event)</tt>.</p>
-
-<h2 id="6704">Mendapatkan koordinat dari penunjuk mouse</h2>
-
-<p id="840742" class="block-content">Tarik dan jatuhkan, pengukuran ulang elemen dinamis, permainan, dan lebih banyak lagi, semuanya memerlukan kemampuan untuk melacak lokasi X dan Y dari mouse. Prototipe menjadikan hal ini cukup sederhana. Kode di bawah melacak posisi X dan Y dari mouse dan memindahkan nilainya ke dalam kotak input bernama mouse.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840259">
-Event.observe(document, 'mousemove', function(event)
-{
- $('mouse').value = "X: " + Event.pointerX(event) +
- "px Y: " + Event.pointerY(event) + "px";
-});
-</com:TTextHighlighter>
-
-<p id="840743" class="block-content">Jika kita ingin mengamati lokasi mouse saat ia melewati elemen tertentu, cukup ubah argumen dokumen ke id atau elemen yang relevan.</p>
-
-<h2 id="6705">Menghentikan Propagasi</h2>
-
-<p id="840744" class="block-content"><tt>Event.stop(event)</tt> akan menghentikan propagasi sebuah event .</p>
-
-<h2 id="6706">Event, Penyatuan, dan Obyek</h2>
-
-<p id="840745" class="block-content">Sejauh ini semuanya sudah jelas, tapi sesuatu mulai menjadi sedikit lebih rumit ketika Anda perlu bekerja dengan event dalam lingkungan obyek-terorientasi. Anda harus berhadapan dengan penyatuan dan sintaks yang terlihat aneh yang memerlukan beberapa waktu bagi Anda untuk mengetahuinya.</p>
-
-<p id="840746" class="block-content">Mari kita lihat pada beberapa kode agar Anda bisa mendapatkan pengertian yang lebih baik atas apa yang sedang saya bicarakan.</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840260">
-EventDispenser = Class.create();
-EventDispenser.prototype =
-{
- initialize: function(list)
- {
- this.list = list;
-
- // Amati klik pada item list kita
- $$(this.list + " li").each(function(item)
- {
- Event.observe(item, 'click', this.showTagName.bindEvent(this));
- }.bind(this));
-
- // Amati saat tombol pada keyboard ditekan.
- // Dalam pengamat, kita memeriksa
- // tombol tab dan memunculkan pesan jika ditekan.
- Event.observe(document, 'keypress', this.onKeyPress.bindEvent(this));
-
- // Amati kotak pencarian kita yang palsu. Ketika pengguna mengetik
- // sesuatu ke dalam kotak, pengamat akan mengambil nilai (-1) itu
- // dan memutakhirkan hasil pencarian div dengannya.
- Event.observe('search', 'keypress', this.onSearch.bindEvent(this));
-
- Event.observe(document, 'mousemove', this.onMouseMove.bindEvent(this));
- },
-
- // Fungsi bebas untuk merespon event
- showTagName: function(event)
- {
- alert(Event.element(event).tagName);
- },
-
- onKeyPress: function(event)
- {
- var code = event.keyCode;
- if(code == Event.KEY_TAB)
- alert('Tab key was pressed');
- },
-
- onSearch: function(event)
- {
- Element.update('search-results', $F(Event.element(event)));
- },
-
- onMouseMove: function(event)
- {
- $('mouse').value = "X: " + Event.pointerX(event) +
- "px Y: " + Event.pointerY(event) + "px";
- }
-}
-</com:TTextHighlighter>
-<p id="840747" class="block-content">Wah! Apa yang terjadi di sini? Kita telah mendefinisikan kelas kustom kita <tt>EventDispenser</tt>. Kita akan menggunakan kelas ini untuk menyiapkan event untuk dokumenkita. Banyak dari kode ini ditulis ulang yang kita lihat di awal kecuali kali ini, kita bekerja dari dalam sebuah obyek.</p>
-
-<p id="840748" class="block-content">Melihat metode <tt>initialize</tt>, sebenarnya kita dapat melihat bagaimana sesuatu menjadi berbeda sekarang. Lihat kode di bawah ini:</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840261">
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
-{
- Event.observe(item, 'click', this.showTagName.bindEvent(this));
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840749" class="block-content">Kita mendapatkan iterator, penyatuan dan semua hal lainnya. Mari kita rinci apa yang dikerjakan kode ini.</p>
-
-<p id="840750" class="block-content">Pertama kita memburu koleksi elemen berdasarkan selektor CSS. Ini menggunakan fungsi selektor Prototipe <tt>$$()</tt>.
-Setelah kita menemukan daftar item kita berhadapan dengan apa yang kita kirim ke dalam setiap iterasi di mana kita akan menambahkan pengamat kita.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840262">
-Event.observe(item, 'click', this.showTagName.bindEvent(this));
-</com:TTextHighlighter>
-
-<p id="840751" class="block-content">Sekarang, melihat kode di atas, Anda akan mencatat fungsi <tt>bindEvent</tt>. Ini mengambil metode sebelumnya <tt>showTagName</tt> dan memperlakukannya sebagai metode yang akan dipicu ketika seseorang mengklik salah satu dari item daftar kita.</p>
-
-<p id="840752" class="block-content">Anda juga akan mencatat bahwa kita mengirimkan ini sebagai argumen ke fungsi <tt>bindEvent</tt>.
-Ini membolehkan kita untuk mereferensi obyek dalam konteks <tt>EventDispenser</tt>
-di dalam fungsi <tt>showTagName(event)</tt> kita. Jika fungsi <tt>showTagName</tt> memerlukan parameter tambahan, Anda melampirkannya ke parameter terakhir dari <tt>bindEvent</tt>. Sebagai contoh</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840263">
-this.showTagName.bindEvent(this, param1, param2);
-
-//di mana fungsi showTagName didefinisikan seperti
-showTime : function (event, param1, param2) { ... }
-</com:TTextHighlighter>
-
-<p id="840753" class="block-content">Selanjutnya, Anda akan melihat <tt>bind(this)</tt> yang dilampirkan ke fungsi iterator.
-Ini sama sekali tidak berkaitan dengan event, ia berada di sini untuk membolehkan saya menggunakan <tt>this</tt> di dalam iterator. Jika kita tidak menggunakan <tt>bind(this)</tt>, saya tidak bisa mereferensi metode <tt>showTagName</tt> di dalam iterator.</p>
-
-<p id="840754" class="block-content">Ok, kita berlanjut untuk melihat metode kita yang sebenarnya dipanggil saat terjadi event. Karena kita sudah berhadapan dengan <tt>showTagName</tt>, mari kita lihat itu.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840264">
-showTagName: function(event)
-{
- alert(Event.element(event).tagName);
-}
-</com:TTextHighlighter>
-
-<p id="840755" class="block-content">Seperti yang Anda lihat, fungsi ini menerima satu argumen--event.
-Agar kita mendapatkan elemen yang memicu event kita perlu mengirimkan argumen ke <tt>Event.element</tt>. Sekarang kita dapat memanipulasinya kapan saja.</p>
-
-<p id="840756" class="block-content">Ini mencakup bagian yang paling membingungkan dari kode kita. Teks di atas juga relevan untuk bagian sisa dari kode kita. Jika ada sesuatu mengenai ini yang tidak Anda mengerti, jangan ragu-ragu untuk mengajukan pertanyaan dalam forum.</p>
-
-<h2 id="6707">Menghapus Pendengar Event</h2>
-
-<p id="840757" class="block-content">Yang satu ini melontarkan saya dari lingkaran untuk pertama kali saya mencoba menggunakannya.
-Saya mencoba sesuatu yang mirip dengan apa yang saya lakukan dalam pemanggilan <tt>Event.observe</tt> dengan kekecualian penggunaan <tt>stopObserving</tt>, tapi tidak ada yang berubah. Dengan kata lain, kode di bawah ini <b>TIDAK</b> bekerja.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840265">
-$$(this.list + " li").each(function(item)
-{
- Event.stopObserving(item, 'click', this.showTagName);
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840758" class="block-content">Apa yang terjadi di sini? Alasan ini tidak bekerja karena tidak ada penunjuk ke pengamat. Ini berarti bahwa ketika kita mengirimkan <tt>this.showTagName</tt> dalam metode <tt>Event.observe</tt> sebelumnya, kita mengirimkannya sebagai fungsi anonim. Kita tidak bisa mereferensi fungsi anonim karena ia tidak mempunyai penunjuk.</p>
-
-<p id="840759" class="block-content">Lalu bagaimana kita yakin pekerjaan diselesaikan? Semua yang kita perlukan adalah memberikan fungsi mengamati penunjuk, atau kelompok versi bebas: Setel variabel yang mengarah ke <tt>this.showTagName</tt>. Ok, mari kita ubah kode kita sedikit.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840266">
-this.showTagObserver = this.showTagName.bindEvent(this);
-
-// Amati klik pada item list kita
-$$(this.list + " li").each(function(item)
-{
- Event.observe(item, 'click', this.showTagObserver);
-}.bind(this));
-</com:TTextHighlighter>
-
-<p id="840760" class="block-content">Sekarang kita bisa menghapus pendengar event dari daftar kita seperti ini:</p>
-<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_840267">
-$$(this.list + " li").each(function(item)
-{
- Event.stopObserving(item, 'click', this.showTagObserver);
-}.bind(this));
-</com:TTextHighlighter>
-
-</com:TContent>
|