-PRADO uses caching techniques to ensure the efficiency of asset publishing. Publishing an asset essentially requires file copy operation, which is expensive. To save unnecessary file copy operations, System.Web.TAssetManager only publishes an asset when it has a newer file modification time than the published file. When an application runs under the Performance mode, such timestamp checkings are also omitted. +PRADO uses caching techniques to ensure the efficiency of asset publishing. Publishing an asset essentially requires file copy operation, which is expensive. To save unnecessary file copy operations, System.Web.TAssetManager only publishes an asset when it has a newer file modification time than the published file. When an application runs under the Performance mode, such timestamp checking is also omitted.
ADVISORY: Do not overuse asset publishing. The asset concept is mainly used to help better reuse and redistribute component classes. Normally, you should not use asset publishing for resources that are not bound to any component in an application. For example, you should not use asset publishing for images that are mainly used as design elements (e.g. logos, background images, etc.) Let Web server to directly serve these images will help improve the performance of your application. diff --git a/demos/quickstart/protected/pages/Advanced/Collections.page b/demos/quickstart/protected/pages/Advanced/Collections.page index 7fc3443d..84883be4 100644 --- a/demos/quickstart/protected/pages/Advanced/Collections.page +++ b/demos/quickstart/protected/pages/Advanced/Collections.page @@ -2,7 +2,7 @@
-Collection is a basic data structure in programming. In traditional PHP programming, array is used widely to represent collection data structure. A PHP array is a mix of cardinal-indxed array and hash table. +Collection is a basic data structure in programming. In traditional PHP programming, array is used widely to represent collection data structure. A PHP array is a mix of cardinal-indexed array and hash table.
To enable object-oriented manipulation of collections, PRADO provides a set of powerful collection classes. Among them, the TList and TMap are the most fundamental and usually serve as the base classes for other collection classes. Since many PRADO components have properties that are of collection type, it is very important for developers to master the usage of PRADO collection classes. diff --git a/demos/quickstart/protected/pages/Advanced/Error.page b/demos/quickstart/protected/pages/Advanced/Error.page index 9d5e3037..a0765c10 100644 --- a/demos/quickstart/protected/pages/Advanced/Error.page +++ b/demos/quickstart/protected/pages/Advanced/Error.page @@ -7,7 +7,7 @@ PRADO provides a complete error handling and reporting framework based on the PH
-Errors occur in a PRADO application may be classified into three categories: those caused by PHP script parsing, those caused by wrong code (such as calling an undefined function, setting an unknown property), and those caused by improper use of the Web application by client users (such as attempting to access restricted pages). PRADO is unable to deal with the first category of errors because they cannot be caughted in PHP code. PRADO provides an exception hierarchy to deal with the second and third categories. +Errors occur in a PRADO application may be classified into three categories: those caused by PHP script parsing, those caused by wrong code (such as calling an undefined function, setting an unknown property), and those caused by improper use of the Web application by client users (such as attempting to access restricted pages). PRADO is unable to deal with the first category of errors because they cannot be caught in PHP code. PRADO provides an exception hierarchy to deal with the second and third categories.
All errors in PRADO applications are represented as exceptions. The base class for all PRADO exceptions is TException. It provides the message internationalization functionality to all system exceptions. An error message may be translated into different languages according to the user browser's language preference.
@@ -21,7 +21,7 @@ Exceptions raised due to improper usage of the PRADO framework inherit from
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).
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.
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.
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() %>".
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:
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
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:
TNumberFormat
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
-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- 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 SergJavaScript 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.
- 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.
- 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.- 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:
- 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.
- 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.
- 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.
- 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.
- 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.)
- 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.
- 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.
- 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.
- 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.
- 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.
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.
-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, prototAs 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()- 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.
- 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)
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.
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.
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.
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.
You can even join on the end of the block.
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.
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.
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.
-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.
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.
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.
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.
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:
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.
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:
-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.
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:
And lets say we wanted to keep track of what has been typed :
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).
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.
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.
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.
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:
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.
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
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.
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.
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.
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.
Now we can remove the event listeners from our list like this:
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.
-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,
-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 @@
-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.
-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.
-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.
-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,