Temel Tema Entegrasyonu

ZN Framework tema kaynaklarını yükleyebilmek için bir kaç farklı yol sunar. Bunlardan en çok tercih edileni Import::theme() yöntemi ile çağrılan tema kaynaklarıdır. Bu bölümde tema enterasyonuna yeni bir boyut kazandırılarak temaların daha hızlı nasıl entegre edilebileceği anlatılmıştır. Bu bölümde kullanılan teknikler yukarıda belirtilen sürüm itibari ile geçerlidir. Tema entegrasyonunda kolaylık özellikle hızlı proje çıkarma noktasında olmazsa olmazdır. Bu nedenle hazır web şablonlarının ZN'ye kolay bir şekilde nasıl entegre edilebileceğini göreceksiniz.

# Bölüm Başlıkları

# Yöntemler
# Uygulama Geliştirme

# Yöntemler

# Active

Bu yöntem görünüme çevrilen .html uzantılı dosyalarda yer alan img, link, script gibi yol belirten etiketlerin src ve href özelliklerine dokunmanıza gerek kalmadan ilgili varlıkların yol bilgisinin otomatik olarak algılanabilmesi için kullanılır. Böylece temayı sisteme giydirdikten sonra varlık dosyalarına ait yolları tek tek düzenlemenize gerek kalmaz. Sistem üzerinde Resources/Themes/ tema dizini içerisinde yer alan tema dizinlerinden hangisine ait varlık dosyalarının geçerli olacağını belirler. Bu yöntem başlangıç kontrolcüsü veya dosyaları ile birlikte kullanılmalıdır. Bunun nedeni aktif temayı sistemin genelide geçerli hale getirmektir.

Parametreler

$themeName = 'Default'

Kullanımı

<?php namespace Project\Controllers;

class Initialize extends Controller
{
    public function main(string $params = NULL)
    {
        # Resources/Themes/Blue/
        Theme::::active('Blue');

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

Bu güncelleme ile Theme::active() kullanımı ile birlikte 2 sabit devreye girer. Bunlar;

# MatchElement

Otomatik olarak yolu düzenlenen nesne ve özellikleri genişletmek isterseniz bu yöntemi kullanmalısınız. Link düzenleme için yakalanan ön tanımlı nesne ve özellikler şunlardır;

Parametreler

string $attributeName = NULL

Kullanımı

<?php namespace Project\Controllers;

class Initialize extends Controller
{
    public function main(string $params = NULL)
    {
        Theme::matchElement('li', 'slider-image|slider-url')::active('Blue');

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

Yukarıdaki örnek kullanımda ön tanımlı ifadelere ek olarak otomatik olarak yakalanacak ifadelere li elementini ve slider-image ve slider-url özelliklerini ekledik.

# Uygulama Geliştirme

Aşağıda örnek uygulama geliştirmenin aşamaları gösterilmiştir. 

1 - Örnek Tema İçeriği
2 - Varlıkları Taşıma
3 - Masterpage Oluşturma

3.1 - Sayfaların Tanımlanması
3.2 - Sayfaların İçerikleri

4 - Başlangıç Kontrolcüsü Oluşturma

4.1 - Başlangıç Kontrolcüsünün İçeriği
4.2 - Temayı Atkif Hale Getirmek

5 - Kontrolcülerin Oluşturulması

5.1 - Kontrolcünün İçeriği

6 - Görünümlerin Oluşturulması

6.1 - Görünümün İçeriği
6.2 -  Çoklu Tema Görünümü

7 - Genel Kaynak Kod Görünümü

Aşağıdaki dizin yapısına benzer bir temamız olduğunu varsayalım.

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

Yukarıda yer alan img/, css/, js/ ve less/ dizinlerini projemizin Resources/Themes/Blue/ dizine taşıyalım.

Resources/

Themes/

Blue/

img/
css/
js/
less/

Tema entegrasyonlarında ZN'nin masterpage yapısının kullanılmasını tavsiye ediyoruz. Masterpage kullanımı sizi gereksiz bir çok kod kullanımından kurtaracaktır. Bu örnek temamızda head, body, header, footer gibi Masterpage'nin kullanacağı görünümlere ihtiyaç olduğunu düşünün. Bu durumda görünüm dizinimizin içeriği aşağıdaki gibi olur.

Views/

Sections/

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

Sayfaların Tanımlanması

Masterpage'nin yukarıdaki sayfaları yönetebilmesi için yapılandırma dosyasında yer alan bodyPage ve headPage ayarlarının yukarıda gösterilen head ve body sayfaları ile eşleştirilemesi gerekmektedir. Bu eşleştirme dosya üzerinden olabileceği gibi başlangıç kontrolcüsü üzerinden de yapılabilir. Bu örnek için başlangıç kontrolcüsü kullandığımızı varsayalım.

header ve footer sayfaları içinde .html dosyalarında yer alan ortak üst ve alt bölümler yer alacaktır.

Sayfaların İçerikleri

head: Bu sayfada <head>[Bu kısım]</head>Head etikleri arasındaki etiketler yer alacaktır. Head etiketlerinin kendisi alınmaz. Masterpage yapılandırma dosyasında yer alan ayarlara göre başka etkileride almayabilirsiniz. Mesela <title> etiketi. Bu etiket yapılandırılabileceği için head page içine alınmasına gerek yoktur.

Dosya: Views/Sections/head.wizard.php

<link href="css/style.css" rel="stylesheet" type="text/css" />

body: Bu sayfada header, $view ve footer sayfaları yer almalıdır. $view değişkeni ilgili aktif kontrolcünün otomatik olarak çağıracağı görünüm sayfasını ifade etmektedir.

Dosya: Views/Sections/body.wizard.php

@view('Sections/header')

@view

@view('Sections/footer')

header: Bu sayfada tüm .html sayfalarında ortak olan üst bölüm yer almalıdır.

Dosya: Views/Sections/header.wizard.php

<header>
    // Header Codes
</header>

footer: Bu sayfada tüm .html sayfalarında ortak olan alt bölüm yer almalıdır.

Dosya: Views/Sections/footer.wizard.php

<footer>
    // Footer Codes
</footer>

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

Başlangıç kontrolcüleri de diğer kontrolcüler gibi Controllers/ dizini içine oluşturulur. Tek fark bu kontrolcülerin Config/Starting.php yapılandırma dosyasında belirtilmesi gerektiğidir. Starting.php yapılandırma dosyasında yer ala controller değerine başlangıç kontrolcüsü olarak kullanacağınız kontrolcünün dosya adını yazmalısınız. Bu örnekte start.php isimli bir kontrolcü kullandığımızı varsayalım.

'constructors' => 'Initialize'

Daha sonra başlangıç kontrolcüsü oluşturup içeriğini aşağıdaki gibi düzenlemeliyiz.

Başlangıç Kontrolcüsünün İçeriği

Başlangıç kontrolcüsünün içeriğini aşağıdaki gibi düzenleyin. 

Dosya: Controllers/Initialize.php

<?php namespace Project\Controllers;

class Initialize extends Controller
{
    public function main(string $params = NULL)
    {
        # Resources/Themes/Blue/ dizini aktif ediliyor.
        Theme::active('Blue');

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

Varlıkların taşınmasından sonra kalan diğer .html uzantılı görünümlerin yüklenebilmesi için kontrolcülerinin oluşturulması gerekir.

Aşağıda kontrolcüler dizinin ve bir tane kontrolcünün içeriği gösterilmiştir.

Controllers/

Home.php
Contact.php
About.php
Blog.php

Kontrolcünün İçeriği

Dosya: 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');
    }
}

Varlıkların taşınmasından sonra kalan diğer .html uzantılı görünümlerin uzantısı .php uzantısına çevrilip Views/ dizini içerisine taşınması gerekmektedir. Taşıma işleminden sonra bu sayfaların sadece iç kısmı kalacak şekilde kırpılması gerekmektedir. Üst ve alt bölümlerin nerelere taşınacağı yukarıda belirtimiştir.

Aşağıda görünümler dizinin ve bir tane görünümün içeriği gösterilmiştir.

Views/

Home/main.wizard.php
Contact/main.wizard.php
About/main.wizard.php
Blog/main.wizard.php

Görünümün İçeriği

Dosya: Views/Home/main.wizard.php

<div id="container">
    <div id="content">
        <div id="title">{{ $pageTitle }}</div>
        <div id="sub-title">{{ $pageSubtitle }}</div>
    </div>
</div>

Çoklu Tema Görünümü

Eğer çoklu tema kullanmayı planlıyorsanız görünümleri ilgili tema adı ile oluşan bir dizin altında gruplayabilirsiniz. Bu şekilde her bir tema için farklı içerikte görünümler tasarlayabilirsiniz.

Aşağıda multemel dizin ve dosya yapısı gösterilmiştir.

Views/

Blue/

Home/main.wizard.php
Contact/main.wizard.php
About/main.wizard.php
Blog/main.wizard.php

Red/

Home/main.wizard.php
Contact/main.wizard.php
About/main.wizard.php
Blog/main.wizard.php

Sections/

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

Düzenlemelerden sonra sayfanın çalıştırılması durumunda aşağıdaki gibi bir kaynak kod oluşacaktır.

<!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/Blue/js/default.js"></script>
</body>
</html>