Changes between Version 5 and Version 6 of NagareTutorial3


Ignore:
Timestamp:
04/30/2011 01:58:22 AM (7 years ago)
Author:
apoirier
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • NagareTutorial3

    v5 v6  
    44================================== 
    55 
    6 In MVC frameworks, clicking on html elements can perform actions the following way: 
     6With a MVC framework, a click on an active HTML element (link, button ...) triggers the following chain of actions: 
    77 
    8     1. Click on an active element (link, button, etc.) calls an URL, 
    9     2. One way or another, the URL is mapped to the controller, 
    10     3. The controller decides to do the action and to pass data to the view. 
     8    1. an URL is sent to the server, 
     9    2. one way or another, the URL is mapped to a controller, 
     10    3. the controller does the action by driving the model, 
     11    4. finally the controller passes the resulting data to the view. 
    1112 
    12 With `Nagare`, things are different, actions are directly mapped to active nodes of a DOM tree, let's see how it works. 
     13With Nagare, things are different. Indeed, the actions are directly mapped to active nodes of a DOM tree. 
    1314 
    14 Part3, add actions 
    15 ---------------------------- 
     15Let's see how it works. 
     16 
     17Part 3. Add actions 
     18------------------------------ 
    1619 
    17201. Add active nodes into DOM tree: 
    1821 
    19 Change the view on our Counter class to add html links (`a` tags): 
     22Change the default view of your ``Counter`` class to add html links (``a`` tags): 
    2023 
    2124  .. code-block:: python 
     
    2528     def render(counter, h, *args): 
    2629         h << h.div('Value: ', counter.val) 
     30 
    2731         h << h.a('++') 
    2832         h << '|' 
    2933         h << h.a('--') 
     34 
    3035         return h.root 
    3136 
    32 In the upper exemple, we use the `lshift` operator to append nodes to the renderer and finally return renderer root. It is much more readable than to create and return a complex DOM tree. 
     37Here, the "lshift" ``<<`` operator is used to append nodes to the renderer. Then its ``root`` node is finally returned. 
    3338 
    34392. Bind action to active nodes: 
    3540 
    36 As active nodes ,`a` nodes have a special method call `action` that is used to bind action to a DOM node. An action can be any callable and in particular a class method. 
     41As active nodes, ``a`` nodes have a special ``action()`` method which is used to bind action to the node. An action can be any callable as, in this case, a bound method: 
    3742 
    3843  .. code-block:: python 
     
    4247     def render(counter, h, *args): 
    4348         h << h.div('Value: ', counter.val) 
     49 
    4450         h << h.a('++').action(counter.increase) 
    4551         h << '|' 
    4652         h << h.a('--').action(counter.decrease) 
     53 
    4754         return h.root 
    4855 
     
    51583. How does it work? 
    5259 
    53 Nagare handles request in two phases: 
     60Nagare handles a HTTP request in two phases: 
    5461 
    55     - Phase1: callbackmanager finds action from its id and execute it on the right state of the application. That way object graph is modified and a new snapshot is created, 
    56     - Phase2: presentation service generates and serialize a DOM tree for current object graph. HTML page is redisplayed in the browser. 
     62    - Phase #1: the right state of the application (a previous snapshot of all the application components) is restored. Then the callback manager finds the action from its id and executes it. A new snapshot of the modified components graph is created and stored. 
     63    - Phase #2: the presentation service generates a DOM tree from the different views of the components. The DOM tree is then serialized to HTML and sent back to the browser. 
    5764 
    58 If you look closely at generated URL, you will see something like: 
     65If you look closely at the URL, you will see something like: 
    5966 
    60 `?_s=2171996978143275&_c=00011&_action480534548`. 
     67``?_s=2171996978143275&_c=00011&_action480534548`` 
    6168 
    62 Each URL parameter meaning the following: 
     69where: 
    6370 
    64     - _s: id of the session created for the application, 
    65     - _c: id of the snapshot of the state of the application, 
    66     - _actionxxx: id of the callback to call. 
     71    - ``_s``: id of the session created for the application, 
     72    - ``_c``: id of the snapshot to use, 
     73    - ``_actionxxx``: id of the action to call. 
    6774 
    68 As you can see URL are non-significative, this improves security in comparison of the MVC's way of doing it. Of course, you DON'T HAVE to use significative URL but you totally CAN if you NEED it (see :wiki:`RestfulUrl`). You just don't have to bother with URL when doing something like the third step of a wizard or a shopping basket. 
     75As you can see URL are non-significative by default. 
     76 
     77With a MVC framework you must always map an URL to an action, even if its result is not a resource (in REST terminology), like the third step of a wizard or a contextual shopping basket. 
     78 
     79With Nagare you DON'T HAVE to use significative URL but you totally CAN if you NEED it (see :wiki:`RestfulUrl`). Also, non-significative URL with randomized sessions and actions ids improve security. 
    6980 
    70814. Back and Fork 
    7182 
    72 Start with a counter at 0, do ten times '++' and see what happens when you use you browser back button 4 times. 
    73 What do you expect when doing '++' now? 
     83Start with a counter at 0, do ten times ``++`` and see what happens when you use your browser back button 4 times. 
     84What do you expect when doing ``++`` now? 
    748511? 
    75867? 
    7687 
    77 Open a new tab on '--' link, you get one tab with a value of 7 and one tab with a value of 6.  
    78 Play with the 2 counters, that's right, you have 2 different counters! 
     88Now open a new tab on ``--`` link, you get one tab with a value of 7 and one tab with a value of 6.  
     89Play with the 2 counters, that's right, you've got 2 different counters! 
    7990 
    8091`Go to part 2 of this tutorial </trac/wiki/NagareTutorial2>`_ | `Go to part 4 of this tutorial </trac/wiki/NagareTutorial4>`_