Adding menu to template

Adding a simple menu to the pages we are going to create

There is one last thing we want to do before we leave our DG3 as a CMS system. We need to add the navigator menu and a page footer to a template instead of adding it to each page. If we get a lot of pages, then to have a copy of the menu and footer in each page can be burden when we need to change the site. To fix this, we simply copy the menu and the footer from the landing page into the base template and remove them form the about and contact page. There is one problem with this, how to maintain the active page menu. To solve this problem we will use the default context view and a template tag.

<!DOCTYPE html>

<html>
<head>
{% block extra-head %}{% endblock %}
	<link rel="stylesheet" href="{{ media_url }}css/style.css" />
	<title>{% block title %}{% endblock %}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="{{ media_url }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<script charset="utf-8" type="text/javascript" src="{{ media_url }}js/jquery-1.10.2.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="{{ media_url }}bootstrap/js/bootstrap.min.js"></script>
{% block extra-head-bottom %}{% endblock %}
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="/">DG3 by Example</a>
</div>
   <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
       <li class="{% if current == "landing" %}active{% endif %}"><a href="/landing/">Home</a></li>
       <li class="{% if current == "about" %}active{% endif %}"><a href="/about/">About</a></li>
       <li class="{% if current == "contact" %}active{% endif %}"><a href="/contact/">Contact</a></li>
    </ul>
  </div>
</div>
</nav>

<div class="container">
{% block content %}
{% endblock %}
<hr/>
<footer>
	<div class="text-center"><a href="/about/">About 4ThePeople Limited</a>|<a href="/contact/">Contact Us</a></div>
	<p class="text-center"><small>Copyright © 2014 4ThePeople Ltd & DataEase International Ltd. All Rights Reserved</small></p>
</footer>
</div> <!-- End container -->
</body>
</html>

The new base template after we moved the code and added a formula to deduct what menu should be active. So what we do is to use an if tag where we check a LiveText named current. The current LiveText then holds the value of which page we are in. This information do not exist in a default DG3 application, so we need to inject it to the template. This is how that can be done:

settingsicon.png select settings and locate the Context view tab

current = request.get_full_path()[1:-1] # remove the leading and trailing /
ctx[ 'current'] = current

This is the code we added in the default context view. What is does is get the full path of the url form the web request. This returns the relative url for the page served. That is the url without any query string or server name but with the leading and trailing /. So to get something we can use we remove the leading and trailing / from the url string returned. This is done with the standard [1:-1] slice operation found in Python. This value we assign to the context of the page. This has the var name ctx and is a dict. Hence we assign a LiveText named current by the ctx['current']=varname. That all it takes. Now we have a LiveText added to any page we create that have the url without the leading and trailing / on any page served. For out three pages, it will hold the value landing, about and contact. That's all. Now we are ready to deploy to a live server.

Default context view

The default context view is a technique to inject values to the page context for every page dynamic generated by the server. This means that any code you put here will run on every page, so this should be uses sparsely. The context view code is written in the language Python as any server side code generated by DG3. It is a fast light weight language that can run on every platform out there. Is has a huge number of libraries that comes with the language, hence the frase batteries included that in the slogen for the language. And if it is not in the standard library of Python, it is a very huge probablilty that you will find a library doing what you want out on the web. Most of them with a very liberale license that meant you can use it without any cost.

LiveText

LiveText is one of the most important concepts in DG3. It is a technique of transferring dynamic content from the server to the web page. The data can come from Context view like we have demonstrated in this page, but most important from the build in database motor PRISM. The data can come as a mainrecord, viewdata or a number of other sources. The format is start tag [{ and end tag }] and a LiveText reference in between. The LiveText reference is any context value delivered by the page view og context view.