From 79611edbd514621fa5cf61c92556f94ed5d203dc Mon Sep 17 00:00:00 2001 From: xue <> Date: Sun, 9 Jul 2006 13:08:10 +0000 Subject: Spelling error fixes. --- demos/quickstart/protected/controls/TopicList.tpl | 2 +- .../protected/pages/Advanced/Assets.page | 2 +- .../protected/pages/Advanced/Collections.page | 2 +- .../quickstart/protected/pages/Advanced/Error.page | 4 +- .../quickstart/protected/pages/Advanced/I18N.page | 52 +++--- .../protected/pages/Advanced/Logging.page | 4 +- .../protected/pages/Advanced/Scripts.page | 178 ++++++++++----------- .../protected/pages/Advanced/Scripts1.page | 156 +++++++++--------- .../protected/pages/Advanced/Scripts2.page | 144 ++++++++--------- .../protected/pages/Advanced/Scripts3.page | 22 +-- .../protected/pages/Advanced/Security.page | 8 +- .../quickstart/protected/pages/Advanced/State.page | 2 +- .../protected/pages/Advanced/Themes.page | 8 +- demos/quickstart/protected/pages/Comments.page | 46 ------ demos/quickstart/protected/pages/Comments.php | 76 --------- .../protected/pages/Controls/ClientScript.page | 28 ++-- .../protected/pages/Controls/DataGrid.page | 10 +- .../protected/pages/Controls/DataList.page | 2 +- .../protected/pages/Controls/DatePicker.page | 34 ++-- .../protected/pages/Controls/HtmlArea.page | 4 +- .../protected/pages/Controls/JavascriptLogger.page | 4 +- .../protected/pages/Controls/NewControl.page | 6 +- .../quickstart/protected/pages/Controls/Panel.page | 2 +- .../protected/pages/Controls/Repeater.page | 2 +- .../protected/pages/Controls/Validation.page | 4 +- .../protected/pages/Controls/Wizard.page | 6 +- .../pages/GettingStarted/Introduction.page | 4 +- demos/quickstart/protected/pages/Search.page | 6 +- 28 files changed, 348 insertions(+), 470 deletions(-) delete mode 100644 demos/quickstart/protected/pages/Comments.page delete mode 100644 demos/quickstart/protected/pages/Comments.php (limited to 'demos') diff --git a/demos/quickstart/protected/controls/TopicList.tpl b/demos/quickstart/protected/controls/TopicList.tpl index f26b75a6..1302338d 100644 --- a/demos/quickstart/protected/controls/TopicList.tpl +++ b/demos/quickstart/protected/controls/TopicList.tpl @@ -62,7 +62,7 @@
-
Avanced Topics
+
Advanced Topics
@@ -26,7 +26,7 @@

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).

Configuration

-

To enable the localization features in Prado, you need to add a few configuration options in your application configuration. +

To enable the localization features in PRADO, you need to add a few configuration options in your application configuration. First you need to include the System.I18N.* namespace to your paths.

@@ -98,7 +98,7 @@ Lastly, you can change the globalization settings on page by page basis using -

Localizing your Prado application

+

Localizing your PRADO application

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 localize function detailed below. To localize text in the template, use the TTranslate component.

Using localize function to translate text within PHP

@@ -134,7 +134,7 @@ $message = Prado::localize("There are {num_users} users online.", array('num_use

Where the second parameter in localize takes an associative array with the key as the substitution to find in the text and replaced it with the associated value. The localize function does not solve the problem of localizing languages that have plural forms, the solution is to use TChoiceFormat.

-

The following sample demonstrates the basics of localization in Prado.

+

The following sample demonstrates the basics of localization in PRADO.

I18N Components

@@ -148,9 +148,9 @@ To translate a message or string in the template, use TTranslate.

<com:TTranslate Text="Goodbye" /> -

TTranslate can also perform string substitution. +

TTranslate can also perform string substitution. The Parameters 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 "Parameters.time=<%= time() %>". + parameter names during substitution lookup. The following example will substitute the substring "{time}" with the value of the parameter attribute "Parameters.time=<%= time() %>". <com:TTranslate Parameters.time=<%= time() %> > The time is {time}. @@ -183,17 +183,17 @@ The time is {time}.

  • mediumtime
  • shorttime
    • -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 Culture property.

    <com:TDateFormat Pattern="fulldate shorttime" /> -

    You can also specify a custom pattern using the following sub-patterns. +

    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: Symbol Meaning Presentation Example @@ -222,22 +222,22 @@ The date/time format is specified by means of a string time pattern. In this pat

    The count of pattern letters determine the format.

    -

    (Text): 4 letters uses full form, less than 4, use short or abbreviated form +

    (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")

    (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.

    -

    (Text and Number): 3 or over, use text, otherwise use number. (e.g., -"M" produces "1", "MM" produces "01", "MMM" produces "Jan", and "MMMM" +

    (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".)

    -

    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 +

    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.

    Examples using the US locale: @@ -259,7 +259,7 @@ Format Pattern Result

    TNumberFormat

    PRADO's Internationalization framework provide localized currency formatting and number formatting. Please note that the TNumberFormat component provides formatting only, it does not perform current conversion or exchange.

    -

    Numbers can be formatted as currency, percentage, decimal or scientific +

    Numbers can be formatted as currency, percentage, decimal or scientific numbers by specifying the Type attribute. The valid types are:

    - + <com:TNumberFormat Type="currency" Value="100" /> @@ -283,13 +283,13 @@ then also from the de_DE locale. This may lead to some confusion becaus people from US uses the "," (comma) as thousand separator. Therefore a Currency attribute is available, so that the output from the following example results in $100.00 -<com:TNumberFormat Type="currency" +<com:TNumberFormat Type="currency" Culture="en_US" Currency="EUR" Value="100" />

    -

    The Pattern property determines the number of digits, thousand grouping -positions, the number of decimal points and the decimal position. The actual characters that +

    The Pattern 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 Culture property. The valid Pattern characters are: @@ -299,7 +299,7 @@ and will change automatically according to the Culture property. The va

  • . (full stop) - the position of the decimal point (only 1 decimal point is allowed)
  • , (comma) - thousand point separation (up to 2 commas are allowed)
    • -For example, consider the Value="1234567.12345" and +For example, consider the Value="1234567.12345" and with Culture="en_US" (which uses "," for thousand point separator and "." for decimal separators). 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 System.Util.TLogger include : DEBUG, INFO, NOTICE, WARNING, ERROR, ALERT, FATAL. Messages can be filtered according log level criteria. For example, if a filter specifies WARNING and ERROR levels, then only those messages that are of WARNING and ERROR will be 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, System.Web category is the ancestor of System.Web.UI and System.Web.UI.WebControls categories. Messages can be selectively retrieved using such hierarchical category filters. For example, if the category filter is System.Web, then all messages in the System.Web are returned. In addition, messages in the childd categories, such as System.Web.UI.WebControls, 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, System.Web category is the ancestor of System.Web.UI and System.Web.UI.WebControls categories. Messages can be selectively retrieved using such hierarchical category filters. For example, if the category filter is System.Web, then all messages in the System.Web are returned. In addition, messages in the child categories, such as System.Web.UI.WebControls, are also returned.

    -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 TPage will be of category System.Web.UI.TPage. +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 TPage will be of category System.Web.UI.TPage.

    \ 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 by Serg

    Hey, I didn't know you could do that

    - 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.

    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.

    - 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.

    - 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 - Prototype.js, - Scriptaculous, - moo.fx, - Behaviour, - YUI, - 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 + Prototype.js, + Scriptaculous, + moo.fx, + Behaviour, + YUI, + 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.

    - 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.

    @@ -52,12 +52,12 @@ Quick guide to somewhat advanced JavaScript tour of some OO features by Serg

    JSON (JavaScript Object Notation)

    JavaScript Object Notation (JSON,) 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.

    -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!');} }; @@ -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:

    -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 = };

    - Here we created a reference to an object with two properties (color - and legCount) and a method (communicate.) + Here we created a reference to an object with two properties (color + and legCount) and a method (communicate.) 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 myPet, + After the object is created and assigned to the variable myPet, we can use it like this:

    @@ -95,13 +95,13 @@ alert('my pet has ' + myPet.legCount + ' legs'); myPet.communicate(3);

    - 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.

    What do you mean? A function is an object too?

    - 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.

    @@ -110,7 +110,7 @@ myPet.communicate(3); Take a look at this example. We will pass functions to another function that will use them.

    -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);

    - Note that we pass myDog.bark and myCat.meow without appending parenthesis - "()" 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 + "()" 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, undefined in both cases here.

    @@ -162,7 +162,7 @@ var a = new Array(); var b = [];

    - 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:

    @@ -173,8 +173,8 @@ var v3 = a[2];

    - 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.

    @@ -187,7 +187,7 @@ obj['some_function'] = function(){ /* do something */}; The above code has identical effect as the following:

    -var obj = +var obj = { member_1:'this is the member value', flag_2: false, @@ -196,7 +196,7 @@ var obj =

    - 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.

    @@ -208,8 +208,8 @@ obj['some_function']();

    Enough about objects, may I have a class now?

    - 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.

    @@ -225,27 +225,27 @@ var famousDog = new Pet('Santa\'s Little Helper', 15); alert('This pet is called ' + famousDog.name);

    - Let's see how we add a method to our Pet class. We will be using the - prototype property that all classes have. The prototype - property is an object that contains all the members that any object of the class will have. - Even the default JS classes, like String, Number, - and Date have a prototype object that we + Let's see how we add a method to our Pet class. We will be using the + prototype property that all classes have. The prototype + property is an object that contains all the members that any object of the class will have. + Even the default JS classes, like String, Number, + and Date have a prototype object that we can add methods and properties to and make any object of that class automatically gain this new member.

    Pet.prototype.communicate = function() -{ +{ alert('I do not know what I should say, but my name is ' + this.name); };

    - That's when a library like prototype.js comes in + That's when a library like prototype.js comes in handy. If we are using prototype.js, we can make our code look cleaner (at least in my opinion.)

    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); } -}; +};

    Functions as arguments, an interesting pattern

    @@ -275,15 +275,15 @@ myArray.each( function(item, index)

    - 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.

    - 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.

    @@ -296,24 +296,24 @@ var myArray = ['first', 'second', 'third']; myArray.each( myIterator );

    - 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.

    This is this but sometimes this is also that

    - One of the most common troubles we have with JS when we start writing our code - it the use of the this 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 this keyword. It could be a real tripwire.

    - 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.

    Take this code snippet as an example. @@ -331,15 +331,15 @@ myButton2.onclick = buttonClicked;

    Because the buttonClicked function is defined outside any object we may tend to - think the this keyword will contain a reference to - the window or document + think the this keyword will contain a reference to + the window or document object (assuming this code is in the middle of an HTML page viewed in a browser.)

    But when we run this code we see that it works as intended and displays the id of - the clicked button. What happened here is that we made the onclick method of each button contain the - buttonClicked 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 + buttonClicked object reference, replacing whatever was there before. Now whenever the button is clicked, the browser will execute something similar to the following line.

    @@ -347,11 +347,11 @@ myButton.onclick();

    - 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.

    -var myHelper = +var myHelper = { formFields: [ ], emptyAllFields: function() @@ -377,18 +377,18 @@ var clearButton = document.getElementById('btnClear'); clearButton.onclick = myHelper.emptyAllFields;

    - 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 this keyword. - The problem is that this.formFields is not defined if - this 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 this keyword. + The problem is that this.formFields is not defined if + this contains a referece to the button, which is precisely what's happening. One quick solution would be to rewrite our last line of code.

    clearButton.onclick = function() -{ - myHelper.emptyAllFields(); +{ + myHelper.emptyAllFields(); };

    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 by Sergio Pereira.

    What is that?

    -In case you haven't already used it, prototype.js is a - JavaScript library written by Sam Stephenson. +In case you haven't already used it, prototype.js is a + JavaScript library written by Sam Stephenson. This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.

    @@ -20,7 +20,7 @@ In case you haven't already used it, protot

    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.

    @@ -32,7 +32,7 @@ In case you haven't already used it,     protot

    - 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 $() will return an Array object with all the requested elements. The example below should illustrate this.

    @@ -76,7 +76,7 @@ function test2()

    Using the $F() function

    - The $F() function is a another welcome shortcut. It returns the value of any field input control, + The $F() 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 id or the element object itself.

    @@ -100,9 +100,9 @@ function test3() into an Array object.

    - This function, combined with the extensions for the Array class, - makes it easier to convert or copy any enumerable list into an - Array 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 + Array object. One suggested use is to convert DOM NodeLists into regular arrays, which can be traversed more efficiently. See example below.

    @@ -113,8 +113,8 @@ function test3() - - + +

    - 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>

    -

    @@ -309,21 +309,21 @@ function showLocalLinks(paragraph)

    Enumerable Functions

    The sample data for the following examples. -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;

    Enumerable.each function

    -

    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, +

    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. -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 each function allows us to iterate over these objects Ruby style.

    -F.Numbers.each(function(num) +F.Numbers.each(function(num) { Logger.info(num); }); @@ -363,14 +363,14 @@ F.Numbers.each(function(num) 9 -

    The each function takes one argument, an iterator 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 +

    The each function takes one argument, an iterator 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.

    -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)

    Hash key/value pairs

    -

    Hashes can be created by wrapping an Object (associative array) in +

    Hashes can be created by wrapping an Object (associative array) in $H() and can have their key/value pairs exposed.

    -$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

    $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

    Enumerable.collect function

    -

    The collect function allows you to iterate over an Array and return the -results as a new array. Each item returned as a result of the iteration will be +

    The collect function allows you to iterate over an Array 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.

    -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(', '));

    You can even join on the end of the block.

    -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)

    Enumerable.include function

    -

    The include 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, +

    The include 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.

    @@ -450,11 +450,11 @@ return F.Artists.include('Britney Spears'); // returns false

    Enumerable.inject function

    -

    The inject function is good for getting a collective sum from an array of +

    The inject function is good for getting a collective sum from an array of values. For instance, to add up all the numbers.

    -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 -

    The first argument to inject is just an initial value that +

    The first argument to inject 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.

    Enumerable.findAll function

    -When given an Array, the findAll 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 findAll 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.

    -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 -

    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, +

    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, ecom.company would return undefined.

    Enumerable.detect function

    -

    Unlike the findAll function, the detect 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 +

    Unlike the findAll function, the detect 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.

    -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 -

    Even though, there are other numbers above 5 in our array, detect +

    Even though, there are other numbers above 5 in our array, detect only gives us the first match back.

    Enumerable.invoke function

    -

    The invoke function allows us to pass a method as a string and -have that method invoked. For instance, if we wanted to sort +

    The invoke 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:

    @@ -520,7 +520,7 @@ our array of artists we’d do something like this:

    //Outputs 36 Crazyfist,As I Lay Dying,In Flames,Shadows Fall,Trivium     -

    Why not just use F.Artists.sort? Well, for the example above +

    Why not just use F.Artists.sort? Well, for the example above we could do just that, but here is where invoke shines.

    @@ -533,8 +533,8 @@ we could do just that, but here is where invoke shines.

    F.Artists.invoke('sort');     -

    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, +

    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:

    @@ -548,8 +548,8 @@ F.Artists.invoke('toLowerCase');

    -Now, what about passing arguments to the invoke function? -The first argument passed to invoke is the method to be invoked, +Now, what about passing arguments to the invoke function? +The first argument passed to invoke is the method to be invoked, and any other arguments beyond that will be passed as arguments to the invoked method.

    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]); -

    Assuming for a moment that we want to observe when a link was clicked, +

    Assuming for a moment that we want to observe when a link was clicked, we could do the following:

    // <a id="clicker" href="http://foo.com">Click me</a> Event.observe('clicker', 'click', function(event) -{ +{ alert('clicked!'); }); @@ -24,7 +24,7 @@ Event.observe('clicker', 'click', function(event) Event.observe('clicker', 'click', function(event) -{ +{ alert(Event.element(event)); }); @@ -35,8 +35,8 @@ Event.observe('clicker', 'click', function(event) Event.observe(document, 'keypress', function(event) -{ - if(Event.keyCode(event) == Event.KEY_TAB) +{ + if(Event.keyCode(event) == Event.KEY_TAB) alert('Tab Pressed'); }); @@ -44,37 +44,37 @@ Event.observe(document, 'keypress', function(event)

    And lets say we wanted to keep track of what has been typed :

    -Event.observe('search', 'keypress', function(event) -{ +Event.observe('search', 'keypress', function(event) +{ Element.update('search-results', $F(Event.element(event))); }); -

    Prototype defines properties inside the event object for some -of the more common keys, so feel free to dig around in Prototype to +

    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.

    -

    A final note on keypress events; If you'd like to detect a +

    A final note on keypress events; If you'd like to detect a left click you can use Event.isLeftClick(event).

    Getting the coordinates of the mouse pointer

    -

    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 +

    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.

    Event.observe(document, 'mousemove', function(event) { - $('mouse').value = "X: " + Event.pointerX(event) + + $('mouse').value = "X: " + Event.pointerX(event) + "px Y: " + Event.pointerY(event) + "px"; }); -

    If we wanted to observe the mouse location when it was -hovering over a certain element, we'd just change the document argument to +

    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.

    Stopping Propagation

    @@ -83,33 +83,33 @@ the id or element that was relevant.

    Events, Binding, and Objects

    -

    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 +

    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.

    Lets look at some code so you can get a better understanding of what I'm talking about.

    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"; } } -

    Whoa! What's going on here? Well, we've defined our a -custom class EventDispenser. 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 +

    Whoa! What's going on here? Well, we've defined our a +custom class EventDispenser. 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.

    -

    Looking at the initialize method, we can really see how +

    Looking at the initialize method, we can really see how things are different now. Take a look at the code below:

    -// 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)); -

    We've got iterators, binding and all sorts of stuff going on. +

    We've got iterators, binding and all sorts of stuff going on. Lets break down what this chunk of code is doing.

    -

    First we are hunting for a collection of elements based on -it's Css selector. This uses the Prototype selector function $$(). -After we've found the list items we are dealing with we send +

    First we are hunting for a collection of elements based on +it's CSS selector. This uses the Prototype selector function $$(). +After we've found the list items we are dealing with we send those into an each iteration where we will add our observers.

    Event.observe(item, 'click', this.showTagName.bindEvent(this)); -

    Now looking at the code above, you'll notice the bindEvent function. -This takes the method before it showTagName and treats it as the -method that will be triggered when, in this case, +

    Now looking at the code above, you'll notice the bindEvent function. +This takes the method before it showTagName and treats it as the +method that will be triggered when, in this case, someone clicks one of our list items.

    -

    You'll also notice we pass this as an argument to the bindEvent function. -This simply allows us to reference the object in context EventDispenser +

    You'll also notice we pass this as an argument to the bindEvent function. +This simply allows us to reference the object in context EventDispenser inside our function showTagName(event). If the showTagName function requires additional parameters, you can attach them to the later parameters of bindEvent. For example

    @@ -185,58 +185,58 @@ this.showTagName.bindEvent(this, param1, param2); showTime : function (event, param1, param2) { ... } -

    Moving on, you'll see bind(this) attached to our iterator function. -This really has nothing to do with events, it is only here to allow me to -use this inside the iterator. If we didn't use bind(this), I couldn't +

    Moving on, you'll see bind(this) attached to our iterator function. +This really has nothing to do with events, it is only here to allow me to +use this inside the iterator. If we did not use bind(this), I could not reference the method showTagName inside the iterator.

    -

    Ok, so we'll move on to looking at our methods that actually get +

    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 showTagName, lets look at it.

    -showTagName: function(event) +showTagName: function(event) { alert(Event.element(event).tagName); } -

    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 +

    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 Event.element. Now we can manipulate it at will.

    -

    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 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.

    Removing Event Listeners

    -

    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 Event.observe -call with the exception of using stopObserving, but nothing seemed +

    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 Event.observe +call with the exception of using stopObserving, but nothing seemed to change. In other words, the code below does NOT work.

    -$$(this.list + " li").each(function(item) +$$(this.list + " li").each(function(item) { Event.stopObserving(item, 'click', this.showTagName); }.bind(this)); -

    What's the deal here? The reason this doesn't work is because there +

    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 this.showTagName -in the Event.observe 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.

    +in the Event.observe 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.

    -

    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 +

    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 this.showTagName. Ok, lets change our code a bit.

    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)

    Now we can remove the event listeners from our list like this:

    -$$(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 @@ -

    Javascript in Prado, Questions and Answers

    -

    How do I include the predefined javascript libraries?

    +

    Javascript in PRADO, Questions and Answers

    +

    How do I include the predefined Javascript libraries?

    • Adding libraries in the template <com:TClientScript UsingPradoScripts="effects" /> - -
      • + +
    • Adding libraries in PHP code -$this->getPage()->getClientScript()->registerPradoScript("effects"); +$this->getPage()->getClientScript()->registerPradoScript("effects");
      • -
    -The available packaged libraries included in Prado are + +The available packaged libraries included in Prado are
      -
    • prado : basic prado javascript framework based on Prototype
      • +
    • prado : basic PRADO javascript framework based on Prototype
    • effects : visual effects from script.aculo.us
    • ajax : ajax and callback related based on Prototype
    • validator : validation
      • @@ -24,12 +24,12 @@ The available packaged libraries included in Prado are
    • colorpicker : colorpicker
    -

    The dependencies for each library are automatically resolved. Components +

    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 datapicker +For example, if you add a TDatePicker component on the page, the datepicker and its dependencies will be automatically included on the page.

    See TClientScript for options of adding - your custom javascript code to the page.

    + your custom Javascript code to the page.

    \ 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.

    -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.

    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 TSecurityManager 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.

    -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.

    PRADO incorporates the work of SafeHTML and provides developers with a useful component called TSafeHtml. By enclosing content within a TSafeHtml component tag, the enclosed content are ensured to be safe to end users. In addition, the commonly used TTextBox has a SafeText 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.

  • Validate cookie data and detect if they are altered.

    • -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.

    Cookie validation is disabled by default. To enable it, configure the THttpRequest module as follows, @@ -62,7 +62,7 @@ Cookie validation is disabled by default. To enable it, configure the THttpR

    -To make use of cookie validation scheme provided by Prado, you also need to retrieve cookies through the Cookies collection of THttpRequest by using the following PHP statements, +To make use of cookie validation scheme provided by PRADO, you also need to retrieve cookies through the Cookies collection of THttpRequest by using the following PHP statements,

    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

    View State

    -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.

    View state is only available to controls. View state of a control can be disabled by setting its EnableViewState 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 @@

    Introduction

    -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 PageSize property of the TDataGrid 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 PageSize property of the TDataGrid control.

    Understanding Themes

    -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 SkinID. When applying a theme to a page, a skin is applied to a control if the control type and the SkinID value both match to those of the skin. Note, if a skin has an empty SkinID value, it will apply to all controls of the particular type whose SkinID 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 SkinID. When applying a theme to a page, a skin is applied to a control if the control type and the SkinID value both match to those of the skin. Note, if a skin has an empty SkinID value, it will apply to all controls of the particular type whose SkinID 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.

    Using Themes

    @@ -26,7 +26,7 @@ To use a particular skin in the theme for a control, set SkinID 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 StyleSheetTheme property of the page instead of Theme (you can have both StyleSheetTheme and Theme).

    -To use the javascript files and CSS files contained in a theme, a THead control must be placed on the page template. This is because the theme will register those files with the page and THead is the right place to load those files. +To use the Javascript files and CSS files contained in a theme, a THead control must be placed on the page template. This is because the theme will register those files with the page and THead is the right place to load those files.

    Theme Storage

    @@ -46,7 +46,7 @@ All themes by default must be placed under the [AppEntryPath]/themes di

    Creating Themes

    -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 .skin. 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 TButton, 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 .skin. 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 TButton, write the following in a skin file,

    <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 @@ - - - - - Comments awaiting approval - - - - <%# $this->DataItem['page'] %> - - DataItem['date_added']) %> /> - - -
    - - <%# $this->DataItem['comment']%> - -
    - - - -     - - - DataItem['email'] %> /> - DataItem['page'] %> /> - DataItem['comment'] %> TextMode="MultiLine"/> - - - - -     -     \ 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 @@ - - * @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 7c643a82..d5687fb1 100644 --- a/demos/quickstart/protected/pages/Controls/ClientScript.page +++ b/demos/quickstart/protected/pages/Controls/ClientScript.page @@ -4,20 +4,20 @@

    Including Bundled Javascript Libraries in Prado

    -TClientScript 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 -UsingPradoScripts property. Multiple bundled javascript libraries -can be specified using comma delimited string of the name of javascript library +TClientScript 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 +PradoScripts 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.

    -<com:TClientScript UsingPradoScripts="ajax, effects" /> +<com:TClientScript PradoScripts="ajax, effects" />

    - The available bundled libraries included in Prado are + The available bundled libraries included in Prado are

    • prado : basic prado javascript framework based on Prototype
    • effects : visual effects from script.aculo.us
      • @@ -29,12 +29,12 @@ to include on the page. For following example will include the "ajax" and "effec
    • colorpicker : colorpicker

    -

    The dependencies for each library are automatically resolved. That is, +

    The dependencies for each library are automatically resolved. That is, specifying, say the "ajax", will also include the "prado" library.

    - +

    Including Custom Javascript Files

    -

    Custom javascript files can be register using the ScriptUrl property. -The following example includes the javascript file "test.js" to the page. In this case, the file +

    Custom Javascript files can be register using the ScriptUrl 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 dynamic asset tag, 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:TClientScript ScriptUrl=<%~ test.js %> /> -

    You can include javascript files from other servers by specifying the full URL string in +

    You can include Javascript files from other servers by specifying the full URL string in the ScriptUrl property.

    Including Custom Javascript Code Blocks

    Any content within the TClientScript control tag will be considered as - javascript code and will be rendered where it is declared.

    + Javascript code and will be rendered where it is declared.

    \ 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 DataSource or DataSourceID are bound to the rows and feed contents to cells.

    -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.

    -Rows of TDataGrid can be accessed via its Items 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 EditItemIndex or SelectedItemIndex. Note, if an item is in edit mode, then selecting this item will have no effect. +Rows of TDataGrid can be accessed via its Items 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 EditItemIndex or SelectedItemIndex. Note, if an item is in edit mode, then selecting this item will have no effect.

    Columns

    -Columns of a data grid determine how the associated cells are displayed. For example, cells associated with a TBoundColumn 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 TBoundColumn 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.

    PRADO provides five types of columns: @@ -103,7 +103,7 @@ The following example uses manually specified columns to show a list of book inf

  • Publisher - displayed as a piece of text using TBoundColumn.
  • Price - displayed as a piece of text using TBoundColumn with output formatting string and customized styles.
  • In-stock or not - displayed as a checkbox using TCheckBoxColumn.
    • -
  • Rating - displayed as an image using TTemplateColumn which allows maximum freedom in specifiying cell contents.
    • +
  • Rating - displayed as an image using TTemplateColumn which allows maximum freedom in specifying cell contents.

    • Pay attention to how item (row) styles and column styles cooperate together to affect the appearance of the cells in the datagrid.

    @@ -111,7 +111,7 @@ The following example uses manually specified columns to show a list of book inf

    Interacting with TDataGrid

    -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 TBoundColumn 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 TEditCommandColumn for switching item modes. In addition, TButtonColumn 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 TBoundColumn 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 TEditCommandColumn for switching item modes. In addition, TButtonColumn offers developers the flexibility of creating arbitrary buttons for various user interactions.

    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: TEditCommandColumn and TButtonColumn. 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

    -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.

    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, DataKeys 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 @@

    TDatePicker

    -

    TDatePicker displays a text box for date input purpose. +

    TDatePicker 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 DateFormat property. Valid formats are the combination of the following tokens: - - + + Character Format Pattern (en-US) --------------------------------------------------------------------- d day digit @@ -32,7 +32,7 @@ only accepts integers such as the Unix timestamp.

    -TDatePicker has three Mode to show the date picker popup. +TDatePicker has three Mode to show the date picker popup.

    • Basic - Only shows a text input, focusing on the input shows the date picker.
    • Button - Shows a button next to the text input, clicking on the button shows the date, button text can be by the ButtonText property.
      • @@ -40,8 +40,8 @@ TDatePicker has three Mode to show the date picker popup.

    -

    The CssClass property can be used to override the css class name -for the date picker panel. The CalendarStyle property changes the overall calendar style. +

    The CssClass property can be used to override the CSS class name +for the date picker panel. The CalendarStyle property changes the overall calendar style. The following CalendarStyle values are available:

    • default - The default calendar style.
      • @@ -50,9 +50,9 @@ The following CalendarStyle values are available:

      The InputMode property can be set to "TextBox" or "DropDownList" with default as "TextBox". In DropDownList 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 InputMode equals "DropDownList", the order and appearance of the date, month, and year -will depend on the pattern specified in DateFormat property. +will depend on the pattern specified in DateFormat property.

      The popup date picker can be hidden by specifying ShowCalendar as false. Much of the @@ -64,20 +64,20 @@ where FromYear is the starting year and UpToYear is the last y The starting day of the week can be changed by the FirstDayOfWeek property, with 0 as Sunday, 1 as Monday, etc.

      -

      Note 1: If the InputMode is "TextBox", the DateFormat should -only NOT contain MMM or MMMM patterns. The +

      Note 1: If the InputMode is "TextBox", the DateFormat should +only NOT contain MMM or MMMM patterns. The server side date parser will not be able to determine the correct date if MMM or MMMM are used. When InputMode equals "DropDownList", all patterns can be used.

      - +

      Note 2: When the TDatePicker is used together -with a validator, the DateFormat property of the validator must be equal to -the DateFormat of the TDatePicker AND must set DataType="Date" -on the validator to ensure correct validation. See +with a validator, the DateFormat property of the validator must be equal to +the DateFormat of the TDatePicker AND must set DataType="Date" +on the validator to ensure correct validation. See TCompareValidator, -TDataTypeValidator and -TRangeValidator +TDataTypeValidator and +TRangeValidator for details.

      - + \ 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

      -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. 

      @@ -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
 ----------------------------------------------------
      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 @@

      -TJavascriptLogger provides logging for client-side javascript. It is mainly a wrapper of the javascript developed at http://gleepglop.com/javascripts/logger/. +TJavascriptLogger provides logging for client-side javascript. It is mainly a wrapper of the Javascript developed at http://gleepglop.com/javascripts/logger/.

      @@ -15,7 +15,7 @@ To use TJavascriptLogger, simply place the following component tag in a

      -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.

      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 subproperties.

      -One can compose a new control in two ways. One is to extend TCompositeControl and override the TControl::createChildControls() method. The other is to extend TTemplateControl (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 TCompositeControl and override the TControl::createChildControls() method. The other is to extend TTemplateControl (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.

      As an example, we show how to create a labeled textbox called LabeledTextBox using the above two approaches. A labeled textbox displays a label besides a textbox. We want reuse the PRADO provided TLabel and TTextBox to accomplish this task. @@ -130,8 +130,8 @@ Other important properties and methods include: TWebControl 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 TControl::render() into the following methods that are more suitable for rendering an HTML element:

        -
      • addAttributesToRender() - 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.
        • -
      • renderBeginTag() - renders the openning HTML tag.
        • +
      • addAttributesToRender() - 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.
        • +
      • renderBeginTag() - renders the opening HTML tag.
      • renderContents() - renders the content enclosed within the HTML element. By default, it displays the items in the Controls collection of the control. Derived classes may override this method to render customized contents.
      • renderEndTag() - renders the closing HTML tag.
      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 @@

      -TPanel acts as a presentational container for other control. It displays a <div> element on a page. The property Wrap specifies whether the panel's body content should wrap or not, while HorizontalAlign governs how the content is aligned horizontally and Direction indicates the content direction (left to right or right to left). You can set BackImageUrl to give a background image to the panel, and you can ste GroupingText 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 DefaultButton property. +TPanel acts as a presentational container for other control. It displays a <div> element on a page. The property Wrap specifies whether the panel's body content should wrap or not, while HorizontalAlign governs how the content is aligned horizontally and Direction indicates the content direction (left to right or right to left). You can set BackImageUrl to give a background image to the panel, and you can set GroupingText 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 DefaultButton property.

      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 DataSource or DataSourceID property. The repeated contents can be retrieved from the Items property. Each item is created by instantiating a template and each is a child control of the repeater.

      -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,

      • HeaderTemplate - the template used for displaying content at the beginning of a repeater;
        • 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
      • Dynamic - 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).
      -
    • ControlCssClass - the Css class that is applied to the control being validated in case the validation fails.
      • +
    • ControlCssClass - the CSS class that is applied to the control being validated in case the validation fails.
    • FocusOnError - set focus at the validating place if the validation fails. Defaults to false.
    • FocusElementID - the ID of the HTML element that will receive focus if validation fails and FocusOnError is true.
    @@ -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.

    - +

    TCompareValidator

    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, TWizard supports three different ways of navigation among them:

      -
    • 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 TWizard supports.
      • -
    • 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 AllowReturn property to false.
      • +
    • 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 TWizard supports.
      • +
    • 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 AllowReturn property to false.
    • Nonlinear - User input in a step determines which step to go next. To do so, set ActiveStepIndex 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.

    Using Templates in Wizard

    -TWizard 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. +TWizard 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.

    • Header - HeaderTemplate.
      • 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 @@ -

      Welcome to the PRADO QuickStart Tutorial

      +

      Welcome to the PRADO Quickstart Tutorial

      -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.

      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 @@

      - Found <%# $this->Parent->Data->Count %> results in quickstart tutorial. + Found <%# $this->Parent->Data->Count %> results in the Quickstart Tutorial.
      -
      +
      <%# $this->ItemIndex + 1 %>. @@ -25,5 +25,5 @@ No results available for "<%= htmlentities($this->Page->search->Text) %>". -
      +
      \ No newline at end of file -- cgit v1.2.3