Phalcon 3 - Tutorial 5: Customizing INVO

البرنامج التعليمي 5: تخصيص INVO




phalcon

لإنهاء شرح المفصل لـ INVO ، سنشرح كيفية تخصيص INVO بإضافة عناصر واجهة المستخدم وتغيير العنوان وفقًا لجهاز التحكم المنفذ.

مكونات المستخدم

تم تحقيق جميع عناصر واجهة المستخدم والنمط المرئي للتطبيق في الغالب من خلال Bootstrap . تتغير بعض العناصر ، مثل شريط التنقل وفقًا لحالة التطبيق. على سبيل المثال ، في الزاوية العلوية اليمنى ، يتغير الارتباط "تسجيل الدخول / التسجيل" إلى "تسجيل الخروج" إذا قام مستخدم بتسجيل الدخول إلى التطبيق.

يتم تنفيذ هذا الجزء من التطبيق في مكون "العناصر" (التطبيق / المكتبة / Elements.php).

use Phalcon\Mvc\User\Component;

class Elements extends Component
{
    public function getMenu()
    {
        // ...
    }

    public function getTabs()
    {
        // ...
    }
}

يمتد هذا الفصل Phalcon\Mvc\User\Component . لا يُفرض تمديد مكون مع هذا الصف ، ولكنه يساعد في الوصول إلى خدمات التطبيقات بسرعة أكبر. الآن ، سنقوم بتسجيل أول مكون مستخدم لدينا في حاوية الخدمات:

// Register a user component
$di->set(
    "elements",
    function () {
        return new Elements();
    }
);

وبوصفه وحدات تحكم أو مكونات إضافية أو مكونات ضمن العرض ، فإن هذا المكون لديه أيضًا إمكانية الوصول إلى الخدمات المسجلة في الحاوية وبمجرد الوصول إلى سمة تحمل الاسم نفسه كخدمة مسجلة مسبقًا:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" href="#">INVO</a>

            {{ elements.getMenu() }}
        </div>
    </div>
</div>

<div class="container">
    {{ content() }}

    <hr>

    <footer>
        <p>&copy; Company 2015</p>
    </footer>
</div>

الجزء المهم هو:

{{ elements.getMenu() }}

تغيير العنوان ديناميكيا

عندما تتصفح بين خيار وآخر ، فستلاحظ أن العنوان يتغير ديناميكيًا يشير إلى المكان الذي نعمل فيه حاليًا. يتم تحقيق ذلك في كل مُهيئ وحدة التحكم:

class ProductsController extends ControllerBase
{
    public function initialize()
    {
        // Set the document title
        $this->tag->setTitle(
            "Manage your product types"
        );

        parent::initialize();
    }

    // ...
}

لاحظ أنه يتم استدعاء method parent::initialize() أيضًا ، فإنه يضيف المزيد من البيانات إلى العنوان:

use Phalcon\Mvc\Controller;

class ControllerBase extends Controller
{
    protected function initialize()
    {
        // Prepend the application name to the title
        $this->tag->prependTitle(
            "INVO | "
        );
    }

    // ...
}

وأخيرًا ، تتم طباعة العنوان في العرض الرئيسي (app / views / index.volt):

<!DOCTYPE html>
<html>
    <head>
        <?php echo $this->tag->getTitle(); ?>
    </head>

    <!-- ... -->
</html>