diff options
| author | xue <> | 2006-07-16 01:50:23 +0000 |
|---|---|---|
| committer | xue <> | 2006-07-16 01:50:23 +0000 |
| commit | af68030fcf0c266300feb2c100149ecadef7d364 (patch) | |
| tree | 76b7c8ad5d8227870b9ef10c3e7b92a36336b320 /demos/quickstart/protected/pages | |
| parent | 4b78404c20490a615459267426ce9e6737bf4485 (diff) | |
Merge from 3.0 branch till 1264.
Diffstat (limited to 'demos/quickstart/protected/pages')
27 files changed, 351 insertions, 473 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/Assets.page b/demos/quickstart/protected/pages/Advanced/Assets.page index e79f4ecf..8c7980a6 100644 --- a/demos/quickstart/protected/pages/Advanced/Assets.page +++ b/demos/quickstart/protected/pages/Advanced/Assets.page @@ -36,7 +36,7 @@ Asset publishing is managed by the <tt>System.Web.TAssetManager</tt> module. By <h2 id="5704">Performance</h2>
<p>
-PRADO uses caching techniques to ensure the efficiency of asset publishing. Publishing an asset essentially requires file copy operation, which is expensive. To save unnecessary file copy operations, <tt>System.Web.TAssetManager</tt> only publishes an asset when it has a newer file modification time than the published file. When an application runs under the <tt>Performance</tt> mode, such timestamp checkings are also omitted.
+PRADO uses caching techniques to ensure the efficiency of asset publishing. Publishing an asset essentially requires file copy operation, which is expensive. To save unnecessary file copy operations, <tt>System.Web.TAssetManager</tt> only publishes an asset when it has a newer file modification time than the published file. When an application runs under the <tt>Performance</tt> mode, such timestamp checking is also omitted.
</p>
<p>
ADVISORY: Do not overuse asset publishing. The asset concept is mainly used to help better reuse and redistribute component classes. Normally, you should not use asset publishing for resources that are not bound to any component in an application. For example, you should not use asset publishing for images that are mainly used as design elements (e.g. logos, background images, etc.) Let Web server to directly serve these images will help improve the performance of your application.
diff --git a/demos/quickstart/protected/pages/Advanced/Collections.page b/demos/quickstart/protected/pages/Advanced/Collections.page index 7fc3443d..84883be4 100644 --- a/demos/quickstart/protected/pages/Advanced/Collections.page +++ b/demos/quickstart/protected/pages/Advanced/Collections.page @@ -2,7 +2,7 @@ <h1 id="5501">Collections</h1>
<p>
-Collection is a basic data structure in programming. In traditional PHP programming, array is used widely to represent collection data structure. A PHP array is a mix of cardinal-indxed array and hash table.
+Collection is a basic data structure in programming. In traditional PHP programming, array is used widely to represent collection data structure. A PHP array is a mix of cardinal-indexed array and hash table.
</p>
<p>
To enable object-oriented manipulation of collections, PRADO provides a set of powerful collection classes. Among them, the <tt>TList</tt> and <tt>TMap</tt> are the most fundamental and usually serve as the base classes for other collection classes. Since many PRADO components have properties that are of collection type, it is very important for developers to master the usage of PRADO collection classes.
diff --git a/demos/quickstart/protected/pages/Advanced/Error.page b/demos/quickstart/protected/pages/Advanced/Error.page index 9d5e3037..a0765c10 100644 --- a/demos/quickstart/protected/pages/Advanced/Error.page +++ b/demos/quickstart/protected/pages/Advanced/Error.page @@ -7,7 +7,7 @@ PRADO provides a complete error handling and reporting framework based on the PH <h2 id="6302">Exception Classes</h2>
<p>
-Errors occur in a PRADO application may be classified into three categories: those caused by PHP script parsing, those caused by wrong code (such as calling an undefined function, setting an unknown property), and those caused by improper use of the Web application by client users (such as attempting to access restricted pages). PRADO is unable to deal with the first category of errors because they cannot be caughted in PHP code. PRADO provides an exception hierarchy to deal with the second and third categories.
+Errors occur in a PRADO application may be classified into three categories: those caused by PHP script parsing, those caused by wrong code (such as calling an undefined function, setting an unknown property), and those caused by improper use of the Web application by client users (such as attempting to access restricted pages). PRADO is unable to deal with the first category of errors because they cannot be caught in PHP code. PRADO provides an exception hierarchy to deal with the second and third categories.
</p>
<p>
All errors in PRADO applications are represented as exceptions. The base class for all PRADO exceptions is <tt>TException</tt>. It provides the message internationalization functionality to all system exceptions. An error message may be translated into different languages according to the user browser's language preference.
@@ -21,7 +21,7 @@ Exceptions raised due to improper usage of the PRADO framework inherit from <tt> <li><tt>TInvalidDataTypeException</tt> - data type is incorrect or unexpected.</li>
<li><tt>TInvalidDataFormatException</tt> - format of data is incorrect.</li>
<li><tt>TInvalidOperationException</tt> - invalid operation request.</li>
-<li><tt>TPhpErrorException</tt> - caughtable PHP errors, warnings, notices, etc.</li>
+<li><tt>TPhpErrorException</tt> - catchable PHP errors, warnings, notices, etc.</li>
<li><tt>TSecurityException</tt> - errors related with security.</li>
<li><tt>TIOException</tt> - IO operation error, such as file open failure.</li>
<li><tt>TDBException</tt> - errors related with database operations.</li>
diff --git a/demos/quickstart/protected/pages/Advanced/I18N.page b/demos/quickstart/protected/pages/Advanced/I18N.page index 6c86a6c9..1330091f 100644 --- a/demos/quickstart/protected/pages/Advanced/I18N.page +++ b/demos/quickstart/protected/pages/Advanced/I18N.page @@ -18,7 +18,7 @@ <li> Dates, Times.</li>
<li> Numbers, Currency, Measurements.</li>
<li> Phone numbers.</li>
- <li> Honorifics and personal titles.</li>
+ <li> Honorific and personal titles.</li>
<li> Postal address.</li>
<li> Page layout.</li>
</ul>
@@ -26,7 +26,7 @@ <p>If possible all manner of text should be isolated and store in a persistence format. These text include, application error messages, hard coded strings in PHP files, emails, static HTML text, and text on form elements (e.g. buttons).</p>
<h2 id="6204">Configuration</h2>
-<p>To enable the localization features in Prado, you need to add a few configuration options in your <a href="?page=Configurations.AppConfig">application configuration</a>.
+<p>To enable the localization features in PRADO, you need to add a few configuration options in your <a href="?page=Configurations.AppConfig">application configuration</a>.
First you need to include the <tt>System.I18N.*</tt> namespace to your paths.
</p>
<com:TTextHighlighter Language="xml" CssClass="source">
@@ -98,7 +98,7 @@ Lastly, you can change the globalization settings on page by page basis using <a <%@ Application.Globalization.Culture="zh" %>
</com:TTextHighlighter>
-<h2 id="6207">Localizing your Prado application</h2>
+<h2 id="6207">Localizing your PRADO application</h2>
There are two areas in your application that may need message or string localization, in PHP code and in the templates. To localize strings within PHP, use the <tt>localize</tt> function detailed below. To localize text in the template, use the <a href="#ttranslate">TTranslate</a> component.
<h2 id="6208">Using <tt>localize</tt> function to translate text within PHP</h2>
@@ -134,7 +134,7 @@ $message = Prado::localize("There are {num_users} users online.", array('num_use <p>Where the second parameter in <tt>localize</tt> takes an associative array with the key as the substitution to find in the text and replaced it with the associated value.
The <tt>localize</tt> function does not solve the problem of localizing languages that have plural forms, the solution is to use <a href="#choice-format">TChoiceFormat</a>.</p>
-<p>The following sample demonstrates the basics of localization in Prado.</p>
+<p>The following sample demonstrates the basics of localization in PRADO.</p>
<com:RunBar PagePath="Advanced.Samples.I18N.Home" />
<h1 id="6202">I18N Components</h1>
@@ -148,9 +148,9 @@ To translate a message or string in the template, use <tt>TTranslate</tt>.</p> <com:TTranslate Text="Goodbye" />
</com:TTextHighlighter>
-<p><tt>TTranslate</tt> can also perform string substitution.
+<p><tt>TTranslate</tt> can also perform string substitution.
The <tt>Parameters</tt> property can be use to add name values pairs for substitution. Substrings in the translation enclosed with "{" and "}" are consider as the
- parameter names during substitution lookup. The following example will substitute the substring "{time}" with the value of the parameter attribute "<tt>Parameters.time=<%= time() %></tt>".
+ parameter names during substitution lookup. The following example will substitute the substring "{time}" with the value of the parameter attribute "<tt>Parameters.time=<%= time() %></tt>".
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TTranslate Parameters.time=<%= time() %> >
The time is {time}.
@@ -183,17 +183,17 @@ The time is {time}. <li><tt>mediumtime</tt></li>
<li><tt>shorttime</tt></li>
</ul>
-The predefined can be used in any combination. If using a combined predefined pattern,
-the first pattern must be the date, followed by a space, and lastly the time pattern.
-For example, full date pattern with short time pattern. The actual ordering of the
-date-time and the actual pattern will be determine automatically from locale data specified
+The predefined can be used in any combination. If using a combined predefined pattern,
+the first pattern must be the date, followed by a space, and lastly the time pattern.
+For example, full date pattern with short time pattern. The actual ordering of the
+date-time and the actual pattern will be determine automatically from locale data specified
by the <tt>Culture</tt> property.</p>
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TDateFormat Pattern="fulldate shorttime" />
</com:TTextHighlighter>
-<p>You can also specify a custom pattern using the following sub-patterns.
+<p>You can also specify a custom pattern using the following sub-patterns.
The date/time format is specified by means of a string time pattern. In this pattern, all ASCII letters are reserved as pattern letters, which are defined as the following:
<com:TTextHighlighter Language="text" CssClass="source">
Symbol Meaning Presentation Example
@@ -222,22 +222,22 @@ The date/time format is specified by means of a string time pattern. In this pat <p>The count of pattern letters determine the format.</p>
-<p>(Text): 4 letters uses full form, less than 4, use short or abbreviated form
+<p>(Text): 4 letters uses full form, less than 4, use short or abbreviated form
if it exists. (e.g., "EEEE" produces "Monday", "EEE" produces "Mon")</p>
<p>(Number): the minimum number of digits. Shorter numbers are zero-padded
- to this amount (e.g. if "m" produces "6", "mm" produces "06"). Year is
- handled specially; that is, if the count of 'y' is 2, the Year will be
- truncated to 2 digits. (e.g., if "yyyy" produces "1997", "yy" produces "97".)
+ to this amount (e.g. if "m" produces "6", "mm" produces "06"). Year is
+ handled specially; that is, if the count of 'y' is 2, the Year will be
+ truncated to 2 digits. (e.g., if "yyyy" produces "1997", "yy" produces "97".)
Unlike other fields, fractional seconds are padded on the right with zero.</p>
-<p>(Text and Number): 3 or over, use text, otherwise use number. (e.g.,
-"M" produces "1", "MM" produces "01", "MMM" produces "Jan", and "MMMM"
+<p>(Text and Number): 3 or over, use text, otherwise use number. (e.g.,
+"M" produces "1", "MM" produces "01", "MMM" produces "Jan", and "MMMM"
produces "January".)</p>
-<p>Any characters in the pattern that are not in the ranges of ['a'..'z']
-and ['A'..'Z'] will be treated as quoted text. For instance, characters
-like ':', '.', ' ', and '@' will appear in the resulting time text
+<p>Any characters in the pattern that are not in the ranges of ['a'..'z']
+and ['A'..'Z'] will be treated as quoted text. For instance, characters
+like ':', '.', ' ', and '@' will appear in the resulting time text
even they are not embraced within single quotes.</p>
<p>Examples using the US locale:
@@ -259,7 +259,7 @@ Format Pattern Result <h2 id="6212">TNumberFormat</h2>
<p>PRADO's Internationalization framework provide localized currency formatting and number formatting. Please note that the <tt>TNumberFormat</tt> component provides formatting only, it does not perform current conversion or exchange.</p>
-<p>Numbers can be formatted as currency, percentage, decimal or scientific
+<p>Numbers can be formatted as currency, percentage, decimal or scientific
numbers by specifying the <tt>Type</tt> attribute. The valid types are:
<ul>
<li><tt>currency</tt></li>
@@ -268,7 +268,7 @@ numbers by specifying the <tt>Type</tt> attribute. The valid types are: <li><tt>scientific</tt></li>
</ul>
</p>
-
+
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TNumberFormat Type="currency" Value="100" />
</com:TTextHighlighter>
@@ -283,13 +283,13 @@ then also from the <tt>de_DE</tt> locale. This may lead to some confusion becaus people from US uses the "," (comma) as thousand separator. Therefore a <tt>Currency</tt>
attribute is available, so that the output from the following example results in $100.00
<com:TTextHighlighter Language="prado" CssClass="source">
-<com:TNumberFormat Type="currency"
+<com:TNumberFormat Type="currency"
Culture="en_US" Currency="EUR" Value="100" />
</com:TTextHighlighter>
</p>
-<p>The <tt>Pattern</tt> property determines the number of digits, thousand grouping
-positions, the number of decimal points and the decimal position. The actual characters that
+<p>The <tt>Pattern</tt> property determines the number of digits, thousand grouping
+positions, the number of decimal points and the decimal position. The actual characters that
are used to represent the decimal points and thousand points are culture specific
and will change automatically according to the <tt>Culture</tt> property. The valid
<tt>Pattern</tt> characters are:
@@ -299,7 +299,7 @@ and will change automatically according to the <tt>Culture</tt> property. The va <li><tt>. (full stop)</tt> - the position of the decimal point (only 1 decimal point is allowed)</li>
<li><tt>, (comma)</tt> - thousand point separation (up to 2 commas are allowed)</li>
</ul>
-For example, consider the <tt>Value="1234567.12345"</tt> and
+For example, consider the <tt>Value="1234567.12345"</tt> and
with <tt>Culture="en_US"</tt> (which uses "," for thousand point separator and "." for decimal separators).
<com:TTextHighlighter Language="text" CssClass="source">
Pattern Output
diff --git a/demos/quickstart/protected/pages/Advanced/Logging.page b/demos/quickstart/protected/pages/Advanced/Logging.page index 5270a00d..9c7ec15e 100644 --- a/demos/quickstart/protected/pages/Advanced/Logging.page +++ b/demos/quickstart/protected/pages/Advanced/Logging.page @@ -52,10 +52,10 @@ Messages can be filtered according to their log levels and categories. Each log Log levels defined in <tt>System.Util.TLogger</tt> include : <tt>DEBUG</tt>, <tt>INFO</tt>, <tt>NOTICE</tt>, <tt>WARNING</tt>, <tt>ERROR</tt>, <tt>ALERT</tt>, <tt>FATAL</tt>. Messages can be filtered according log level criteria. For example, if a filter specifies <tt>WARNING</tt> and <tt>ERROR</tt> levels, then only those messages that are of <tt>WARNING</tt> and <tt>ERROR</tt> will be returned.
</p>
<p>
-Message categories are hierarchical. A category whose name is the prefix of another is said to be the ancestor category of the other category. For example, <tt>System.Web</tt> category is the ancestor of <tt>System.Web.UI</tt> and <tt>System.Web.UI.WebControls</tt> categories. Messages can be selectively retrieved using such hierarchical category filters. For example, if the category filter is <tt>System.Web</tt>, then all messages in the <tt>System.Web</tt> are returned. In addition, messages in the childd categories, such as <tt>System.Web.UI.WebControls</tt>, are also returned.
+Message categories are hierarchical. A category whose name is the prefix of another is said to be the ancestor category of the other category. For example, <tt>System.Web</tt> category is the ancestor of <tt>System.Web.UI</tt> and <tt>System.Web.UI.WebControls</tt> categories. Messages can be selectively retrieved using such hierarchical category filters. For example, if the category filter is <tt>System.Web</tt>, then all messages in the <tt>System.Web</tt> are returned. In addition, messages in the child categories, such as <tt>System.Web.UI.WebControls</tt>, are also returned.
</p>
<p>
-By convention, the messages logged in the core code of PRADO are categorized according to the namespace of the corresponding classes. For example, messsages logged in <tt>TPage</tt> will be of category <tt>System.Web.UI.TPage</tt>.
+By convention, the messages logged in the core code of PRADO are categorized according to the namespace of the corresponding classes. For example, messages logged in <tt>TPage</tt> will be of category <tt>System.Web.UI.TPage</tt>.
</p>
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Advanced/Scripts.page b/demos/quickstart/protected/pages/Advanced/Scripts.page index 5921e865..8fa1e27e 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts.page @@ -5,46 +5,46 @@ Quick guide to somewhat advanced JavaScript tour of some OO features</a> by Serg <h2 id="6502">Hey, I didn't know you could do that</h2>
<p>
- If you are a web developer and come from the same place I do, you have probably
- used quite a bit of Javascript in your web pages, mostly as UI glue.
+ If you are a web developer and come from the same place I do, you have probably
+ used quite a bit of Javascript in your web pages, mostly as UI glue.
</p>
<p>
Until recently, I knew that Javascript had more OO capabilities than I was employing,
- but I did not feel like I needed to use it. As the browsers started to support a more
- standardized featureset of Javascript and the DOM, it became viable to write more
- complex and functional code to run on the client. That helped giving birth to the
+ but I did not feel like I needed to use it. As the browsers started to support a more
+ standardized featureset of Javascript and the DOM, it became viable to write more
+ complex and functional code to run on the client. That helped giving birth to the
AJAX phenomena.
</p>
<p>
- As we all start to learn what it takes to write our cool, AJAXy applications, we begin
- to notice that the Javascript we used to know was really just the tip of the iceberg.
- We now see Javascript being used beyond simple UI chores like input validation and frivolous
- tasks. The client code now is far more advanced and layered, much like a real desktop
- application or a client-server thick client. We see class libraries, object models,
- hierarchies, patterns, and many other things we got used to seeing only in our server
+ As we all start to learn what it takes to write our cool, AJAX applications, we begin
+ to notice that the Javascript we used to know was really just the tip of the iceberg.
+ We now see Javascript being used beyond simple UI chores like input validation and frivolous
+ tasks. The client code now is far more advanced and layered, much like a real desktop
+ application or a client-server thick client. We see class libraries, object models,
+ hierarchies, patterns, and many other things we got used to seeing only in our server
side code.
</p>
<p>
- In many ways we can say that suddenly the bar was put much higher than before. It takes
- a heck lot more proficiency to write applications for the new Web and we need to improve
+ In many ways we can say that suddenly the bar was put much higher than before. It takes
+ a heck lot more proficiency to write applications for the new Web and we need to improve
our Javascript skills to get there.
- If you try to use many of the existing javascript libraries out there, like
- <a href="http://prototype.conio.net/">Prototype.js</a>,
- <a href="http://script.aculo.us/">Scriptaculous</a>,
- <a href="http://moofx.mad4milk.net/">moo.fx</a>,
- <a href="http://bennolan.com/behaviour/">Behaviour</a>,
- <a href="http://developer.yahoo.net/yui/">YUI</a>,
- etc you'll eventually find yourself reading the JS code. Maybe because you want
- to learn how they do it, or because you're curious, or more often because that's the
- only way to figure out how to use it, since documentation does not seem to be highly
- regarded with most of these libraries. Whatever the case may be, you'll face some
- kung-fu techniques that will be foreign and scary if you haven't seen anything like
+ If you try to use many of the existing javascript libraries out there, like
+ <a href="http://prototype.conio.net/">Prototype.js</a>,
+ <a href="http://script.aculo.us/">Scriptaculous</a>,
+ <a href="http://moofx.mad4milk.net/">moo.fx</a>,
+ <a href="http://bennolan.com/behaviour/">Behaviour</a>,
+ <a href="http://developer.yahoo.net/yui/">YUI</a>,
+ etc you'll eventually find yourself reading the JS code. Maybe because you want
+ to learn how they do it, or because you're curious, or more often because that's the
+ only way to figure out how to use it, since documentation does not seem to be highly
+ regarded with most of these libraries. Whatever the case may be, you'll face some
+ kung-fu techniques that will be foreign and scary if you haven't seen anything like
that before.
</p>
<p>
- The purpose of this article is precisely explaining the types of constructs that
+ The purpose of this article is precisely explaining the types of constructs that
many of us are not familiar with yet.
</p>
@@ -52,12 +52,12 @@ Quick guide to somewhat advanced JavaScript tour of some OO features</a> by Serg <h2 id="6503">JSON (JavaScript Object Notation)</h2>
<p>
JavaScript Object Notation (<a href="http://www.json.org/">JSON</a>,) is one of the new
- buzzwords popping up around the AJAX theme. JSON, simply put, is a way of
- declaring an object in javascript. Let's see an example right away and note
+ buzzwords popping up around the AJAX theme. JSON, simply put, is a way of
+ declaring an object in Javascript. Let's see an example right away and note
how simple it is.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){
+var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){
for(i=0;i<repeatCount;i++) alert('Woof!');} };
</com:TTextHighlighter>
@@ -65,10 +65,10 @@ for(i=0;i<repeatCount;i++) alert('Woof!');} }; Let's just add little bit of formatting so it looks more like how we usually find out there:
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var myPet =
+var myPet =
{
- color: 'black',
- legCount: 4,
+ color: 'black',
+ legCount: 4,
communicate: function(repeatCount)
{
for(i=0;i<repeatCount;i++)
@@ -77,14 +77,14 @@ var myPet = };
</com:TTextHighlighter>
<p>
- Here we created a reference to an object with two properties (<tt>color</tt>
- and <tt>legCount</tt>) and a method (<tt>communicate</tt>.)
+ Here we created a reference to an object with two properties (<tt>color</tt>
+ and <tt>legCount</tt>) and a method (<tt>communicate</tt>.)
It's not hard to figure out that the object's properties and methods
- are defined as a comma delimited list. Each of the members is introduced by name, followed
- by a colon and then the definition. In the case of the properties it is easy, just the value
- of the property. The methods are created by assigning an anonymous function, which we will
+ are defined as a comma delimited list. Each of the members is introduced by name, followed
+ by a colon and then the definition. In the case of the properties it is easy, just the value
+ of the property. The methods are created by assigning an anonymous function, which we will
explain better down the line.
- After the object is created and assigned to the variable <tt>myPet</tt>,
+ After the object is created and assigned to the variable <tt>myPet</tt>,
we can use it like this:
</p>
@@ -95,13 +95,13 @@ alert('my pet has ' + myPet.legCount + ' legs'); myPet.communicate(3);
</com:TTextHighlighter>
<p>
- You'll see JSON used pretty much everywhere in JS these days, as arguments to functions,
+ You'll see JSON used pretty much everywhere in JS these days, as arguments to functions,
as return values, as server responses (in strings,) etc.
</p>
<h2 id="6504">What do you mean? A function is an object too?</h2>
<p>
- This might be unusual to developers that never thought about that, but in JS a function is
+ This might be unusual to developers that never thought about that, but in JS a function is
also an object. You can pass a function around as an argument to another function just like
you can pass a string, for example. This is extensively used and very handy.
</p>
@@ -110,7 +110,7 @@ myPet.communicate(3); Take a look at this example. We will pass functions to another function that will use them.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var myDog =
+var myDog =
{
bark: function()
{
@@ -118,7 +118,7 @@ var myDog = }
};
-var myCat =
+var myCat =
{
meow: function()
{
@@ -138,9 +138,9 @@ annoyThePet(myDog.bark); annoyThePet(myCat.meow);
</com:TTextHighlighter>
<p>
- Note that we pass myDog.bark and myCat.meow without appending parenthesis
- <tt>"()"</tt> to them. If we did that we would not be passing
- the function, rather we would be calling the method and passing the return value,
+ Note that we pass myDog.bark and myCat.meow without appending parenthesis
+ <tt>"()"</tt> to them. If we did that we would not be passing
+ the function, rather we would be calling the method and passing the return value,
<tt>undefined</tt> in both cases here.
</p>
@@ -162,7 +162,7 @@ var a = new Array(); var b = [];
</com:TTextHighlighter>
<p>
- As I'm sure you already know, you can access individual items in an array
+ As I'm sure you already know, you can access individual items in an array
by using the square brackets:
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -173,8 +173,8 @@ var v3 = a[2]; </com:TTextHighlighter>
<p>
- But you are not limited to numeric indices. You can access any member of a JS
- object by using its name, in a string. The following example creates an empty
+ But you are not limited to numeric indices. You can access any member of a JS
+ object by using its name, in a string. The following example creates an empty
object, and adds some members by name.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -187,7 +187,7 @@ obj['some_function'] = function(){ /* do something */}; The above code has identical effect as the following:
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var obj =
+var obj =
{
member_1:'this is the member value',
flag_2: false,
@@ -196,7 +196,7 @@ var obj = </com:TTextHighlighter>
<p>
- In many ways, the idea of objects and associative arrays (hashes) in JS are not
+ In many ways, the idea of objects and associative arrays (hashes) in JS are not
distiguishable. The following two lines do the same thing too.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -208,8 +208,8 @@ obj['some_function'](); <h2 id="6506">Enough about objects, may I have a class now?</h2>
<p>
- The great power of object oriented programming languages derive from the use
- of classes. I don't think I would have guessed how classes are defined in JS
+ The great power of object oriented programming languages derive from the use
+ of classes. I don't think I would have guessed how classes are defined in JS
using only my previous experience with other languages. Judge for yourself.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -225,27 +225,27 @@ var famousDog = new Pet('Santa\'s Little Helper', 15); alert('This pet is called ' + famousDog.name);
</com:TTextHighlighter>
<p>
- Let's see how we add a method to our <tt>Pet</tt> class. We will be using the
- <tt>prototype</tt> property that all classes have. The <tt>prototype</tt>
- property is an object that contains all the members that any object of the class will have.
- Even the default JS classes, like <tt>String</tt>, <tt>Number</tt>,
- and <tt>Date</tt> have a <tt>prototype</tt> object that we
+ Let's see how we add a method to our <tt>Pet</tt> class. We will be using the
+ <tt>prototype</tt> property that all classes have. The <tt>prototype</tt>
+ property is an object that contains all the members that any object of the class will have.
+ Even the default JS classes, like <tt>String</tt>, <tt>Number</tt>,
+ and <tt>Date</tt> have a <tt>prototype</tt> object that we
can add methods and properties to and make any object of that class automatically gain this new member.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
Pet.prototype.communicate = function()
-{
+{
alert('I do not know what I should say, but my name is ' + this.name);
};
</com:TTextHighlighter>
<p>
- That's when a library like <a href="http://www.sergiopereira.com/articles/prototype.js.html">prototype.js</a> comes in
+ That's when a library like <a href="http://www.sergiopereira.com/articles/prototype.js.html">prototype.js</a> comes in
handy. If we are using prototype.js, we can make our code look cleaner (at least in my opinion.)
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
var Pet = Class.create();
-Pet.prototype =
+Pet.prototype =
{
//our 'constructor'
initialize: function(petName, age)
@@ -258,7 +258,7 @@ Pet.prototype = {
alert('I do not know what I should say, but my name is ' + this.name);
}
-};
+};
</com:TTextHighlighter>
<h2 id="6507">Functions as arguments, an interesting pattern</h2>
@@ -275,15 +275,15 @@ myArray.each( function(item, index) </com:TTextHighlighter>
<p>
- Whoa! Let's explain what is going on here before you decide I've gone too
+ Whoa! Let's explain what is going on here before you decide I've gone too
far and navigate to a better article than this one.
</p>
<p>
- First of all, in the above example we are using the prototype.js library, which
- adds the each function to the Array class. The each function accepts one
- argument that is a function object. This function, in turn, will be called once
- for each item in the array, passing two arguments when called, the item and the index
- for the current item. Let's call this function our iterator function.
+ First of all, in the above example we are using the prototype.js library, which
+ adds the each function to the Array class. The each function accepts one
+ argument that is a function object. This function, in turn, will be called once
+ for each item in the array, passing two arguments when called, the item and the index
+ for the current item. Let's call this function our iterator function.
We could have also written the code like this.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -296,24 +296,24 @@ var myArray = ['first', 'second', 'third']; myArray.each( myIterator );
</com:TTextHighlighter>
<p>
- But then we would not be doing like all the cool kids in school, right?
- More seriously, though, this last format is simpler to understand but causes
- us to jump around in the code looking for the myIterator function. It's nice
- to have the logic of the iterator function right there in the same place
- it's called. Also, in this case, we will not need the iterator function anywhere
- else in our code, so we can transform it into an anonymous function without penalty.
+ But then we would not be doing like all the cool kids in school, right?
+ More seriously, though, this last format is simpler to understand but causes
+ us to jump around in the code looking for the myIterator function. It's nice
+ to have the logic of the iterator function right there in the same place
+ it's called. Also, in this case, we will not need the iterator function anywhere
+ else in our code, so we can transform it into an anonymous function without penalty.
</p>
<h2 id="6508">This is <tt>this</tt> but sometimes <tt>this</tt> is also that</h2>
<p>
- One of the most common troubles we have with JS when we start writing our code
- it the use of the <tt>this</tt> keyword. It could be a real
+ One of the most common troubles we have with JS when we start writing our code
+ it the use of the <tt>this</tt> keyword. It could be a real
tripwire.
</p>
<p>
- As we mentioned before, a function is also an object in JS, and sometimes we
- do not notice that we are passing a function around.
+ As we mentioned before, a function is also an object in JS, and sometimes we
+ do not notice that we are passing a function around.
</p>
<p>
Take this code snippet as an example.
@@ -331,15 +331,15 @@ myButton2.onclick = buttonClicked; </com:TTextHighlighter>
<p>
Because the buttonClicked function is defined outside any object we may tend to
- think the <tt>this</tt> keyword will contain a reference to
- the <tt>window</tt> or <tt>document</tt>
+ think the <tt>this</tt> keyword will contain a reference to
+ the <tt>window</tt> or <tt>document</tt>
object (assuming this code is in the middle of an HTML page viewed in a browser.)
</p>
<p>
But when we run this code we see that it works as intended and displays the <tt>id</tt> of
- the clicked button. What happened here is that we made the onclick method of each button contain the
- <tt>buttonClicked</tt> object reference, replacing whatever was there before. Now
+ the clicked button. What happened here is that we made the onclick method of each button contain the
+ <tt>buttonClicked</tt> object reference, replacing whatever was there before. Now
whenever the button is clicked, the browser will execute something similar to the following line.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -347,11 +347,11 @@ myButton.onclick(); </com:TTextHighlighter>
<p>
- That isn't so confusing afterall, is it? But see what happens you start having other
+ That isn't so confusing afterall, is it? But see what happens you start having other
objects to deal with and you want to act on these object upon events like the button's click.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var myHelper =
+var myHelper =
{
formFields: [ ],
emptyAllFields: function()
@@ -377,18 +377,18 @@ var clearButton = document.getElementById('btnClear'); clearButton.onclick = myHelper.emptyAllFields;
</com:TTextHighlighter>
<p>
- So you think, nice, now I can click the Clear button on my page and those three text boxes
- will be emptied. Then you try clicking the button only to get a runtime error. The error
- will be related to (guess what?) the <tt>this</tt> keyword.
- The problem is that <tt>this.formFields</tt> is not defined if
- <tt>this</tt> containz a referece to the button, which is
+ So you think, nice, now I can click the Clear button on my page and those three text boxes
+ will be emptied. Then you try clicking the button only to get a runtime error. The error
+ will be related to (guess what?) the <tt>this</tt> keyword.
+ The problem is that <tt>this.formFields</tt> is not defined if
+ <tt>this</tt> contains a referece to the button, which is
precisely what's happening. One quick solution would be to rewrite our last line of code.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
clearButton.onclick = function()
-{
- myHelper.emptyAllFields();
+{
+ myHelper.emptyAllFields();
};
</com:TTextHighlighter>
<p>
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts1.page b/demos/quickstart/protected/pages/Advanced/Scripts1.page index f11a2f9d..ef0b6317 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts1.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts1.page @@ -6,8 +6,8 @@ Developer Notes for prototype.js</a> by Sergio Pereira. <h2 id="6603">What is that?</h2>
<p>
-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>.
+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>
@@ -20,7 +20,7 @@ In case you haven't already used it, <a href="http://prototype.conio.net">protot </p>
<p>
As you read the examples and the reference, developers familiar with the Ruby
- programming language will notice an intentional similarity between Ruby's
+ programming language will notice an intentional similarity between Ruby's
built-in classes and many of the extensions implemented by this library.
</p>
@@ -32,7 +32,7 @@ In case you haven't already used it, <a href="http://prototype.conio.net">protot </p>
<p>
- Unlike the DOM function, though, this one goes further. You can pass more than one id and
+ 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>
@@ -76,7 +76,7 @@ function test2() <h2 id="6605">Using the <tt>$F()</tt> function</h2>
<p>
- The <tt>$F()</tt> function is a another welcome shortcut. It returns the value of any field input control,
+ 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">
@@ -100,9 +100,9 @@ function test3() into an <tt>Array</tt> object.
</p>
<p>
- This function, combined with the extensions for the Array class,
- makes it easier to convert or copy any enumerable list into an
- <tt>Array</tt> object. One suggested use is to convert DOM
+ This function, combined with the extensions for the Array class,
+ makes it easier to convert or copy any enumerable list into an
+ <tt>Array</tt> object. One suggested use is to convert DOM
<tt>NodeLists</tt> into regular arrays, which can be traversed
more efficiently. See example below.
</p>
@@ -113,8 +113,8 @@ function test3() <option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
-
-<input type="button" value="Show the options" onclick="showOptions();" />
+
+<input type="button" value="Show the options" onclick="showOptions();" />
<script type="text/javascript">
/*<![CDATA[*/
@@ -134,15 +134,15 @@ function showOptions() <h2 id="6607">Using the <tt>$H()</tt> function</h2>
<p>
- The <tt>$H()</tt> function converts
- objects into enumerable Hash objects that
+ The <tt>$H()</tt> function converts
+ objects into enumerable Hash objects that
resemble associative arrays.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
function testHash()
{
//let's create the object
- var a =
+ var a =
{
first: 10,
second: 20,
@@ -151,22 +151,22 @@ function testHash() //now transform it into a hash
var h = $H(a);
- alert(h.toQueryString());
-
+ alert(h.toQueryString());
+
//displays: first=10&second=20&third=30
}
</com:TTextHighlighter>
<h2 id="6608">Enumerating... Wow! Damn! Wahoo!</h2>
<p>
- We are all familar with for loops. You know, create yourself an array, populate it with
+ We are all familiar with for-loops. You know, create yourself an array, populate it with
elements of the same kind, create a loop control structure (for, foreach, while, repeat, etc,)
access each element sequentially, by its numeric index, and do something with the element.
</p>
<p>
When you come to think about it, almost every time you have an array in your code it
means that you'll be using that array in a loop sooner or later. Wouldn't it be nice
- if the array objects had more functionality to deal with these iterations? Yes, it would,
+ if the array objects had more functionality to deal with these iterations? Yes, it would,
and many programming languages provide such functionality in their arrays or equivalent
structures (like collections and lists.)
</p>
@@ -174,7 +174,7 @@ function testHash() <p>
Well, it turns out that prototype.js gives us the Enumerable
object, which implements a plethora of tricks for us to use when dealing with iterable data.
- The prototype.js library goes one step further and extends the
+ The prototype.js library goes one step further and extends the
<tt>Array</tt> class with all the methods of <tt>Enumerable</tt>.
</p>
@@ -206,7 +206,7 @@ function showList() <com:TTextHighlighter Language="javascript" CssClass="source">
function showList()
-{
+{
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
simpsons.each( function(familyMember)
{
@@ -216,13 +216,13 @@ function showList() </com:TTextHighlighter>
<p>
You are probably thinking "big freaking deal...just a weird syntax for the same old thing."
- Well, in the above example, yes, there's nothing too earth shattering going on. Afterall,
- there's not much to be changed in such a drop-dead-simple example. But
+ Well, in the above example, yes, there's nothing too earth shattering going on. After all,
+ there's not much to be changed in such a drop-dead-simple example. But
keep reading, nonetheless.
</p>
<p>
Before we move on. Do you see this function that is being passed as an argument
- to the <tt>each</tt> method? Let's start referring to it as an
+ to the <tt>each</tt> method? Let's start referring to it as an
<b>iterator</b> function.
</p>
@@ -247,7 +247,7 @@ function findEmployeeById(emp_id) {
return (employee.value == emp_id);
});
-
+
alert(opt.innerHTML); //displays the employee name
}
/*]]>*/
@@ -259,7 +259,7 @@ function findEmployeeById(emp_id) <option value="1">Davolio, Nancy</option>
</select>
-<input type="button" value="Find Laura" onclick="findEmployeeById(8);" />
+<input type="button" value="Find Laura" onclick="findEmployeeById(8);" />
</com:TTextHighlighter>
<p>
@@ -274,7 +274,7 @@ function showLocalLinks(paragraph) {
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
-
+
//find links that do not start with 'http'
var localLinks = links.findAll( function(link)
{
@@ -284,7 +284,7 @@ function showLocalLinks(paragraph) //now the link texts
var texts = localLinks.pluck('innerHTML');
-
+
//get them in a single string
var result = texts.inspect();
alert(result);
@@ -293,13 +293,13 @@ function showLocalLinks(paragraph) </script>
<p id="someText">
- This <a href="http://othersite.com/page.html">text</a> has
- a <a href="#localAnchor">lot</a> of
- <a href="#otherAnchor">links</a>. Some are
+ This <a href="http://othersite.com/page.html">text</a> has
+ a <a href="#localAnchor">lot</a> of
+ <a href="#otherAnchor">links</a>. Some are
<a href="http://wherever.com/page.html">external</a>
and some are <a href="#someAnchor">local</a>
</p>
-<input type=button value="Find Local Links"
+<input type=button value="Find Local Links"
onclick="showLocalLinks('someText')" />
</com:TTextHighlighter>
<p>
@@ -309,21 +309,21 @@ function showLocalLinks(paragraph) <h1 id="6602">Enumerable Functions</h1>
The sample data for the following examples.
<com:TTextHighlighter Language="javascript" CssClass="source">
-var Fixtures =
+var Fixtures =
{
- Products:
+ Products:
[
{name: 'Basecamp', company: '37signals', type: 'Project Management'},
{name: 'Shopify', company: 'JadedPixel', type: 'E-Commerce'},
{name: 'Mint', company: 'Shaun Inman',type: 'Statistics'}
],
- Artist:
+ Artist:
[
- 'As I Lay Dying',
- '36 Crazyfist',
- 'Shadows Fall',
- 'Trivium',
+ 'As I Lay Dying',
+ '36 Crazyfist',
+ 'Shadows Fall',
+ 'Trivium',
'In Flames'
],
@@ -334,11 +334,11 @@ var F = Fixtures; </com:TTextHighlighter>
<h2 id="6609"><tt>Enumerable.each</tt> function</h2>
-<p>I used to find myself writing a lot of for loops. Although,
-Prototype doesn’t by any means eliminate the need to do for loops,
+<p>I used to find myself writing a lot of for loops. Although,
+Prototype does not by any means eliminate the need to do for-loops,
it does give you access to what I consider to be a cleaner, easier to read method in each.
<com:TTextHighlighter Language="javascript" CssClass="source">
-for(var i = 0; i < F.Numbers.length; i++)
+for(var i = 0; i < F.Numbers.length; i++)
{
Logger.info(F.Numbers[i]);
}
@@ -347,7 +347,7 @@ for(var i = 0; i < F.Numbers.length; i++) The <tt>each</tt> function allows us to iterate over these objects Ruby style.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-F.Numbers.each(function(num)
+F.Numbers.each(function(num)
{
Logger.info(num);
});
@@ -363,14 +363,14 @@ F.Numbers.each(function(num) 9
</com:TTextHighlighter>
-<p>The <tt>each</tt> function takes one argument, an <b>iterator</b> function.
-This iterator is invoked once for every item in the array, and that item
-along with the optional index is passed to the iterator. So if
+<p>The <tt>each</tt> function takes one argument, an <b>iterator</b> function.
+This iterator is invoked once for every item in the array, and that item
+along with the optional index is passed to the iterator. So if
we also needed the index we could do something like the code below.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-F.Numbers.each(function(num, index)
+F.Numbers.each(function(num, index)
{
Logger.info(index + ": " + num);
});
@@ -387,11 +387,11 @@ F.Numbers.each(function(num, index) </com:TTextHighlighter>
<h2 id="6610">Hash key/value pairs</h2>
-<p>Hashes can be created by wrapping an Object (associative array) in
+<p>Hashes can be created by wrapping an Object (associative array) in
<tt>$H()</tt> and can have their key/value pairs exposed.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-$H(F.Products[0]).each(function(product)
+$H(F.Products[0]).each(function(product)
{
Logger.info(product.key + ": " + product.value);
});
@@ -406,19 +406,19 @@ We can also directly access the keys and values of a Hash without iterating over </p>
<com:TTextHighlighter Language="javascript" CssClass="source">
$H(F.Products[1]).keys();
-//Outputs name,company,type
+//Outputs name,company,type
$H(F.Products[1]).values();
-//Outputs Shopify,JadedPixel,E-Commerce
+//Outputs Shopify,JadedPixel,E-Commerce
</com:TTextHighlighter>
<h2 id="6611"><tt>Enumerable.collect</tt> function</h2>
-<p>The <tt>collect</tt> function allows you to iterate over an <tt>Array</tt> and return the
-results as a new array. Each item returned as a result of the iteration will be
+<p>The <tt>collect</tt> function allows you to iterate over an <tt>Array</tt> and return the
+results as a new array. Each item returned as a result of the iteration will be
pushed onto the end of the new array.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var companies = F.Products.collect(function(product)
+var companies = F.Products.collect(function(product)
{
return product.company;
});
@@ -431,7 +431,7 @@ Logger.info(companies.join(', ')); <p>You can even join on the end of the block.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-return F.Products.collect(function(product)
+return F.Products.collect(function(product)
{
return product.company;
}).join(', ');
@@ -439,9 +439,9 @@ return F.Products.collect(function(product) <h2 id="6612"><tt>Enumerable.include</tt> function</h2>
-<p>The <tt>include</tt> function allows you to check if a value is included in an array
-and returns true or false depending on if a match was made. Assuming I put
-up a form asking the user to name some artist in my iTunes playlist,
+<p>The <tt>include</tt> function allows you to check if a value is included in an array
+and returns true or false depending on if a match was made. Assuming I put
+up a form asking the user to name some artist in my iTunes playlist,
we could do something like the code below. Prime candidate for some conditional madness.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -450,11 +450,11 @@ return F.Artists.include('Britney Spears'); // returns false <h2 id="6613"><tt>Enumerable.inject</tt> function</h2>
-<p>The <tt>inject</tt> function is good for getting a collective sum from an array of
+<p>The <tt>inject</tt> function is good for getting a collective sum from an array of
values. For instance, to add up all the numbers.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var score = F.Numbers.inject(0, function(sum, value)
+var score = F.Numbers.inject(0, function(sum, value)
{
return sum + value;
});
@@ -463,19 +463,19 @@ Logger.info(score); //Output 161
</com:TTextHighlighter>
-<p>The first argument to <tt>inject</tt> is just an initial value that
+<p>The first argument to <tt>inject</tt> is just an initial value that
would be added to the sum, so if we added 1 instead of 0, the output would be 162.</p>
<h2 id="6614"><tt>Enumerable.findAll</tt> function</h2>
<p>
-When given an Array, the <tt>findAll</tt> function will return an array of
-items for which the iterator evaluated to true. Basically, it allows you to
-build a new array of values based on some search criteria.
-If we wanted to find all products whose type was “E-Commerce”
+When given an Array, the <tt>findAll</tt> function will return an array of
+items for which the iterator evaluated to true. Basically, it allows you to
+build a new array of values based on some search criteria.
+If we wanted to find all products whose type was “E-Commerce”
we could do something like the code below.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var ecom = F.Products.findAll(function(product)
+var ecom = F.Products.findAll(function(product)
{
return product.type == 'E-Commerce';
});
@@ -486,18 +486,18 @@ Logger.info(ecom[0].company + " produces " + ecom[0].name); JadedPixel produces Shopify
</com:TTextHighlighter>
-<p>Note that even if only one match is made, just as in this case,
-the result is still returned as an array. In that case,
+<p>Note that even if only one match is made, just as in this case,
+the result is still returned as an array. In that case,
<tt>ecom.company</tt> would return <tt>undefined</tt>.</p>
<h2 id="6615"><tt>Enumerable.detect</tt> function</h2>
-<p>Unlike the <tt>findAll</tt> function, the <tt>detect</tt> function will only
-return the first item for which the expression inside
-the iterator is true. So, if we wanted to find the first number that
+<p>Unlike the <tt>findAll</tt> function, the <tt>detect</tt> function will only
+return the first item for which the expression inside
+the iterator is true. So, if we wanted to find the first number that
was greater than 5 we’d do something like the code below.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var low = F.Numbers.detect(function(num)
+var low = F.Numbers.detect(function(num)
{
return num > 5
});
@@ -506,13 +506,13 @@ Logger.info(low); //Outputs 98
</com:TTextHighlighter>
-<p>Even though, there are other numbers above 5 in our array, detect
+<p>Even though, there are other numbers above 5 in our array, detect
only gives us the first match back.</p>
<h2 id="6616"><tt>Enumerable.invoke</tt> function</h2>
-<p>The <tt>invoke</tt> function allows us to pass a method as a string and
-have that method invoked. For instance, if we wanted to sort
+<p>The <tt>invoke</tt> function allows us to pass a method as a string and
+have that method invoked. For instance, if we wanted to sort
our array of artists we’d do something like this:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -520,7 +520,7 @@ our array of artists we’d do something like this:</p> //Outputs 36 Crazyfist,As I Lay Dying,In Flames,Shadows Fall,Trivium
</com:TTextHighlighter>
-<p>Why not just use <tt>F.Artists.sort</tt>? Well, for the example above
+<p>Why not just use <tt>F.Artists.sort</tt>? Well, for the example above
we could do just that, but here is where <tt>invoke</tt> shines.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -533,8 +533,8 @@ we could do just that, but here is where <tt>invoke</tt> shines.</p> F.Artists.invoke('sort');
</com:TTextHighlighter>
-<p>The reason this will not work is because it is taking each item
-in that array and trying to apply sort to it, thus if we wrote it outright,
+<p>The reason this will not work is because it is taking each item
+in that array and trying to apply sort to it, thus if we wrote it outright,
it would look something like this:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -548,8 +548,8 @@ F.Artists.invoke('toLowerCase'); </com:TTextHighlighter>
<p>
-Now, what about passing arguments to the <tt>invoke</tt> function?
-The first argument passed to <tt>invoke</tt> is the method to be invoked,
+Now, what about passing arguments to the <tt>invoke</tt> function?
+The first argument passed to <tt>invoke</tt> is the method to be invoked,
and any other arguments beyond that will be passed as arguments to the invoked method.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts2.page b/demos/quickstart/protected/pages/Advanced/Scripts2.page index 6ee6a5d8..2c9ce220 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts2.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts2.page @@ -9,13 +9,13 @@ Event.observe(element, name, observer, [useCapture]);
</com:TTextHighlighter>
-<p>Assuming for a moment that we want to observe when a link was clicked,
+<p>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">
// <a id="clicker" href="http://foo.com">Click me</a>
Event.observe('clicker', 'click', function(event)
-{
+{
alert('clicked!');
});
</com:TTextHighlighter>
@@ -24,7 +24,7 @@ Event.observe('clicker', 'click', function(event) <com:TTextHighlighter Language="javascript" CssClass="source">
Event.observe('clicker', 'click', function(event)
-{
+{
alert(Event.element(event));
});
</com:TTextHighlighter>
@@ -35,8 +35,8 @@ Event.observe('clicker', 'click', function(event) <com:TTextHighlighter Language="javascript" CssClass="source">
Event.observe(document, 'keypress', function(event)
-{
- if(Event.keyCode(event) == Event.KEY_TAB)
+{
+ if(Event.keyCode(event) == Event.KEY_TAB)
alert('Tab Pressed');
});
</com:TTextHighlighter>
@@ -44,37 +44,37 @@ Event.observe(document, 'keypress', function(event) <p>And lets say we wanted to keep track of what has been typed :</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-Event.observe('search', 'keypress', function(event)
-{
+Event.observe('search', 'keypress', function(event)
+{
Element.update('search-results', $F(Event.element(event)));
});
</com:TTextHighlighter>
-<p>Prototype defines properties inside the event object for some
-of the more common keys, so feel free to dig around in Prototype to
+<p>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>A final note on keypress events; If you'd like to detect a
+<p>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>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
+<p>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">
Event.observe(document, 'mousemove', function(event)
{
- $('mouse').value = "X: " + Event.pointerX(event) +
+ $('mouse').value = "X: " + Event.pointerX(event) +
"px Y: " + Event.pointerY(event) + "px";
});
</com:TTextHighlighter>
-<p>If we wanted to observe the mouse location when it was
-hovering over a certain element, we'd just change the document argument to
+<p>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>
@@ -83,33 +83,33 @@ the id or element that was relevant.</p> <h2 id="6706">Events, Binding, and Objects</h2>
-<p>Everything has been fairly straight forward so far, but things
-start getting a little tricker when you need to work with events in
-and object-oriented environment. You have to deal with binding and funky
+<p>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>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">
EventDispenser = Class.create();
-EventDispenser.prototype =
+EventDispenser.prototype =
{
- initialize: function(list)
+ initialize: function(list)
{
this.list = list;
- // Observe clicks on our list items
- $$(this.list + " li").each(function(item)
+ // 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
+ // 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
+ // 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));
@@ -117,65 +117,65 @@ EventDispenser.prototype = },
// Arbitrary functions to respond to events
- showTagName: function(event)
+ showTagName: function(event)
{
alert(Event.element(event).tagName);
},
- onKeyPress: function(event)
+ onKeyPress: function(event)
{
var code = event.keyCode;
- if(code == Event.KEY_TAB)
+ if(code == Event.KEY_TAB)
alert('Tab key was pressed');
},
- onSearch: function(event)
+ onSearch: function(event)
{
Element.update('search-results', $F(Event.element(event)));
},
- onMouseMove: function(event)
+ onMouseMove: function(event)
{
- $('mouse').value = "X: " + Event.pointerX(event) +
+ $('mouse').value = "X: " + Event.pointerX(event) +
"px Y: " + Event.pointerY(event) + "px";
}
}
</com:TTextHighlighter>
-<p>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
+<p>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>Looking at the <tt>initialize</tt> method, we can really see how
+<p>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">
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
+// 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>We've got iterators, binding and all sorts of stuff going on.
+<p>We've got iterators, binding and all sorts of stuff going on.
Lets break down what this chunk of code is doing.</p>
-<p>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
+<p>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">
Event.observe(item, 'click', this.showTagName.bindEvent(this));
</com:TTextHighlighter>
-<p>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,
+<p>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>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>
+<p>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">
@@ -185,58 +185,58 @@ this.showTagName.bindEvent(this, param1, param2); showTime : function (event, param1, param2) { ... }
</com:TTextHighlighter>
-<p>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 didn't use <tt>bind(this)</tt>, I couldn't
+<p>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>Ok, so we'll move on to looking at our methods that actually get
+<p>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">
-showTagName: function(event)
+showTagName: function(event)
{
alert(Event.element(event).tagName);
}
</com:TTextHighlighter>
-<p>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
+<p>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>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
+<p>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>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
+<p>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">
-$$(this.list + " li").each(function(item)
+$$(this.list + " li").each(function(item)
{
Event.stopObserving(item, 'click', this.showTagName);
}.bind(this));
</com:TTextHighlighter>
-<p>What's the deal here? The reason this doesn't work is because there
+<p>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 doesn't have a pointer.</p>
+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>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
+<p>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">
this.showTagObserver = this.showTagName.bindEvent(this);
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
+// Observe clicks on our list items
+$$(this.list + " li").each(function(item)
{
Event.observe(item, 'click', this.showTagObserver);
}.bind(this));
@@ -244,7 +244,7 @@ $$(this.list + " li").each(function(item) <p>Now we can remove the event listeners from our list like this:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-$$(this.list + " li").each(function(item)
+$$(this.list + " li").each(function(item)
{
Event.stopObserving(item, 'click', this.showTagObserver);
}.bind(this));
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts3.page b/demos/quickstart/protected/pages/Advanced/Scripts3.page index 123caa3a..8ba6d5c8 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts3.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts3.page @@ -1,20 +1,20 @@ <com:TContent ID="body" >
-<h1 id="6801">Javascript in Prado, Questions and Answers</h1>
-<h2 id="6802">How do I include the predefined javascript libraries?</h2>
+<h1 id="6801">Javascript in PRADO, Questions and Answers</h1>
+<h2 id="6802">How do I include the predefined Javascript libraries?</h2>
<ul><li>Adding libraries in the template
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TClientScript UsingPradoScripts="effects" />
-</com:TTextHighlighter>
- </li>
+</com:TTextHighlighter>
+ </li>
<li>Adding libraries in PHP code
<com:TTextHighlighter Language="php" CssClass="source">
-$this->getPage()->getClientScript()->registerPradoScript("effects");
+$this->getPage()->getClientScript()->registerPradoScript("effects");
</com:TTextHighlighter>
</li>
-</ul>
-The available packaged libraries included in Prado are
+</ul>
+The available packaged libraries included in Prado are
<ul>
- <li><tt>prado</tt> : basic prado javascript framework based on Prototype</li>
+ <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>
@@ -24,12 +24,12 @@ The available packaged libraries included in Prado are <li><tt>colorpicker</tt> : colorpicker</li>
</ul>
-<p>The dependencies for each library are automatically resolved. Components
+<p>The dependencies for each library are automatically resolved. Components
that require a particular library will also automatically load the necessary libraries.
-For example, if you add a TDatePicker component on the page, the <tt>datapicker</tt>
+For example, if you add a TDatePicker component on the page, the <tt>datepicker</tt>
and its dependencies will be automatically included on the page.</p>
<p>See <a href="?page=Controls.ClientScript">TClientScript</a> for options of adding
- your custom javascript code to the page.</p>
+ your custom Javascript code to the page.</p>
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Advanced/Security.page b/demos/quickstart/protected/pages/Advanced/Security.page index 9be7946a..3dbfe0ab 100644 --- a/demos/quickstart/protected/pages/Advanced/Security.page +++ b/demos/quickstart/protected/pages/Advanced/Security.page @@ -10,7 +10,7 @@ Viewstate lies at the heart of PRADO. Viewstate represents data that can be used It is extremely important to ensure that viewstate is not tampered by end users. Without protection, malicious users may inject harmful code into viewstate and unwanted instructions may be performed when page state is being restored on server side.
</p>
<p>
-To prevent viewstate from being tampered, PRADO enforces viewstate HMAC (Keyed-Hashing for Message Authentication) check before restoring viewstate. Such a check can detect if the viewstate has been tampered or not by end users. Should the viewstate is modified, PRADO will stop restoring the viewstate and return an error message.
+To prevent viewstate from being tampered, PRADO enforces viewstate HMAC (Keyed-Hashing for Message Authentication) check before restoring viewstate. Such a check can detect if the viewstate has been tampered or not by end users. Should the viewstate is modified, PRADO will stop restoring the viewstate and return an error message.
</p>
<p>
HMAC check requires a private key that should be secret to end users. Developers can either manually specify a key or let PRADO automatically generate a key. Manually specified key is useful when the application runs on a server farm. To do so, configure <tt>TSecurityManager</tt> in application configuration,
@@ -31,7 +31,7 @@ HMAC check does not prevent end users from reading the viewstate content. An add Cross site scripting (also known as XSS) occurs when a web application gathers malicious data from a user. Often attackers will inject JavaScript, VBScript, ActiveX, HTML, or Flash into a vulnerable application to fool other application users and gather data from them. For example, a poorly design forum system may display user input in forum posts without any checking. An attacker can then inject a piece of malicious JavaScript code into a post so that when other users read this post, the JavaScript runs unexpectedly on their computers.
</p>
<p>
-One of the most important measures to prevent XSS attacks is to check user input before displaying them. One can do HTML-encoding with the user input to achieve this goal. However, in some situations, HTML-encoding may not be preferrable because it disables all HTML tags.
+One of the most important measures to prevent XSS attacks is to check user input before displaying them. One can do HTML-encoding with the user input to achieve this goal. However, in some situations, HTML-encoding may not be preferable because it disables all HTML tags.
</p>
<p>
PRADO incorporates the work of <a href="http://pixel-apes.com/safehtml/">SafeHTML</a> and provides developers with a useful component called <tt>TSafeHtml</tt>. By enclosing content within a <tt>TSafeHtml</tt> component tag, the enclosed content are ensured to be safe to end users. In addition, the commonly used <tt>TTextBox</tt> has a <tt>SafeText</tt> property which contains user input that are ensured to be safe if displayed directly to end users.
@@ -51,7 +51,7 @@ There are several countermeasures to prevent cookies from being attacked. <li>Validate cookie data and detect if they are altered.</li>
</ul>
<p>
-Prado implements a cookie validation scheme that prevents cookies from being modified. In particular, it does HMAC check for the cookie values if cookie validation is enable.
+PRADO implements a cookie validation scheme that prevents cookies from being modified. In particular, it does HMAC check for the cookie values if cookie validation is enable.
</p>
<p>
Cookie validation is disabled by default. To enable it, configure the <tt>THttpRequest</tt> module as follows,
@@ -62,7 +62,7 @@ Cookie validation is disabled by default. To enable it, configure the <tt>THttpR </modules>
</com:TTextHighlighter>
<p>
-To make use of cookie validation scheme provided by Prado, you also need to retrieve cookies through the <tt>Cookies</tt> collection of <tt>THttpRequest</tt> by using the following PHP statements,
+To make use of cookie validation scheme provided by PRADO, you also need to retrieve cookies through the <tt>Cookies</tt> collection of <tt>THttpRequest</tt> by using the following PHP statements,
</p>
<com:TTextHighlighter CssClass="source">
foreach($this->Request->Cookies as $cookie)
diff --git a/demos/quickstart/protected/pages/Advanced/State.page b/demos/quickstart/protected/pages/Advanced/State.page index 051090e9..6e7e7f99 100644 --- a/demos/quickstart/protected/pages/Advanced/State.page +++ b/demos/quickstart/protected/pages/Advanced/State.page @@ -7,7 +7,7 @@ Web applications often need to remember what an end user has done in previous pa <h2 id="6002">View State</h2>
<p>
-View state lies at the heart of PRADO. With view state, Web pages become stateful and are capable of restoring pages to the state that end users interacted with before the current page request. Web programming thus resembles to Windows GUI programming, and developers can think continuously without worrying about the roundtrips between end users and the Web server. For example, with view state, a textbox control is able to detect if the user input changes the content in the textbox.
+View state lies at the heart of PRADO. With view state, Web pages become stateful and are capable of restoring pages to the state that end users interacted with before the current page request. Web programming thus resembles to Windows GUI programming, and developers can think continuously without worrying about the round trips between end users and the Web server. For example, with view state, a textbox control is able to detect if the user input changes the content in the textbox.
</p>
<p>
View state is only available to controls. View state of a control can be disabled by setting its <tt>EnableViewState</tt> property to false. To store a variable in view state, call the following,
diff --git a/demos/quickstart/protected/pages/Advanced/Themes.page b/demos/quickstart/protected/pages/Advanced/Themes.page index ef593c65..5ba0a121 100644 --- a/demos/quickstart/protected/pages/Advanced/Themes.page +++ b/demos/quickstart/protected/pages/Advanced/Themes.page @@ -4,12 +4,12 @@ <h2 id="5902">Introduction</h2>
<p>
-Themes in Prado provide a way for developers to provide a consistent look-and-feel across an entire web application. A theme contains a list of initial values for properties of various control types. When applying a theme to a page, all controls on that page will receive the corresponding initial property values from the theme. This allows themes to interact with the rich property sets of the various PRADO controls, meaning that themes can be used to specify a large range of presentational properties that other theming methods (e.g. CSS) cannot. For example, themes could be used to specify the default page size of all data grids across an application by specifying a default value for the <tt>PageSize</tt> property of the <tt>TDataGrid</tt> control.
+Themes in PRADO provide a way for developers to provide a consistent look-and-feel across an entire web application. A theme contains a list of initial values for properties of various control types. When applying a theme to a page, all controls on that page will receive the corresponding initial property values from the theme. This allows themes to interact with the rich property sets of the various PRADO controls, meaning that themes can be used to specify a large range of presentational properties that other theming methods (e.g. CSS) cannot. For example, themes could be used to specify the default page size of all data grids across an application by specifying a default value for the <tt>PageSize</tt> property of the <tt>TDataGrid</tt> control.
</p>
<h2 id="5903">Understanding Themes</h2>
<p>
-A theme is a directory consists of skin files, javascript files and CSS files. Any javascript or CSS files contained in a theme will be registered with the page that the theme is applied to. A skin is a set of initial property values for a particular control type. A control type may have one or several skins, each identified by a unqiue <tt>SkinID</tt>. When applying a theme to a page, a skin is applied to a control if the control type and the <tt>SkinID</tt> value both match to those of the skin. Note, if a skin has an empty <tt>SkinID</tt> value, it will apply to all controls of the particular type whose <tt>SkinID</tt> is not set or empty. A skin file consists of one or several skins, for one or several control types. A theme is the union of skins defined in all skin files.
+A theme is a directory consists of skin files, javascript files and CSS files. Any javascript or CSS files contained in a theme will be registered with the page that the theme is applied to. A skin is a set of initial property values for a particular control type. A control type may have one or several skins, each identified by a unique <tt>SkinID</tt>. When applying a theme to a page, a skin is applied to a control if the control type and the <tt>SkinID</tt> value both match to those of the skin. Note, if a skin has an empty <tt>SkinID</tt> value, it will apply to all controls of the particular type whose <tt>SkinID</tt> is not set or empty. A skin file consists of one or several skins, for one or several control types. A theme is the union of skins defined in all skin files.
</p>
<h2 id="5904">Using Themes</h2>
@@ -26,7 +26,7 @@ To use a particular skin in the theme for a control, set <tt>SkinID</tt> propert This will apply the 'Blue' skin to the button. Note, the initial property values specified by the 'Blue' skin will overwrite any existing property values of the button. Use stylesheet theme if you do not want them to be overwritten. To use stylesheet theme, set the <tt>StyleSheetTheme</tt> property of the page instead of <tt>Theme</tt> (you can have both <tt>StyleSheetTheme</tt> and <tt>Theme</tt>).
</p>
<p>
-To use the javascript files and CSS files contained in a theme, a <tt>THead</tt> control must be placed on the page template. This is because the theme will register those files with the page and <tt>THead</tt> is the right place to load those files.
+To use the Javascript files and CSS files contained in a theme, a <tt>THead</tt> control must be placed on the page template. This is because the theme will register those files with the page and <tt>THead</tt> is the right place to load those files.
</p>
<h2 id="5905">Theme Storage</h2>
@@ -46,7 +46,7 @@ All themes by default must be placed under the <tt>[AppEntryPath]/themes</tt> di <h2 id="5906">Creating Themes</h2>
<p>
-Creating a theme involves creating the theme directory and writing skin files (and possibly javascript and CSS files). The name of skin files must be terminated with <tt>.skin</tt>. The format of skin files are the same as that of control template files. Since skin files do not define parent-child presentational relationship among controls, you cannot place a component tag within another. And any static texts between component tags are discarded. To define the aforementioned 'Blue' skin for <tt>TButton</tt>, write the following in a skin file,
+Creating a theme involves creating the theme directory and writing skin files (and possibly Javascript and CSS files). The name of skin files must be terminated with <tt>.skin</tt>. The format of skin files are the same as that of control template files. Since skin files do not define parent-child presentational relationship among controls, you cannot place a component tag within another. And any static texts between component tags are discarded. To define the aforementioned 'Blue' skin for <tt>TButton</tt>, write the following in a skin file,
</p>
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TButton SkinID="Blue" BackColor="blue" />
diff --git a/demos/quickstart/protected/pages/Comments.page b/demos/quickstart/protected/pages/Comments.page deleted file mode 100644 index 32c7bcae..00000000 --- a/demos/quickstart/protected/pages/Comments.page +++ /dev/null @@ -1,46 +0,0 @@ -<com:TContent ID="body"> - <com:TDataList - ID="comments" - DataKeyField="id" - OnEditCommand="editComment" - OnCancelCommand="cancelEdit" - OnUpdateCommand="updateComment" - OnDeleteCommand="deleteComment" - OnSelectedIndexChanged="approveComment" - ItemStyle.BackColor="#BFCFFF" - AlternatingItemStyle.BackColor="#E6ECFF" - EditItemStyle.BackColor="lightgreen"> - - <prop:HeaderTemplate> - Comments awaiting approval - </prop:HeaderTemplate> - - <prop:ItemTemplate> - <span class="page"><%# $this->DataItem['page'] %></span> - <span class="date"> - <com:TDateFormat Value=<%# intval($this->DataItem['date_added']) %> /> - </span> - <span class="email"> - <%# $this->DataItem['email'] %> - </span> - <div class="comment"> - <com:TSafeHtml> - <%# $this->DataItem['comment']%> - </com:TSafeHtml> - </div> - <com:TLinkButton Text="Edit" CommandName="edit" /> - <com:TLinkButton Text="Delete" CommandName="delete" - Attributes.onclick="if(!confirm('Are you sure?')) return false;" /> - <com:TLinkButton Text="Approve" CommandName="select" /> - </prop:ItemTemplate> - - <prop:EditItemTemplate> - <com:TTextBox ID="email" Text=<%# $this->DataItem['email'] %> /> - <com:TTextBox ID="page" Text=<%# $this->DataItem['page'] %> /> - <com:TTextBox ID="content" Text=<%# $this->DataItem['comment'] %> TextMode="MultiLine"/> - <com:TLinkButton Text="Save" CommandName="update" /> - <com:TLinkButton Text="Cancel" CommandName="cancel" /> - </prop:EditItemTemplate> - - </com:TDataList> -</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Comments.php b/demos/quickstart/protected/pages/Comments.php deleted file mode 100644 index 7af70ece..00000000 --- a/demos/quickstart/protected/pages/Comments.php +++ /dev/null @@ -1,76 +0,0 @@ -<?php - -Prado::using('System.I18N.*'); - -/** - * Comments class. - * - * @author Wei Zhuo <weizhuo[at]gmail[dot]com> - * @version : $ Sat May 27 20:23:00 AZOST 2006 $ - * @package Demo.Quickstart - * @since 3.0 - */ -class Comments extends TPage -{ - private $_quickstart; - - public function onLoad($param) - { - parent::onLoad($param); - $this->_quickstart = new QuickStartComments; - if(!$this->getIsPostBack()) - $this->refreshData(); - } - - protected function refreshData() - { - $this->comments->setDataSource($this->_quickstart->getQuequedComments()); - $this->comments->dataBind(); - } - - public function approveComment($sender, $param) - { - $ID = $this->comments->DataKeys[$this->comments->SelectedItemIndex]; - $this->_quickstart->approveComment($ID); - $this->refreshData(); - $this->comments->SelectedItemIndex=-1; - } - - public function editComment($sender, $param) - { - $this->comments->SelectedItemIndex=-1; - $this->comments->EditItemIndex=$param->Item->ItemIndex; - $this->refreshData(); - } - - public function cancelEdit($sender, $param) - { - $this->comments->SelectedItemIndex=-1; - $this->comments->EditItemIndex=-1; - $this->refreshData(); - } - - public function deleteComment($sender, $param) - { - $ID = $this->comments->DataKeys[$param->Item->ItemIndex]; - $this->_quickstart->deleteComment($ID); - $this->comments->SelectedItemIndex=-1; - $this->comments->EditItemIndex=-1; - $this->refreshData(); - } - - public function updateComment($sender, $param) - { - $item=$param->Item; - $this->_quickstart->updateComment( - $this->comments->DataKeys[$item->ItemIndex], - $item->page->Text, - $item->email->Text, - $item->content->Text); - - $this->comments->EditItemIndex=-1; - $this->refreshData(); - } -} - -?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/ClientScript.page b/demos/quickstart/protected/pages/Controls/ClientScript.page index 5dab41d5..d5687fb1 100644 --- a/demos/quickstart/protected/pages/Controls/ClientScript.page +++ b/demos/quickstart/protected/pages/Controls/ClientScript.page @@ -1,23 +1,23 @@ <com:TContent ID="body" > -<h1>TClientScript</h1> +<h1 id="2201">TClientScript</h1> <com:DocLink ClassPath="System.Web.UI.WebControls.TClientScript" /> -<h2>Including Bundled Javascript Libraries in Prado</h2> +<h2 id="2202">Including Bundled Javascript Libraries in Prado</h2> <p> -<tt>TClientScript</tt> allows javascript code to be insert or linked to the -page template. Prado is bundled with a large library of javascript functionality -including effects, AJAX, basic event handlers, and many others. The bundled -javascript libraries can be linked to the current page template using the -<tt>UsingPradoScripts</tt> property. Multiple bundled javascript libraries -can be specified using comma delimited string of the name of javascript library +<tt>TClientScript</tt> allows Javascript code to be insert or linked to the +page template. PRADO is bundled with a large library of Javascript functionality +including effects, AJAX, basic event handlers, and many others. The bundled +Javascript libraries can be linked to the current page template using the +<tt>PradoScripts</tt> property. Multiple bundled Javascript libraries +can be specified using comma delimited string of the name of Javascript library to include on the page. For following example will include the "ajax" and "effects" library. </p> <com:TTextHighlighter Language="prado" CssClass="source"> -<com:TClientScript UsingPradoScripts="ajax, effects" /> +<com:TClientScript PradoScripts="ajax, effects" /> </com:TTextHighlighter> <p> - The available bundled libraries included in Prado are + The available bundled libraries included in Prado are <ul> <li><tt>prado</tt> : basic prado javascript framework based on Prototype</li> <li><tt>effects</tt> : visual effects from script.aculo.us</li> @@ -29,12 +29,12 @@ to include on the page. For following example will include the "ajax" and "effec <li><tt>colorpicker</tt> : colorpicker</li> </ul> </p> -<p>The dependencies for each library are automatically resolved. That is, +<p>The dependencies for each library are automatically resolved. That is, specifying, say the "ajax", will also include the "prado" library.</p> - -<h2>Including Custom Javascript Files</h2> -<p>Custom javascript files can be register using the <tt>ScriptUrl</tt> property. -The following example includes the javascript file "test.js" to the page. In this case, the file + +<h2 id="2203">Including Custom Javascript Files</h2> +<p>Custom Javascript files can be register using the <tt>ScriptUrl</tt> property. +The following example includes the Javascript file "test.js" to the page. In this case, the file "test.js" is relative the current template you are using. Since the property value is <a href="?page=Configurations.Templates3">dynamic asset tag</a>, the file "test.js" will be published automatically, that is, the file will be copied to the assets directory if necessary. @@ -42,11 +42,11 @@ automatically, that is, the file will be copied to the assets directory if neces <com:TTextHighlighter Language="prado" CssClass="source"> <com:TClientScript ScriptUrl=<%~ test.js %> /> </com:TTextHighlighter> -<p>You can include javascript files from other servers by specifying the full URL string in +<p>You can include Javascript files from other servers by specifying the full URL string in the <tt>ScriptUrl</tt> property.</p> -<h2>Including Custom Javascript Code Blocks</h2> +<h2 id="2204">Including Custom Javascript Code Blocks</h2> <p> Any content within the <tt>TClientScript</tt> control tag will be considered as - javascript code and will be rendered where it is declared.</p> + Javascript code and will be rendered where it is declared.</p> </com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/DataGrid.page b/demos/quickstart/protected/pages/Controls/DataGrid.page index ed1ad32b..392b78ab 100644 --- a/demos/quickstart/protected/pages/Controls/DataGrid.page +++ b/demos/quickstart/protected/pages/Controls/DataGrid.page @@ -6,15 +6,15 @@ TDatagrid is an important control in building complex Web applications. It displays data in a tabular format with rows (also called items) and columns. A row is composed by cells, while columns govern how cells should be displayed according to their association with the columns. Data specified via <tt>DataSource</tt> or <tt>DataSourceID</tt> are bound to the rows and feed contents to cells.
</p>
<p>
-TDataGrid is highly interactive. Users can sort the data along specified columns, navigate through different pages of the data, and perform actions, such as editting and deleting, on rows of the data.
+TDataGrid is highly interactive. Users can sort the data along specified columns, navigate through different pages of the data, and perform actions, such as editing and deleting, on rows of the data.
</p>
<p>
-Rows of TDataGrid can be accessed via its <tt>Items</tt> property. A row (item) can be in one of several modes: browsing, editting and selecting, which affects how cells in the row are displayed. To change an item's mode, modify <tt>EditItemIndex</tt> or <tt>SelectedItemIndex</tt>. Note, if an item is in edit mode, then selecting this item will have no effect.
+Rows of TDataGrid can be accessed via its <tt>Items</tt> property. A row (item) can be in one of several modes: browsing, editing and selecting, which affects how cells in the row are displayed. To change an item's mode, modify <tt>EditItemIndex</tt> or <tt>SelectedItemIndex</tt>. Note, if an item is in edit mode, then selecting this item will have no effect.
</p>
<h2 id="5202">Columns</h2>
<p>
-Columns of a data grid determine how the associated cells are displayed. For example, cells associated with a <tt>TBoundColumn</tt> are displayed differently according to their modes. A cell is displayed as a static text if the cell is in browsing mode, a text box if it is in editting mode, and so on.
+Columns of a data grid determine how the associated cells are displayed. For example, cells associated with a <tt>TBoundColumn</tt> are displayed differently according to their modes. A cell is displayed as a static text if the cell is in browsing mode, a text box if it is in editing mode, and so on.
</p>
<p>
PRADO provides five types of columns:
@@ -103,7 +103,7 @@ The following example uses manually specified columns to show a list of book inf <li>Publisher - displayed as a piece of text using <tt>TBoundColumn</tt>.</li>
<li>Price - displayed as a piece of text using <tt>TBoundColumn</tt> with output formatting string and customized styles.</li>
<li>In-stock or not - displayed as a checkbox using <tt>TCheckBoxColumn</tt>.</li>
- <li>Rating - displayed as an image using <tt>TTemplateColumn</tt> which allows maximum freedom in specifiying cell contents.</li>
+ <li>Rating - displayed as an image using <tt>TTemplateColumn</tt> which allows maximum freedom in specifying cell contents.</li>
</ul>
<p>Pay attention to how item (row) styles and column styles cooperate together to affect the appearance of the cells in the datagrid.</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample2" />
@@ -111,7 +111,7 @@ The following example uses manually specified columns to show a list of book inf <h2 id="5206">Interacting with TDataGrid</h2>
<p>
-Besides the rich data presentation functionalities as demonstrated in previous section, TDataGrid is also highly user interactive. An import usage of TDataGrid is editting or deleting rows of data. The <tt>TBoundColumn</tt> can adjust the associated cell presentation according to the mode of datagrid items. When an item is in browsing mode, the cell is displayed with a static text; when the item is in editting mode, a textbox is displayed to collect user inputs. TDataGrid provides <tt>TEditCommandColumn</tt> for switching item modes. In addition, <tt>TButtonColumn</tt> offers developers the flexibility of creating arbitrary buttons for various user interactions.
+Besides the rich data presentation functionalities as demonstrated in previous section, TDataGrid is also highly user interactive. An import usage of TDataGrid is editing or deleting rows of data. The <tt>TBoundColumn</tt> can adjust the associated cell presentation according to the mode of datagrid items. When an item is in browsing mode, the cell is displayed with a static text; when the item is in editing mode, a textbox is displayed to collect user inputs. TDataGrid provides <tt>TEditCommandColumn</tt> for switching item modes. In addition, <tt>TButtonColumn</tt> offers developers the flexibility of creating arbitrary buttons for various user interactions.
</p>
<p>
The following example shows how to make the previous book information table an interactive one. It allows users to edit and delete book items from the table. Two additional columns are used in the example to allow users interact with the datagrid: <tt>TEditCommandColumn</tt> and <tt>TButtonColumn</tt>.
diff --git a/demos/quickstart/protected/pages/Controls/DataList.page b/demos/quickstart/protected/pages/Controls/DataList.page index c1ff1147..75541564 100644 --- a/demos/quickstart/protected/pages/Controls/DataList.page +++ b/demos/quickstart/protected/pages/Controls/DataList.page @@ -50,7 +50,7 @@ The following example shows how to use TDataList to display tabular data, with d </p>
<com:RunBar PagePath="Controls.Samples.TDataList.Sample1" />
<p>
-A common use of TDataList is for maintaining tabular data, including browsing, editting, deleting data items. This is enabled by the command events and various item templates of TDataList.
+A common use of TDataList is for maintaining tabular data, including browsing, editing, deleting data items. This is enabled by the command events and various item templates of TDataList.
</p>
<p>
The following example displays a computer product information. Users can add new products, modify or delete existing ones. In order to locate the data item for updating or deleting, <tt>DataKeys</tt> property is used.
diff --git a/demos/quickstart/protected/pages/Controls/DatePicker.page b/demos/quickstart/protected/pages/Controls/DatePicker.page index a37ff048..36d2f435 100644 --- a/demos/quickstart/protected/pages/Controls/DatePicker.page +++ b/demos/quickstart/protected/pages/Controls/DatePicker.page @@ -3,14 +3,14 @@ <h1 id="2301">TDatePicker</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TDatePicker" />
-<p><tt>TDatePicker</tt> displays a text box for date input purpose.
+<p><tt>TDatePicker</tt> displays a text box for date input purpose.
When the text box receives focus, a calendar will pop up and users can
pick up from it a date that will be automatically entered into the text box.
The format of the date string displayed in the text box is determined by
the <tt>DateFormat</tt> property. Valid formats are the combination of the
following tokens:
-
-<com:TTextHighlighter Language="text" CssClass="source">
+
+<com:TTextHighlighter Language="text" CssClass="source">
Character Format Pattern (en-US)
---------------------------------------------------------------------
d day digit
@@ -32,7 +32,7 @@ only accepts integers such as the Unix timestamp. </p>
<p>
-TDatePicker has three <tt>Mode</tt> to show the date picker popup.
+TDatePicker has three <tt>Mode</tt> to show the date picker popup.
<ul>
<li><tt>Basic</tt> - Only shows a text input, focusing on the input shows the date picker.</li>
<li><tt>Button</tt> - Shows a button next to the text input, clicking on the button shows the date, button text can be by the <tt>ButtonText</tt> property.</li>
@@ -40,8 +40,8 @@ TDatePicker has three <tt>Mode</tt> to show the date picker popup. </ul>
</p>
-<p>The <tt>CssClass</tt> property can be used to override the css class name
-for the date picker panel. The <tt>CalendarStyle</tt> property changes the overall calendar style.
+<p>The <tt>CssClass</tt> property can be used to override the CSS class name
+for the date picker panel. The <tt>CalendarStyle</tt> property changes the overall calendar style.
The following <tt>CalendarStyle</tt> values are available:
<ul>
<li><tt>default</tt> - The default calendar style.</li>
@@ -50,9 +50,9 @@ The following <tt>CalendarStyle</tt> values are available: <p>The <tt>InputMode</tt> property can be set to "TextBox" or "DropDownList" with
default as "TextBox". In <tt>DropDownList</tt> mode, in addition to the popup date picker, three
-drop down list (day, month and year) are presented to select the date .
+drop down list (day, month and year) are presented to select the date .
When <tt>InputMode</tt> equals "DropDownList", the order and appearance of the date, month, and year
-will depend on the pattern specified in <tt>DateFormat</tt> property.
+will depend on the pattern specified in <tt>DateFormat</tt> property.
</p>
<p>The popup date picker can be hidden by specifying <tt>ShowCalendar</tt> as false. Much of the
@@ -64,20 +64,20 @@ where <tt>FromYear</tt> is the starting year and <tt>UpToYear</tt> is the last y The starting day of the week can be changed by the <tt>FirstDayOfWeek</tt> property, with 0 as Sunday, 1 as Monday, etc.
</p>
-<p><b>Note 1:</b> If the <tt>InputMode</tt> is "TextBox", the <tt>DateFormat</tt> should
-only <b>NOT</b> contain <code>MMM</code> or <code>MMMM</code> patterns. The
+<p><b>Note 1:</b> If the <tt>InputMode</tt> is "TextBox", the <tt>DateFormat</tt> should
+only <b>NOT</b> contain <code>MMM</code> or <code>MMMM</code> patterns. The
server side date parser will not be able to determine the correct date if <code>MMM</code> or
<code>MMMM</code> are used. When <tt>InputMode</tt> equals "DropDownList", all patterns can be used.</p>
-
+
<p><b>Note 2:</b> When the <tt>TDatePicker</tt> is used together
-with a validator, the <tt>DateFormat</tt> property of the validator must be equal to
-the <tt>DateFormat</tt> of the <tt>TDatePicker</tt> <b>AND</b> must set <tt>DataType</tt>="Date"
-on the validator to ensure correct validation. See
+with a validator, the <tt>DateFormat</tt> property of the validator must be equal to
+the <tt>DateFormat</tt> of the <tt>TDatePicker</tt> <b>AND</b> must set <tt>DataType</tt>="Date"
+on the validator to ensure correct validation. See
<a href="?page=Controls.Validation#TCompareValidator">TCompareValidator</a>,
-<a href="?page=Controls.Validation#TDataTypeValidator">TDataTypeValidator</a> and
-<a href="?page=Controls.Validation#TRangeValidator">TRangeValidator</a>
+<a href="?page=Controls.Validation#TDataTypeValidator">TDataTypeValidator</a> and
+<a href="?page=Controls.Validation#TRangeValidator">TRangeValidator</a>
for details.</p>
-
+
<com:RunBar PagePath="Controls.Samples.TDatePicker.Home" />
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/HtmlArea.page b/demos/quickstart/protected/pages/Controls/HtmlArea.page index 00a65573..e40a4444 100644 --- a/demos/quickstart/protected/pages/Controls/HtmlArea.page +++ b/demos/quickstart/protected/pages/Controls/HtmlArea.page @@ -24,7 +24,7 @@ The default editor gives only the basic tool bar. To change or add additional to </com:TTextHighlighter>
<p>
-The client-side visual editting capability is supported by Internet Explorer 5.0+ for Windows and Gecko-based browser. If the browser does not support the visual editting, a traditional textarea will be displayed.
+The client-side visual editing capability is supported by Internet Explorer 5.0+ for Windows and Gecko-based browser. If the browser does not support the visual editing, a traditional textarea will be displayed.
</p>
<pre>
@@ -39,7 +39,7 @@ Firefox 1.5b2 OK OK Safari 2.0 (412) OK(1)
Opera 9 Preview 1 OK(1) OK(1)
----------------------------------------------------
-(1) - Partialy working
+(1) - Partially working
----------------------------------------------------
</pre>
diff --git a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page index ccb4a27b..2c0032f8 100644 --- a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page +++ b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page @@ -4,7 +4,7 @@ <com:DocLink ClassPath="System.Web.UI.WebControls.TJavascriptLogger" />
<p>
-<tt>TJavascriptLogger</tt> provides logging for client-side javascript. It is mainly a wrapper of the javascript developed at <a href="http://gleepglop.com/javascripts/logger/">http://gleepglop.com/javascripts/logger/</a>.
+<tt>TJavascriptLogger</tt> provides logging for client-side javascript. It is mainly a wrapper of the Javascript developed at <a href="http://gleepglop.com/javascripts/logger/">http://gleepglop.com/javascripts/logger/</a>.
</p>
<p>
@@ -15,7 +15,7 @@ To use <tt>TJavascriptLogger</tt>, simply place the following component tag in a </com:TTextHighlighter>
<p>
-Then, the client-side javascript may contain the following statements. When they are executed, they will appear in the logger window.
+Then, the client-side Javascript may contain the following statements. When they are executed, they will appear in the logger window.
</p>
<com:TTextHighlighter Language="js" CssClass="source">
Logger.info('something happend');
diff --git a/demos/quickstart/protected/pages/Controls/NewControl.page b/demos/quickstart/protected/pages/Controls/NewControl.page index 54465ff7..5662f848 100644 --- a/demos/quickstart/protected/pages/Controls/NewControl.page +++ b/demos/quickstart/protected/pages/Controls/NewControl.page @@ -13,7 +13,7 @@ In general, there are two ways of writing new controls: composition of existing Composition is the easiest way of creating new controls. It mainly involves instantiating existing controls, configuring them and making them the constituent components. The properties of the constituent components are exposed through <a href="?page=Fundamentals.Components">subproperties</a>.
</p>
<p>
-One can compose a new control in two ways. One is to extend <tt>TCompositeControl</tt> and override the <tt>TControl::createChildControls()</tt> method. The other is to extend <tt>TTemplateControl</tt> (or its child classes) and write a control template. The latter is easier to use and can organize the layout constituent compoents more intuitively, while the former is more efficient because it does not require parsing of the template.
+One can compose a new control in two ways. One is to extend <tt>TCompositeControl</tt> and override the <tt>TControl::createChildControls()</tt> method. The other is to extend <tt>TTemplateControl</tt> (or its child classes) and write a control template. The latter is easier to use and can organize the layout constituent components more intuitively, while the former is more efficient because it does not require parsing of the template.
</p>
<p>
As an example, we show how to create a labeled textbox called <tt>LabeledTextBox</tt> using the above two approaches. A labeled textbox displays a label besides a textbox. We want reuse the PRADO provided <tt>TLabel</tt> and <tt>TTextBox</tt> to accomplish this task.
@@ -130,8 +130,8 @@ Other important properties and methods include: <tt>TWebControl</tt> is mainly used as a base class for controls representing HTML elements. It provides a set of properties that are common among HTML elements. It breaks the <tt>TControl::render()</tt> into the following methods that are more suitable for rendering an HTML element:
</p>
<ul>
- <li><tt>addAttributesToRender()</tt> - adds attributes for the HTML element to be rendered. This method is often overriden by derived classes as they usually have different attributes to be rendered.</li>
- <li><tt>renderBeginTag()</tt> - renders the openning HTML tag.</li>
+ <li><tt>addAttributesToRender()</tt> - adds attributes for the HTML element to be rendered. This method is often overridden by derived classes as they usually have different attributes to be rendered.</li>
+ <li><tt>renderBeginTag()</tt> - renders the opening HTML tag.</li>
<li><tt>renderContents()</tt> - renders the content enclosed within the HTML element. By default, it displays the items in the <tt>Controls</tt> collection of the control. Derived classes may override this method to render customized contents.</li>
<li><tt>renderEndTag()</tt> - renders the closing HTML tag.</li>
</ul>
diff --git a/demos/quickstart/protected/pages/Controls/Panel.page b/demos/quickstart/protected/pages/Controls/Panel.page index d507da36..be36095b 100644 --- a/demos/quickstart/protected/pages/Controls/Panel.page +++ b/demos/quickstart/protected/pages/Controls/Panel.page @@ -4,7 +4,7 @@ <com:DocLink ClassPath="System.Web.UI.WebControls.TPanel" />
<p>
-<tt>TPanel</tt> acts as a presentational container for other control. It displays a <div> element on a page. The property <tt>Wrap</tt> specifies whether the panel's body content should wrap or not, while <tt>HorizontalAlign</tt> governs how the content is aligned horizontally and <tt>Direction</tt> indicates the content direction (left to right or right to left). You can set <tt>BackImageUrl</tt> to give a background image to the panel, and you can ste <tt>GroupingText</tt> so that the panel is displayed as a field set with a legend text. Finally, you can specify a default button to be fired when users press 'return' key within the panel by setting the <tt>DefaultButton</tt> property.
+<tt>TPanel</tt> acts as a presentational container for other control. It displays a <div> element on a page. The property <tt>Wrap</tt> specifies whether the panel's body content should wrap or not, while <tt>HorizontalAlign</tt> governs how the content is aligned horizontally and <tt>Direction</tt> indicates the content direction (left to right or right to left). You can set <tt>BackImageUrl</tt> to give a background image to the panel, and you can set <tt>GroupingText</tt> so that the panel is displayed as a field set with a legend text. Finally, you can specify a default button to be fired when users press 'return' key within the panel by setting the <tt>DefaultButton</tt> property.
</p>
<com:RunBar PagePath="Controls.Samples.TPanel.Home" />
diff --git a/demos/quickstart/protected/pages/Controls/Repeater.page b/demos/quickstart/protected/pages/Controls/Repeater.page index 795e27aa..d8f3fd0a 100644 --- a/demos/quickstart/protected/pages/Controls/Repeater.page +++ b/demos/quickstart/protected/pages/Controls/Repeater.page @@ -5,7 +5,7 @@ TRepeater displays its content defined in templates repeatedly based on the given data specified by the <tt>DataSource</tt> or <tt>DataSourceID</tt> property. The repeated contents can be retrieved from the <tt>Items</tt> property. Each item is created by instantiating a template and each is a child control of the repeater.
</p>
<p>
-Like normal control templates, the repeater templates can contain static text, controls and special tags, which after instantiation, become child contents of the corresponding item. TRepeater defiens five templates for different purposes,
+Like normal control templates, the repeater templates can contain static text, controls and special tags, which after instantiation, become child contents of the corresponding item. TRepeater defines five templates for different purposes,
</p>
<ul>
<li><tt>HeaderTemplate</tt> - the template used for displaying content at the beginning of a repeater;</li>
diff --git a/demos/quickstart/protected/pages/Controls/Validation.page b/demos/quickstart/protected/pages/Controls/Validation.page index a28c8faf..12836b8c 100644 --- a/demos/quickstart/protected/pages/Controls/Validation.page +++ b/demos/quickstart/protected/pages/Controls/Validation.page @@ -26,7 +26,7 @@ Validators share a common set of properties, which are defined in the base class <li><tt>Dynamic</tt> - the space for displaying the error message is NOT reserved. Therefore, showing up the error message will shift the layout of your page around (usually down).</li>
</ul>
</li>
-<li><tt>ControlCssClass</tt> - the Css class that is applied to the control being validated in case the validation fails.</li>
+<li><tt>ControlCssClass</tt> - the CSS class that is applied to the control being validated in case the validation fails.</li>
<li><tt>FocusOnError</tt> - set focus at the validating place if the validation fails. Defaults to false.</li>
<li><tt>FocusElementID</tt> - the ID of the HTML element that will receive focus if validation fails and <tt>FocusOnError</tt> is true.</li>
</ul>
@@ -71,7 +71,7 @@ TEmailAddressValidator verifies that the user input is a valid email address. Th Note, if the input being validated is empty, TEmailAddressValidator will not do validation. Use a TRequiredFieldValidator to ensure the value is not empty.
</p>
<com:RunBar PagePath="Controls.Samples.TEmailAddressValidator.Home" />
-
+
<a name="TCompareValidator"></a>
<h2 id="4904">TCompareValidator</h2>
<p>
diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page index ce8bc774..fe910aa7 100644 --- a/demos/quickstart/protected/pages/Controls/Wizard.page +++ b/demos/quickstart/protected/pages/Controls/Wizard.page @@ -74,15 +74,15 @@ In this sample, we use wizard to collect user's preference of color. In the firs Given a set of wizard steps, <tt>TWizard</tt> supports three different ways of navigation among them:
</p>
<ul>
- <li>Bidirectional - Users can navigate forward and backward along a sequence of wizard steps. User input data is usally collected at the last step. This is also known as commit-at-the-end model. It is the default navigation way that <tt>TWizard</tt> supports.</li>
- <li>Unidirectional - Users can navigate forward along a sequence of wizard steps. Backward move is not allowed. User input data is usally collected step by step. This is also known as command-as-you-go model. To disallow backward move to a specific step, set its <tt>AllowReturn</tt> property to false.</li>
+ <li>Bidirectional - Users can navigate forward and backward along a sequence of wizard steps. User input data is usually collected at the last step. This is also known as commit-at-the-end model. It is the default navigation way that <tt>TWizard</tt> supports.</li>
+ <li>Unidirectional - Users can navigate forward along a sequence of wizard steps. Backward move is not allowed. User input data is usually collected step by step. This is also known as command-as-you-go model. To disallow backward move to a specific step, set its <tt>AllowReturn</tt> property to false.</li>
<li>Nonlinear - User input in a step determines which step to go next. To do so, set <tt>ActiveStepIndex</tt> to the step that you want the user to go to. In this case, when a user clicks on the previous button in the navigation panel, the previous step that they visited (not the previous step in the sequential order) will become visible.</li>
</ul>
<com:RunBar PagePath="Controls.Samples.TWizard.Sample3" />
<h3 id="4707">Using Templates in Wizard</h3>
<p>
-<tt>TWizard</tt> supports more concrete control of its outlook through templating. In particular, it provides the following template properties that allow complete customization of the wizard's header, navigation and side bar.
+<tt>TWizard</tt> supports more concrete control of its outlook through templates. In particular, it provides the following template properties that allow complete customization of the wizard's header, navigation and side bar.
</p>
<ul>
<li>Header - <tt>HeaderTemplate</tt>.</li>
diff --git a/demos/quickstart/protected/pages/GettingStarted/Introduction.page b/demos/quickstart/protected/pages/GettingStarted/Introduction.page index 42ee0dad..e52f4acf 100644 --- a/demos/quickstart/protected/pages/GettingStarted/Introduction.page +++ b/demos/quickstart/protected/pages/GettingStarted/Introduction.page @@ -1,7 +1,7 @@ <com:TContent ID="body" >
-<h1 id="101">Welcome to the PRADO QuickStart Tutorial</h1>
+<h1 id="101">Welcome to the PRADO Quickstart Tutorial</h1>
<p>
-This QuickStart tutorial is provided to help you quickly start building your own Web applications based on PRADO version 3.0.
+This Quickstart tutorial is provided to help you quickly start building your own Web applications based on PRADO version 3.0.
</p>
<p>
You may refer to the following resources if you find this tutorial does not fulfill all your needs.
diff --git a/demos/quickstart/protected/pages/Search.page b/demos/quickstart/protected/pages/Search.page index ae7f07bc..43c0cce4 100644 --- a/demos/quickstart/protected/pages/Search.page +++ b/demos/quickstart/protected/pages/Search.page @@ -7,11 +7,11 @@ <com:TRepeater id="quickstart_results">
<prop:HeaderTemplate>
<div class="searchHeader">
- Found <%# $this->Parent->Data->Count %> results in quickstart tutorial.
+ Found <%# $this->Parent->Data->Count %> results in the Quickstart Tutorial.
</div>
</prop:HeaderTemplate>
<prop:ItemTemplate>
- <div class="searchItem">
+ <div class="searchItem">
<div class="searchItemLink">
<%# $this->ItemIndex + 1 %>.
<a href="<%# $this->DataItem->link %>">
@@ -25,5 +25,5 @@ <com:TPanel id="emptyResult" CssClass="empty_search_result" Visible="false">
No results available for "<%= htmlentities($this->Page->search->Text) %>".
</com:TPanel>
-</div>
+</div>
</com:TContent>
\ No newline at end of file |