Introduction
Python is used to create the open-source Web2py framework for web applications. Dynamic web content programming in python is made possible via Web2py. Web2py is made to make laborious web development jobs easier, such as creating web forms from scratch, while a web developer can still do it if necessary.
In this article, we will be learning the default page layout and mobile development in tweb2py.
Default Page Layout
Despite being stripped of certain optional components, the "views/layout.html" that comes with the Web2py scaffolding application welcome has the same structure:
Code for default page layout
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>{{=response.title or request.application}}</title>
...
<script src="{{=URL('static', 'js/modernizr.custom.js')}}"></script>
{{
response.files.append(URL('static', 'css/web2py.css'))
response.files.append(URL('static', 'css/bootstrap.min.css'))
response.files.append(URL('static', 'css/bootstrap-responsive.min.css'))
response.files.append(URL('static', 'css/web2py_bootstrap.css'))
}}
{{include 'web2py_ajax.html'}}
{{
# using sidebars need to know what sidebar you want to use
left_sidebar_enabled = globals().get('left_sidebar_enabled', False)
right_sidebar_enabled = globals().get('right_sidebar_enabled', False)
middle_columns = {0:'span12', 1:'span9', 2:'span6'}[
(left_sidebar_enabled and 1 or 0)+(right_sidebar_enabled and 1 or 0)]
}}
{{block head}}{{end}}
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="flash">{{=response.flash or ''}}</div>
<div class="navbar-inner">
<div class="container">
{{=response.logo or ''}}
<ul id="navbar" class="nav pull-right">
{{='auth' in globals() and auth.navbar(mode="dropdown") or ''}}
</ul>
<div class="nav-collapse">
{{if response.menu:}}
{{=MENU(response.menu)}}
{{pass}}
</div><!--/.nav-collapse -->
</div>
</div>
</div><!--/top navbar -->
<div class="container">
<!-- Masthead -->
<header class="mastheader row" id="header">
<div class="span12">
<div class="page-header">
<h1>
{{=response.title or request.application}}
<small>{{=response.subtitle or ''}}</small>
</h1>
</div>
</div>
</header>
<section id="main" class="main row">
{{if left_sidebar_enabled:}}
<div class="span3 left-sidebar">
{{block left_sidebar}}
<h3>Left Sidebar</h3>
<p></p>
{{end}}
</div>
{{pass}}
<div class="{{=middle_columns}}">
{{block center}}
{{include}}
{{end}}
</div>
{{if right_sidebar_enabled:}}
<div class="span3">
{{block right_sidebar}}
<h3>Right Sidebar</h3>
<p></p>
{{end}}
</div>
{{pass}}
</section><!--/main-->
<!-- Footer -->
<div class="row">
<footer class="footer span12" id="footer">
<div class="footer-content">
{{block footer}} <!-- this is default footer -->
...
{{end}}
</div>
</footer>
</div>
</div> <!-- /container -->
<!-- Javascript -->
<!-- Jacascript code is placed at the end to load the page faster -->
<script src="{{=URL('static', 'js/bootstrap.min.js')}}"></script>
<script src="{{=URL('static', 'js/web2py_bootstrap.js')}}"></script>
{{if response.google_analytics_id:}}
<script src="{{=URL('static', 'js/analytics.js')}}"></script>
<script type="text/javascript">
analytics.initialize({
'Google Analytics':{trackingId:'{{=response.google_analytics_id}}'}
});</script>
{{pass}}
</body>
</html>The Features of the Default Layout
-
It uses the "modernizr" [modernizr] package and is built in HTML5 to support older browsers. In order to keep the layout concise, certain additional conditional statements that are required by IE are included.
-
The response.subtitle and response.title attributes, which may be configured in a model or controller, are both displayed. It uses the application name as the title if they are not set.
-
The header contains the web2py ajax.html file, which produced all of the link and script import declarations.
-
It adapts columns to fit small displays and uses a modified version of Twitter Bootstrap for flexible layouts that function on mobile devices.
-
To connect to Google Analytics, it makes use of "analytics.js."
-
Depending on the situation, the {{=auth.navbar(...)}} shows a greeting to the current user and links to the auth functions like login, register, logout, change password, etc. As with any other helper factory, auth.navbar's output can be modified. It is used in an expression to check for the definition of auth; if auth is not defined, the expression evaluates to ".
-
The menu structure is displayed as <ul>...</ul> using the {{=MENU(response.menu)}} function.
-
When the page is rendered, "include" is substituted with the information from the extending view.
-
It employs the following classes: page header, main, and footer. By default, it uses a conditional three-column layout (the extending views have the ability to disable the left and right sidebars).
- The blocks head, left sidebar, center, right sidebar, and footer are all present.
We can also customize the sidebars in the default page layout as follows:
{{left_sidebar_enabled=True}}
{{extend 'layout.html'}}
Text goes in the middle of the page.
{{block left_sidebar}}
This text goes in the sidebar.
{{end}}
245+ registered 
