Basic Theme Integration


( ZN >= 5.4.6 )


ZN Framework offers several different ways to load theme resources. The most preferred of these is the theme resources that are called with the Import :: theme () method. In this section, a new dimension is introduced to theme interventions and how to integrate themes faster. The techniques used in this section are valid as of the above mentioned version. The convenience of theme integration is essential especially at the point of quick project extraction. For this reason, you will see how to easily integrate ready-made web templates into ZN.

Suppose you have a similar theme to the directory structure below.

img /
css /
js /
less /
index.html
contact.html
about.html
blog.html

 

 

# Section Headings


# Migrating Entities
# Masterpage Creation

# Identifying Pages
# Contents of Pages

# Creating a Startup Controller

# Beginning Controler's Content
# Making the Template Attractive

# Creation of controllers

# Content of your control

# Creation of Views

# Appearance Content
# Multiple Theme

# Generic Source Code View

 

 

# Moving Entities


Above img / , css / , js / and less / directories Resources / Themes / blue /Let's have a directory like. The directory view is the following.

Resources /

Themes /

blue /

img /
css /
js /
less /

 

 

# Masterpage Creation


We recommend using ZN masterpage in theme integrations. Using Masterpage will save you a lot of unnecessary code usage. Imagine that we need views that will be used by Masterpage, such as head, body, header, footer in our example. In this case, the content of your view index is as follows.

Views /

sections /

head.wizard.php
body.wizard.php
header.wizard.php
footer.wizard.php

Defining Pages

In order to manage the above configuration file located in the masterpage pages bodyPageand headPagesettings shown above headand bodyis to be effected paired with pages. This mapping can be done via the file or via the initial controller. Suppose we use the initial controller for this example.

headerand the common top and bottom sections of the footerpages will .htmlbe placed in the files.

Pages Contents

head: In this page< head >[This section]< / head >Head labels will be placed between the ethics. The head labels themselves are not taken. Depending on the settings in the Masterpage configuration file, you may not receive it in other circumstances. e.g< title >tag. This tag does not need to be included in the head page because it can be configured.

File: Views / sections / head.wizard.php
<link href="css/style.css" rel="stylesheet" type="text/css" />

body: In this page header, $viewand footerpages should be included. $viewthe variable refers to the view page that will automatically be generated by the active controller concerned.

File: Views / sections / body.wizard.php
@Import::view('sections/header'):

@$view:

@Import::view('sections/footer');

header: This page should contain the parent section that is common to all .html pages.

File: Views / sections / header.wizard.php
<header>
    // Header Codes
</header>

footer: This page should contain a sub-section common to all .html pages.

File: Views / sections / footer.wizard.php
<footer>
    // Footer Codes
</footer>

<script src="js/default.js"></script>

 

 

# Creating a Startup Controller


Like the other controllers, Controllers /directory. The only difference is that these controllersConfig / Starting.phpit must be specified in the configuration file. In the Starting.php configuration file, you should use the controller's value as the startup controller and the file name of the controller. In this example, let's assume we use a controller named start.php.

controllers => 'start'

Then we should create an initial controller and arrange the contents as follows.

Content of the Startup Controller
File: Controllers / start.php
<?php namespace Project\Controllers;

class Start extends Controller
{
    public function main(String $params = NULL)
    {
        Theme::active('blue');

        Masterpage::headPage('sections/head')
                  ->bodyPage('sections/body');
    }
}

Above Themes / the directory name in which the assets we have moved into is activated.

Activating the Template

It is used to indicate which theme is valid on the system. The only reason why it is used in the initial controller is to make it completely viable. The most important feature of this method is that it is able to pull related assets without touching the src and href properties of the waypoint tags such as img, link, script which are located in files with .html extension.

void Theme :: active ( String $ themeName )

 

 

# Creation of controllers


Controllers must be created in order to load the other .html extensions that remain after the assets have been moved.

The contents of the controller directory and one controller are shown below.

Controllers /

home.php
contact.php
about.php
blog.php

Controler's Content

File: Controllers / home.php
<?php namespace Project\Controllers;

class Home extends Controller
{
    public function main(String $params = NULL)
    {
        // The view is automatically imported.

        View::pageTitle('Home Page')
            ->pageSubtitle('Home Subpage');
    }
}

 

 

# Creation of Views


The extensions of the other .html extensions that remain after the entity is moved need to be translated into the .php extension and moved into the Views / directory. After the transfer, only the inside of these pages should be trimmed. Where the top and bottom sections are to be moved above.

Below is a list of views and one view of the content shown.

Views /

home / main.wizard.php
contact / main.wizard.php
about / main.wziard.php
blog / main.wizard.php

Appearance Content
File: Views / home / main.wizard.php
<div id="container">
    <div id="content">
        <div id="title"> $pageTitle </div>
        <div id="sub-title"> $pageSubtitle </div>
    </div>
</div>
Multi Theme

If you plan to use multiple themes, you can group the views under a directory with the corresponding theme name. In this way you can design different content for each theme.

The following shows the multemel directory and file structure.

Views /

blue /

home / main.wizard.php
contact / main.wizard.php
about / main.wziard.php
blog / main.wizard.php

rejection/

home / main.wizard.php
contact / main.wizard.php
about / main.wziard.php
blog / main.wizard.php

sections /

head.wizard.php
body.wizard.php
header.wizard.php
footer.wizard.php

 

 

# Generic Source Code View


If the page is run after the edits, the following source code will be generated.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="tr">
<title>Home</title>
<link href="http://localhost/develop/Projects/Frontend/Resources/Themes/blue/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<header> 
    // Header Codes 
</header>

<div id="container">
    <div id="content">
        <div id="title">Home Page</div>
        <div id="sub-title">Home Subpage</div>
    </div>
</div>

<footer> 
    // Footer Codes 
</footer>

<script src="http://localhost/develop/Projects/Frontend/Resources/Themes/js/default.js"></script>
</body>
</html>