ابزار سایت

راهنمای_توسعه_پوسته

فصل 5- راهنمای توسعه پوسته

واسط کاربری موتوشاب از طریق سازوکار پوسته قابل ویرایش است. به طور کلی یک پوسته شامل تعدادی فایل CSS، تصویر و HTML است. در این بخش به شرح ساختار یک پوسته در موتوشاب و چگونگی توسعه آن پرداخته شده است.

5-1- ساختار پوسته در موتوشاب

برای توسعه یک پوسته در موتوشاب با فرض این‌که نام پوسته Test باشد، می‌بایست یک پوشه تحت همین عنوان در ow_themes ساخته شود. این پوشه دارای فایل‌هایی مطابق با جدول 1 باشد است.

توضیح مسیر نام فایل
شامل تنظیمات CSS مربوط به تمامی المان‌های موجود در سامانه است. در واقع اصلی‌ترین و تاثیرگذارترین فایل یک قالب همین فایل CSS است. Test\base.css base.css
تصویر مربوط به نمایش پوسته موردنظر در صفحه مدیر برای انتخاب است‌ (شکل سمت راست) Test\theme_preview.jpg theme_preview.jpg
اطلاعات اصلی مربوط به پوسته شامل: نام پوسته ‌(حتما می‌بایست با نام فایل یکسان باشد، حرف اول بزرگ نوشته می‌شود)، کلید ‌(می‌بایست دقیقا برابر نام پوشه پوسته باشد و حرف اول هم کوچک نوشته می‌شود)، توضیحات، نام نویسنده، کلید نویسنده ‌‌(با ثبت‌نام در وب‌گاه موتوشاب به دست می‌آید) و غیره. Test\theme.xml theme.xml
در این پوشه کلیه تصاویر و آیکن‌های مربوط به پوسته موردنظر قرار می‌گیرد. Test\images\ images\
صفحه اصلی از قبل طراحی‌شده پوسته مربوط به فضای مدیر سامانه است. Test\Master_pages Admin.htm
صفحه اصلی از قبل طراحی‌شده پوسته مربوط به فضای اصلی سامانه است. Test\Master_pages general.htm
صفحه اصلی از قبل طراحی‌شده پوسته مربوط به فضای خالی سامانه‌ (مانند صفحه نمایش خطا) است. Test\Master_pages blank.htm
صفحه اصلی از قبل طراحی‌شده پوسته مربوط به صفحاتی است که به صورت pop up باز می‌شوند. Test\Master_pages html_document.htm
تصویر مربوط به نمایش پوسته موردنظر در صفحه مدیر برای انتخاب است‌ (شکل وسط قابل انتخاب) Test\ decorators
جدول 1: فایل‌های یک پوسته در موتوشاب

نکته: استفاده از قسمت decorators جدول بالا به این صورت است که برای مثال فرض کنیم می‌خواهیم برای المان دکمه ‌(Button) به ازای داده‌های مختلف حالاتی را طراحی کنیم.

{* `Button` decorator template *}
<span class="ow_button">
<span class="{if !empty($data.class)} {$data.class}{/if}">
<input type="{if !empty($data.type) && $data.type == 'submit'}submit{else}button{/if}"  value="{if !empty($data.langLabel)}{text key=$data.langLabel}{else}{$data.label}{/if}"{if !empty($data.buttonName)} name="{$data.buttonName}"{/if}{if !empty($data.id)} id="{$data.id}"{/if}{if !empty($data.class)} class="{$data.class}"{/if}{if !empty($data.extraString)}{$data.extraString}{/if} {if !empty($data.onclick)}onclick="{$data.onclick}"{/if} />
</span>
</span>

فرمت خط اول ثابت بوده و مشخص می‌کند که طراحی روی المانی با نام Button انجام می‌شود. در ادامه با استفاده از داده‌های گوناگون مانند $data.type، $data.langlabel و … کلاس‌های مختلفی برای المان مورد‌نظر تعیین می‌شود. تابع getDecorator واقع در ow_core/theme.php توسط تابع processTheme واقع در کلاس theme_service.php فراخوانی شده و تمامی تنظیمات مربوط به المان‌های مختلف ذخیره و روی المان‌ها اعمال می‌شوند.

به جهت این‌که بتوان به‌راحتی تنظیمات موردنظر برای قسمت base.css اشاره‌شده در جدول 1 را روی قسمت‌های مختلف سامانه انجام داد، بهتر است در پوشه ow_includes به فایل config.php مراجعه کرده و در خط 45 یعنی در قسمت else در کد

define('OW_DEV_MODE', false);

مقدار false را به true تغییر داده تا بلافاصله پس از تغییر هر CSS یا جاوااسکریپت در سامانه قابل نمایش باشد. چرا که در حالت عادی موتوشاب از سازوکار حافظه موقت برای بارگیری سریع‌تر فایل‌های CSS و جاوااسکریپت استفاده می‌کند. اکنون به راحتی با تغییر فایل‌های CSS و تصاویر می‌توان ظاهر سامانه را از طریق توسعه یک پوسته تغییر داد.

5-2- پردازش‌های مربوط به بارگذاری پوسته

هنگامی که یک پوسته بارگذاری می‌شود تابع ImportTheme در مسیر ow_system_plugins\bol\import.php فراخوانی می‌شود. برخی از اطلاعات اصلی و موردنیاز داخل فایل theme.xml در پوسته مربوطه در چند خط ابتدایی تابع مذکور خوانده شده و داخل جدول ow_theme_base در پایگاه داده ذخیره می‌شود.

در فایل ow_system_plugins\base\bol\theme_service.php نام فایل‌های CSS لازم برای هر پوسته در صورت نیاز، به صورت ایستا نوشته شده است. در همین فایل توسط تابع processTheme($id) کدهای زیر اجرا می‌شود:

$controlsContent = file_get_contents($themeRootDir . self::CSS_FILE_NAME);
$themeControls = $this->getThemeControls($controlsContent);

از کنترل‌کننده در این قسمت به منظور بازنویسی برخی از کدهای پیش‌فرض مربوط به CSS استفاده می‌شود. برای مثال در برخی از پوسته‌ها المان H1 بایستی یک رنگ خاص داشته باشد و این رنگ برای این پوسته مهم است. در فایل base.css در مقابل هر المانی که طراحی قصد قابل ویرایش کردن آن را دارد، یک توضیح با فرمت زیر نوشته می‌شود:

/** OW_Control type:color, section:2. Colors, key:textColor, label: - Text **/

تابع getThemeControls با استفاده از الگوی مذکور این المان‌ها را شناسایی کرده و در نهایت این المان‌ها در جدول ow_base_theme_control ذخیره می‌شود. در نتیجه مدیر در بخش «فرامدیریت سامانه»‌ قادر به ویرایش این مقادیر خواهد بود.

در ادامه تابع processTheme($id)، کلیه فایل‌هایی پوسته بارگذاری شده و در مسیر اصلی که تمام پوسته‌های دیگر قرار دارند‌ (\ow_themes\) کپی می‌شود‌.

ذخیره‌سازی فایل‌های پوسته موردنظر توسط تابع processTheme به ترتیب زیر انجام می‌شود:

  • کپی فایل CSS اصلی (base.css)
  • خواندن اطلاعات پوشه decorators
  • خواندن اطلاعات پوشه master_pages
  • خواندن فایل theme.xml
راهنمای_توسعه_پوسته.txt · آخرین ویرایش: 2019/01/15 12:45