سبد (0)

اضافه کردن آیکن به منو

اضافه کردن آیکن به منوی کامپوننت احوال پرسی

در Root اصلی جوملای نصب شده تان یک شاخه با نام media قرار دارد که طبق استاندارهای جوملا، عکس ها و فایل های CSS استفاده شده در کامپوننت ها در آن قرار می گیرد. البته فایل های هر کامپوننت در شاخه ای همنام با نام همان کامپوننت قرار دارد.


در پایان این آموزش خواهید توانست

بعد از نصب این قسمت از آموزش، خواهید دید که:

آموزش اضافه کردن آیکن به منوی کامپوننت احوال پرسی

1- از منوی کامپوننت ها، روی گزینه "کامپوننت احوال پرسی" کلیک کنید.

مطابق شکل زیر، دو آیکن که با فلش نشان داده شده است در قسمت منوها و Toolbar اضافه شده است.


فایل نصب کامپوننت

در فایل نصب کامپوننت، قسمت های قرمز رنگ مطابق شکل زیر، اضافه یا تغییر خواهند کرد:

توجه: در انتهای این بیاموز، فایل نصب کامپوننت برای دانلود قرار داده شده است.


اضافه کردن آیکن به منو

برای اضافه کردن آیکن به منوی کامپوننت احوال پرسی مراحل زیر را طی فرمایید:

  1. اضافه کردن فایل عکس به فایل نصبی
  2. اصلاح فایل helloworld.xml

مرحله 1- اضافه کردن فایل عکس به فایل نصبی

برای اضافه کردن عکس به فایل نصبی کامپوننت باید در Root اصلی آن یک شاخه با نام media بسازیم و داخل این پوشه یک پوشه دیگر با نام images ایجاد نمایید. حالا دو عکس زیر را در شاخه media/images قرار دهید.


مرحله 2- اصلاح فایل helloworld.xml

اگر این آموزش را از ابتدا دنبال فرموده باشید، فقط کافی است تغییرات زیر را در فایل xml، اعمال نمایید: (رنگ سبز)

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- $Id: helloworld.xml 14 2009-11-02 18:35:20Z chdemko $ -->
<extension type="component" version="1.6.0" method="upgrade">

<name>COM_HELLOWORLD</name>
<!-- The following elements are optional and free of formatting conttraints -->
<creationDate>November 2009</creationDate>
<author>beyamooz</author>
<authorEmail>این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید</authorEmail>
<authorUrl>https://beyamooz.com</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<!-- The version string is recorded in the components table -->
<version>0.0.10</version>
<!-- The description is optional and defaults to the name -->
<description>COM_HELLOWORLD_DESCRIPTION</description>

<install> <!-- Runs on install -->
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall> <!-- Runs on uninstall -->
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update> <!-- Runs on update; New in 1.6 -->
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>

<!-- Site Main File Copy Section -->
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from /site/ in the package -->
<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
<folder>language</folder>
</files>

<media destination="com_helloworld" folder="media">
<filename>index.html</filename>
<folder>images</folder>
</media>

<administration>
<!-- Administration Menu Section -->
<menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
<!-- Administration Main File Copy Section -->
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from /admin/ in the package -->
<files folder="admin">
<!-- Admin Main File Copy Section -->
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<!-- SQL files section -->
<folder>sql</folder>
<!-- tables files section -->
<folder>tables</folder>
<!-- models files section -->
<folder>models</folder>
<!-- views files section -->
<folder>views</folder>
<!-- controllers files section -->
<folder>controllers</folder>
</files>

<languages folder="admin">
<language tag="en-GB">language/en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">language/en-GB/en-GB.com_helloworld.sys.ini</language>
<language tag="fa-IR">language/fa-IR/fa-IR.com_helloworld.ini</language>
<language tag="fa-IR">language/fa-IR/fa-IR.com_helloworld.sys.ini</language>
</languages>
</administration>

</extension>

اضافه کردن آیکن در Toolbar

جهت اضافه کردن آیکن به Toolbar باید دو View بالا را اصلاح کنید.

  1. اصلاح Viewها
  2. اضافه کردن Styleهای CSS در کامپوننت
  3. اصلاح فایل زبان - اضافه کردن کلید/مقدار

مرحله 1- اصلاح Viewها

همان طور که می دانید تا اینجای کار دو View سمت مدیریت به کامپوننت اضافه کرده ایم:

  1. helloworlds: نمایش پیام های احوال پرسی در یک جدول
  2. helloworld: فرم اضافه یا ویراش پیام های احوال پرسی که اگر در حالت ویرایش قرار داشته باشید، متن یک پیام در تکس باکس مربوطه نمایش داده می شود.

اگر این آموزش را از ابتدا دنبال فرموده باشید، فقط کافی است تغییرات زیر را در دو View بالا، اعمال نمایید: (رنگ سبز)

admin/views/helloworlds/view.html.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// import Joomla view library
jimport('joomla.application.component.view');
 
/**
 * HelloWorlds View
 */
class HelloWorldViewHelloWorlds extends JView
{
        /**
         * HelloWorlds view display method
         * @return void
         */
        function display($tpl = null) 
        {
                // Get data from the model
                $items = $this->get('Items');
                $pagination = $this->get('Pagination');
 
                // Check for errors.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Assign data to the view
                $this->items = $items;
                $this->pagination = $pagination;
 
                // Set the toolbar and number of found items
                $this->addToolBar($this->pagination->total);
 
                // Display the template
                parent::display($tpl);
 
                // Set the document
                $this->setDocument();
        }
 
        /**
         * Setting the toolbar
         */
        protected function addToolBar($total=null) 
        {
                JToolBarHelper::title(JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLDS').
                        //Reflect number of items in title!
                        ($total?' <span style="font-size: 0.5em; vertical-align: middle;">('.$total.')</span>':'')
                        , 'helloworld');
                JToolBarHelper::deleteListX('', 'helloworlds.delete');
                JToolBarHelper::editListX('helloworld.edit');
                JToolBarHelper::addNewX('helloworld.add');
        }
        /**
         * Method to set up the document properties
         *
         * @return void
         */
        protected function setDocument() 
        {
                $document = JFactory::getDocument();
                $document->setTitle(JText::_('COM_HELLOWORLD_ADMINISTRATION'));
        }
}

توضیح:

  1. در تابع JToolBarHelper::title پارامتر دوم با مقدار "helloworld" تنظیم شده است. از این پارامتر برای تنظیم یک کلاس CSS برای عنوان Toolbar استفاده می شود.
  2. از تابع ()setDocument برای تنظیم title مرورگر که در بالای پنجره مرورگر نمایش داده می شود استفاده می شود.

admin/views/helloworld/view.html.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// import Joomla view library
jimport('joomla.application.component.view');
 
/**
 * HelloWorld View
 */
class HelloWorldViewHelloWorld extends JView
{
        /**
         * View form
         *
         * @var         form
         */
        protected $form = null;
 
        /**
         * display method of Hello view
         * @return void
         */
        public function display($tpl = null) 
        {
                // get the Data
                $form = $this->get('Form');
                $item = $this->get('Item');
 
                // Check for errors.
                if (count($errors = $this->get('Errors'))) 
                {
                        JError::raiseError(500, implode('<br />', $errors));
                        return false;
                }
                // Assign the Data
                $this->form = $form;
                $this->item = $item;
 
                // Set the toolbar
                $this->addToolBar();
 
                // Display the template
                parent::display($tpl);
 
                // Set the document
                $this->setDocument();
        }
 
        /**
         * Setting the toolbar
         */
        protected function addToolBar() 
        {               
                $input = JFactory::getApplication()->input;
                $input->set('hidemainmenu', true);
                $isNew = ($this->item->id == 0);
                JToolBarHelper::title($isNew ? JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW')
                                             : JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT'), 'helloworld');
                JToolBarHelper::save('helloworld.save');
                JToolBarHelper::cancel('helloworld.cancel', $isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE');
        }
        /**
         * Method to set up the document properties
         *
         * @return void
         */
        protected function setDocument() 
        {
                $isNew = ($this->item->id < 1);
                $document = JFactory::getDocument();
                $document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING')
                                           : JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
        }
}

در این View نیز از پارامتر دوم در تابع JToolBarHelper::title برای تنظیم کلاس CSS استفاده شده است. همچنین title مرورگر در تابع ()setSocument تنظیم شده است.


مرحله 2- اضافه کردن Styleهای CSS در کامپوننت

برای اسفاده از آیکن 48x48 در Toolbar باید کلاس icon-48-helloworld. را به کامپوننت اضافه کنیم.

با استفاده از متد ()addStyleDeclaration، می توانید کلاس های CSS را به کامپوننت اضافه کنید. یکی از محل هایی که می توان این کار را انجام داد، فایل شروع کامپوننت سمت مدیریت یعنی admin/helloworld.php است.

اگر این آموزش را از ابتدا دنبال فرموده باشید، فقط کافی است تغییرات زیر را در فایل شروع، اعمال نمایید: (رنگ سبز)

admin/helloworld.php

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
// Set some global property
$document = JFactory::getDocument();
$document->addStyleDeclaration('.icon-48-helloworld {background-image: url(../media/com_helloworld/images/tux-48x48.png);}');
 
// import joomla controller library
jimport('joomla.application.component.controller');
 
// Get an instance of the controller prefixed by HelloWorld
$controller = JController::getInstance('HelloWorld');
 
// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));
 
// Redirect if set by the controller
$controller->redirect();

مرحله 3- اصلاح فایل زبان - اضافه کردن کلید/مقدار

اگر این آموزش را از ابتدا دنبال فرموده باشید، فقط کافی است تغییرات زیر را در فایل زبان، اعمال نمایید: (رنگ سبز)

ترجمه فارسی کامپوننت سمت مدیریت - admin/language/fa-IR/fa-IR.com_helloworld.ini

COM_HELLOWORLD_ADMINISTRATION="کامپوننت احوال پرسی - مدیریت"
COM_HELLOWORLD_HELLOWORLD_CREATING="کامپوننت احوال پرسی - ایجاد"
COM_HELLOWORLD_HELLOWORLD_EDITING="کامپوننت احوال پرسی - ویرایش"

COM_HELLOWORLD_HELLOWORLD_DETAILS="جزئیات"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="لطفاً پیام مورد نظرتان را انتخاب نمایید"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="انتخاب پیام"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="متن احوال پرسی"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="شناسه"
COM_HELLOWORLD_MANAGER_HELLOWORLDS="مدیریت کامپوننت احوال پرسی"
COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="مدیریت کامپوننت احوال پرسی: ثبت یک پیام"
COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="مدیریت کامپوننت احوال پرسی: ویرایش یک پیام"
COM_HELLOWORLD_N_ITEMS_DELETED_1="یک پیغام حذف شد"
COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d پیام حذف شد"
COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL="پیام"
COM_HELLOWORLD_HELLOWORLD_GREETING_DESC="لطفاً پیام مورد نظرتان را وارد کنید"

ترجمه انگلیسی کامپوننت سمت مدیریت - admin/language/en-GB/en-GB.com_helloworld.ini

COM_HELLOWORLD_ADMINISTRATION="HelloWorld - Administration"
COM_HELLOWORLD_HELLOWORLD_CREATING="HelloWorld - Creating"
COM_HELLOWORLD_HELLOWORLD_EDITING="HelloWorld - Editing"

COM_HELLOWORLD_HELLOWORLD_DETAILS="Details"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="This message will be displayed"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Message"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Greeting"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="Id"
COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="HelloWorld manager: Edit Message"
COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="HelloWorld manager: New Message"
COM_HELLOWORLD_MANAGER_HELLOWORLDS="HelloWorld manager"
COM_HELLOWORLD_N_ITEMS_DELETED_1="One message deleted"
COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d messages deleted"

دریافت فایل کامپوننت آموزشی Hello World (بخش دهم)

ایجاد کننده:www.beyamooz.com

خرید فایل:دانلود فایل کامپوننت Hello World
حجم فایل: 4 کیلو بایت
قیمت: 1000 تومان

تمام درآمدها صرف پیشرفت بیاموز خواهد شد.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه