[phpWebApp-commits] CVS: documentation/templates/tutorial submenu_items.php,NONE,1.1.2.1 tutorial.ph
Brought to you by:
dashohoxha
Menu
▾
▴
[phpWebApp-commits] CVS: documentation/templates/tutorial submenu_items.php,NONE,1.1.2.1 tutorial.php,NONE,1.1.2.1 advanced.html,1.1,1.1.4.1 database.html,1.1,1.1.4.1 events.html,1.1,1.1.4.1 intro.html,1.1,1.1.4.1 sess_var.html,1.1,1.1.4.1 templates.html,1.4,1.4.2.1 transitions.html,1.6,1.6.2.1 tutorial.html,1.2,1.2.4.1 weboxes.html,1.1,1.1.4.1
|
From: Yves G. <ga...@us...> - 2002-04-13 19:18:17
|
Update of /cvsroot/phpwebapp/documentation/templates/tutorial
In directory usw-pr-cvs1:/tmp/cvs-serv20719/templates/tutorial
Modified Files:
Tag: gablin_1
advanced.html database.html events.html intro.html
sess_var.html templates.html transitions.html tutorial.html
weboxes.html
Added Files:
Tag: gablin_1
submenu_items.php tutorial.php
Log Message:
--- NEW FILE: submenu_items.php ---
<?
//The $tab_items array contains the items of the tab. The values
//of this array are used as labels for the items of the tab, and
//the keys are used to generate the name of the template that
//contains the subform.
$tab_items = array(
"intro" => "Introduction",
"transitions" => "1-Transitions",
"templates" => "2-Templates",
"weboxes" => "3-WebBox-es",
"events" => "4-Events",
"sess_var" => "5-Session and Variables",
"database" => "6-Database",
"advanced" => "7-Advanced"
);
?>
--- NEW FILE: tutorial.php ---
<?
function tutorial_eventHandler($event)
{
global $session;
}
function tutorial_onLoad()
{
global $session;
$submenuBaseURL = WebApp::getVar("./");
$session->Vars["submenuBaseURL"] = $submenuBaseURL;
}
function tutorial_onRender()
{
global $session;
}
?>
Index: advanced.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/advanced.html,v
retrieving revision 1.1
retrieving revision 1.1.4.1
diff -C2 -d -r1.1 -r1.1.4.1
*** advanced.html 16 Dec 2001 05:47:05 -0000 1.1
--- advanced.html 13 Apr 2002 19:18:04 -0000 1.1.4.1
***************
*** 1,25 ****
! <h3>7 - All the rest of the advanced features</h3>
! A complicated, real and almost finished web application (which
may evolve from the previous samples or may be independent of
them), which makes use and explains almost all of the advanced
features of framework which have not been explained in the
! previous samples. Such features may be:
<ul>
! <li> Detailed explanation of the <Repeat> element and the page
! recordsets.
! <li> <Var> elements
! <li> An <Include> element that uses a variable.
! <li> Usage of an external webox.
! <li> Etc.
</ul>
! <br><br>
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]
! <br><br>
! <hr>
! <br>
! <ul>
! <li>
! <li>
! <li>
! </ul>
\ No newline at end of file
--- 1,18 ----
! <h2>7 - All the rest of the advanced features</h2>
!
! <p>A complicated, real and almost finished web application (which
may evolve from the previous samples or may be independent of
them), which makes use and explains almost all of the advanced
features of framework which have not been explained in the
! previous samples. Such features may be:</p>
<ul>
! <li>Detailed explanation of the <Repeat> element and the page recordsets.
! <li><Var> elements
! <li>An <Include> element that uses a variable.
! <li>Usage of an external webox.
! <li>Etc.
</ul>
! <p>[<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]</p>
! <hr />
! <b>.<br />.<br />.</b>
Index: database.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/database.html,v
retrieving revision 1.1
retrieving revision 1.1.4.1
diff -C2 -d -r1.1 -r1.1.4.1
*** database.html 16 Dec 2001 05:47:05 -0000 1.1
--- database.html 13 Apr 2002 19:18:04 -0000 1.1.4.1
***************
*** 1,4 ****
! <h3>6 - Interacting with a Database</h3>
! Explains how to set a default connection with a database.
Explains the configuration file of a template (*.tpc) and
the <Recordset> element. Explains the <Repeat> elements and
--- 1,5 ----
! <h2>6 - Interacting with a Database</h2>
!
! <p>Explains how to set a default connection with a database.
Explains the configuration file of a template (*.tpc) and
the <Recordset> element. Explains the <Repeat> elements and
***************
*** 8,21 ****
and WebApp::execQuery() inside the PHP code of the webox.
Explains how to debug the recordsets of the page and the execution
! times of the queries (and other processes).
! <br><br>
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]
! <br><br>
! <hr>
! <br>
! <ul>
! <li>
! <li>
! <li>
! </ul>
\ No newline at end of file
--- 9,15 ----
and WebApp::execQuery() inside the PHP code of the webox.
Explains how to debug the recordsets of the page and the execution
! times of the queries (and other processes).</p>
! <p>[<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]</p>
! <hr />
! <b>.<br />.<br />.</b>
Index: events.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/events.html,v
retrieving revision 1.1
retrieving revision 1.1.4.1
diff -C2 -d -r1.1 -r1.1.4.1
*** events.html 16 Dec 2001 05:47:05 -0000 1.1
--- events.html 13 Apr 2002 19:18:04 -0000 1.1.4.1
***************
*** 1,18 ****
! <h3>4 - Sending and Handelling Events</h3>
! Some of the transitions send
events to some of the weboxes. The target weboxes handle
these events in their eventHandler() functions. Explains also
the transitions to 'thisPage', sending an event to 'any' webox,
! and sending events to 'none' of the weboxes (independent events).
! <br><br>
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]
! <br><br>
! <hr>
! <br>
! <ul>
! <li>
! <li>
! <li>
! </ul>
\ No newline at end of file
--- 1,11 ----
+ <h2>4 - Sending and Handelling Events</h2>
! <p>Some of the transitions send
events to some of the weboxes. The target weboxes handle
these events in their eventHandler() functions. Explains also
the transitions to 'thisPage', sending an event to 'any' webox,
! and sending events to 'none' of the weboxes (independent events).</p>
! <p>[<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]</p>
! <hr />
! <b>.<br />.<br />.</b>
Index: intro.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/intro.html,v
retrieving revision 1.1
retrieving revision 1.1.4.1
diff -C2 -d -r1.1 -r1.1.4.1
*** intro.html 16 Dec 2001 05:47:05 -0000 1.1
--- intro.html 13 Apr 2002 19:18:04 -0000 1.1.4.1
***************
*** 1,115 ****
! The tutorial consists of a list of sample applications
which are built using phpWebApp. Each application uses some
features of phpWebApp and has explanations about the features
used. It also has code reviews which show how these features
are used in the application, and exercises which require the
! reader to try himself some simple modifications to the application.
! <p>
! Each application builds on the things explained on the previous
applications and explains only the new features that are introduced
! in it, so it is recomended to study them in the given order.
! <p>
! These sample applications may also serve as templates for your applications.
Instead of building a new application from scratch, you can just copy one
! of the samples and modify it according to your needs.
! <br>
! <br>
! <table width="100%" align="center" cellspacing="0" cellpadding="20" border="0">
! <tr>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('transitions')">1 - Transitions</a></b>
! <br>
! A very simple application that has 2 or 3 HTML files
! which have transitions to each-other and have some
! links to external pages.
! Explains the folder structure of a simple application,
! explains what are the transitions and the difference
! between the transitions and the links. Explains how to
! debug transitions.
! </td>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('templates')">2 - Templates</a></b>
! <br>
! The HTML files now become templates. This application
! uses the <Include> tag to insert the same header file
! at the beginning of each template and to break the
! templates into sub templates. It shows how to include
! the javascript code and the stylesheet of each template.
! It also explains the use of the framework comments and
! the difference between them and the HTML comments.
! Explains how to debug the template structure.
! </td>
! </tr>
! <tr>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('weboxes')">3 - Introducing WebBox-es</a></b>
! <br>
! Some of the templates are turned into weboxes.
! Explains the fundamental difference between a template
! and a webox. The PHP code of the weboxes
! declares the function onRender(), where some variables
! are added using WebApp::addVar(), and these {{variables}}
! are used in the corresponding template.
! </td>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('events')">4 - Sending and Handelling Events</a></b>
! <br>
! Some of the transitions send
! events to some of the weboxes. The target weboxes handle
! these events in their eventHandler() functions. Explains also
! the transitions to 'thisPage', sending an event to 'any' webox,
! and sending events to 'none' of the weboxes (independent events).
! </td>
! </tr>
! <tr>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('sess_var')">5 - Session and Variables</a></b>
! <br>
! Explains what are the session variables and how to use them.
! Explains further how the {{template variables}} are evaluated.
! Explains how the session variables are used to keep the state
! of the weboxes and the states of the application (introduces
! the function onLoad() of the weboxes). Explains how the <If>
! elements are used to display templates conditionally.
! Explains how to debug the session variables.
! </td>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('database')">6 - Interacting with a Database</a></b>
! <br>
! Explains how to set a default connection with a database.
! Explains the configuration file of a template (*.tpc) and
! the <Recordset> element. Explains the <Repeat> elements and
! how to use them inside a template. Explains the '.db' file
! of a webox, the <Recordset> and <dbCommand> elements inside it,
! and how to use the functions WebApp::execDBCmd(), WebApp::openRS()
! and WebApp::execQuery() inside the PHP code of the webox.
! Explains how to debug the recordsets of the page and the execution
! times of the queries (and other processes).
! </td>
! </tr>
! <tr>
! <td width="50%" valign="top">
! <b><a href="javascript: tutorialTab('advanced')">7 - All the rest of the advanced features</a></b>
! <br>
! A complicated, real and almost finished web application (which
! may evolve from the previous samples or may be independent of
! them), which makes use and explains almost all of the advanced
! features of framework which have not been explained in the
! previous samples. Such features may be:
! <ul>
! <li> Detailed explanation of the <Repeat> element and the page
! recordsets.
! <li> <Var> elements
! <li> An <Include> element that uses a variable.
! <li> Usage of an external webox.
! <li> Etc.
! </ul>
! </td>
! <td width="50%" valign="top">
! <b>8 - _____</b>
! <br>
! </td>
</tr>
</table>
--- 1,94 ----
+ <h2>Introduction</h2>
! <p>The tutorial consists of a list of sample applications
which are built using phpWebApp. Each application uses some
features of phpWebApp and has explanations about the features
used. It also has code reviews which show how these features
are used in the application, and exercises which require the
! reader to try himself some simple modifications to the application.</p>
! <p>Each application builds on the things explained on the previous
applications and explains only the new features that are introduced
! in it, so it is recomended to study them in the given order.</p>
! <p>These sample applications may also serve as templates for your applications.
Instead of building a new application from scratch, you can just copy one
! of the samples and modify it according to your needs.</p>
! <table width="100%" cellspacing="0" cellpadding="20" border="0"
! style="clear:both">
! <tr>
! <td width="50%">
! <h3><a href="javascript:submenuGo('transitions')">1 - Transitions</a></h3>
! <p>A very simple application that has 2 or 3 HTML files
! which have transitions to each-other and have some
! links to external pages.
! Explains the folder structure of a simple application,
! explains what are the transitions and the difference
! between the transitions and the links. Explains how to
! debug transitions.</p></td>
! <td width="50%">
! <h3><a href="javascript:submenuGo('templates')">2 - Templates</a></h3>
! <p>The HTML files now become templates. This application
! uses the <Include> tag to insert the same header file
! at the beginning of each template and to break the
! templates into sub templates. It shows how to include
! the javascript code and the stylesheet of each template.
! It also explains the use of the framework comments and
! the difference between them and the HTML comments.
! Explains how to debug the template structure.</p></td>
! </tr><tr>
! <td>
! <h3><a href="javascript:submenuGo('weboxes')">3 - Introducing WebBox-es</a></h3>
! <p>Some of the templates are turned into weboxes.
! Explains the fundamental difference between a template
! and a webox. The PHP code of the weboxes
! declares the function onRender(), where some variables
! are added using WebApp::addVar(), and these {{variables}}
! are used in the corresponding template.</p></td>
! <td>
! <h3><a href="javascript:submenuGo('events')">4 - Sending and Handelling Events</a></h3>
! <p>Some of the transitions send
! events to some of the weboxes. The target weboxes handle
! these events in their eventHandler() functions. Explains also
! the transitions to 'thisPage', sending an event to 'any' webox,
! and sending events to 'none' of the weboxes (independent events).</p></td>
! </tr><tr>
! <td>
! <h3><a href="javascript:submenuGo('sess_var')">5 - Session and Variables</a></h3>
! <p>Explains what are the session variables and how to use them.
! Explains further how the {{template variables}} are evaluated.
! Explains how the session variables are used to keep the state
! of the weboxes and the states of the application (introduces
! the function onLoad() of the weboxes). Explains how the <If>
! elements are used to display templates conditionally.
! Explains how to debug the session variables.</p></td>
! <td>
! <h3><a href="javascript:submenuGo('database')">6 - Interacting with a Database</a></h3>
! <p>Explains how to set a default connection with a database.
! Explains the configuration file of a template (*.tpc) and
! the <Recordset> element. Explains the <Repeat> elements and
! how to use them inside a template. Explains the '.db' file
! of a webox, the <Recordset> and <dbCommand> elements inside it,
! and how to use the functions WebApp::execDBCmd(), WebApp::openRS()
! and WebApp::execQuery() inside the PHP code of the webox.
! Explains how to debug the recordsets of the page and the execution
! times of the queries (and other processes).</p></td>
! </tr><tr>
! <td>
! <h3><a href="javascript:submenuGo('advanced')">7 - All the rest of the advanced features</a></h3>
! <p>A complicated, real and almost finished web application (which
! may evolve from the previous samples or may be independent of
! them), which makes use and explains almost all of the advanced
! features of framework which have not been explained in the
! previous samples. Such features may be :</p>
! <ul>
! <li> Detailed explanation of the <Repeat> element and the page
! recordsets.
! <li> <Var> elements
! <li> An <Include> element that uses a variable.
! <li> Usage of an external webox.
! <li> Etc.
! </ul></td>
! <td>
! <h3>8 - _____</h3></td>
</tr>
</table>
Index: sess_var.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/sess_var.html,v
retrieving revision 1.1
retrieving revision 1.1.4.1
diff -C2 -d -r1.1 -r1.1.4.1
*** sess_var.html 16 Dec 2001 05:47:05 -0000 1.1
--- sess_var.html 13 Apr 2002 19:18:04 -0000 1.1.4.1
***************
*** 1,5 ****
! <h3>5 - Session and Variables</h3>
! Explains what are the session variables and how to use them.
Explains further how the {{template variables}} are evaluated.
Explains how the session variables are used to keep the state
--- 1,5 ----
+ <h2>5 - Session and Variables</h2>
! <p>Explains what are the session variables and how to use them.
Explains further how the {{template variables}} are evaluated.
Explains how the session variables are used to keep the state
***************
*** 7,20 ****
the function onLoad() of the weboxes). Explains how the <If>
elements are used to display templates conditionally.
! Explains how to debug the session variables.
! <br><br>
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]
! <br><br>
! <hr>
! <br>
! <ul>
! <li>
! <li>
! <li>
! </ul>
\ No newline at end of file
--- 7,13 ----
the function onLoad() of the weboxes). Explains how the <If>
elements are used to display templates conditionally.
! Explains how to debug the session variables.</p>
! <p>[<a href="javascript: alert('Sorry! Not implemented yet.')">Test</a>]
! [<a href="javascript: alert('Sorry! Not implemented yet.')">Browse</a>]</p>
! <hr />
! <b>.<br />.<br />.</b>
Index: templates.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/templates.html,v
retrieving revision 1.4
retrieving revision 1.4.2.1
diff -C2 -d -r1.4 -r1.4.2.1
*** templates.html 28 Dec 2001 20:05:32 -0000 1.4
--- templates.html 13 Apr 2002 19:18:04 -0000 1.4.2.1
***************
*** 1,5 ****
<script language="JavaScript" src="{{./}}codeReview.js"></script>
! <h3>2 - Templates</h3>
! Explains templates. This application
uses the <Include> tag to insert the same header file
at the beginning of each template and to break the
--- 1,7 ----
<script language="JavaScript" src="{{./}}codeReview.js"></script>
!
! <h2>2 - Templates</h2>
!
! <p>Explains templates. This application
uses the <Include> tag to insert the same header file
at the beginning of each template and to break the
***************
*** 8,135 ****
It also explains the use of the framework comments and
the difference between them and the HTML comments.
! Explains how to debug the template structure.
! <br><br>
! [<a href="/app2/" target="_new">Test</a>]
! [<a href="/app2/browse.php" target="_new">Browse</a>]
! [<a href="http://phpwebapp.sourceforge.net/download/app2.tar.gz">Download</a>]
! <br><br>
! <hr>
! <a name="toc">
! <h4>Table of Contents</h4>
<ul>
! <li><a href="#templates">Templates</a>
! <ol>
! <li><a href="#variables">Template Variables</a>
! <li><a href="#include">The <Include> tag</a>
! <li><a href="#comments">Comments</a>
! <li><a href="#including">JavaScript code and stylesheet of a template</a>
! </ol>
! <li><a href="#study">Study the sample</a>
! <li><a href="#exercises">Exercises</a>
! <ol>
! <li><a href="#exercise1">Modify page2.html and page3.html</a>
! <li><a href="#exercise2">Rename folder 'img' to 'images'</a>
! <li><a href="#exercise3">Divide Page1 further into subtemplates</a>
! <li><a href="#exercise4">Move Page1 to a new folder</a>
! <li><a href="#exercise5">Change the styles of the page1_content</a>
! <li><a href="#exercise6">Move template tpl_2.html and its related files to folder 'page3/tpl_2/</a>
! <li><a href="#exercise7"> Think about it</a>
! </ol>
</ul>
! <hr>
! <a name="templates"></a>
! <h4>Templates</h4>
! <p>
! Templates are pieces of HTML code, that are used or combined
by the framework to generate the HTML pages that are sent to
! the browser.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="variables"></a>
! <h5>1 - Template variables</h5>
! <p>
! The templates may contain variables inside them (called "template variables"),
which are replaced by the framework with their string values. The variables
! inside a template are denoted by double curly braces: <i>{ {tpl_var} }</i>.
! </p>
! <p>
! See this <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/page3.html','4,8,10,12','')">example</a>.
! The <i>{ {TPL_URL} }</i> variable in line 4 contains the URL of the folder
! 'templates', which in this case is '/app2/templates/'. The <i>{ {TPL_PATH} }</i>
! variable in lines 8 and 12 contains the path in the server of the folder
! templates, e.g. '/var/www/html/app2/templates/'. Both of them are declared
! in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','6,7','')"><i>config/const.Paths.php</i></a>.
! The variable <i>{ {./} }</i> in line 10 is a special framework variable
! that always contains the path of the current folder, i.e. the folder
! of the current file.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="include"></a>
! <h5>2 - The <Include> tag</h5>
! <p>
! The templates may also contain some extra tags, which are not HTML tags.
These tags are reckognised and processed by the framework. One of them is
the <Include> tag, which is used to include another template inside the
! current template:
! </p>
! <pre>
! <Include SRC="file_to_be_included" />
! </pre>
! <p>
! It is a very useful tag, because it allows to divide
pages into subtemplates, which results in a better structured application,
provides modularity (the graphical designer can work with smaller pieces of
code), and reusability (templates are easier to be reused in other pages
or other applications). See again the same
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/page3.html','8,10,12','')">example</a>.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="comments"></a>
! <h5>3 - Comments</h5>
! <p>
! The templates may contain some special comments as well:
! </p>
! <pre>
! <!--# Framework comments #-->
! </pre>
! <p>
! These comments are like HTML comments by they have a diesis (#)
at the opening and closing marks. These comments are not processed
by the framework and are not displayed in the HTML page that is generated.
! <a href="javascript: codeReview('{{APP2_PATH}}templates/header.html','1-3','')">Example</a>.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="including"></a>
! <h5>4 - JavaScript code and stylesheet of a template</h5>
! <p>
! If a certain template has some javascript code or some special styles
of its own, then it is better to include them at the begining of the
template (instead of including them globally, at the <Head> of the page).
This makes the template more independant from the other parts of the page
and thus easier to use it again into another page. They are included like
! this:
! </p>
! <pre>
! <script language="javascript" src="file.js"></script>
! <link rel="stylesheet" type="text/css" href="file.css">
! </pre>
! <p>
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.html','1','')">example1</a>,
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tpl_2.html','1','')">example2</a>
! <br>
The inclusion is much better than writting the JS and CSS code in the
template because it separates the HTML code from the JS and CSS codes.
--- 10,125 ----
It also explains the use of the framework comments and
the difference between them and the HTML comments.
! Explains how to debug the template structure.</p>
! <p>[<a href="/app2/" target="_new">Test</a>]
! [<a href="/app2/browse.php" target="_new">Browse</a>]
! [<a href="http://phpwebapp.sourceforge.net/download/app2.tar.gz">Download</a>]</p>
!
! <hr />
!
! <a name="toc" />
! <h3>Table of Contents</h3>
<ul>
! <li><a href="#templates">Templates</a><ol>
! <li><a href="#variables">Template Variables</a></li>
! <li><a href="#include">The <Include> tag</a></li>
! <li><a href="#comments">Comments</a></li>
! <li><a href="#including">JavaScript code and stylesheet of a template</a></li>
! </ol></li>
! <li><a href="#study">Study the sample</a></li>
! <li><a href="#exercises">Exercises</a><ol>
! <li><a href="#exercise1">Modify page2.html and page3.html</a></li>
! <li><a href="#exercise2">Rename folder 'img' to 'images'</a></li>
! <li><a href="#exercise3">Divide Page1 further into subtemplates</a></li>
! <li><a href="#exercise4">Move Page1 to a new folder</a></li>
! <li><a href="#exercise5">Change the styles of the page1_content</a></li>
! <li><a href="#exercise6">Move template tpl_2.html and its related files to folder 'page3/tpl_2/</a></li>
! <li><a href="#exercise7">Think about it</a></li>
! </ol></li>
</ul>
! <hr />
!
! <a name="templates" />
! <h3>Templates</h3>
! <p>Templates are pieces of HTML code, that are used or combined
by the framework to generate the HTML pages that are sent to
! the browser.</p>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="variables" />
! <h4>1 - Template variables</h4>
! <p>The templates may contain variables inside them (called "template variables"),
which are replaced by the framework with their string values. The variables
! inside a template are denoted by double curly braces: <i>{ {tpl_var} }</i>.</p>
! <p>See this
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/page3.html','4,8,10,12','')"
! >example</a>. The <i>{ {TPL_URL} }</i> variable in line 4 contains the URL
! of the folder 'templates', which in this case is '/app2/templates/'.
! The <i>{ {TPL_PATH} }</i> variable in lines 8 and 12 contains the path in the
! server of the folder templates, e.g. '/var/www/html/app2/templates/'.
! Both of them are declared in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','6,7','')"
! ><i>config/const.Paths.php</i></a>. The variable <i>{ {./} }</i> in line 10
! is a special framework variable that always contains the path of the current
! folder, i.e. the folder of the current file.</p>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="include" />
! <h4>2 - The <Include> tag</h4>
! <p>The templates may also contain some extra tags, which are not HTML tags.
These tags are reckognised and processed by the framework. One of them is
the <Include> tag, which is used to include another template inside the
! current template:</p>
!
! <pre><Include SRC="file_to_be_included" /></pre>
!
! <p>It is a very useful tag, because it allows to divide
pages into subtemplates, which results in a better structured application,
provides modularity (the graphical designer can work with smaller pieces of
code), and reusability (templates are easier to be reused in other pages
or other applications). See again the same
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/page3.html','8,10,12','')"
! >example</a>.</p>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="comments" />
! <h4>3 - Comments</h4>
! <p>The templates may contain some special comments as well:</p>
!
! <pre><!--# Framework comments #--></pre>
!
! <p>These comments are like HTML comments by they have a diesis (#)
at the opening and closing marks. These comments are not processed
by the framework and are not displayed in the HTML page that is generated.
! <a href="javascript:codeReview('{{APP2_PATH}}templates/header.html','1-3','')"
! >Example</a>.</p>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="including" />
! <h4>4 - JavaScript code and stylesheet of a template</h4>
! <p>If a certain template has some javascript code or some special styles
of its own, then it is better to include them at the begining of the
template (instead of including them globally, at the <Head> of the page).
This makes the template more independant from the other parts of the page
and thus easier to use it again into another page. They are included like
! this:</p>
!
! <pre><script language="javascript" src="file.js"></script>
! <link rel="stylesheet" type="text/css" href="file.css"></pre>
!
! <p><a href="javascript:codeReview('{{APP2_PATH}}templates/footer.html','1','')">example1</a>,
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2.html','1','')">example2</a><br />
The inclusion is much better than writting the JS and CSS code in the
template because it separates the HTML code from the JS and CSS codes.
***************
*** 137,409 ****
time that this template is loaded in browser again, most probably the
browser will get "file.js" and "file.css" from its cache, instead of
! retrieving them again from the server.
! </p>
!
! [<a href="#toc">TOC</a>]
! <hr>
!
! <a name="study">
! <h4>Study the sample</h4>
! <p>
! Here we will highlight and discuss some of the features of the
! sample application, so that we can understand it better.
! </p>
! <p>
! <ul>
! <li> All the templates of the application are placed
! in the folder '/templates/'. We tell to the framework where
! to look for the templates by giving an appropriate value to
! the constant TPL_PATH in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','7,8','')"><i>config/const.Paths.php</i></a>.
! <br><br>
!
! <li> All the images of this application are placed in the folder '/img/'.
! In templates they are linked using the { {IMG_URL} } variable.
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.html','9,10','')">See</a> how it is used.
! The { {IMG_URL} } template variable gets the value from the
! PHP constant IMG_URL, which is declared in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','6','')"><i>config/const.Paths.php</i></a>.
!
! <br><br>
!
! <li> All the files and templates of the page3 are placed in the folder
! '/templates/page3/'. Organizing files into folders and subfolders
! reduces the complexity of the application and makes it easier to be
! understood and maintained.
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.js','17','')">Notice</a>
! how the transition to page3 is done.
! <br><br>
!
! <li> All the pages include the same header and footer template,
! e.g. see
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1.html','8,10','')">page1.html</a>.
! If you want to change something in the footer of the page, then you
! don't have to change every page, but you make the change only once
! in the footer.
! <br><br>
! <li> <a href="/app2/browse.php" target="_blank">Browse</a>
! the files of the application and see the templates
! 'page1.html', 'header.html', 'footer.html', 'page1_content.html'.
! See them both in preview mode and in code view mode (select the
! "Code View" mode in the panel at the top and then click "Refresh").
! <br><br>
! <li> Browse the files and see the template 'page2.html' and all the templates
! in the folder '/templates/page3/'. See them both in preview mode and
! in code view mode. These two pages are the same in terms of what they
! display, however they are implemented differently in the server.
! 'page2.html' is implemented as a flat big HTML file, while
! 'page3.html' is structured, divided into several small subtemplates.
! Try to make the same modification in both of them and see which one
! is easier to be modified.
! <br><br>
</ul>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercises">
! <h4>Exercises</h4>
! <p>
! Before starting the exercises, make a copy of the application 'app2'
to the folder 'test/app2'. If you don't know how to do it, go and
! study the first part of the tutorial (Transitions).
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercise1">
! <h5>1 - Modify page2.html and page3.html</h5>
! <p>
! Change to red the color of the tpl_2_1 box, and change the text
! inside it to "This box is red!".
! </p>
! <p>
! Modify page2.html:
<ol>
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page2.css','52,59','')">page2.css</a>
! and change the color in the highlighted lines to 'red'.
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page2.html','39-40','')">page2.html</a>
! and change the text in the highlighted lines to "This box is red!".
</ol>
! Which of the pages do you think is easier to be modified?
! </p>
! <p>
! Modify page3.html:
<ol>
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.css','5,12','')">tpl_2_1.css</a>
! and change the color in the highlighted lines to 'red'.
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.html','5-6','')">tpl_2_1.html</a>
! and change the text in the highlighted lines to "This box is red!".
</ol>
- </p>
! [<a href="#toc">TOC</a>]
! <hr>
- <a name="exercise2">
- <h5>2 - Rename folder 'img' to 'images'</h5>
- <p>
<ol>
! <li> Rename folder 'img' to 'images' ($ mv img images). Test the application;
! the images will be broken.
! <li> Change the value of the IMG_URL constant in the file
! <a href="javascript: codeReview('{{APP2_PATH}}config/const.Paths.php','5-6','')">const.Paths.php</a>.
! Reload the application. The images should be allright.
</ol>
- If all the images in the application are linked like this:
- <pre>
- <img src="{ {IMG_URL} }image_name.gif"/>
- </pre>
- there will be no problem. However, if any image is hard linked like this:
- <pre>
- <img src="/img/image_name.gif"/>
- </pre>
- it will not be displayed.
- </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercise3">
! <h5>3 - Divide Page1 further into subtemplates</h5>
! <p>
<ol>
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','11-17','')">page1_content.html</a>
! and copy the selected lines to the file 'tpl_vars.html'.
! <li> Replace the selected lines with this line:
! <pre>
! <Include SRC="{ {./} }tpl_vars.html"/>
! </pre>
! <li> Copy the
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','19-36','15-40')">selected lines</a>
! of 'page1_content.html' to file 'include_tag.html', and replace
! them with:
! <pre>
! <Include SRC="{ {./} }include_tag.html"/>
! </pre>
! <li> Copy the
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','38-49','33-55')">selected lines</a>
! of 'page1_content.html' to file 'comments.html', and replace
! them with:
! <pre>
! <Include SRC="{ {./} }comments.html"/>
! </pre>
! <li> Copy the
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1_content.html','51-72','45-72')">selected lines</a>
! of 'page1_content.html' to file 'js_code.html', and replace
! them with:
! <pre>
! <Include SRC="{ {./} }js_code.html"/>
! </pre>
! <li> If you test the application now, page1 will be displayed correctly,
! but if you click the link 'page1' at the bottom of the page, an
! error will occour. To fix this, open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/footer.js','7','')">footer.js</a>
! and correct line 7 to go to "page1/page1.html".
! <li> Test that the application now is OK.
</ol>
- </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercise4">
! <h5>4 - Move Page1 to a new folder</h5>
! <p>
! If you make a listing of the folder '/templates/' you will see that
now there are a lot of files in it and it has started to become messy.
! It would be better if we moved page1 files to another folder.
<ol>
! <li> Create new folder 'page1' ($ mkdir page1)
! <li> Move files 'page1.html', 'page1_content.html',
'tpl_vars.html', 'include_tags.html', 'comments.html',
! 'js_code.html' to folder 'page1' (e.g. $ mv page1.html page1/)
! <li> If you test the application now, it will give an error.
Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}event_handlers/on.firstTime.php','8','')">event_handlers/on.firstTime.php</a>
! and change the $targetPage to "page1/page1.html".
! <li> If you test the application now, it will not be able to find the
stylesheet and the header and footer templates. Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page1.html','4,8,10','')">page1/page1.html</a>
! and replace <i>{ {./} }</i> with <i>{ {TPL_URL} }</i> for the
! stylesheet, and with <i>{ {TPL_PATH} }</i> for the templates,
! in the selected lines.
</ol>
- </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercise5">
! <h5>5 - Change the styles of the page1_content</h5>
! <p>
<ol>
! <li> In the folder '/templates/page1/' create the file 'page1_content.css'
! which has these lines:
! <pre>
! h4 { color: red }
! p { color: blue }
! </pre>
! <li> At the top of the file 'page1_content.html' add this line:
! <pre>
! <link rel="stylesheet" type="text/css" href="{ {./} }page1_content.css">
! </pre>
! <li> Test the application and notice the changes in page1.
</ol>
- </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercise6">
! <h5>6 - Move template tpl_2.html and its related files to folder 'page3/tpl_2/</h5>
! <p>
<ol>
! <li> Create new folder 'tpl_2'
! ($ cd templates/page3/ $ mkdir tpl_2)
! <li> Move the files 'tpl_2.html', 'tpl_2.css', 'tpl_2_1.html', 'tpl_2_1.css',
! 'tpl_2_2.html', 'tpl_2_2.css' to the new folder
! (e.g. $ mv tpl_2*.* tpl_2)
! <li> Open the file
! <a href="javascript: codeReview('{{APP2_PATH}}templates/page3/tmpl.html','11','')">tmpl.html</a>
! and change the SRC of the included template to
! "{ {./} }tpl_2/tpl_2.html".
! <li> Test the application and go to page3. It should be displayed correctly.
</ol>
! Do yourself these changes as well:
<ul>
! <li> Create a new folder '/templates/page2/' and move the files
! 'page2.html' and 'page2.css' to it.
! <li> Create a new folder '/templates/page3/tpl_1' and move the files
! 'tpl_1.html' and 'tpl_1.css' to it.
! <li> Create a new folder '/templates/page3/tpl_2/tpl_2_1' and move the files
! 'tpl_2_1.html' and 'tpl_2_1.css' to it.
! <li> Create a new folder '/templates/page3/tpl_2/tpl_2_2' and move the files
! 'tpl_2_2.html' and 'tpl_2_2.css' to it.
</ul>
- </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercise7">
! <h5>7 - Think about it</h5>
! <p>
! Suppose that you would like to add the current date at the top of each
! file (whithout using JavaScript, using PHP). How would you do it?
! Or, in general, how could you display something from PHP in the page?
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
--- 127,359 ----
time that this template is loaded in browser again, most probably the
browser will get "file.js" and "file.css" from its cache, instead of
! retrieving them again from the server.</p>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
+ <a name="study" />
+ <h3>Study the sample</h3>
+ <p>Here we will highlight and discuss some of the features of the
+ sample application, so that we can understand it better.</p>
+ <ul>
+ <li>All the templates of the application are placed
+ in the folder '/templates/'. We tell to the framework where
+ to look for the templates by giving an appropriate value to
+ the constant TPL_PATH in the file
+ <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','7,8','')"
+ ><i>config/const.Paths.php</i></a>.</li>
+ <li>All the images of this application are placed in the folder '/img/'.
+ In templates they are linked using the { {IMG_URL} } variable.
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.html','9,10','')"
+ >See</a> how it is used. The { {IMG_URL} } template variable gets the
+ value from the PHP constant IMG_URL, which is declared in the file
+ <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','6','')"
+ ><i>config/const.Paths.php</i></a>.</li>
+ <li>All the files and templates of the page3 are placed in the folder
+ '/templates/page3/'. Organizing files into folders and subfolders
+ reduces the complexity of the application and makes it easier to be
+ understood and maintained.
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.js','17','')"
+ >Notice</a> how the transition to page3 is done.</li>
+ <li>All the pages include the same header and footer template, e.g. see
+ <a href="javascript:codeReview('{{APP2_PATH}}templates/page1.html','8,10','')"
+ >page1.html</a>. If you want to change something in the footer of the page,
+ then you don't have to change every page, but you make the change only once
+ in the footer.</li>
+ <li><a href="/app2/browse.php" target="_blank">Browse</a>
+ the files of the application and see the templates
+ 'page1.html', 'header.html', 'footer.html', 'page1_content.html'.
+ See them both in preview mode and in code view mode (select the
+ "Code View" mode in the panel at the top and then click "Refresh").</li>
+ <li>Browse the files and see the template 'page2.html' and all the templates
+ in the folder '/templates/page3/'. See them both in preview mode and
+ in code view mode. These two pages are the same in terms of what they
+ display, however they are implemented differently in the server.
+ 'page2.html' is implemented as a flat big HTML file, while
+ 'page3.html' is structured, divided into several small subtemplates.
+ Try to make the same modification in both of them and see which one
+ is easier to be modified.</li>
</ul>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="exercises" />
! <h3>Exercises</h3>
! <p>Before starting the exercises, make a copy of the application 'app2'
to the folder 'test/app2'. If you don't know how to do it, go and
! study the first part of the tutorial (Transitions).</p>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="exercise1" />
! <h4>1 - Modify page2.html and page3.html</h4>
! <p>Change to red the color of the tpl_2_1 box, and change the text
! inside it to "This box is red!".</p>
! <p>Modify page2.html:</p>
<ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page2.css','52,59','')"
! >page2.css</a> and change the color in the highlighted lines to 'red'.</li>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page2.html','39-40','')"
! >page2.html</a> and change the text in the highlighted lines to
! "This box is red!".</li>
</ol>
! <p>Which of the pages do you think is easier to be modified?</p>
! <p>Modify page3.html:</p>
<ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.css','5,12','')"
! >tpl_2_1.css</a> and change the color in the highlighted lines to 'red'.</li>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tpl_2_1.html','5-6','')"
! >tpl_2_1.html</a> and change the text in the highlighted lines to
! "This box is red!".</li>
</ol>
! <p>[<a href="#toc">TOC</a>]</p>
!
! <hr />
!
! <a name="exercise2" />
! <h4>2 - Rename folder 'img' to 'images'</h4>
<ol>
! <li>Rename folder 'img' to 'images' ($ mv img images). Test the application;
! the images will be broken.
! <li>Change the value of the IMG_URL constant in the file
! <a href="javascript:codeReview('{{APP2_PATH}}config/const.Paths.php','5-6','')"
! >const.Paths.php</a>. Reload the application. The images should be allright.</li>
</ol>
! <p>If all the images in the application are linked like this:</p>
! <pre><img src="{ {IMG_URL} }image_name.gif"/></pre>
! <p>there will be no problem. However, if any image is hard linked like this:</p>
! <pre><img src="/img/image_name.gif"/></pre>
! <p>it will not be displayed.</p>
! <p>[<a href="#toc">TOC</a>]</p>
!
! <hr />
!
! <a name="exercise3" />
! <h4>3 - Divide Page1 further into subtemplates</h4>
<ol>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','11-17','')"
! >page1_content.html</a> and copy the selected lines to the file
! 'tpl_vars.html'.</li>
! <li>Replace the selected lines with this line:<br />
! <code><Include SRC="{ {./} }tpl_vars.html"/></code></li>
! <li>Copy the
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','19-36','15-40')"
! >selected lines</a> of 'page1_content.html' to file 'include_tag.html',
! and replace them with:<br />
! <code><Include SRC="{ {./} }include_tag.html"/></code></li>
! <li>Copy the
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','38-49','33-55')"
! >selected lines</a> of 'page1_content.html' to file 'comments.html',
! and replace them with:<br />
! <code><Include SRC="{ {./} }comments.html"/></code></li>
! <li>Copy the
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1_content.html','51-72','45-72')"
! >selected lines</a> of 'page1_content.html' to file 'js_code.html',
! and replace them with:<br />
! <code><Include SRC="{ {./} }js_code.html"/></code></li>
! <li>If you test the application now, page1 will be displayed correctly,
! but if you click the link 'page1' at the bottom of the page, an
! error will occour. To fix this, open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/footer.js','7','')"
! >footer.js</a> and correct line 7 to go to "page1/page1.html".</li>
! <li>Test that the application now is OK.</li>
</ol>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="exercise4" />
! <h4>4 - Move Page1 to a new folder</h4>
! <p>If you make a listing of the folder '/templates/' you will see that
now there are a lot of files in it and it has started to become messy.
! It would be better if we moved page1 files to another folder.</p>
<ol>
! <li>Create new folder 'page1' ($ mkdir page1)</li>
! <li>Move files 'page1.html', 'page1_content.html',
'tpl_vars.html', 'include_tags.html', 'comments.html',
! 'js_code.html' to folder 'page1' (e.g. $ mv page1.html page1/)</li>
! <li>If you test the application now, it will give an error.
Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}event_handlers/on.firstTime.php','8','')"
! >event_handlers/on.firstTime.php</a> and change the $targetPage to
! "page1/page1.html".</li>
! <li>If you test the application now, it will not be able to find the
stylesheet and the header and footer templates. Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page1.html','4,8,10','')"
! >page1/page1.html</a> and replace <i>{ {./} }</i> with <i>{ {TPL_URL} }</i>
! for the stylesheet, and with <i>{ {TPL_PATH} }</i> for the templates,
! in the selected lines.</li>
</ol>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="exercise5" />
! <h4>5 - Change the styles of the page1_content</h4>
<ol>
! <li>In the folder '/templates/page1/' create the file 'page1_content.css'
! which has these lines:<br />
! <code>h4 { color: red }<br />p { color: blue }</code></li>
! <li>At the top of the file 'page1_content.html' add this line:<br />
! <code><link rel="stylesheet" type="text/css" href="{ {./} }page1_content.css"></code></li>
! <li>Test the application and notice the changes in page1.</li>
</ol>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
!
! <a name="exercise6" />
! <h4>6 - Move template tpl_2.html and its related files to folder 'page3/tpl_2/</h4>
<ol>
! <li>Create new folder 'tpl_2'
! ($ cd templates/page3/ $ mkdir tpl_2)</li>
! <li>Move the files 'tpl_2.html', 'tpl_2.css', 'tpl_2_1.html', 'tpl_2_1.css',
! 'tpl_2_2.html', 'tpl_2_2.css' to the new folder
! (e.g. $ mv tpl_2*.* tpl_2)</li>
! <li>Open the file
! <a href="javascript:codeReview('{{APP2_PATH}}templates/page3/tmpl.html','11','')"
! >tmpl.html</a> and change the SRC of the included template to
! "{ {./} }tpl_2/tpl_2.html".</li>
! <li>Test the application and go to page3. It should be displayed correctly.</li>
</ol>
! <p>Do yourself these changes as well:</p>
<ul>
! <li>Create a new folder '/templates/page2/' and move the files
! 'page2.html' and 'page2.css' to it.</li>
! <li>Create a new folder '/templates/page3/tpl_1' and move the files
! 'tpl_1.html' and 'tpl_1.css' to it.</li>
! <li>Create a new folder '/templates/page3/tpl_2/tpl_2_1' and move the files
! 'tpl_2_1.html' and 'tpl_2_1.css' to it.</li>
! <li>Create a new folder '/templates/page3/tpl_2/tpl_2_2' and move the files
! 'tpl_2_2.html' and 'tpl_2_2.css' to it.</li>
</ul>
! <p>[<a href="#toc">TOC</a>]</p>
! <hr />
! <a name="exercise7" />
! <h4>7 - Think about it</h4>
! <p>Suppose that you would like to add the current date at the top of each
! file (whithout using JavaScript, using PHP). How would you do it?
! Or, in general, how could you display something from PHP in the page?</p>
+ <p>[<a href="#toc">TOC</a>]</p>
Index: transitions.html
===================================================================
RCS file: /cvsroot/phpwebapp/documentation/templates/tutorial/transitions.html,v
retrieving revision 1.6
retrieving revision 1.6.2.1
diff -C2 -d -r1.6 -r1.6.2.1
*** transitions.html 28 Dec 2001 20:05:32 -0000 1.6
--- transitions.html 13 Apr 2002 19:18:04 -0000 1.6.2.1
***************
*** 1,5 ****
<script language="JavaScript" src="{{./}}codeReview.js"></script>
! <h3>1 - Transitions</h3>
! A very simple application that has 2 or 3 HTML files
which have transitions to each-other and have some
links to external pages.
--- 1,6 ----
<script language="JavaScript" src="{{./}}codeReview.js"></script>
! <h2>1 - Transitions</h2>
!
! <p>A very simple application that has 2 or 3 HTML files
which have transitions to each-other and have some
links to external pages.
***************
*** 7,349 ****
explains what are the transitions and the difference
between the transitions and the links. Explains how to
! debug transitions.
! <br><br>
! [<a href="/app1/" target="_new">Test</a>]
! [<a href="/app1/browse.php" target="_new">Browse</a>]
! [<a href="http://phpwebapp.sourceforge.net/download/app1.tar.gz">Download</a>]
! <br><br>
! <hr>
! <a name="toc">
! <h4>Table of Contents</h4>
<ul>
! <li><a href="#goto">Transitions by GoTo()</a>
! <li><a href="#external">External Pages</a>
! <li><a href="#structure">The Structure of the Application</a>
! <li><a href="#exercises">Exercises</a>
! <ol>
! <li><a href="#exercise_1">Create a new application</a>
! <li><a href="#exercise_2">Move an application to another location</a>
! <li><a href="#exercise_3">Debugging Transitions</a>
! <li><a href="#exercise_4">Change the Name of the Folder 'event_handlers'</a>
! <li><a href="#exercise_5">Add a New Page to the Application</a>
! <li><a href="#exercise_6">Set the initial page of the application</a>
! <li><a href="#exercise_7">Before and after each page</a>
! <li><a href="#exercise_8">Put the pages in another folder</a>
! </ol>
! <li><a href="#experiments">Experiments, questions and food for thought</a>
</ul>
! <hr>
! <a name="goto"></a>
! <h4>Transitions by Goto</h4>
! <p>
! Transitions from one page of the application to another
are done by using the javascript function <b>GoTo('page.html')</b>.
This function is declared by the framework itself and is included
automatically at the end of each page of the application.
The parameter given to <b>GoTo()</b> is the target page, i.e. the page
! that will be displayed by the framework after doing the transition.
! </p>
! <p>
! Think of a web application as a collection of states, where each
state is a web page. The user of the application goes from the
current page (source state) to another page (target state) by clicking
! a <b>GoTo()</b> link (transition).
! </p>
! <p>
! In real applications, usually the link calls a <b>JavaScript</b> function,
and this function makes the transition by calling <b>GoTo()</b>. So, the
application has a chance to make any error checkings, input data validations
! etc. before making the transition to the other page.
! </p>
! <p>
! <a href="javascript: codeReview('{{APP1_PATH}}page1.html','14,36,37','')">See the code</a>
! of the first page and notice how the <b>GoTo()</b> is used.
! <br>
! If you have not tested the application yet, please
<a href="/app1/" target="_new">test it</a>
! now and pay attention to how the <b>GoTo()</b> is used.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="external"></a>
! <h4>External Pages</h4>
! <p>
! The external pages are HTML pages that are outside the
application. They are linked as usually in HTML, without using
transitions and the function <b>GoTo()</b>. These pages are
not part of the application, they are either plain HTML pages
! or pages of other applications.
! </p>
! <p>
! While in an external page, you cannot go back to a page
of the application by using the function <b>GoTo()</b> because
it is undefined. You can only go back to the same page of the
application from which you got out by pressing the button <b>back</b>
! in the browser (or calling the JS function <i>history.back()</i>).
! </p>
! <p>
! If you open a page of the application by linking (as an external page),
not by a <b>GoTo()</b> transition, then it will not behave as a page of the
! application.
! </p>
! <p>
! See an <a href="javascript: codeReview('{{APP1_PATH}}page2.html','14,15','9-16')">example</a> of linking to external pages.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="structure"></a>
! <h4>The Structure of the Application</h4>
! <p>
! The application is composed of some <i>standart (or framework)</i>
files and folders and some application files and folders. The standart
ones are files and folders required by the framework and are almost
the same for every application built with phpWebApp. The <i>application</i>
files and folders are created by the application developer and they
! are different for each application.
! </p>
! <p>
! If you have not yet browsed the application, then
! <a href="/app1/browse.php" target="_new">browse it</a> now.
! </p>
! <p>
! The standart files and folders are:
! <pre>
! config/ -- configuration files for the application
! const.Paths.php -- constants of paths used in the application
! const.Settings.php -- constants that change the behaviour of the app.
! event_handlers/ -- event handler files
! on.firstTime.php -- called first time that the application is opened
! on.beforePage.php -- called before each page is generated
! on.afterPage.php -- called after each page
! application.php -- standart framework file
! index.php -- standart framework file
! </pre>
! </p>
! <p>
! The application files and folders are:
! <pre>
! img/
! Back.gif
! home.gif
! page1.html
! page2.html
! page3.html
! styles.css
! </pre>
! </p>
! <p>
! The file <i>browse.php</i> is almost the same for each application,
but it is not required by the framework. It is usually used during the
development of the application to preview how the templates and weboxes
! look like.
! </p>
! [<a href="#toc">TOC</a>]
! <hr>
! <a name="exercises"></a>
! <h4>Exerxises</h4>
! <p>
! To be able to try the exercises you have to have installed the framework
and the sample applications in your computer or somewhere where you can
! make changes.
! </p>
! <br>
! <a name="exercise_1"></a>
! <h5>1 - Create a new application</h5>
! <p>
! In this exercise you will create another application which is identic
with <b>app1</b> but has a different name, <b>app1_test</b>.
! Follow these steps:
<ol>
! <li> Copy the folder 'app1' to the folder 'app1_test' ($ cp -R app1 app1_test)
! <li> Edit the file
! app1_test/config/<a href="javascript: codeReview('{{APP1_PATH}}config/const.Paths.php','3','')">const.Paths.php</a>
! so that the constant 'APP_URL' is set to '/app1_test/'.
! <li> Open the application '/app1_test/' in browser to test it. It should work.
</ol>
! 'APP_URL' is the URL of the application starting from the DocumentRoot.
! </p>
! [<a href="#toc">TOC</a>]
! <br>
! <a name="exercise_2"></a>
! <h5>2 - Move an application to another location</h5>
! <p>
! In this exercise you will move the application 'app1_test' to 'test/app1_test'.
<ol>
! <li> Create the folder 'test' and move 'app1_test' to it
! ($ mkdir test $ mv app1_test test)
! <li> Edit the file
! test/app1_test/config/<a href="javascript: codeReview('{{APP1_PATH}}config/const.Paths.php','3,4','')">const.Paths.php</a>
! so that the constant 'APP_URL' is set to '/test/app1_test/',
! and the constant 'WEBAPP_PATH' is set to '../../web_app'.
! <li> Open the application '/test/app1_test/' in browser to test it.
! It should work.
</ol>
! 'WEBAPP_PATH' is the path of the phpWebApp framework and tells the application
where to find the framework. This constant is used by the file 'application.php'
to include the framework classes and modules. The developer doesn't have to
! wory about using this constant, just give it the right path.
! </p>
! <p>
! In this example it is set as a relative path, but it can be set as an
absolute path as well, e.g. '/var/www/html/web_app'
(or 'c:/www/html/web_app' for Windows). In this case you don't
have to wory about changing it when moving an application to another
! location.
! </p>
! [<a href="#toc">TOC</a>]
! <br>
! <a name="exercise_3"></a>
! <h5>3 - Debugging Transitions</h5>
! <p>
<ol>
! <li> Open in editor the file
! <a href="javascript: codeReview('{{APP1_PATH}}config/const.Settings.php','12-14','')"><i>config/const.Settings.php</i></a>
! and set the constant <b>DEBUG_GOTO</b> to <b>true</b>.
! <li> Test the application and notice that each time that you make
! a transition you get an alert about it.
</ol>
- </p>
! [<a href="#toc">TOC</a>]
! <...
[truncated message content] |
