From 30eddf57c8de433e8ea02b9e552c8e1744a505a7 Mon Sep 17 00:00:00 2001 From: wei <> Date: Sun, 7 May 2006 03:34:25 +0000 Subject: Add search to quickstart demo. --- .../protected/pages/Advanced/Assets.page | 10 +- .../quickstart/protected/pages/Advanced/Auth.page | 8 +- .../quickstart/protected/pages/Advanced/Error.page | 10 +- .../quickstart/protected/pages/Advanced/I18N.page | 28 +- .../protected/pages/Advanced/Logging.page | 8 +- .../protected/pages/Advanced/MasterContent.page | 2 +- .../protected/pages/Advanced/Performance.page | 12 +- .../protected/pages/Advanced/Scripts.page | 397 +++++++++++++++ .../protected/pages/Advanced/Scripts1.page | 561 +++++++++++++++++++++ .../protected/pages/Advanced/Scripts2.page | 253 ++++++++++ .../protected/pages/Advanced/Scripts3.page | 32 ++ .../protected/pages/Advanced/Security.page | 8 +- .../quickstart/protected/pages/Advanced/State.page | 10 +- .../protected/pages/Advanced/Themes.page | 12 +- .../protected/pages/Configurations/AppConfig.page | 2 +- .../protected/pages/Configurations/Overview.page | 2 +- .../protected/pages/Configurations/PageConfig.page | 2 +- .../protected/pages/Configurations/Templates1.page | 10 +- .../protected/pages/Configurations/Templates2.page | 16 +- .../protected/pages/Configurations/Templates3.page | 14 +- .../protected/pages/Controls/Button.page | 2 +- .../protected/pages/Controls/CheckBox.page | 2 +- .../protected/pages/Controls/ColorPicker.page | 2 +- .../quickstart/protected/pages/Controls/Data.page | 2 +- .../protected/pages/Controls/DataGrid.page | 24 +- .../protected/pages/Controls/DataList.page | 2 +- .../protected/pages/Controls/DatePicker.page | 2 +- .../protected/pages/Controls/Expression.page | 2 +- .../protected/pages/Controls/FileUpload.page | 2 +- .../quickstart/protected/pages/Controls/Head.page | 2 +- .../protected/pages/Controls/HiddenField.page | 2 +- .../protected/pages/Controls/HtmlArea.page | 2 +- .../protected/pages/Controls/HyperLink.page | 2 +- .../quickstart/protected/pages/Controls/Image.page | 2 +- .../protected/pages/Controls/ImageButton.page | 2 +- .../protected/pages/Controls/ImageMap.page | 2 +- .../protected/pages/Controls/InlineFrame.page | 2 +- .../protected/pages/Controls/JavascriptLogger.page | 2 +- .../quickstart/protected/pages/Controls/Label.page | 2 +- .../protected/pages/Controls/LinkButton.page | 2 +- .../quickstart/protected/pages/Controls/List.page | 12 +- .../protected/pages/Controls/Literal.page | 2 +- .../protected/pages/Controls/MultiView.page | 2 +- .../protected/pages/Controls/NewControl.page | 18 +- .../quickstart/protected/pages/Controls/Panel.page | 2 +- .../protected/pages/Controls/PlaceHolder.page | 2 +- .../protected/pages/Controls/RadioButton.page | 2 +- .../protected/pages/Controls/Repeater.page | 2 +- .../protected/pages/Controls/SafeHtml.page | 2 +- .../protected/pages/Controls/Statements.page | 2 +- .../quickstart/protected/pages/Controls/Table.page | 2 +- .../protected/pages/Controls/TextBox.page | 2 +- .../protected/pages/Controls/TextHighlighter.page | 2 +- .../protected/pages/Controls/Validation.page | 16 +- .../protected/pages/Controls/Wizard.page | 16 +- .../protected/pages/Fundamentals/Applications.page | 8 +- .../protected/pages/Fundamentals/Architecture.page | 2 +- .../protected/pages/Fundamentals/Components.page | 16 +- .../protected/pages/Fundamentals/Controls.page | 10 +- .../protected/pages/Fundamentals/Hangman.page | 2 +- .../protected/pages/Fundamentals/Modules.page | 12 +- .../protected/pages/Fundamentals/Pages.page | 6 +- .../protected/pages/Fundamentals/Services.page | 4 +- .../protected/pages/GettingStarted/AboutPrado.page | 10 +- .../protected/pages/GettingStarted/HelloWorld.page | 2 +- .../pages/GettingStarted/Installation.page | 2 +- .../pages/GettingStarted/Introduction.page | 2 +- .../protected/pages/GettingStarted/Upgrading.page | 14 +- demos/quickstart/protected/pages/Search.page | 28 + demos/quickstart/protected/pages/Search.php | 53 ++ 70 files changed, 1519 insertions(+), 195 deletions(-) create mode 100644 demos/quickstart/protected/pages/Advanced/Scripts.page create mode 100644 demos/quickstart/protected/pages/Advanced/Scripts1.page create mode 100644 demos/quickstart/protected/pages/Advanced/Scripts2.page create mode 100644 demos/quickstart/protected/pages/Advanced/Scripts3.page create mode 100644 demos/quickstart/protected/pages/Search.page create mode 100644 demos/quickstart/protected/pages/Search.php (limited to 'demos/quickstart/protected/pages') diff --git a/demos/quickstart/protected/pages/Advanced/Assets.page b/demos/quickstart/protected/pages/Advanced/Assets.page index d69a1bcd..e79f4ecf 100644 --- a/demos/quickstart/protected/pages/Advanced/Assets.page +++ b/demos/quickstart/protected/pages/Advanced/Assets.page @@ -1,6 +1,6 @@ -

Assets

+

Assets

Assets are resource files (such as images, sounds, videos, CSS stylesheets, javascripts, etc.) that belong to specific component classes. Assets are meant to be provided to Web users. For better reusability and easier deployment of the corresponding component classes, assets should reside together with the component class files . For example, a toggle button may use two images, stored in file down.gif and up.gif, to show different toggle states. If we require the image files be stored under images directory under the Web server document root, it would be inconvenient for the users of the toggle button component, because each time they develop or deploy a new application, they would have to manually copy the image files to that specific directory. To eliminate this requirement, a directory relative to the component class file should be used for storing the image files. A common strategy is to use the directory containing the component class file to store the asset files.

@@ -8,7 +8,7 @@ Assets are resource files (such as images, sounds, videos, CSS stylesheets, java Because directories containing component class files are normally inaccessible by Web users, PRADO implements an asset publishing scheme to make available the assets to Web users. An asset, after being published, will have a URL by which Web users can retrieve the asset file.

-

Asset Publishing

+

Asset Publishing

PRADO provides several methods for publishing assets or directories containing assets:

@@ -21,7 +21,7 @@ PRADO provides several methods for publishing assets or directories containing a BE AWARE: Be very careful with assets publishing, because it gives Web users access to files that were previously inaccessible to them. Make sure that you do not publish files that do not want Web users to see.

-

Customization

+

Customization

Asset publishing is managed by the System.Web.TAssetManager module. By default, all published asset files are stored under the [AppEntryPath]/assets directory, where AppEntryPath refers to the directory containing the application entry script. Make sure the assets directory is writable by the Web server process. You may change this directory to another by configuring the BasePath and BaseUrl properties of the TAssetManager module in application configuration,

@@ -34,7 +34,7 @@ Asset publishing is managed by the System.Web.TAssetManager module. By </modules> -

Performance

+

Performance

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.

@@ -42,7 +42,7 @@ PRADO uses caching techniques to ensure the efficiency of asset publishing. Publ 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.

-

A Toggle Button Example

+

A Toggle Button Example

We now use the toggle button example to explain the usage of assets. The control uses two image files up.gif and down.gif, which are stored under the directory containing the control class file. When the button is in Up state, we would like to show the up.gif image. This can be done as follows,

diff --git a/demos/quickstart/protected/pages/Advanced/Auth.page b/demos/quickstart/protected/pages/Advanced/Auth.page index ec876f54..3373644a 100644 --- a/demos/quickstart/protected/pages/Advanced/Auth.page +++ b/demos/quickstart/protected/pages/Advanced/Auth.page @@ -1,6 +1,6 @@ -

Authentication and Authorization

+

Authentication and Authorization

Authentication is a process of verifying whether someone is who he claims he is. It usually involves a username and a password, but may include any other methods of demonstrating identity, such as a smart card, fingerprints, etc.

@@ -8,7 +8,7 @@ Authentication is a process of verifying whether someone is who he claims he is. Authorization is finding out if the person, once identified, is permitted to manipulate specific resources. This is usually determined by finding out if that person is of a particular role that has access to the resources.

-

How PRADO Auth Framework Works

+

How PRADO Auth Framework Works

PRADO provides an extensible authentication/authorization framework. As described in application lifecycles, TApplication reserves several lifecycles for modules responsible for authentication and authorization. PRADO provides the TAuthManager module for such purposes. Developers can plug in their own auth modules easily. TAuthManager is designed to be used together with TUserManager module, which implements a read-only user database.

@@ -19,7 +19,7 @@ When a page request occurs, TAuthManager will try to restore user infor During Authorization application lifecycle, which occurs after Authentication lifecycle, TAuthManager will verify if the current user has access to the requested page according to a set of authorization rules. The authorization is role-based, i.e., a user has access to a page if 1) the page explicitly states that the user has access; 2) or the user is of a particular role that has access to the page. If the user does not have access to the page, TAuthManager will redirect user browser to the login page which is specified by LoginPage property.

-

Using PRADO Auth Framework

+

Using PRADO Auth Framework

To enable PRADO auth framework, add the TAuthManager module and TUserManager module to application configuration,

@@ -75,7 +75,7 @@ When a page request is being processed, a list of authorization rules may be ava In the above example, anonymous users will be denied from posting to PageID1 and PageID2, while User1 and User2 and all users of role Role1 can access the two pages (in both get and post methods).

-

Using TUserManager

+

Using TUserManager

As aforementioned, TUserManager implements a read-only user database. The user information are specified in either application configuration or an external XML file.

diff --git a/demos/quickstart/protected/pages/Advanced/Error.page b/demos/quickstart/protected/pages/Advanced/Error.page index 55217bfe..9d5e3037 100644 --- a/demos/quickstart/protected/pages/Advanced/Error.page +++ b/demos/quickstart/protected/pages/Advanced/Error.page @@ -1,11 +1,11 @@ -

Error Handling and Reporting

+

Error Handling and Reporting

PRADO provides a complete error handling and reporting framework based on the PHP 5 exception mechanism.

-

Exception Classes

+

Exception Classes

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.

@@ -32,18 +32,18 @@ Exceptions raised due to improper usage of the PRADO framework inherit from Errors due to improper usage of the Web application by client users inherit from TApplicationException.

-

Raising Exceptions

+

Raising Exceptions

Raising exceptions in PRADO has no difference than raising a normal PHP exception. The only thing matters is to raise the right exception. In general, exceptions meant to be shown to application users should use THttpException, while exceptions shown to developers should use other exception classes.

-

Error Capturing and Reporting

+

Error Capturing and Reporting

Exceptions raised during the runtime of PRADO applications are captured by System.Exceptions.TErrorHandler module. Different output templates are used to display the captured exceptions. THttpException is assumed to contain error messages that are meant for application end users and thus uses a specific group of templates. For all other exceptions, a common template shown as follows is used for presenting the exceptions.

exception page -

Customizing Error Display

+

Customizing Error Display

Developers can customize the presentation of exception messages. By default, all error output templates are stored under framework/Exceptions/templates. The location can be changed by configuring TErrorHandler in application configuration,

diff --git a/demos/quickstart/protected/pages/Advanced/I18N.page b/demos/quickstart/protected/pages/Advanced/I18N.page index 4a220c4c..5b1fafa0 100644 --- a/demos/quickstart/protected/pages/Advanced/I18N.page +++ b/demos/quickstart/protected/pages/Advanced/I18N.page @@ -1,9 +1,9 @@ -

Internationalization (I18N) and Localization (L10N)

+

Internationalization (I18N) and Localization (L10N)

Many web application built with PHP will not have internationalization in mind when it was first written. It may be that it was not intended for use in languages and cultures. Internationalization is an important aspect due to the increase adoption of the Internet in many non-English speaking countries. The process of internationalization and localization will contain difficulties. Below are some general guidelines to internationalize an existing application.

-

Separate culture/locale sensitive data

+

Separate culture/locale sensitive data

Identify and separate data that varies with culture. The most obvious are text/string/message. Other type of data should also be considered. The following list categorize some examples of culture sensitive data

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

+

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.

@@ -52,7 +52,7 @@ With cache enabled, translated messages are saved in the application With the configuration complete, we can now start to localize your application. If you have autosave enabled, after running your application with some localization activity (i.e. translating some text), you will see a directory and a messages.xml created within your source directory.

-

What to do with messages.xml?

+

What to do with messages.xml?

The translation message catalogue file, if using type="XLIFF", is a standardized translation message interchange XML format. You can edit the XML file using any UTF-8 aware editor. The format of the XML is something like the following.

@@ -77,7 +77,7 @@ With cache enabled, translated messages are saved in the application trans-unit tag, where source is the original message, and target is the translated message. Editors such as Heartsome XLIFF Translation Editor can help in editing these XML files. -

Setting and Changing Culture

+

Setting and Changing Culture

Once globalization is enabled, you can access the globalization settings, such as, Culture, Charset, etc, using

$globalization = $this->getApplication()->getGlobalization(); @@ -98,9 +98,9 @@ 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

+

Using localize function to translate text within PHP

The localize function searches for a translated string that matches original from your translation source. First, you need to locate all the hard coded text in PHP that are displayed or sent to the end user. The following example localizes the text of the $sender (assuming, say, the sender is a button). The original code before localization is as follows. @@ -118,7 +118,7 @@ function clickMe($sender,$param) } -

Compound Messages

+

Compound Messages

Compound messages can contain variable data. For example, in the message "There are 12 users online.", the integer 12 may change depending on some data in your application. This is difficult to translate because the position of the variable data may be difference for different languages. In addition, different languages have their own rules for plurals (if any) and/or quantifiers. The following example can not be easily translated, because the sentence structure is fixed by hard coding the variable data within message.

@@ -137,9 +137,9 @@ The localize function does not solve the problem of localizing language

The following sample demonstrates the basics of localization in Prado.

-

I18N Components

+

I18N Components

-

TTranslate

+

TTranslate

Messages and strings can be localized in PHP or in templates. To translate a message or string in the template, use TTranslate.

@@ -164,7 +164,7 @@ The time is {time}. <com:TLabel Text="<%[ Hello World! ]%>" /> -

TDateFormat

+

TDateFormat

Formatting localized date and time is straight forward.

<com:TDateFormat Value="12/01/2005" /> @@ -254,7 +254,7 @@ Format Pattern Result

If the Value property is not specified, the current date and time is used.

-

TNumberFormat

+

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 @@ -310,7 +310,7 @@ Pattern Output

-

TTranslateParameter

+

TTranslateParameter

Compound messages, i.e., string substitution, can be accomplished with TTranslateParameter. In the following example, the strings "{greeting}" and "{name}" will be replace with the values of "Hello" and "World", respectively.The substitution string must be enclose with "{" and "}". The parameters can be further translated by using TTranslate. @@ -325,7 +325,7 @@ with the values of "Hello" and "World", respectively.The substitution string mus -

TChoiceFormat

+

TChoiceFormat

Using the localize function or TTranslate component to translate messages does not inform the translator the cardinality of the data required to determine the correct plural structure to use. It only informs them that there is a variable data, the data could be anything. Thus, the translator will be unable to determine with respect to the substitution data the correct plural, language structure or phrase to use . E.g. in English, to translate the sentence, "There are {number} of apples.", the resulting translation should be different depending on the number of apples.

diff --git a/demos/quickstart/protected/pages/Advanced/Logging.page b/demos/quickstart/protected/pages/Advanced/Logging.page index ec3e7879..5270a00d 100644 --- a/demos/quickstart/protected/pages/Advanced/Logging.page +++ b/demos/quickstart/protected/pages/Advanced/Logging.page @@ -1,12 +1,12 @@ -

Logging

+

Logging

PRADO provides a highly flexible and extensible logging functionality. Messages logged can be classified according to log levels and message categories. Using level and category filters, the messages can be further routed to different destinations, such as files, emails, browser windows, etc. The following diagram shows the basic architecture of PRADO logging mechanism,

Log router -

Using Logging Functions

+

Using Logging Functions

The following two methods are provided for logging messages in PRADO,

@@ -18,7 +18,7 @@ Prado::trace($message, $category); The difference between Prado::log() and Prado::trace() is that the latter automatically selects the log level according to the application mode. If the application is in Debug mode, stack trace information is appended to the messages. Prado::trace() is widely used in the core code of the PRADO framework.

-

Message Routing

+

Message Routing

Messages logged using the above two functions are kept in memory. To make use of the messages, developers need to route them to specific destinations, such as files, emails, or browser windows. The message routing is managed by System.Util.TLogRouter module. When plugged into an application, it can route the messages to different destination in parallel. Currently, PRADO provides three types of routes:

@@ -44,7 +44,7 @@ To enable message routing, plug in and configure the TLogRouter module In the above, the Levels and Categories specify the log and category filters to selectively retrieve the messages to the corresponding destinations.

-

Message Filtering

+

Message Filtering

Messages can be filtered according to their log levels and categories. Each log message is associated with a log level and a category. With levels and categories, developers can selectively retrieve messages that they are interested on.

diff --git a/demos/quickstart/protected/pages/Advanced/MasterContent.page b/demos/quickstart/protected/pages/Advanced/MasterContent.page index 0a68fe31..2698f865 100644 --- a/demos/quickstart/protected/pages/Advanced/MasterContent.page +++ b/demos/quickstart/protected/pages/Advanced/MasterContent.page @@ -1,6 +1,6 @@ -

Master and Content

+

Master and Content

Pages in a Web application often share common portions. For example, all pages of this tutorial application share the same header and footer portions. If we repeatedly put header and footer in every page source file, it will be a maintenance headache if in future we want to something in the header or footer. To solve this problem, PRADO introduces the concept of master and content. It is essentially a decorator pattern, with content being decorated by master.

diff --git a/demos/quickstart/protected/pages/Advanced/Performance.page b/demos/quickstart/protected/pages/Advanced/Performance.page index ed0cc6f8..d33c110b 100644 --- a/demos/quickstart/protected/pages/Advanced/Performance.page +++ b/demos/quickstart/protected/pages/Advanced/Performance.page @@ -1,11 +1,11 @@ -

Performance Tuning

+

Performance Tuning

Performance of Web applications is affected by many factors. Database access, file system operations, network bandwidth are all potential affecting factors. PRADO tries in every effort to reduce the performance impact caused by the framework.

-

Caching

+

Caching

PRADO provides a generic caching technique used by in several core parts of the framework. For example, when caching is enabled, TTemplateManager will save parsed templates in cache and reuse them in the following requests, which saves time for parsing templates. The TThemeManager adopts the similar strategy to deal with theme parsing.

@@ -33,7 +33,7 @@ if($application->Cache) { where $keyName should be a string that uniquely identifies the data item stored in cache.

-

Using pradolite.php

+

Using pradolite.php

Including many PHP script files may impact application performance significantly. PRADO classes are stored in different files and when processing a page request, it may require including tens of class files.To alleviate this problem, in each PRADO release, a file named pradolite.php is also included. The file is a merge of all core PRADO class files with comments being stripped off and message logging removed.

@@ -41,7 +41,7 @@ Including many PHP script files may impact application performance significantly To use pradolite.php, in your application entry script, replace the inclusion of prado.php with pradolite.php.

-

Changing Application Mode

+

Changing Application Mode

Application mode also affects application performance. A PRADO application can be in one of the following modes: Off, Debug, Normal and Performance. The Debug mode should mainly be used during application development, while Normal mode is usually used in early stage after an application is deployed to ensure everything works correctly. After the application is proved to work stably for some period, the mode can be switched to Performance to further improve the performance.

@@ -57,7 +57,7 @@ To switch application mode, configure it in application configuration: </application > -

Reducing Page Size

+

Reducing Page Size

By default, PRADO stores page state in hidden fields of the HTML output. The page state could be very large in size if complex controls, such as TDataGrid, is used. To reduce the size of the network transmitted page size, two strategies can be used.

@@ -76,7 +76,7 @@ Second, you may use a different page state storage. For example, page state may Note, in the above the SpecialPage will use MyPersister2 as its persister class, while the rest pages will use MyPersister1. Therefore, you can have different state persister strategies for different pages.

-

Other Techniques

+

Other Techniques

Server caching techniques are proven to be very effective in improving the performance of PRADO applications. For example, we have observed that by using Zend Optimizer, the RPS (request per second) of a PRADO application can be increased by more than ten times. Of course, this is at the cost of stale output, while PRADO's caching techniques always ensure the correctness of the output.

diff --git a/demos/quickstart/protected/pages/Advanced/Scripts.page b/demos/quickstart/protected/pages/Advanced/Scripts.page new file mode 100644 index 00000000..5921e865 --- /dev/null +++ b/demos/quickstart/protected/pages/Advanced/Scripts.page @@ -0,0 +1,397 @@ + +

Introduction to Javascript

+This guide is based on the +Quick guide to somewhat advanced JavaScript tour of some OO features by Sergio Pereira. + +

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

+

+ + 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 + 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 + 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 + 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 + that before. +

+ +

+ The purpose of this article is precisely explaining the types of constructs that + many of us are not familiar with yet. +

+ + +

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 + how simple it is. +

+ +var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){ +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 = +{ + color: 'black', + legCount: 4, + communicate: function(repeatCount) + { + for(i=0;i<repeatCount;i++) + alert('Woof!'); + } +}; + +

+ 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 + explain better down the line. + After the object is created and assigned to the variable myPet, + we can use it like this: +

+ + +alert('my pet is ' + myPet.color); +alert('my pet has ' + myPet.legCount + ' legs'); +//if you are a dog, bark three times: +myPet.communicate(3); + +

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

+ +

+ Take a look at this example. We will pass functions to another function that will use them. +

+ +var myDog = +{ + bark: function() + { + alert('Woof!'); + } +}; + +var myCat = +{ + meow: function() + { + alert('I am a lazy cat. I will not meow for you.'); + } +}; + +function annoyThePet(petFunction) +{ + //let's see what the pet can do + petFunction(); +} + +//annoy the dog: +annoyThePet(myDog.bark); +//annoy the cat: +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, + undefined in both cases here. +

+ +

+ If you want to make my lazy cat start barking, you can easily do this: +

+ +myCat.meow = myDog.bark; +myCat.meow(); //alerts 'Woof!' + + +

Arrays, items, and object members

+

+ The following two lines in JS do the same thing. +

+ + +var a = new Array(); +var b = []; + +

+ As I'm sure you already know, you can access individual items in an array + by using the square brackets: +

+ +var a = ['first', 'second', 'third']; +var v1 = a[0]; +var v2 = a[1]; +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 + object, and adds some members by name. +

+ +var obj = {}; //new, empty object +obj['member_1'] = 'this is the member value'; +obj['flag_2'] = false; +obj['some_function'] = function(){ /* do something */}; + +

+ The above code has identical effect as the following: +

+ +var obj = +{ + member_1:'this is the member value', + flag_2: false, + some_function: function(){ /* do something */} +}; + + +

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

+ +obj.some_function(); +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 + using only my previous experience with other languages. Judge for yourself. +

+ +//defining a new class called Pet +var Pet = function(petName, age) +{ + this.name = petName; + this.age = age; +}; + +//let's create an object of the Pet class +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 + 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 + 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 = +{ + //our 'constructor' + initialize: function(petName, age) + { + this.name = petName; + this.age = age; + }, + + communicate: function() + { + alert('I do not know what I should say, but my name is ' + this.name); + } +}; + + +

Functions as arguments, an interesting pattern

+

+ If you have never worked with languages that support closures + you may find the following idiom too funky. +

+ +var myArray = ['first', 'second', 'third']; +myArray.each( function(item, index) +{ + alert('The item in the position #' + index + ' is:' + item); +}); + +

+ + 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. + We could have also written the code like this. +

+ +function myIterator(item, index) +{ + alert('The item in the position #' + index + ' is:' + item); +} + +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. +

+ +

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

+

+ Take this code snippet as an example. +

+ +function buttonClicked() +{ + alert('button ' + this.id + ' was clicked'); +} + +var myButton = document.getElementById('someButtonID'); +var myButton2 = document.getElementById('someOtherButtonID'); +myButton.onclick = buttonClicked; +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 + 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 + whenever the button is clicked, the browser will execute something similar to the following line. +

+ +myButton.onclick(); + +

+ + 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 = +{ + formFields: [ ], + emptyAllFields: function() + { + for(i=0; i < this.formFields.length; i++) + { + var elementID = this.formFields[i]; + var field = document.getElementById(elementID); + field.value = ''; + } + } +}; + +//tell which form fields we want to work with +myHelper.formFields.push('txtName'); +myHelper.formFields.push('txtEmail'); +myHelper.formFields.push('txtAddress'); + +//clearing the text boxes: +myHelper.emptyAllFields(); + +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 + precisely what's happening. One quick solution would be to rewrite our last line of code. +

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

+ That way we create a brand new function that calls our helper method within the helper object's context. +

+ \ No newline at end of file diff --git a/demos/quickstart/protected/pages/Advanced/Scripts1.page b/demos/quickstart/protected/pages/Advanced/Scripts1.page new file mode 100644 index 00000000..f11a2f9d --- /dev/null +++ b/demos/quickstart/protected/pages/Advanced/Scripts1.page @@ -0,0 +1,561 @@ + + +

Developer Notes for prototype.js

+This guide is based on the +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. + 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. +

+ +

+ If you tried to use this library recently, you probably noticed that documentation is not one + of its strongest points. As many other developers before me, I got my head around prototype.js by + reading the source code and experimenting with it. I thought it would be nice to take notes while + I learned and share with everybody else. +

+

+ As you read the examples and the reference, developers familiar with the Ruby + programming language will notice an intentional similarity between Ruby's + built-in classes and many of the extensions implemented by this library. +

+ + +

Using the $() function

+

+ The $() function is a handy shortcut to the all-too-frequent document.getElementById() function + of the DOM. Like the DOM function, this one returns the element that has the id passed as an argument. +

+ +

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

+ +<com:TClientScript UsingClientScripts="prado" /> +
+

This is a paragraph

+
+ +
+

This is another paragraph

+
+ + + + + + +

+ Another nice thing about this function is that you can pass either the id string or the element object itself, + which makes this function very useful when creating other functions that can also take either form of argument. +

+ +

Using the $F() function

+ +

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

+ + + + + + + +

Using the $A() function

+ +

+ The $A() function converts the single argument it receives + 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 + NodeLists into regular arrays, which can be traversed + more efficiently. See example below. +

+ + + + + + + + + +

Using the $H() function

+

+ The $H() function converts + objects into enumerable Hash objects that + resemble associative arrays. +

+ +function testHash() +{ + //let's create the object + var a = + { + first: 10, + second: 20, + third: 30 + }; + + //now transform it into a hash + var h = $H(a); + alert(h.toQueryString()); + + //displays: first=10&second=20&third=30 +} + + +

Enumerating... Wow! Damn! Wahoo!

+

+ We are all familar with for loops. You know, create yourself an array, populate it with + elements of the same kind, create a loop control structure (for, foreach, while, repeat, etc,) + access each element sequentially, by its numeric index, and do something with the element. +

+

+ When you come to think about it, almost every time you have an array in your code it + means that you'll be using that array in a loop sooner or later. Wouldn't it be nice + if the array objects had more functionality to deal with these iterations? Yes, it would, + and many programming languages provide such functionality in their arrays or equivalent + structures (like collections and lists.) +

+ +

+ Well, it turns out that prototype.js gives us the Enumerable + object, which implements a plethora of tricks for us to use when dealing with iterable data. + The prototype.js library goes one step further and extends the + Array class with all the methods of Enumerable. +

+ + +

Loops and iterator

+

+ In standard javascript, if you wanted to sequentially display the elements of an array, + you could very well write something like this. +

+ + + + + +

+ With our new best friend, prototype.js, we can rewrite this loop like this. +

+ + +function showList() +{ + var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg']; + simpsons.each( function(familyMember) + { + alert(familyMember); + }); +} + +

+ You are probably thinking "big freaking deal...just a weird syntax for the same old thing." + Well, in the above example, yes, there's nothing too earth shattering going on. Afterall, + there's not much to be changed in such a drop-dead-simple example. But + keep reading, nonetheless. +

+

+ Before we move on. Do you see this function that is being passed as an argument + to the each method? Let's start referring to it as an + iterator function. +

+ +

Your arrays on steroids

+ +

+ Like we mentioned above, it's very common for all the elements in your array to be of + the same kind, with the same properties and methods. Let's see how we can take advantage + of iterator functions with our new souped-up arrays. +

+

+ Finding an element according to a criteria. +

+ + + + + + + + +

+ Now let's kick it up another notch. See how we can filter out + items in arrays, then retrieve just a desired member from each + element. +

+ + + +

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

+ + +

+ It takes just a little bit of practice to get completely addicted to this syntax. + Next we will go through the available functions with the following example. +

+

Enumerable Functions

+The sample data for the following examples. + +var Fixtures = +{ + Products: + [ + {name: 'Basecamp', company: '37signals', type: 'Project Management'}, + {name: 'Shopify', company: 'JadedPixel', type: 'E-Commerce'}, + {name: 'Mint', company: 'Shaun Inman',type: 'Statistics'} + ], + + Artist: + [ + 'As I Lay Dying', + '36 Crazyfist', + 'Shadows Fall', + 'Trivium', + 'In Flames' + ], + + Numbers: [0, 1, 4, 5, 98, 32, 12, 9] +}; + +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, +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++) +{ + Logger.info(F.Numbers[i]); +} + +

+The each function allows us to iterate over these objects Ruby style. +

+ +F.Numbers.each(function(num) +{ + Logger.info(num); +}); + +//Output +0 +1 +4 +5 +98 +32 +12 +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 +we also needed the index we could do something like the code below. +

+ + +F.Numbers.each(function(num, index) +{ + Logger.info(index + ": " + num); +}); + +//Output +0: 0 +1: 1 +2: 4 +3: 5 +4: 98 +5: 32 +6: 12 +7: 9 + + +

Hash key/value pairs

+

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) +{ + Logger.info(product.key + ": " + product.value); +}); + +//Outputs +name: Basecamp +company: 37signals +type: Project Management + +

+We can also directly access the keys and values of a Hash without iterating over it. +

+ +$H(F.Products[1]).keys(); +//Outputs name,company,type + +$H(F.Products[1]).values(); +//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 +pushed onto the end of the new array.

+ +var companies = F.Products.collect(function(product) +{ + return product.company; +}); + +Logger.info(companies.join(', ')); + +// Outputs +// 37signals, JadedPixel, Shaun Inman + + +

You can even join on the end of the block.

+ +return F.Products.collect(function(product) +{ + return product.company; +}).join(', '); + + +

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, +we could do something like the code below. Prime candidate for some conditional madness. +

+ +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 +values. For instance, to add up all the numbers. +

+ +var score = F.Numbers.inject(0, function(sum, value) +{ + return sum + value; +}); + +Logger.info(score); +//Output 161 + + +

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” +we could do something like the code below. +

+ +var ecom = F.Products.findAll(function(product) +{ + return product.type == 'E-Commerce'; +}); + +Logger.info(ecom[0].company + " produces " + ecom[0].name); + +//Outputs +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, +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 +was greater than 5 we’d do something like the code below. +

+ +var low = F.Numbers.detect(function(num) +{ + return num > 5 +}); + +Logger.info(low); +//Outputs 98 + + +

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 +our array of artists we’d do something like this:

+ + +[F.Artists].invoke('sort') +//Outputs 36 Crazyfist,As I Lay Dying,In Flames,Shadows Fall,Trivium + + +

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

+ + +[F.Artists, F.Letters].invoke('sort'); +//Outputs 36 Crazyfist,As I Lay Dying,In Flames,... + +

So we invoked sort for each sub-array. Note that the code below will not work.

+ + +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, +it would look something like this:

+ + +"36 Crazy Fists".sort(); + +

We could however do something like this:

+ + +F.Artists.invoke('toLowerCase'); +//Outputs 36 crazyfist,as i lay dying,in flames,shadows ... + + +

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

+ + +F.Artists.invoke('concat', " is awesome ") +//Outputs +36 Crazyfist is awesome ,As I Lay Dying is awesome ,... + + + \ No newline at end of file diff --git a/demos/quickstart/protected/pages/Advanced/Scripts2.page b/demos/quickstart/protected/pages/Advanced/Scripts2.page new file mode 100644 index 00000000..6ee6a5d8 --- /dev/null +++ b/demos/quickstart/protected/pages/Advanced/Scripts2.page @@ -0,0 +1,253 @@ + +

DOM Events and Javascript

+ +

Basic event handling

+ +

The syntax for working with events looks like the code below.

+ + +Event.observe(element, name, observer, [useCapture]); + + +

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

If we wanted to get the element that fired the event, we'd do this:

+ + +Event.observe('clicker', 'click', function(event) +{ + alert(Event.element(event)); +}); + + +

Observing keystrokes

+ +

If we wanted to observe keystrokes for the entire document, we could do the following:

+ + +Event.observe(document, 'keypress', function(event) +{ + if(Event.keyCode(event) == Event.KEY_TAB) + alert('Tab Pressed'); +}); + + +

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

+ + +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 +see which ones those are.

+ +

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 +an input box named mouse.

+ + +Event.observe(document, 'mousemove', function(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 +the id or element that was relevant.

+ +

Stopping Propagation

+ +

Event.stop(event) will stop the propagation of an event .

+ +

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 +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 = +{ + initialize: function(list) + { + this.list = list; + + // Observe clicks on our list items + $$(this.list + " li").each(function(item) + { + Event.observe(item, 'click', this.showTagName.bindEvent(this)); + }.bind(this)); + + // Observe when a key on the keyboard is pressed. + // In the observer, we check for + // the tab key and alert a message if it is pressed. + Event.observe(document, 'keypress', this.onKeyPress.bindEvent(this)); + + // Observe our fake live search box. When a user types + // something into the box, the observer will take that + // value(-1) and update our search-results div with it. + Event.observe('search', 'keypress', this.onSearch.bindEvent(this)); + + Event.observe(document, 'mousemove', this.onMouseMove.bindEvent(this)); + }, + + // Arbitrary functions to respond to events + showTagName: function(event) + { + alert(Event.element(event).tagName); + }, + + onKeyPress: function(event) + { + var code = event.keyCode; + if(code == Event.KEY_TAB) + alert('Tab key was pressed'); + }, + + onSearch: function(event) + { + Element.update('search-results', $F(Event.element(event))); + }, + + onMouseMove: function(event) + { + $('mouse').value = "X: " + Event.pointerX(event) + + "px Y: " + Event.pointerY(event) + "px"; + } +} + +

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 +things are different now. Take a look at the code below:

+ +// 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. +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 +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, +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 +inside our function showTagName(event). If the showTagName function +requires additional parameters, you can attach them to the later parameters of bindEvent. For example

+ +this.showTagName.bindEvent(this, param1, param2); + +//where the showTagName function is defined as +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 +reference the method showTagName inside the iterator.

+ +

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) +{ + 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 +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 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 +to change. In other words, the code below does NOT work.

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

+ +

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) +{ + Event.observe(item, 'click', this.showTagObserver); +}.bind(this)); + + +

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

+ +$$(this.list + " li").each(function(item) +{ + Event.stopObserving(item, 'click', this.showTagObserver); +}.bind(this)); + + + \ No newline at end of file diff --git a/demos/quickstart/protected/pages/Advanced/Scripts3.page b/demos/quickstart/protected/pages/Advanced/Scripts3.page new file mode 100644 index 00000000..9883f43e --- /dev/null +++ b/demos/quickstart/protected/pages/Advanced/Scripts3.page @@ -0,0 +1,32 @@ + +

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"); + +
    • +
+The available packaged libraries included in Prado are +
    +
  • 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
    • +
  • logger : javascript logger and object browser
    • +
  • datepicker : datepicker
    • +
  • rico : Rico library
    • +
  • colorpicker : colorpicker
    • +
+ +

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 +and its dependencies will be automatically included on 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 b6de7251..9be7946a 100644 --- a/demos/quickstart/protected/pages/Advanced/Security.page +++ b/demos/quickstart/protected/pages/Advanced/Security.page @@ -1,8 +1,8 @@ -

Security

+

Security

-

Viewstate Protection

+

Viewstate Protection

Viewstate lies at the heart of PRADO. Viewstate represents data that can be used to restore pages to the state that is last seen by end users before making the current request. By default, PRADO uses hidden fields to store viewstate information.

@@ -26,7 +26,7 @@ HMAC check requires a private key that should be secret to end users. Developers HMAC check does not prevent end users from reading the viewstate content. An added security measure is to encrypt the viewstate information so that end users cannot decipher it. To enable viewstate encryption, set the EnableStateEncryption of pages to true. This can be done in page configurations or in page code. Note, encrypting viewstate may degrade the application performance. A better strategy is to store viewstate on the server side, rather than the default hidden field.

-

Cross Site Scripting Prevention

+

Cross Site Scripting Prevention

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.

@@ -37,7 +37,7 @@ One of the most important measures to prevent XSS attacks is to check user input 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.

-

Cookie Attack Prevention

+

Cookie Attack Prevention

Protecting cookies from being attacked is of extreme important, as session IDs are commonly stored in cookies. If one gets hold of a session ID, he essentially owns all relevant session information.

diff --git a/demos/quickstart/protected/pages/Advanced/State.page b/demos/quickstart/protected/pages/Advanced/State.page index 8d69d6a4..051090e9 100644 --- a/demos/quickstart/protected/pages/Advanced/State.page +++ b/demos/quickstart/protected/pages/Advanced/State.page @@ -1,11 +1,11 @@ -

Persistent State

+

Persistent State

Web applications often need to remember what an end user has done in previous page requests so that the new page request can be served accordingly. State persistence is to address this problem. Traditionally, if a page needs to keep track of user interactions, it will resort to session, cookie, or hidden fields. PRADO provides a new line of state persistence schemes, including view state, control state, and application state.

-

View State

+

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.

@@ -22,7 +22,7 @@ where $this refers to the control object, Caption is a unique $caption = $this->getViewState('Caption'); -

Control State

+

Control State

Control state is like view state in every aspect except that control state cannot be disabled. Control state is intended to be used for storing crucial state information without which a page or control may not work properly.

@@ -34,7 +34,7 @@ $this->setControlState('Caption',$caption); $caption = $this->getControlState('Caption'); -

Application State

+

Application State

Application state refers to data that is persistent across user sessions and page requests. A typical example of application state is the user visit counter. The counter value is persistent even if the current user session terminates. Note, view state and control state are lost if the user requests for a different page, while session state is lost if the user session terminates.

@@ -46,7 +46,7 @@ $application->setGlobalState('Caption',$caption); $caption = $application->getGlobalState('Caption'); -

Session State

+

Session State

PRADO encapsulates the traditional session management in THttpSession module. The module can be accessed from within any component by using $this->Session, where $this refers to the component object.

diff --git a/demos/quickstart/protected/pages/Advanced/Themes.page b/demos/quickstart/protected/pages/Advanced/Themes.page index ba5585e7..ef593c65 100644 --- a/demos/quickstart/protected/pages/Advanced/Themes.page +++ b/demos/quickstart/protected/pages/Advanced/Themes.page @@ -1,18 +1,18 @@ -

Themes and Skins

+

Themes and Skins

-

Introduction

+

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.

-

Understanding Themes

+

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.

-

Using Themes

+

Using Themes

To use a theme, you need to set the Theme property of the page with the theme name, which is the theme directory name. You may set it in either page configurations or in the constructor or onPreInit() method of the page. You cannot set the property after onPreInit() because by that time, child controls of the page are already created (skins must be applied to controls right after they are created.)

@@ -29,7 +29,7 @@ This will apply the 'Blue' skin to the button. Note, the initial property values 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

+

Theme Storage

All themes by default must be placed under the [AppEntryPath]/themes directory, where AppEntryPath refers to the directory containing the application entry script. If you want to use a different directory, configure the BasePath and BaseUrl properties of the System.Web.UI.TThemeManager module in application configuration,

@@ -44,7 +44,7 @@ All themes by default must be placed under the [AppEntryPath]/themes di </service> -

Creating Themes

+

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,

diff --git a/demos/quickstart/protected/pages/Configurations/AppConfig.page b/demos/quickstart/protected/pages/Configurations/AppConfig.page index 48243200..e15f1eea 100644 --- a/demos/quickstart/protected/pages/Configurations/AppConfig.page +++ b/demos/quickstart/protected/pages/Configurations/AppConfig.page @@ -1,6 +1,6 @@ -

Application Configurations

+

Application Configurations

Application configurations are used to specify the global behavior of an application. They include specification of path aliases, namespace usages, module and service configurations, and parameters.

diff --git a/demos/quickstart/protected/pages/Configurations/Overview.page b/demos/quickstart/protected/pages/Configurations/Overview.page index 4a23f306..ec606941 100644 --- a/demos/quickstart/protected/pages/Configurations/Overview.page +++ b/demos/quickstart/protected/pages/Configurations/Overview.page @@ -1,5 +1,5 @@ -

Configuration Overview

+

Configuration Overview

PRADO uses configurations to glue together components into pages and applications. There are application configurations, page configurations, and templates.

diff --git a/demos/quickstart/protected/pages/Configurations/PageConfig.page b/demos/quickstart/protected/pages/Configurations/PageConfig.page index 01710d59..b0ef5ccb 100644 --- a/demos/quickstart/protected/pages/Configurations/PageConfig.page +++ b/demos/quickstart/protected/pages/Configurations/PageConfig.page @@ -1,6 +1,6 @@ -

Page Configurations

+

Page Configurations

Page configurations are mainly used by TPageService to modify or append the application configuration. As the name indicates, a page configuration is associated with a directory storing some page files. It is stored as an XML file named config.xml.

diff --git a/demos/quickstart/protected/pages/Configurations/Templates1.page b/demos/quickstart/protected/pages/Configurations/Templates1.page index 483ef1d1..3f2fcc5e 100644 --- a/demos/quickstart/protected/pages/Configurations/Templates1.page +++ b/demos/quickstart/protected/pages/Configurations/Templates1.page @@ -1,5 +1,5 @@ -

Templates: Part I

+

Templates: Part I

Templates are used to specify the presentational layout of controls. A template can contain static text, components, or controls that contribute to the ultimate presentation of the associated control. By default, an instance of TTemplateControl or its subclass may automatically load and instantiate a template from a file whose name is the same as the control class name. For page templates, the file name suffix must be .page; for other regular template controls, the suffix is .tpl.

@@ -7,7 +7,7 @@ Templates are used to specify the presentational layout of controls. A template

-

Component Tags

+

Component Tags

A component tag specifies a component as part of the body content of the template control. If the component is a control, it usually will become a child or grand child of the template control, and its rendering result will be inserted at the place where it is appearing in the template.

@@ -43,7 +43,7 @@ PropertyValue It is equivalent to ...PropertyName="PropertyValue"... in every aspect. Property initialization tags must be directly enclosed between the corresponding opening and closing component tag.

-

Component IDs

+

Component IDs

When specified in templates, component ID property has special meaning in addition to its normal property definition. A component tag specified with an ID value in template will register the corresponding component to the template owner control. The component can thus be directly accessed from the template control with its ID value. For example, in Home page's template, the following component tag @@ -53,7 +53,7 @@ makes it possible to get the textbox object in code using $page->TextBox -

Template Control Tags

+

Template Control Tags

A template control tag is used to configure the initial property values of the control owning the template. Its format is as follows, <%@ PropertyName="PropertyValue" ... %> @@ -68,7 +68,7 @@ Template control tag is optional in a template. Each template can contain at mos

-

Comment Tags

+

Comment Tags

Comment tags are used to put comments in the template or the ultimate rendering result. There are two types of comment tags. One is like that in HTML and will be displayed to the end-users. The other only appear in a template and will be stripped out when the template is instantiated and displayed to the end-users. The format of these two comment tags is as follows,

diff --git a/demos/quickstart/protected/pages/Configurations/Templates2.page b/demos/quickstart/protected/pages/Configurations/Templates2.page index 17502151..201c526f 100644 --- a/demos/quickstart/protected/pages/Configurations/Templates2.page +++ b/demos/quickstart/protected/pages/Configurations/Templates2.page @@ -1,14 +1,14 @@ -

Templates: Part II

+

Templates: Part II

-

Dynamic Content Tags

+

Dynamic Content Tags

Dynamic content tags are introduced as shortcuts to some commonly used component tags. These tags are mainly used to render contents resulted from evaluating some PHP expressions or statements. They include expression tags, statement tags, databind tags, parameter tags, asset tags and localization tags.

-

Expression Tags

+

Expression Tags

An expression tag represents a PHP expression that is evaluated when the template control is in PreRender stage. The expression evaluation result is inserted at the place where the tag resides in the template. The context (namely $this) of the expression is the control owning the template.

@@ -26,7 +26,7 @@ For example, the following expression tag will display the current page title at -

Statement Tags

+

Statement Tags

Statement tags are similar to expression tags, except that statement tags contain PHP statements rather than expressions. The output of the PHP statements (using for example echo or print in PHP) are displayed at the place where the statement tag resides in the template. The context (namely $this) of the statements is the control owning the template. The format of statement tags is as follows,

@@ -46,7 +46,7 @@ echo strftime("%A %e %B %Y",time()); -

Databind Tags

+

Databind Tags

Databind tags are similar to expression tags, except that the expressions are evaluated only when a dataBind() call is invoked on the controls representing the databind tags. The context (namely $this) of a databind expression is the control owning the template. The format of databind tags is as follows,

@@ -55,7 +55,7 @@ Databind tags are similar to expression tags, except that the expressions are ev -

Parameter Tags

+

Parameter Tags

Parameter tags are used to insert application parameters at the place where they appear in the template. The format of parameter tags is as follows,

@@ -67,7 +67,7 @@ Note, application parameters are usually defined in application configurations o

-

Asset Tags

+

Asset Tags

Asset tags are used to publish private files and display the corresponding the URLs. For example, if you have an image file that is not Web-accessible and you want to make it visible to end-users, you can use asset tags to publish this file and show the URL to end-users so that they can fetch the published image.

@@ -85,7 +85,7 @@ BE VERY CAUTIOUS when you are using asset tags as it may expose to end-users fil

-

Localization Tags

+

Localization Tags

Localization tags represent localized texts. They are in the following format,

diff --git a/demos/quickstart/protected/pages/Configurations/Templates3.page b/demos/quickstart/protected/pages/Configurations/Templates3.page index 457c1a38..99d43665 100644 --- a/demos/quickstart/protected/pages/Configurations/Templates3.page +++ b/demos/quickstart/protected/pages/Configurations/Templates3.page @@ -1,8 +1,8 @@ -

Templates: Part III

+

Templates: Part III

-

Dynamic Property Tags

+

Dynamic Property Tags

Dynamic property tags are very similar to dynamic content tags, except that they are applied to component properties. The purpose of dynamic property tags is to allow more versatile component property configuration. Note, you are not required to use dynamic property tags because what can be done using dynamic property tags can also be done in PHP code. However, using dynamic property tags bring you much more convenience at accomplishing the same tasks. The basic usage of dynamic property tags is as follows,

@@ -19,7 +19,7 @@ Like dynamic content tags, we have expression tags, -

Expression Tags

+

Expression Tags

An expression tag represents a PHP expression that is evaluated when the control is in PreRender stage. The expression evaluation result is assigned to the corresponding component property. The format of expression tags is as follows,

@@ -34,7 +34,7 @@ In the expression, $this refers to the control owning the template. The -

Databind Tags

+

Databind Tags

Databind tags are similar to expression tags, except that they can only be used with control properties and the expressions are evaluated only when a dataBind() call is invoked on the controls represented by the component tags. In the expression, $this refers to the control owning the template. Databind tags do not apply to all components. They can only be used for controls.

@@ -46,7 +46,7 @@ The format of databind tags is as follows, -

Parameter Tags

+

Parameter Tags

Parameter tags are used to assign application parameter values to the corresponding component properties. The format of parameter tags is as follows,

@@ -58,7 +58,7 @@ Note, application parameters are usually defined in application configurations o

-

Asset Tags

+

Asset Tags

Asset tags are used to publish private files and assign the corresponding the URLs to the component properties. For example, if you have an image file that is not Web-accessible and you want to make it visible to end-users, you can use asset tags to publish this file and show the URL to end-users so that they can fetch the published image. The asset tags are evaluated when the template is instantiated.

@@ -76,7 +76,7 @@ BE VERY CAUTIOUS when you are using asset tags as it may expose to end-users fil

-

Localization Tags

+

Localization Tags

Localization tags represent localized texts. They are in the following format,

diff --git a/demos/quickstart/protected/pages/Controls/Button.page b/demos/quickstart/protected/pages/Controls/Button.page index e58571d3..5c827725 100644 --- a/demos/quickstart/protected/pages/Controls/Button.page +++ b/demos/quickstart/protected/pages/Controls/Button.page @@ -1,6 +1,6 @@ -

TButton

+

TButton

diff --git a/demos/quickstart/protected/pages/Controls/CheckBox.page b/demos/quickstart/protected/pages/Controls/CheckBox.page index 77052997..7f2767c0 100644 --- a/demos/quickstart/protected/pages/Controls/CheckBox.page +++ b/demos/quickstart/protected/pages/Controls/CheckBox.page @@ -1,6 +1,6 @@ -

TCheckBox

+

TCheckBox

diff --git a/demos/quickstart/protected/pages/Controls/ColorPicker.page b/demos/quickstart/protected/pages/Controls/ColorPicker.page index 6e05584a..8909ad98 100644 --- a/demos/quickstart/protected/pages/Controls/ColorPicker.page +++ b/demos/quickstart/protected/pages/Controls/ColorPicker.page @@ -1,6 +1,6 @@ -

TColorPicker

+

TColorPicker

diff --git a/demos/quickstart/protected/pages/Controls/Data.page b/demos/quickstart/protected/pages/Controls/Data.page index 36839582..6a93ec6f 100644 --- a/demos/quickstart/protected/pages/Controls/Data.page +++ b/demos/quickstart/protected/pages/Controls/Data.page @@ -1,6 +1,6 @@ -

Data Controls

+

Data Controls

  • diff --git a/demos/quickstart/protected/pages/Controls/DataGrid.page b/demos/quickstart/protected/pages/Controls/DataGrid.page index de6a94e9..ed1ad32b 100644 --- a/demos/quickstart/protected/pages/Controls/DataGrid.page +++ b/demos/quickstart/protected/pages/Controls/DataGrid.page @@ -1,6 +1,6 @@ -

    TDataGrid

    +

    TDataGrid

    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. @@ -12,7 +12,7 @@ TDataGrid is highly interactive. Users can sort the data along specified columns 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.

    -

    Columns

    +

    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.

    @@ -28,7 +28,7 @@ PRADO provides five types of columns:
  • TTemplateColumn displays the cells according to different templates defined for it.
-

Item Styles

+

Item Styles

TDataGrid defines different styles applied to its items. For example, AlternatingItemStyle is applied to alternating items (item 2, 4, 6, etc.) Through these properties, one can set CSS style fields or CSS classes for the items.

@@ -36,7 +36,7 @@ TDataGrid defines different styles applied to its items. For example, Altern Item styles are applied in a hierarchical way. Styles in higher hierarchy will inherit from styles in lower hierarchy. Starting from the lowest hierarchy, the item styles include item's own style, ItemStyle, AlternatingItemStyle, SelectedItemStyle, and EditItemStyle. Therefore, if background color is set as red in ItemStyle, EditItemStyle will also have red background color, unless it is explicitly set to a different value.

-

Events

+

Events

TDataGrid provides several events to facilitate manipulation of its items,

@@ -57,9 +57,9 @@ TDataGrid provides several events to facilitate manipulation of its items, -

Using TDataGrid

+

Using TDataGrid

-

Automatically Generated Columns

+

Automatically Generated Columns

TDataGrid by default will create a list of columns based on the structure of the bound data. TDataGrid will read the first row of the data, extract the field names of the row, and construct a column for each field. Each column is of type TBoundColumn.

@@ -77,7 +77,7 @@ public function onLoad($param) { -

Manually Specified Columns

+

Manually Specified Columns

Using automatically generated columns gives a quick way of browsing tabular data. In real applications, however, automatically generated columns are often not sufficient because developers have no way customizing their appearance. Manually specified columns are thus more desirable.

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

Interacting with TDataGrid

+

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.

@@ -118,7 +118,7 @@ The following example shows how to make the previous book information table an i

-

Sorting

+

Sorting

TDataGrid supports sorting its items according to specific columns. To enable sorting, set AllowSorting to true. This will turn column headers into clickable buttons if their SortExpression property is not empty. When users click on the header buttons, an OnSortCommand event will be raised. Developers can write handlers to respond to the sort command and sort the data according to SortExpression which is specified in the corresponding column.

@@ -127,7 +127,7 @@ The following example turns the datagrid in -

Paging

+

Paging

When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedded pager that allows users to specify which page of data they want to see. The pager can be customized via PagerStyle. For example, PagerStyle.Visible determines whether the pager is visible or not; PagerStyle.Position indicates where the pager is displayed; and PagerStyle.Mode specifies what type of pager is displayed, a numeric one or a next-prev one.

@@ -146,7 +146,7 @@ The following example enables the paging functionality of the datagrid shown in

-

Custom Paging

+

Custom Paging

The paging functionality shown above requires loading all data into memory, even though only a portion of them is displayed in a page. For large datasets, this is inefficient and may not always be feasible. TDataGrid provides custom paging to solve this problem. Custom paging only requires the portion of the data to be displayed to end users.

@@ -155,7 +155,7 @@ To enable custom paging, set both AllowPaging and AllowCustomPaging

-

Extending TDataGrid

+

Extending TDataGrid

Besides traditional class inheritance, extensibility of TDataGrid is mainly through developing new datagrid column components. For example, one may want to display an image column. He may use TTemplateColumn to accomplish this task. A better solution is to develop an image column component so that the work can be reused easily in other projects.

diff --git a/demos/quickstart/protected/pages/Controls/DataList.page b/demos/quickstart/protected/pages/Controls/DataList.page index 9d904870..c1ff1147 100644 --- a/demos/quickstart/protected/pages/Controls/DataList.page +++ b/demos/quickstart/protected/pages/Controls/DataList.page @@ -1,6 +1,6 @@ -

TDataList

+

TDataList

TDataList is used to display or modify a list of data items specified by its DataSource or DataSourceID property. Each data item is displayed by a data list item which is a child control of the data list. The Items property contains the list of all data list items.

diff --git a/demos/quickstart/protected/pages/Controls/DatePicker.page b/demos/quickstart/protected/pages/Controls/DatePicker.page index 17d28382..a37ff048 100644 --- a/demos/quickstart/protected/pages/Controls/DatePicker.page +++ b/demos/quickstart/protected/pages/Controls/DatePicker.page @@ -1,6 +1,6 @@ -

TDatePicker

+

TDatePicker

TDatePicker displays a text box for date input purpose. diff --git a/demos/quickstart/protected/pages/Controls/Expression.page b/demos/quickstart/protected/pages/Controls/Expression.page index 80a45a3a..044808c6 100644 --- a/demos/quickstart/protected/pages/Controls/Expression.page +++ b/demos/quickstart/protected/pages/Controls/Expression.page @@ -1,6 +1,6 @@ -

TExpression

+

TExpression

diff --git a/demos/quickstart/protected/pages/Controls/FileUpload.page b/demos/quickstart/protected/pages/Controls/FileUpload.page index 8aa5a0fb..404a144e 100644 --- a/demos/quickstart/protected/pages/Controls/FileUpload.page +++ b/demos/quickstart/protected/pages/Controls/FileUpload.page @@ -1,6 +1,6 @@ -

TFileUpload

+

TFileUpload

diff --git a/demos/quickstart/protected/pages/Controls/Head.page b/demos/quickstart/protected/pages/Controls/Head.page index 269ec404..227b5282 100644 --- a/demos/quickstart/protected/pages/Controls/Head.page +++ b/demos/quickstart/protected/pages/Controls/Head.page @@ -1,6 +1,6 @@ -

THead

+

THead

diff --git a/demos/quickstart/protected/pages/Controls/HiddenField.page b/demos/quickstart/protected/pages/Controls/HiddenField.page index c068d01b..aa2e7c87 100644 --- a/demos/quickstart/protected/pages/Controls/HiddenField.page +++ b/demos/quickstart/protected/pages/Controls/HiddenField.page @@ -1,6 +1,6 @@ -

THiddenField

+

THiddenField

diff --git a/demos/quickstart/protected/pages/Controls/HtmlArea.page b/demos/quickstart/protected/pages/Controls/HtmlArea.page index 0af685d5..00a65573 100644 --- a/demos/quickstart/protected/pages/Controls/HtmlArea.page +++ b/demos/quickstart/protected/pages/Controls/HtmlArea.page @@ -1,6 +1,6 @@ -

THtmlArea

+

THtmlArea

diff --git a/demos/quickstart/protected/pages/Controls/HyperLink.page b/demos/quickstart/protected/pages/Controls/HyperLink.page index afccd041..9fa6bde3 100644 --- a/demos/quickstart/protected/pages/Controls/HyperLink.page +++ b/demos/quickstart/protected/pages/Controls/HyperLink.page @@ -1,6 +1,6 @@ -

THyperLink

+

THyperLink

diff --git a/demos/quickstart/protected/pages/Controls/Image.page b/demos/quickstart/protected/pages/Controls/Image.page index a926c204..1e8df3de 100644 --- a/demos/quickstart/protected/pages/Controls/Image.page +++ b/demos/quickstart/protected/pages/Controls/Image.page @@ -1,6 +1,6 @@ -

TImage

+

TImage

diff --git a/demos/quickstart/protected/pages/Controls/ImageButton.page b/demos/quickstart/protected/pages/Controls/ImageButton.page index b4a8de93..a79ecb6a 100644 --- a/demos/quickstart/protected/pages/Controls/ImageButton.page +++ b/demos/quickstart/protected/pages/Controls/ImageButton.page @@ -1,6 +1,6 @@ -

TImageButton

+

TImageButton

diff --git a/demos/quickstart/protected/pages/Controls/ImageMap.page b/demos/quickstart/protected/pages/Controls/ImageMap.page index 997faad6..002861a3 100644 --- a/demos/quickstart/protected/pages/Controls/ImageMap.page +++ b/demos/quickstart/protected/pages/Controls/ImageMap.page @@ -1,6 +1,6 @@ -

TImageMap

+

TImageMap

diff --git a/demos/quickstart/protected/pages/Controls/InlineFrame.page b/demos/quickstart/protected/pages/Controls/InlineFrame.page index 56e3f382..efd5144d 100644 --- a/demos/quickstart/protected/pages/Controls/InlineFrame.page +++ b/demos/quickstart/protected/pages/Controls/InlineFrame.page @@ -1,6 +1,6 @@ -

TInlineFrame

+

TInlineFrame

diff --git a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page index cff2b7aa..ccb4a27b 100644 --- a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page +++ b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page @@ -1,6 +1,6 @@ -

TJavascriptLogger

+

TJavascriptLogger

diff --git a/demos/quickstart/protected/pages/Controls/Label.page b/demos/quickstart/protected/pages/Controls/Label.page index 69329c8a..b7d5b094 100644 --- a/demos/quickstart/protected/pages/Controls/Label.page +++ b/demos/quickstart/protected/pages/Controls/Label.page @@ -1,6 +1,6 @@ -

TLabel

+

TLabel

diff --git a/demos/quickstart/protected/pages/Controls/LinkButton.page b/demos/quickstart/protected/pages/Controls/LinkButton.page index eb22f9ce..e0255141 100644 --- a/demos/quickstart/protected/pages/Controls/LinkButton.page +++ b/demos/quickstart/protected/pages/Controls/LinkButton.page @@ -1,6 +1,6 @@ -

TLinkButton

+

TLinkButton

diff --git a/demos/quickstart/protected/pages/Controls/List.page b/demos/quickstart/protected/pages/Controls/List.page index cac07330..b5915693 100644 --- a/demos/quickstart/protected/pages/Controls/List.page +++ b/demos/quickstart/protected/pages/Controls/List.page @@ -1,6 +1,6 @@ -

List Controls

+

List Controls

List controls covered in this section all inherit directly or indirectly from TListControl. Therefore, they share the same set of commonly used properties, including,

@@ -48,19 +48,19 @@ $listbox->dataBind(); -

TListBox

+

TListBox

TListBox displays a list box that allows single or multiple selection. Set the property SelectionMode as Single to make a single selection list box, and Multiple a multiple selection list box. The number of rows displayed in the box is specified via the Rows property value.

-

TDropDownList

+

TDropDownList

TDropDownList displays a dropdown list box that allows users to select a single option from a few prespecified ones.

-

TCheckBoxList

+

TCheckBoxList

TCheckBoxList displays a list of checkboxes on a Web page. The alignment of the text besides each checkbox can be specified TextAlign. The layout of the checkboxes can be controlled by the following properties:

@@ -72,13 +72,13 @@ $listbox->dataBind(); -

TRadioButtonList

+

TRadioButtonList

TRadioButtonList is similar to TCheckBoxList in every aspect except that each TRadioButtonList displays a group of radiobuttons. Only one of the radiobuttions can be selected (TCheckBoxList allows multiple selections.)

-

TBulletedList

+

TBulletedList

TBulletedList displays items in a bullet format on a Web page. The style of the bullets can be specified by BulletStyle. When the style is CustomImage, the bullets are displayed as images, which is specified by BulletImageUrl.

diff --git a/demos/quickstart/protected/pages/Controls/Literal.page b/demos/quickstart/protected/pages/Controls/Literal.page index 30a84880..d5d40a13 100644 --- a/demos/quickstart/protected/pages/Controls/Literal.page +++ b/demos/quickstart/protected/pages/Controls/Literal.page @@ -1,6 +1,6 @@ -

TLiteral

+

TLiteral

diff --git a/demos/quickstart/protected/pages/Controls/MultiView.page b/demos/quickstart/protected/pages/Controls/MultiView.page index 7e566181..a22711b6 100644 --- a/demos/quickstart/protected/pages/Controls/MultiView.page +++ b/demos/quickstart/protected/pages/Controls/MultiView.page @@ -1,6 +1,6 @@ -

TMultiView

+

TMultiView

diff --git a/demos/quickstart/protected/pages/Controls/NewControl.page b/demos/quickstart/protected/pages/Controls/NewControl.page index 51d0cc02..8f4b9be9 100644 --- a/demos/quickstart/protected/pages/Controls/NewControl.page +++ b/demos/quickstart/protected/pages/Controls/NewControl.page @@ -1,6 +1,6 @@ -

Writing New Controls

+

Writing New Controls

Writing new controls is often desired by advanced programmers, because they want to reuse the code that they write for dealing with complex presentation and user interactions.

@@ -8,7 +8,7 @@ Writing new controls is often desired by advanced programmers, because they want In general, there are two ways of writing new controls: composition of existing controls and extending existing controls. They all require that the new control inherit from TControl or its child classes.

-

Composition of Existing Controls

+

Composition of Existing Controls

 @@ -19,7 +19,7 @@ One can compose a new control in two ways. One is to extend TCompositeContro 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.

-

Composition by Writing Templates

+

Composition by Writing Templates

We need two files: a control class file named LabeledTextBox.php and a control template file named LabeledTextBox.tpl. Both must reside under the same directory.

@@ -46,7 +46,7 @@ In the above, the method call to ensureChildControls() ensures that bot

-

Composition by Overriding createChildControls()

+

Composition by Overriding createChildControls()

For a composite control as simple as LabeledTextBox, it is better to create it by extending TCompositeControl and overriding the createChildControls() method, because it does not use templates and thus saves template parsing time.

@@ -80,7 +80,7 @@ class LabeledTextBox extends TCompositeControl { -

Using LabeledTextBox

+

Using LabeledTextBox

To use LabeledTextBox control, first we need to include the corresponding class file. Then in a page template, we can write lines like the following,

@@ -91,7 +91,7 @@ To use LabeledTextBox control, first we need to include the correspondi In the above, Label.Text is a subproperty of LabeledTextBox, which refers to the Text property of the Label property. For other details of using LabeledTextBox, see the above online examples.

-

Extending Existing Controls

+

Extending Existing Controls

Extending existing controls is the same as conventional class inheritance. It allows developers to customize existing control classes by overriding their properties, methods, events, or creating new ones.

@@ -102,7 +102,7 @@ The difficulty of the task depends on how much an existing class needs to be cus In this section, we mainly introduce the base control classes TControl and TWebControl, showing how they can be customized. We also introduce how to write controls with specific functionalities, such as loading post data, raising post data and databinding with data source.

-

Extending TControl

+

Extending TControl

TControl is the base class of all control classes. Two methods are of the most importance for derived control classes:

@@ -125,7 +125,7 @@ Other important properties and methods include:
  • Control lifecycles - Life page lifecycles, controls also have lifecycles. Each control undergoes the following lifecycles in order: constructor, onInit(), onLoad(), onPreRender(), render(), and onUnload. More details can be found in the page section.
    • -

    Extending TWebControl

    +

    Extending TWebControl

    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:

    @@ -139,7 +139,7 @@ Other important properties and methods include: When rendering the openning HTML tag, TWebControl calls getTagName() to obtain the tag name. Derived classes may override this method to render different tag names.

    -

    Creating Controls with Special Functionalities

    +

    Creating Controls with Special Functionalities

    If a control wants to respond to client-side events and translate them into server side events (called postback events), such as TButton, it has to implement the IPostBackEventHandler interface.

    diff --git a/demos/quickstart/protected/pages/Controls/Panel.page b/demos/quickstart/protected/pages/Controls/Panel.page index b402cd8f..d507da36 100644 --- a/demos/quickstart/protected/pages/Controls/Panel.page +++ b/demos/quickstart/protected/pages/Controls/Panel.page @@ -1,6 +1,6 @@ -

    TPanel

    +

    TPanel

    diff --git a/demos/quickstart/protected/pages/Controls/PlaceHolder.page b/demos/quickstart/protected/pages/Controls/PlaceHolder.page index 323b1d52..b55d1616 100644 --- a/demos/quickstart/protected/pages/Controls/PlaceHolder.page +++ b/demos/quickstart/protected/pages/Controls/PlaceHolder.page @@ -1,6 +1,6 @@ -

    TPlaceHolder

    +

    TPlaceHolder

    diff --git a/demos/quickstart/protected/pages/Controls/RadioButton.page b/demos/quickstart/protected/pages/Controls/RadioButton.page index 5e1d9d21..b40f37bd 100644 --- a/demos/quickstart/protected/pages/Controls/RadioButton.page +++ b/demos/quickstart/protected/pages/Controls/RadioButton.page @@ -1,6 +1,6 @@ -

    TRadioButton

    +

    TRadioButton

    diff --git a/demos/quickstart/protected/pages/Controls/Repeater.page b/demos/quickstart/protected/pages/Controls/Repeater.page index c40517f3..795e27aa 100644 --- a/demos/quickstart/protected/pages/Controls/Repeater.page +++ b/demos/quickstart/protected/pages/Controls/Repeater.page @@ -1,6 +1,6 @@ -

    TRepeater

    +

    TRepeater

    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.

    diff --git a/demos/quickstart/protected/pages/Controls/SafeHtml.page b/demos/quickstart/protected/pages/Controls/SafeHtml.page index 565c8251..995ceb50 100644 --- a/demos/quickstart/protected/pages/Controls/SafeHtml.page +++ b/demos/quickstart/protected/pages/Controls/SafeHtml.page @@ -1,6 +1,6 @@ -

    TSafeHtml

    +

    TSafeHtml

    diff --git a/demos/quickstart/protected/pages/Controls/Statements.page b/demos/quickstart/protected/pages/Controls/Statements.page index dd26ec1b..3f3bd1fc 100644 --- a/demos/quickstart/protected/pages/Controls/Statements.page +++ b/demos/quickstart/protected/pages/Controls/Statements.page @@ -1,6 +1,6 @@ -

    TStatements

    +

    TStatements

    diff --git a/demos/quickstart/protected/pages/Controls/Table.page b/demos/quickstart/protected/pages/Controls/Table.page index 75fa3fc1..e0f5586e 100644 --- a/demos/quickstart/protected/pages/Controls/Table.page +++ b/demos/quickstart/protected/pages/Controls/Table.page @@ -1,6 +1,6 @@ -

    TTable

    +

    TTable

    diff --git a/demos/quickstart/protected/pages/Controls/TextBox.page b/demos/quickstart/protected/pages/Controls/TextBox.page index 64cb826a..b4d1576f 100644 --- a/demos/quickstart/protected/pages/Controls/TextBox.page +++ b/demos/quickstart/protected/pages/Controls/TextBox.page @@ -1,6 +1,6 @@ -

    TTextBox

    +

    TTextBox

    diff --git a/demos/quickstart/protected/pages/Controls/TextHighlighter.page b/demos/quickstart/protected/pages/Controls/TextHighlighter.page index 40806b02..285a6f3e 100644 --- a/demos/quickstart/protected/pages/Controls/TextHighlighter.page +++ b/demos/quickstart/protected/pages/Controls/TextHighlighter.page @@ -1,6 +1,6 @@ -

    TTextHighlighter

    +

    TTextHighlighter

    diff --git a/demos/quickstart/protected/pages/Controls/Validation.page b/demos/quickstart/protected/pages/Controls/Validation.page index 6d83af3d..a28c8faf 100644 --- a/demos/quickstart/protected/pages/Controls/Validation.page +++ b/demos/quickstart/protected/pages/Controls/Validation.page @@ -1,6 +1,6 @@ -

    Validation Controls

    +

    Validation Controls

    Validation controls, called validators, perform validation on user-entered data values when they are post back to the server. The validation is triggered by a postback control, such as a TButton, a TLinkButton or a TTextBox (under AutoPostBack mode) whose CausesValidation property is true. @@ -32,14 +32,14 @@ Validators share a common set of properties, which are defined in the base class -

    TRequiredFieldValidator

    +

    TRequiredFieldValidator

    TRequiredFieldValidator ensures that the user enters some data in the specified input field. By default, TRequiredFieldValidator will check if the user input is empty or not. The validation fails if the input is empty. By setting InitialValue, the validator can check if the user input is different from InitialValue. If not, the validation fails.

    -

    TRegularExpressionValidator

    +

    TRegularExpressionValidator

    TRegularExpressionValidator verifies the user input against a regular pattern. The validation fails if the input does not match the pattern. The regular expression can be specified by the RegularExpression property. Some commonly used regular expressions include:

    @@ -73,7 +73,7 @@ Note, if the input being validated is empty, TEmailAddressValidator will not do -

    TCompareValidator

    +

    TCompareValidator

    TCompareValidator compares the user input with a constant value specified by ValueToCompare, or another user input specified by ControlToCompare. The Operator property specifies how to compare the values, which includes Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan and LessThanEqual. Before comparison, the values being compared will be converted to the type specified by DataType listed as follows,

    @@ -92,7 +92,7 @@ Note, if the input being validated is empty, TEmailAddressValidator will not do -

    TDataTypeValidator

    +

    TDataTypeValidator

    TDataTypeValidator verifies if the input data is of specific type indicated by DataType. The data types that can be checked against are the same as those in TCompareValidator.

    @@ -104,7 +104,7 @@ TDataTypeValidator verifies if the input data is of specific type indicated by < -

    TRangeValidator

    +

    TRangeValidator

    TRangeValidator verifies whether an input value is within a specified range. TRangeValidator uses three key properties to perform its validation. The MinValue and MaxValue properties specify the minimum and maximum values of the valid range. The DataType property specifies the data type of the value being validated. The value will be first converted into the specified type and then compare with the valid range. The data types that can be checked against are the same as those in TCompareValidator.

    @@ -115,7 +115,7 @@ TRangeValidator verifies whether an input value is within a specified range. TRa -

    TCustomValidator

    +

    TCustomValidator

    TCustomValidator performs user-defined validation (either server-side or client-side or both) on an input control.

    @@ -139,7 +139,7 @@ function ValidationFunctionName(sender, parameter) -

    TValidationSummary

    +

    TValidationSummary

    TValidationSummary displays a summary of validation errors inline on a Web page, in a message box, or both.

    diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page index f903e183..ce8bc774 100644 --- a/demos/quickstart/protected/pages/Controls/Wizard.page +++ b/demos/quickstart/protected/pages/Controls/Wizard.page @@ -1,9 +1,9 @@ -

    TWizard

    +

    TWizard

    -

    Overview

    +

    Overview

    TWizard is analogous to the installation wizard commonly used to install software on Windows. It splits a large form and presents the user with a series of smaller forms, called wizard steps, to complete. The following figure shows how a wizard is composed of when presented to users, where step content is the main content of a wizard step for users to complete, header refers to header content common to all steps, navigation contains buttons that allow users to navigate step by step, and side bar contains a list of hyperlinks by which users can reach to any step with one click. The visibility of the side bar can be toggled by setting ShowSideBar.

    @@ -49,15 +49,15 @@ In the above, StepType refers to the type of a wizard step, which can a -

    Using TWizard

    +

    Using TWizard

    -

    A Single-Step Wizard Sample

    +

    A Single-Step Wizard Sample

    In this sample, we use wizard to collect user's preference of color. In the first step, the user is presented with a dropdown list from which he can choose hist favorite color. In the second step, the complete step, his choice in the previous step is displayed. In real application, at this step the choice may be stored in database in the backend.

    -

    Customizing Wizard Styles

    +

    Customizing Wizard Styles

    TWizard defines a whole set of properties for customization of appearance of its various components as shown in the above figure. In particular, the following properties are provided for style customization:

    @@ -69,7 +69,7 @@ In this sample, we use wizard to collect user's preference of color. In the firs -

    Customizing Wizard Navigation

    +

    Customizing Wizard Navigation

    Given a set of wizard steps, TWizard supports three different ways of navigation among them:

    @@ -80,7 +80,7 @@ Given a set of wizard steps, TWizard supports three different ways of n -

    Using Templates in Wizard

    +

    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.

    @@ -91,7 +91,7 @@ Given a set of wizard steps, TWizard supports three different ways of n -

    Using Templated Wizard Steps

    +

    Using Templated Wizard Steps

    Wizard steps can also be templated. By using TTemplatedWizardStep, one can customize step content and navigation through its ContentTemplate and NavigationTemplate properties, respectively. This is useful for control developers to build specialized wizards, such as user registration, shopping carts, etc.

    diff --git a/demos/quickstart/protected/pages/Fundamentals/Applications.page b/demos/quickstart/protected/pages/Fundamentals/Applications.page index b33b4f10..48db41e8 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Applications.page +++ b/demos/quickstart/protected/pages/Fundamentals/Applications.page @@ -1,6 +1,6 @@ -

    Applications

    +

    Applications

    An application is an instance of TApplication or its derived class. It manages modules that provide different functionalities and are loaded when needed. It provides services to end-users. It is the central place to store various parameters used in an application. In a PRADO application, the application instance is the only object that is globally accessible via Prado::getApplication() function call.

    @@ -14,7 +14,7 @@ $application->run(); where the method run() starts the application to handle user requests.

    -

    Directory Organization

    +

    Directory Organization

    A minimal PRADO application contains two files: an entry file and a page template file. They must be organized as follows,

    @@ -33,7 +33,7 @@ A minimal PRADO application contains two files: an entry file and a page templat A product PRADO application usually needs more files. It may include an application configuration file named application.xml under the application base path protected. The pages may be organized in directories, some of which may contain page configuration files named config.xml. Fore more details, please see configurations section.

    -

    Application Deployment

    +

    Application Deployment

    Deploying a PRADO application mainly involves copying directories. For example, to deploy the above minimal application to another server, follow the following steps,

    @@ -43,7 +43,7 @@ Deploying a PRADO application mainly involves copying directories. For example,
  • Remove all content under assets and runtime directories and make sure both directories are writable by the Web server process.
    • -

    Application Lifecycles

    +

    Application Lifecycles

    Like page lifecycles, an application also has lifecycles. Application modules can register for the lifecycle events. When the application reaches a particular lifecycle and raises the corresponding event, the registered module methods are invoked automatically. Modules included in the PRADO release, such as TAuthManager, are using this way to accomplish their goals.

    diff --git a/demos/quickstart/protected/pages/Fundamentals/Architecture.page b/demos/quickstart/protected/pages/Fundamentals/Architecture.page index d53b7ee1..5811da71 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Architecture.page +++ b/demos/quickstart/protected/pages/Fundamentals/Architecture.page @@ -1,5 +1,5 @@ -

    Architecture

    +

    Architecture

    PRADO is primarily a presentational framework, although it is not limited to be so. The framework focuses on making Web programming, which deals most of the time with user interactions, to be component-based and event-driven so that developers can be more productive. The following class tree depicts some of the major classes provided by PRADO, diff --git a/demos/quickstart/protected/pages/Fundamentals/Components.page b/demos/quickstart/protected/pages/Fundamentals/Components.page index c419a5fa..dc4da67c 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Components.page +++ b/demos/quickstart/protected/pages/Fundamentals/Components.page @@ -1,10 +1,10 @@ -

    Components

    +

    Components

    A component is an instance of TComponent or its child class. The base class TComponent implements the mechanism of component properties and events.

    -

    Component Properties

    +

    Component Properties

    A component property can be viewed as a public variable describing a specific aspect of the component, such as the background color, the font size, etc. A property is defined by the existence of a getter and/or a setter method in the component class. For example, in TControl, we define its ID property using the following getter and setter methods, @@ -34,7 +34,7 @@ $component->setID( $id ); A property is read-only if it has a getter method but no setter method. Since PHP method names are case-insensitive, property names are also case-insensitive. A component class inherits all its ancestor classes' properties.

    -

    Subproperties

    +

    Subproperties

    A subproperty is a property of some object-typed property. For example, TWebControl has a Font property which is of TFont type. Then the Name property of Font is referred to as a subproperty (with respect to TWebControl).

    @@ -53,7 +53,7 @@ $component->getFont()->setName( $name );

    -

    Component Events

    +

    Component Events

    Component events are special properties that take method names as their values. Attaching (setting) a method to an event will hook up the method to the places at which the event is raised. Therefore, the behavior of a component can be modified in a way that may not be foreseen during the development of the component.

    @@ -76,7 +76,7 @@ $button->attachEventHandler( 'OnClick' , $callback ); where $callback refers to a valid PHP callback (e.g. a function name, a class method array($object,'method'), etc.)

    -

    Namespaces

    +

    Namespaces

    A namespace refers to a logical grouping of some class names so that they can be differentiated from other class names even if their names are the same. Since PHP does not support namespace intrinsically, you cannot create instances of two classes who have the same name but with different definitions. To differentiate from user defined classes, all PRADO classes are prefixed with a letter 'T' (meaning 'Type'). Users are advised not to name their classes like this. Instead, they may prefix their class names with any other letter(s).

    @@ -102,12 +102,12 @@ which will include the class file if MyClass is not defined. For more details about defining path aliases, see application configuration section.

    -

    Component Instantiation

    +

    Component Instantiation

    Component instantiation means creating instances of component classes. There are two types of component instantation: static instantiation and dynamic instantiation. The created components are called static components and dynamic components, respectively.

    -

    Dynamic Component Instantiation

    +

    Dynamic Component Instantiation

    Dynamic component instantiation means creating component instances in PHP code. It is the same as the commonly referred object creation in PHP. A component can be dynamically created using one of the following two methods in PHP, @@ -117,7 +117,7 @@ $component = Prado::createComponent('ComponentType'); where ComponentType refers to a class name or a type name in namespace format (e.g. System.Web.UI.TControl). The second approach is introduced to compensate for the lack of namespace support in PHP.

    -

    Static Component Instantiation

    +

    Static Component Instantiation

    Static component instantiation is about creating components via configurations. The actual creation work is done by the PRADO framework. For example, in an application configuration, one can configure a module to be loaded when the application runs. The module is thus a static component created by the framework. Static component instantiation is more commonly used in templates. Every component tag in a template specifies a component that will be automatically created by the framework when the template is loaded. For example, in a page template, the following tag will lead to the creation of a TButton component on the page, diff --git a/demos/quickstart/protected/pages/Fundamentals/Controls.page b/demos/quickstart/protected/pages/Fundamentals/Controls.page index a90dd604..d36bff7a 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Controls.page +++ b/demos/quickstart/protected/pages/Fundamentals/Controls.page @@ -1,10 +1,10 @@ -

    Controls

    +

    Controls

    A control is an instance of class TControl or its subclass. A control is a component defined in addition with user interface. The base class TControl defines the parent-child relationship among controls which reflects the containment relationship among user interface elements.

    -

    Control Tree

    +

    Control Tree

    Controls are related to each other via parent-child relationship. Each parent control can have one or several child controls. A parent control is in charge of the state transition of its child controls. The rendering result of the child controls are usually used to compose the parent control's presentation. The parent-child relationship brings together controls into a control tree. A page is at the root of the tree, whose presentation is returned to the end-users.

    @@ -17,12 +17,12 @@ $parent->Controls[]=$child; where the property Controls refers to the child control collection of the parent.

    -

    Control Identification

    +

    Control Identification

    Each control has an ID property that can be uniquely identify itself among its sibling controls. In addition, each control has a UniqueID and a ClientID which can be used to globally identify the control in the tree that the control resides in. UniqueID and ClientID are very similar. The former is used by the framework to determine the location of the corresponding control in the tree, while the latter is mainly used on the client side as HTML tag IDs. In general, you should not rely on the explicit format of UniqueID or ClientID.

    -

    Naming Containers

    +

    Naming Containers

    Each control has a naming container which is a control creating a unique namespace for differentiating between controls with the same ID. For example, a TRepeater control creates multiple items each having child controls with the same IDs. To differentiate these child controls, each item serves as a naming container. Therefore, a child control may be uniquely identified using its naming container's ID together with its own ID. As you may already have understood, UniqueID and ClientID rely on the naming containers.

    @@ -30,7 +30,7 @@ Each control has a naming container which is a control creating a unique namespa A control can serve as a naming container if it implements the INamingContainer interface.

    -

    ViewState and ControlState

    +

    ViewState and ControlState

    HTTP is a stateless protocol, meaning it does not provide functionality to support continuing interaction between a user and a server. Each request is considered as discrete and independent of each other. A Web application, however, often needs to know what a user has done in previous requests. People thus introduce sessions to help remember such state information.

    diff --git a/demos/quickstart/protected/pages/Fundamentals/Hangman.page b/demos/quickstart/protected/pages/Fundamentals/Hangman.page index d73868a0..56180b9e 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Hangman.page +++ b/demos/quickstart/protected/pages/Fundamentals/Hangman.page @@ -1,6 +1,6 @@ -

    Sample: Hangman Game

    +

    Sample: Hangman Game

    Having seen the simple "Hello World" application, we now build a more complex application called "Hangman Game". In this game, the player is asked to guess a word, a letter at a time. If he guesses a letter right, the letter will be shown in the word. The player can continue to guess as long as the number of his misses is within a prespecified bound. The player wins the game if he finds out the word within the miss bound, or he loses.

    diff --git a/demos/quickstart/protected/pages/Fundamentals/Modules.page b/demos/quickstart/protected/pages/Fundamentals/Modules.page index 782ebb8c..df67f0f3 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Modules.page +++ b/demos/quickstart/protected/pages/Fundamentals/Modules.page @@ -1,6 +1,6 @@ -

    Modules

    +

    Modules

    A module is an instance of a class implementing the IModule interface. A module is commonly designed to provide specific functionality that may be plugged into a PRADO application and shared by all components in the application.

    @@ -12,31 +12,31 @@ There are three core modules that are loaded by default whenever an application

    -

    Request Module

    +

    Request Module

    Request module represents provides storage and access scheme for user request sent via HTTP. User request data comes from several sources, including URL, post data, session data, cookie data, etc. These data can all be accessed via the request module. By default, PRADO uses THttpRequest as request module. The request module can be accessed via the Request property of application and controls.

    -

    Response Module

    +

    Response Module

    Response module implements the mechanism for sending output to client users. Response module may be configured to control how output are cached on the client side. It may also be used to send cookies back to the client side. By default, PRADO uses THttpResponse as response module. The response module can be accessed via the Response property of application and controls.

    -

    Session Module

    +

    Session Module

    Session module encapsulates the functionalities related with user session handling. Session module is automatically loaded when an application uses session. By default, PRADO uses THttpSession as session module, which is a simple wrapper of the session functions provided by PHP. The session module can be accessed via the Session property of application and controls.

    -

    Error Handler Module

    +

    Error Handler Module

    Error handler module is used to capture and process all error conditions in an application. PRADO uses TErrorHandler as error handler module. It captures all PHP warnings, notices and exceptions, and displays in an appropriate form to end-users. The error handler module can be accessed via the ErrorHandler property of the application instance.

    -

    Custom Modules

    +

    Custom Modules

    PRADO is released with a few more modules besides the core ones. They include caching modules (TSqliteCache and TMemCache), user management module (TUserManager), authentication and authorization module (TAuthManager), etc.

    diff --git a/demos/quickstart/protected/pages/Fundamentals/Pages.page b/demos/quickstart/protected/pages/Fundamentals/Pages.page index 8dfb5caa..1e91801c 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Pages.page +++ b/demos/quickstart/protected/pages/Fundamentals/Pages.page @@ -1,6 +1,6 @@ -

    Pages

    +

    Pages

    Pages are top-most controls that have no parent. The presentation of pages are directly displayed to end-users. Users access pages by sending page service requests.

    @@ -8,13 +8,13 @@ Pages are top-most controls that have no parent. The presentation of pages are d Each page must have a template file. The file name suffix must be .page. The file name (without suffix) is the page name. PRADO will try to locate a page class file under the directory containing the page template file. Such a page class file must have the same file name (suffixed with .php) as the template file. If the class file is not found, the page will take class TPage.

    -

    PostBack

    +

    PostBack

    A form submission is called postback if the submission is made to the page containing the form. Postback can be considered an event happened on the client side, raised by the user. PRADO will try to identify which control on the server side is responsible for a postback event. If one is determined, for example, a TButton, we call it the postback event sender which will translate the postback event into some specific server-side event (e.g. Click and Command events for TButton).

    -

    Page Lifecycles

    +

    Page Lifecycles

    Understanding the page lifecycles is crucial to grasp PRADO programming. Page lifecycles refer to the state transitions of a page when serving this page to end-users. They can be depicted in the following statechart, diff --git a/demos/quickstart/protected/pages/Fundamentals/Services.page b/demos/quickstart/protected/pages/Fundamentals/Services.page index 22c09c99..920c6bea 100644 --- a/demos/quickstart/protected/pages/Fundamentals/Services.page +++ b/demos/quickstart/protected/pages/Fundamentals/Services.page @@ -1,6 +1,6 @@ -

    Services

    +

    Services

    A service is an instance of a class implementing the IService interface. Each kind of service processes a specific type of user requests. For example, the page service responds to users' requests for PRADO pages.

    @@ -14,7 +14,7 @@ http://hostname/index.php?page=Fundamentals.Services Developers may implement additional services for their applications. To make a service available, configure it in application configurations.

    -

    Page Service

    +

    Page Service

    PRADO implements TPageService to process users' page requests. Pages are stored under a directory specified by the BasePath property of the page service. The property defaults to pages directory under the application base path. You may change this default by configuring the service in the application configuration.

    diff --git a/demos/quickstart/protected/pages/GettingStarted/AboutPrado.page b/demos/quickstart/protected/pages/GettingStarted/AboutPrado.page index 6ac58b73..dc8de7ae 100644 --- a/demos/quickstart/protected/pages/GettingStarted/AboutPrado.page +++ b/demos/quickstart/protected/pages/GettingStarted/AboutPrado.page @@ -1,5 +1,5 @@ -

    What is PRADO?

    +

    What is PRADO?

    PRADO is a component-based and event-driven programming framework for developing Web applications in PHP 5. PRADO stands for PHP Rapid Application Development Object-oriented.

    @@ -16,7 +16,7 @@ To facilitate interacting with components, PRADO implements an event-driven prog In summary, developing a PRADO Web application mainly involves instantiating prebuilt component types, configuring them by setting their properties, responding to their events by writing handler functions, and composing them into pages for the application. It is very similar to RAD toolkits, such as Borland Delphi and Microsoft Visual Basic, that are used to develop desktop GUI applications.

    -

    Why PRADO?

    +

    Why PRADO?

    PRADO is mostly quoted as a unique framework. In fact, it is so unique that it may turn your boring PHP programming into a fun task. The following list is a short summary of the main features of PRADO,

    @@ -32,7 +32,7 @@ PRADO is mostly quoted as a unique framework. In fact, it is so unique that it m
  • Other features - Powerful error/exception handling and message logging; generic caching and selective output caching; customizable and localizable error handling; extensible authentication and authorization; security measures such as cross-site script (CSS) prevention, cookie protection, etc.
    • -

    What Is PRADO Best For?

    +

    What Is PRADO Best For?

    PRADO is best suitable for creating Web front-ends that are highly user-interactive and require small to medium traffic. It can be used to develop systems as simple as a blog system to systems as complex as a content management system (CMS) or a complete e-commerce solution. PRADO can help you cut your development time significantly.

    @@ -43,7 +43,7 @@ PRADO does not exclude other back-end solutions such as most DB abstraction laye Without caching techniques, PRADO may not be suitable for developing extremely high-traffic Web applications, such as popular portals, forums, etc. In these applications, every niche of potential performance gain must be exploited and server caching (e.g. Zend optimizer) is almost a must. PRADO implements a generic cache technique and enables selective caching of part of Web contents.

    -

    How Is PRADO Compared with Other Frameworks?

    +

    How Is PRADO Compared with Other Frameworks?

    PRADO is described as a unique framework. Its uniqueness mainly lies in the component-based and event-driven programming paradigm that it tries to promote. Although this programming paradigm is not new in desktop application programming and not new in a few Web programming languages, PRADO is perhaps the first PHP framework enabling it.

    @@ -51,7 +51,7 @@ PRADO is described as a unique framework. Its uniqueness mainly lies in the comp Most PHP frameworks are trying to establish a loose standard of organizing PHP programming, most preferably the MVC (model-view-controller) model. It is difficult to compare PRADO with these frameworks because they have different focuses. What we can say is, PRADO is more like a high-level language built upon PHP, while the MVC frameworks stand for the best programming practices. Both aim to help developers to rapidly complete Web application development. The advantage of PRADO is its rich set of prebuilt powerful components and extreme reusability of the PRADO code, while the advantage of the MVC frameworks is the complete separation of model, view and controller, which greatly facilitates team integration.

    -

    History of PRADO

    +

    History of PRADO

    The very original inspiration of PRADO came from Apache Tapestry. During the design and implementation, I borrowed many ideas from Borland Delphi and Microsoft ASP.NET. The first version of PRADO came out in June 2004 and was written in PHP 4. Driven by the Zend PHP 5 coding contest, I rewrote PRADO in PHP 5, which proved to be a wise move, thanks to the new object model provided by PHP 5. PRADO won the grand prize in the Zend contest, earning the highest votes from both the public and the judges' panel.

    diff --git a/demos/quickstart/protected/pages/GettingStarted/HelloWorld.page b/demos/quickstart/protected/pages/GettingStarted/HelloWorld.page index b5016f4e..780c92b9 100644 --- a/demos/quickstart/protected/pages/GettingStarted/HelloWorld.page +++ b/demos/quickstart/protected/pages/GettingStarted/HelloWorld.page @@ -1,5 +1,5 @@ -

    My First PRADO Application

    +

    My First PRADO Application

    In this section, we guide you through creating your first PRADO application, the famous "Hello World" application.

    diff --git a/demos/quickstart/protected/pages/GettingStarted/Installation.page b/demos/quickstart/protected/pages/GettingStarted/Installation.page index ae3d18c3..07a76042 100644 --- a/demos/quickstart/protected/pages/GettingStarted/Installation.page +++ b/demos/quickstart/protected/pages/GettingStarted/Installation.page @@ -1,5 +1,5 @@ -

    Installing PRADO

    +

    Installing PRADO

    If you are viewing this page from your own Web server, you are already done with the installation.

    diff --git a/demos/quickstart/protected/pages/GettingStarted/Introduction.page b/demos/quickstart/protected/pages/GettingStarted/Introduction.page index 3f3ea168..42ee0dad 100644 --- a/demos/quickstart/protected/pages/GettingStarted/Introduction.page +++ b/demos/quickstart/protected/pages/GettingStarted/Introduction.page @@ -1,5 +1,5 @@ -

    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.

    diff --git a/demos/quickstart/protected/pages/GettingStarted/Upgrading.page b/demos/quickstart/protected/pages/GettingStarted/Upgrading.page index 287d3f84..cff4e72f 100644 --- a/demos/quickstart/protected/pages/GettingStarted/Upgrading.page +++ b/demos/quickstart/protected/pages/GettingStarted/Upgrading.page @@ -1,6 +1,6 @@ -

    Upgrading from v2.x and v1.x

    +

    Upgrading from v2.x and v1.x

    PRADO v3.0 is NOT backward compatible with earlier versions of PRADO. @@ -12,7 +12,7 @@ A good news is, properties and events of most controls remain intact, and the sy We summarize in the following the most significant changes in v3.0 to help developers upgrade their v2.x and v1.x PRADO applications more easily, if needed.

    -

    Component Definition

    +

    Component Definition

    Version 3.0 has completely discarded the need of component specification files. It relies more on conventions for defining component properties and events. In particular, a property is defined by the existence of a getter method and/or a setter method, while an event is defined by the existence of an on-method. Property and event names in v3.0 are both case-insensitive. As a consequence, developers are now required to take care of type conversions when a component property is being set. For example, the following code is used to define the setter method for the Enabled property of TControl, which is of boolean type,

    @@ -27,22 +27,22 @@ public function setEnabled($value) where TPropertyValue::ensureBoolean() is used to ensure that the input value be a boolean. This is because when the property is configured in template, a string value is passed to the setter. In previous versions, PRADO knows the property type based on the component specification files and does the type conversion for you.

    -

    Application Controller

    +

    Application Controller

    Application controller now implements a modular architecture. Modules can be plugged in and configured in application specifications. Each module assumes a particular functionality, and they are coordinated together by the application lifecycle. The concept of v2.x modules is replaced in v3.0 by page directories. As a result, the format of v3.0 application specification is also different from earlier versions.

    -

    Pages

    +

    Pages

    Pages in v3.0 are organized in directories which may be compared to the module concept in v2.x. Pages are requested using the path to them. For example, a URL index.php?page=Controls.Samples.Sample1 would be used to request for a page named Sample1 stored under the [BasePath]/Controls/Samples directory, where [BasePath] refers to the root page path. The file name of a page template must be ended with .page, mainly to differentiate page templates from non-page control templates whose file names must be ended with .tpl.

    -

    Control Relationship

    +

    Control Relationship

    Version 3.0 redefines the relationships between controls. In particular, the parent-child relationship now refers to the enclosure relationship between controls' presentation. And a new naming-container relationship is introduced to help better manage control IDs. For more details, see the controls section.

    -

    Template Syntax

    +

    Template Syntax

    The syntax of control templates in v3.0 remains similar to those in earlier versions, with many enhancements. A major change is about the databinding expression. In v3.0, this is done by the following,

    @@ -53,7 +53,7 @@ The syntax of control templates in v3.0 remains similar to those in earlier vers Expression and statement tags are also changed similarly. For more details, see the template definition section.

    -

    Theme Syntax

    +

    Theme Syntax

    Themes in v3.0 are defined like control templates with a few restrictions.

    diff --git a/demos/quickstart/protected/pages/Search.page b/demos/quickstart/protected/pages/Search.page new file mode 100644 index 00000000..d2aee66e --- /dev/null +++ b/demos/quickstart/protected/pages/Search.page @@ -0,0 +1,28 @@ + +
    +
    + +
    + + +
    + Found <%# $this->Parent->Data->Count %> results. +
    +     + +
    +
    + <%# $this->ItemIndex + 1 %>. + + <%# $this->DataItem->title %> + +
    +

    <%# $this->Page->HighlightSearch($this->DataItem->text) %>

    +
    +     + + Unable to find "<%= htmlentities($this->Page->search->Text) %>". + +     +
    +     \ No newline at end of file diff --git a/demos/quickstart/protected/pages/Search.php b/demos/quickstart/protected/pages/Search.php new file mode 100644 index 00000000..cadca368 --- /dev/null +++ b/demos/quickstart/protected/pages/Search.php @@ -0,0 +1,53 @@ +IsPostBack && strlen($text = $this->search->getText()) > 0) + { + $search = $this->getApplication()->getModule("search"); + $this->results->setDataSource($search->find($text)); + $this->results->dataBind(); + } + } + + public function highlightSearch($text) + { + $words = str_word_count($text, 1); + $keys = str_word_count(strtolower($this->search->getText()),1); + $where = 0; + $t = count($words); + for($i = 0; $i<$t; $i++) + { + if($this->containsKeys($words[$i], $keys)) + { + $words[$i] = ''.$words[$i].''; + $where = $i; + break; + } + } + + $min = $where - 15 < 0 ? 0 : $where - 15; + $max = $where + 15 > $t ? $t : $where + 15; + $subtext = array_splice($words, $min, $max-$min); + $prefix = $min == 0 ? '' : '...'; + $suffix = $max == $t ? '' : '...'; + return $prefix.implode(' ', $subtext).$suffix; + } + + protected function containsKeys($word, $keys) + { + foreach($keys as $key) + { + if(is_int(strpos($word, $key))) + return true; + } + return false; + } +} + +?> \ No newline at end of file -- cgit v1.2.3

    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.