Nodefony views

Location

In Resources directory bundles you can find a 'views' directory

src/nodefony/bundles/documentation-bundle/Resources/
│  
└── views
    ├── index.html.twig
    ├── layouts
    │   ├── documentationLayout.html.twig
    │   └── navSection.html.twig
    ├── navDocBundle.html.twig
    └── navDoc.html.twig

		

Template Naming

Framework Registred Template as pattern 'bundle:directory:filename'

View Pattern format : documentation-bundle::index.html.twig
Bundle Directory filename
documentation-bundle . index.html.twig

Autoloader

When nodefony start : All templates in views directory in bundle will be Registred and compiled by Template Engine

LOG WHEN NODEFONY START :

Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : Register Template : 'documentation-bundle::index.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : COMPILE Template : 'documentation-bundle::index.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : Register Template : 'documentation-bundle:layouts:documentationLayout.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : COMPILE Template : 'documentation-bundle:layouts:documentationLayout.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : Register Template : 'documentation-bundle:layouts:navSection.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : COMPILE Template : 'documentation-bundle:layouts:navSection.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : Register Template : 'documentation-bundle::navDoc.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : COMPILE Template : 'documentation-bundle::navDoc.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : Register Template : 'documentation-bundle::navDocBundle.html'
Mon Oct 03 2016 14:32:49 DEBUG BUNDLE DOCUMENTATION  : COMPILE Template : 'documentation-bundle::navDocBundle.html'


LOG WHEN FILE CHANGE IN DEVELOPMENT MODE:

Thu Aug 03 2017 16:40:15 INFO WATCHER EVENT change  : BUNDLE App Resources/views/base.html.twig
Thu Aug 03 2017 16:40:15 INFO WATCHER EVENT change  : BUNDLE App RECOMPILE Template : 'AppBundle::base.html'
		

Nodefony template

Nodefony use twig.js : JS port of the Twig templating language of symfony framework See more ( twig.sensiolabs.org ).

Base Template bundle app

Nodefony has a Base Template in Bundle Application ./app/Resources/views/base.html.twig

			
<!DOCTYPE html>
<html>
    <head>
	{% block meta %}
		<meta charset="utf-8">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="web Framework realtime node.js symfony like">
		<meta name="keywords" content="web,Framework,realtime,node.js,symfony,javascript,npm,linux">
		<link rel="manifest" href="/app/manifest.json">
	{% endblock %}
        <title>{% block title %}NODEFONY{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
	{% block body %}{% endblock %}
	{% block footer %}{% endblock %}
        {% block javascripts %}{% endblock %}
</body>
</html>
			
		

You can see differents Twig block meta title stylesheets body footer javascripts

Example Template Inheritance and Layouts

Example Layout : ./src/bundles/demo-bundle/Resources/views/layouts/layout.html.twig

{% extends "/app/Resources/views/base.html.twig" %}

{% block title %} {{ title }} {% endblock %}

{% block body %}
	<header class="header">
		{{ render( controller("demo-bundle:demo:nav", login )) }}
	</header>
{% endblock %}

{% block footer %}
	<footer>
		{{ render( controller("demo-bundle:demo:footer" )) }}
	</footer>
{% endblock %}
		

Example extended Page : ./src/bundles/demo-bundle/Resources/views/orm/orm.html.twig

 {% extends "../layouts/layout.html.twig" %}

{% block title %} ORM  {% endblock %}

{% block stylesheets %}
	{{ parent() }}

	// ADD stylesheets here
	<link rel="stylesheet" href="/demo-bundle/vendors/dataTable/css/dataTables.bootstrap.min.css" />

{% endblock %}

{% block javascripts %}
	{{ parent() }}
	// ADD javascripts files or script here
	<script type="text/javascript" src="/demo-bundle/vendors/dataTable/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="/demo-bundle/vendors/dataTable/js/dataTables.bootstrap.js"></script>

	<script>
		$(document).ready(function(){

			$("table").DataTable()
		})
	</script>
{% endblock %}

{% block body %}
	{{parent()}}
	<table class="table table-striped table-bordered">
		<thead>
			<tr>
				<th>USER ID</th>
				<th>SESSION ID</th>
				<th>SESSION CONTEXT</th>
			</tr>
		</thead>
		<tbody>
			{% for session in sessions %}
			<tr>
				<td>{{session.user_id}}</td>
				<td>{{session.session_id}}</td>
				<td>{{session.context}}</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
{% endblock %}
	

Override Templates from Third-Party Bundles