Limb3 tutorial

====== Step4. Templates optimization. Adding news pagination ====== ===== Extracting form_fields.html and form_errors.html templates ===== If you noticed our templates news/create.html and news/edit.html have a lot of duplication. Let's use [[limb3_2007_4:en:packages:wact:tags:core_tags:core_include_tag|]] tag to extract some common template code into separate files. works almost just like php include() function. First we extract **news/form_fields.html** template with the following contents:


Title : 

Date : 

Annotation : 

Content :

Second is **news/form_errors.html** with the code that renders form errors:






    

       
      {$ErrorMessage}

Now we modify news/create.html and news/edit.html to use two new templates:




  Limb3 tutorial
  


 
Create news

and




  Limb3 tutorial
  


 
Edit news

Much better! But we can do more with WACT and make our templates even more compact. Note: WACT compiles templates as a whole. That means what usage doesn't slow template rendering unlike Smarty. ===== Extracting core template page.html ===== The template code in news/create.html and news/edit.html before starting tags are duplicating too. With other template engine we would extract something like header.html and footer.html and would use for them. eader/footer way has a big disadvantage that it breaks the template into two components that complicate common understanding of the template as a whole. But WACT has better means. Let's use [[limb3_2007_4:en:packages:wact:tags:core_tags:core_wrap_tag|]] tag that allows to insert a part of the current template into some special placeholder in some other template (core or parent template). This process we call **wrapping**. Ok, let's create a template crud/template/page.html with the following contents:




  Limb3 tutorial

Note tag that declares a place where some part of over template can be inserted into. Now it's time to modify news/create.html and news/edit.html as follows:




Create news

and




Edit news

tag has **file** attribute, that names a relative template path of the core template and **in** attribute, that names a placeholder identifier (id attribute). has both opening and closing tags that marks a part of the current template that must be inserted into the parent template. In fact and tags give you a lot of opportunities for templates optimization like multiple wrapping, parameter passing etc. but these opportunities and the principles of their usage is beyond the scope of this tutorial. ===== Adding news pagination ===== The news list can be too large to display on a single page. In this case, the list can be splitted into pages (so called pagination) with a certain number of news on one page. Pagination is fairly simple with WACT. Let's create a new template **crud/template/pager.html** with the following contents:




Shown: from {$BeginItemNumber} to {$EndItemNumber}

|--



{$number}
{$number}



--|

Total: {$TotalItems}

The main tag here is [[limb3_2007_4:en:packages:wact:tags:pager_tags:pager_navigator_tag|]] that bounds the pager. **items** attribute of sets a number of items of a single page. The rest of the tags just outputs links to first ( tag), previous ( tag, now used here), current( tag), next( tag, not used here) and last( tag) pages, and also links to pages in between ( tag). With output expressions {$TotalItems}, {$BeginItemNumber} and {$EndItemNumber} that can be used inside we render the total number of items in the list and number of the first and the last items on the current page. {$TotalItems}, {$BeginItemNumber} and {$EndItemNumber} are so called tag properties. In order to distinct tag properties from regular output expressions with variables it's better to use slightly modified syntax: {$:TotalItems}, {$:BeginItemNumber} and {$:EndItemNumber}. Now we need to include pager.html into news/display.html and to wire newsline record set with pager in order to start pagination. We also modified news/display.html to wrap it into page.html as with news/create.html and news/edit.html:




Newsline

Create news

ID Date Title Actions #{$id} {$date} {$title} Edit Delete {$annotation} Note new **navigator** attribute of tag that names the identifier of our tag. This is how we wired bind fetched record set with pager. If you did everything right, then you should get something like this: {{{:limb3_2007_4:ru:tutorials:basic:main_page.png|:limb3_2007_4:ru:tutorials:basic:main_page.png}}} ===== What's next? ===== [[step5|Step5. Adding more functionality: single news in detail, 5 latest news on the main page, sorting etc.]]