ابزار سایت

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

تفاوت‌ها

تفاوت دو نسخهٔ متفاوت از صفحه را مشاهده می‌کنید.

پیوند به صفحه‌ی تفاوت‌ها

راهنمای_توسعه_پوسته [2019/01/15 12:45] (فعلی)
خط 1: خط 1:
 +====== فصل 5- راهنمای توسعه پوسته ======
 +
 +واسط کاربری موتوشاب از طریق سازوکار پوسته قابل ویرایش است. به طور کلی یک پوسته شامل تعدادی فایل CSS، تصویر و HTML است. در این بخش به شرح ساختار یک پوسته در موتوشاب و چگونگی توسعه آن پرداخته شده است.
 +
 +===== 5-1-  ساختار پوسته در موتوشاب =====
 +
 +برای توسعه یک پوسته در موتوشاب با فرض این‌که نام پوسته Test باشد، می‌بایست یک پوشه تحت همین عنوان در ow_themes ساخته شود. این پوشه دارای فایل‌هایی مطابق با  <tabref 1> باشد است.
 +<​tabcaption 1| فایل‌های یک پوسته در موتوشاب>​
 +
 +^توضیح^ ​    ​مسیر ​   ^     ​نام فایل ​   ^
 +|  شامل تنظیمات CSS مربوط به تمامی المان‌های موجود در سامانه است. در واقع اصلی‌ترین و تاثیرگذارترین فایل یک قالب همین فایل CSS است.| ​   Test\base.css ​   |    base.css ​  |
 +|  تصویر مربوط به نمایش پوسته موردنظر در صفحه مدیر برای انتخاب است‌ (شکل سمت راست)| ​   Test\theme_preview.jpg ​  ​| ​   theme_preview.jpg ​   |
 +|  اطلاعات اصلی مربوط به پوسته شامل: نام پوسته ‌(حتما می‌بایست با نام فایل یکسان باشد، حرف اول بزرگ نوشته می‌شود)، کلید ‌(می‌بایست دقیقا برابر نام پوشه پوسته باشد و حرف اول هم کوچک نوشته می‌شود)، توضیحات، نام نویسنده، کلید نویسنده ‌‌(با ثبت‌نام در وب‌گاه موتوشاب به دست می‌آید) و غیره.| ​   Test\theme.xml ​   |   ​theme.xml ​  |
 +|  در این پوشه کلیه تصاویر و آیکن‌های مربوط به پوسته موردنظر قرار می‌گیرد.| ​  <​wrap :​en>​Test\images\</​wrap> ​  ​| ​  <​wrap :​en>​images\</​wrap> ​  |
 +|  صفحه اصلی از قبل طراحی‌شده پوسته ​ مربوط به فضای مدیر سامانه است.| ​   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 ​  ​| ​                            |
 +</​tabcaption>​
 +
 +نکته: استفاده از قسمت decorators جدول بالا به این صورت است که برای مثال فرض کنیم می‌خواهیم برای المان دکمه ‌(Button) به ازای داده‌های مختلف حالاتی را طراحی کنیم.
 +
 +#;;
 +<code php>
 +{* `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>​
 +</​code>​
 +#;;
 +
 +فرمت خط اول ثابت بوده و مشخص می‌کند که طراحی روی المانی با نام Button انجام می‌شود. در ادامه با استفاده از داده‌های گوناگون مانند <wrap :​en>​$data.type</​wrap>​، <wrap :​en>​$data.langlabel</​wrap>​ و ... کلاس‌های مختلفی برای المان مورد‌نظر تعیین می‌شود. تابع getDecorator واقع در ow_core/​theme.php توسط تابع processTheme واقع در کلاس theme_service.php فراخوانی شده و تمامی تنظیمات مربوط به المان‌های مختلف ذخیره و روی المان‌ها اعمال می‌شوند.
 +
 +به جهت این‌که بتوان به‌راحتی تنظیمات موردنظر برای قسمت base.css اشاره‌شده در  <tabref 1> را روی قسمت‌های مختلف سامانه انجام داد، بهتر است در پوشه ow_includes به فایل config.php مراجعه کرده و در خط 45 یعنی در قسمت else  در کد
 +#;;
 +<code php>
 +define('​OW_DEV_MODE',​ false);
 +</​code>​
 +#;;
 +
 +مقدار 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 لازم برای هر پوسته در صورت نیاز، به صورت ایستا نوشته شده است. در همین فایل توسط تابع <wrap :​en>​processTheme($id)</​wrap>​ کدهای زیر اجرا می‌شود:​
 +
 +#;;
 +<code php>
 +$controlsContent = file_get_contents($themeRootDir . self::​CSS_FILE_NAME);​
 +$themeControls = $this->​getThemeControls($controlsContent);​
 +</​code>​
 +#;;
 +
 +از کنترل‌کننده در این قسمت به منظور بازنویسی برخی از کدهای پیش‌فرض مربوط به CSS استفاده می‌شود. برای مثال در برخی از پوسته‌ها المان H1 بایستی یک رنگ خاص داشته باشد و این رنگ برای این پوسته مهم است.
 +در فایل base.css در مقابل هر المانی که طراحی قصد قابل ویرایش کردن آن را دارد، یک توضیح با فرمت زیر نوشته می‌شود:​
 +
 +#;;
 +<​code>​
 +/** OW_Control type:color, section:2. Colors, key:​textColor,​ label: - Text **/
 +</​code>​
 +#;;
 +
 +تابع getThemeControls با استفاده از الگوی مذکور این المان‌ها را شناسایی کرده و در نهایت این المان‌ها در جدول ow_base_theme_control ذخیره می‌شود. در نتیجه مدیر در بخش «فرامدیریت سامانه»‌ قادر به ویرایش این مقادیر خواهد بود.
 +
 +در ادامه تابع <wrap :​en>​processTheme($id)</​wrap>​، کلیه فایل‌هایی پوسته بارگذاری شده و در مسیر اصلی که تمام پوسته‌های دیگر قرار دارند‌ (\ow_themes\) کپی می‌شود‌.
 +
 +ذخیره‌سازی فایل‌های پوسته موردنظر توسط تابع processTheme به ترتیب زیر انجام می‌شود:​
 +
 +  * کپی فایل CSS اصلی (base.css)
 +  * خواندن اطلاعات پوشه decorators
 +  * خواندن اطلاعات پوشه master_pages
 +  * خواندن فایل theme.xml
 +
  
راهنمای_توسعه_پوسته.txt · آخرین ویرایش: 2019/01/15 12:45