Trace: • documentation • support • credits • modules • 1.3.x

Differences ¶

This shows you the differences between two versions of the page.

--- en:tutorials:minitutorial:1.0.3 [2008/04/06 09:17] – laurent
+++ en:tutorials:minitutorial:1.0.3 [2008/11/19 15:02] (current) – external edit 127.0.0.1
@@ Line 97: / Line 97: @@
 We are now ready to display the page. Your application is accessible at this URL: http://localhost/jelix-1.0.3/example/www/. Enter this URL in your browser. you should see:
+{{en:tutorials:minitutorial:start_page_white_en.png}}
 You notice this message saying that a CSS file is missing. Copy the jelix-1.0.3/lib/jelix-www  directory in dans jelix-1.0.3/example/www  by renaming it to "jelix" (on a dedicated apache server, it is better to create an alias). This directory is important because it contains some files needed by jForms or other components.
@@ Line 102: / Line 103: @@
 Now you should see:
+{{en:tutorials:minitutorial:start_page_en.png}}
-It there are some error messages in "installation check", fix them.
+If there are some error messages in "installation check", fix them.
@@ Line 143: / Line 145: @@
 ==== Response object ====
-The jResponseHtml object generates a HTML response (a HTML page). It generates automatically the <head> part of HTML, from some of its properties. Let's define the title of the page :
+The jResponseHtml object generates a HTML response (a HTML page). It generates automatically the <head> part of HTML, from some of its properties. Let's define the title of the page. Add this in the //index// method, before the return:
 <code php>
@@ Line 149: / Line 151: @@
 </code>
-The body of the page is generated by default from a template, via an instance of the Jelix template engine, placed in the **body** property. The name of the template file is placed in the **bodyTpl** property. Here, it's the hello.tpl file.
+Reload the page. The title of the page is now display in your browser title bar. But the page contains this:
+{{en:tutorials:minitutorial:minituto_1_en.png}}
+How is this possible although we don't have anything in our controller ?
+We sww that getResponse('html') returns a jResponseHtml object. However, it is possible to return an other object for the "html" type. It can be an other object which inherits from jResponseHtml, and which set things which are common for all actions. For example: CSS style sheets, the main template etc. This is very useful because you don't need to repeat this settings in your actions. And because this is very useful, the //createapp// command creates a such class and a default template. This sort of class are stored in the //responses// directory of the application, and are declared in the configuration file.
+Let's see the content of example/responses/myHtmlResponse.class.php created by //createapp//:
 <code php>
-      $rep->bodyTpl = 'hello';
+class myHtmlResponse extends jResponseHtml {
+    public $bodyTpl = 'exemple~main';
+    protected function _commonProcess() {
+        $this->body->assignIfNone('MAIN','<p>no content</p>');
+    }
+}
 </code>
-We don't put the ".tpl" part because the content of the string is actually a Jelix //selector//. A Jelix selector is a shortcut to refer to a resource of a module.
+This "personnalized" response set up in bodyTpl the default template which will be used to generate the <body> content of all pages : "exemple~main". This is the main.tpl file in the example module. "exemple~main" is called a selector. A [[en:manual-1.0:selectors|Jelix selector]] is a shortcut to refer to a resource of a module. Here is the content of this template:
-Note that you can create your own response objects (possibly deriving from the class jResponseHtml), and so to put at it all common process to several or all your actions, so this process will not have to be duplicate in each action (like the name of the template, the inclusion of common zones etc.).
+<code html>
+   <h1 class="apptitle">example<br/><span class="welcome">{@jelix~jelix.newapp.h1@}</span></h1>
+   {$MAIN}
+</code>
-==== The template ====
+//{$MAIN}// is an instruction which says: display the content of the template variable named "MAIN". //{@jelix~jelix.newapp.h1@}// is an instruction which says: display the localized string (a string dependings of the lang) identified by tge "jelix.newapp.h1" key and stored in the "jelix" module.
-Create a hello.tpl file in the template directory of the module. And put in this content :
+The method "_commonProcess" is called after each actions. In the example, it assign "<p>no content</p>" to the MAIN template variable if this variable doesn't still exists (so, if it is not set by the action).
-<code xml>
+Now you know why there is a content displays on the start page. Now let's modify the template with this content:
-  <h2>Hello {$name} !</h2>
-  <p>Welcome in Jelix !</p>
+<code html>
+<h1 class="apptitle">My web site</h1>
+<div id="page">
+{$MAIN}
+</div>
 </code>
-"{$name}" is a template variable : it will be replaced by the value you will define, like in this example :
+And in the constructor of the _commonProcess method, we add an instruction to setup a CSS style sheet:
 <code php>
-      $rep->body->assign('name','Me');
+class myHtmlResponse extends jResponseHtml {
+    public $bodyTpl = 'example~main';
+    public function __construct() {
+        parent::__construct();
+        global $gJConfig;
+        $this->addCSSLink($gJConfig->urlengine['jelixWWWPath'].'design/jelix.css');
+    }
+    protected function _commonProcess() {
+        $this->body->assignIfNone('MAIN','<p>no content</p>');
+    }
+}
 </code>
+Now you see:
+{{en:tutorials:minitutorial:minituto_2_en.png}}
-==== As a summary ====
+==== Your first content ====
-The code of the controller must now be like this :
+Let's define the content of our start page:
 <code php>
@@ Line 187: / Line 230: @@
       $rep->title = 'Hello World !';
-      $rep->bodyTpl = 'hello';
+      $rep->body->assign('MAIN',"<p>Hello !</p>");
-      $rep->body->assign('name','Me');
       return $rep;
@@ Line 195: / Line 237: @@
 </code>
+So here, we put "<p>Hello !</p>" in the "MAIN" template variable. We now see:
+{{en:tutorials:minitutorial:minituto_3_en.png}}
-===== First display =====
-We are now ready to display our page. For this, give the following URL :
+==== Template of an action ====
-  http://localhost/jelix/helloapp/www/index.php?module=hello&action=default:index
-You will then see your html page, with the welcome message.
+It should be more practical to put the content in a new template, dedicated to your action, for example in example/modules/example/templates/hello.tpl. So we have two templates: main.tpl which contains the main structure of the web site, and hello.tpl which specific to the action.
-The url can change regarding the configuration of your installation, especially if you have specified the document root of the site on the directory helloapp/www. You have to know that Jelix can handle significant url to avoid all this disgusting parameters.
+Let's create the hello.tpl in the templates directory:
+<code xml>
+<div class="monbloc">
+<h2>Message</h2>
+<div class="blockcontent">Hello {$name} !</div>
+</div>
+</code>
+"{$name}" is a variable template. Now modify the controller:
+<code php>
+   function index () {
+      $rep = $this->getResponse('html');
+      $rep->title = 'Hello World !';
+      $tpl = new jTpl();
+      $tpl->assign('name','Me');
+      $rep->body->assign('MAIN', $tpl->fetch('hello'));
+      return $rep;
+   }
+</code>
+Notice the use of the $tpl object. The "fetch" method generate the content of the given template. The 'hello' string is a selector of course.
+You see now:
+{{en:tutorials:minitutorial:minituto_4_en.png}}
 ===== Retrieving parameters =====
@@ Line 212: / Line 284: @@
 <code php>
    $name = $this->param('name');
-   $rep->body->assign('name', $name);
+   $tpl->assign('name', $name);
 </code>
-Now type :
+Now type:
-    http://localhost/jelix/helloapp/www/index.php?module=hello&action=default:index&name=Robert
+    http://localhost/jelix-1.0.3/app/www/index.php?name=Max
+You will see:
+{{en:tutorials:minitutorial:minituto_5_en.png}}
+===== URLs =====
+To execute a specific action, you should add in the url a "module" and an "action" parameter. For our example, we can type:
+   http://localhost/jelix-1.0/exemple/www/index.php?module=example&action=default:index
+The action parameter has the following syntax: controller_name:method_name
+However, in our example, this parameters are optional because the action has been defined as the default one in the web site. The default action is specified in the //example/var/config/index/config.ini.php// file, in //startModule// and //startAction// options:
+<code ini>
+startModule="example"
+startAction="default:index"
+</code>
+You can change it later if you want.
+Well, this urls are not very friendly, and of course, you can change how URLS should look like. For example: http://localhost/index/news instead of  http://localhost/index?module=news&action=default:index. This is done by configuring the url engine.
+You can also change the "DocumentRoot" of the web site and to set it to the  //jelix-1.0.3/exemple/www// directory, or move the content of the example/www to the root of your web site.
 ===== Conclusion =====
-This were the first concepts of Jelix. You can continue to discover him by following the [[en:tutorials:main|main tutorial]].
+This were the first concepts of Jelix. You can continue to discover it by following the [[en:tutorials:main|main tutorial]].
 -----

en/tutorials/minitutorial/1.0.3.1207473475.txt.gz · Last modified: 2008/04/06 11:00 (external edit)