چگونه در پروژه لایفری خود تم بسازیم ؟

برای ساخت یک تم در لایفری خود ابتدا باید از منوی فایل نرم افزار eclipse  گزینه new و سپس به زیر منوی projectبرویم و روی آن کلیک کنیم.

66711-1

بعد از آن پوشه liferay را انتخاب کرده و اگر میخواهیم تم جدیدی را بسازیم گزینه liferay plugin project را انتخاب میکنیم.

66711-2

پس از کلیک روی دکمه next در پنجره باز شده نام تم را وراد میکنیم و در قسمت plugin type گزینه تم theme را انتخاب میکنیم.

66711-3

همچینین میتوانیم یک والد برای تم خود انتخاب کنیم که معمولا از تم کلاسیک لایفری استفاده میکنیم. بدین گونه یک تم با نام دلخواه با استفاده از ساختار تم کلاسیک ایجاد میشود.

66711-5

 

 

ساختار دايركتوري theme:

 

 

ساختار HTML:

جزييات هر يك از templateها به شرح زير است:

portal_normal.vm:

اين فايل شامل ساختار تمام صفحات از ابتداي تگ html تا انتهاي تگ html را شامل ميشود كه شامل header  و footer و دو ساختار به نامهاي dock.vm و navigation.vm است. همچنين فايل هاي سيستمي  كه در هسته پورتال مورد استفاده قرار مي گيرد را نيز شامل مي شود.

dock.vm:

اين فايل شامل تمام كد HTML براي dock مي باشد.

navigation.vm:

اين فايل شامل تمام كد HTML براي navigation مي باشد.

portal_pop_up.vm:

اين فايل شامل تمام كد HTML براي صفحات Popup مي باشد.

portlet.vm:

اين فايل ساختاري است كه تمام پورتلت ها شامل عنوان پورتلت و آيكون را پوشش مي دهد

 

گاهاً افرادي ترجيح ميدهند كه از ساختارهاي Velocity استفاده نكنند و در jspهاي خود ساختارHTML را پياده سازي كنند. در اين صورت به متغييرهاي Velocity دسترسي ندارند. متغييرهاي Velocity در زير موجود است:

http://content.liferay.com/4.3/misc/theme-api-4.3.0.html

 

CSS

جزييات هر يك از templateها به شرح زير است:

main.css:

اين فايل شامل تمام cssها مي باشد و قابل ويرايش است اما اينكار توصيه نمي شود.

custom.css:

اين فايل در اختيار توسعه دهنده مي باشد بطوريكه مي تواند تمام cssهاي متفاوت خود را در آن قرار دهد . اين فايل در تمام نسخه هاي theme  نيز موجود است و نگراني براي upgrade وجود ندارد.

base.css:

اين فايل شامل تمام سبک نگارش هاي پايه مي باشد كه كاملاً مناسب طراحي شده است.

forms.css:

اين فايل شامل تمام سبک نگارش هاي مرتبط با تگ form مي باشد.

layout.css:

اين فايل شامل تمام سبک نگارش هاي مرتبط با layout صفحات مي باشد.

navigation.css:

اين فايل شامل تمام سبک نگارش هاي مرتبط با navigation و dock مي باشد.

portlet.css:

اين فايل شامل تمام سبک نگارش هاي مرتبط با پورتلت ها بر اساس نام كلاس ها در استاندارد JSR-168  مي باشد.

 

براي قرار دادن تصوير شما نياز به استفاده از متغيير خاصي نداريد و مي توانيد به راحتي مسير را به صورت relative داده و تصوير خود را قرار دهيد مثل:

 

براي قرار دادن سبک نگارش متناسب با مرورگر يا سيستم عامل و همچنين نسخه هاي مختلف مرورگر به صورت زير عمل كنيد:

براي انتخاب مرورگرهاي متفاوت:

 

 

وغيره…

و براي انتخاب سيستم عامل هاي مختلف:

 

 

و براي كاربراني كه داراي JavaScript فعال هستند:

 

مي توان تمام اين قواعد را به هم متصل كرد:

 

 

استفاده از color schema هاي مختلف :

 

برای تغییراتی که در تم میخواهیم بدهیم باید فایل های مورد نظری که در تم میخواهیم تغییر دهیم را در پوشه _diffs تم خود انداخته و در آنجا آنها را تغییر دهیم زیرا به این گونه بر روی فایل های اصلی تم تغییر نداده و تغییرات را به صورت مجزا خواهیم داشت و فایل های اصلی از روی این فایل ها تولید خواهند شد.

این مکانیزم انتخاب مرورگر در لایفری از تکنولوژی به نام alloy ui استفاده میکند که به ما این قابلیت را میدهد که با استفاده از کلاس های parent که به تگ html داده میشود بتوانید در مرورگر های مختلف و همچنین در ویو پورت های مختلف استایل های متفاوت و همچنین کراسینگ راحت تری داشته باشیم.

Color Schema

این ویژگی به شما قابلیت این را میدهد که بتوانید در یک تم چندین رنگ داشته باشید. مثلا تم کلاسیک در لایفری دارای رنگ Dark، default و Light می باشد.

66711-6

در اين دايركتوري ميتوان color schemaهاي متفاوتي را براي كاربر تهيه كرد بصوريكه در آن مي توان رنگ(color)، پس زمينه و حاشيه ها را تغيير داد.

مراحل ايجاد color schema به صورت زير است:

 ۱٫در فايل WEB-INF\liferay-look-and-feel.xml تنضيمات زير اضافه شود:

 

 

درون دايركتوري css فولدري به نام color_schemes ساخته و فايل هر يك از color schemaها را در اينجا قرار ميدهيم.

همانطور كه در مثال بالا ديده مي شود color schema ي رنگ سبز داراي ويژگي هاي رنگ blue نمي باشد در نتيجه Theme Deployer تنظيمات پيشفرض را براي آن درنظر ميگيرد.

رسپانسیو در لایفری

ریسپاسیو بودن طرح به این معنی است که با توجه به اینکه امروزه موبایل ها و تبلت هایی با اندازه های متفاوت وجود دارند، وب سایت بایستی در تمامی اندازه ها، نمای مناسبی را نمایش دهد.

66711-7

لایفری این امکان را به ما می دهد تا بتوانیم این قابلیت را راحت تر ایجاد نماییم.

همانطور که در بالا گفته شده با استفاده از alloy ui میتوان در تم بر روی مرورگر های مختلف بسته به نوع مرورگر استایل های متفاوت ایجاد کرد. برای راه اندازی این تکنولوژی با استفاده از تابع جاوا اسکریپتی AUI().use(‘aui-viewport’); میتوان این کتابخانه را در لایفری راه اندازی کرد. دستور بالا را باید در فایل main.js گذاشته تا اجرا شود.

بعد از آن لایفری به ما کلاس های viewport را در تگ اچ تی ام ال میدهد. کلاس هایی همانند .view-lt960

این کلاس سی اس اسی به ما میگوید که این دستور در صفحاتی که اندازه های آنها زیر ۹۶۰ است اجرا میشوند. همچنین .view-gt960  نیز داریم مه در اندازه های بزرگتر از ۹۶۰ را هدف قرار میدهد.

در لایفری ۶٫۱٫۱ این دستورات به صورت زیر خواهند بود:

 

 

اما در تغییراتی که در لایفری ۶٫۲ بوجود آمده این کلاس به صورت زیر تغییر کرده است :

 

 

66711-8

چگونه پروژه layout بسازیم:

Layout  ها همان ساختار اصلی یک تم را تشکیل میدهند مثلا ما میخواهیم یک تم دو ستونه و یا سه ستونه داشته باشیم، این ستون ها در layout  پروژه تعریف میشوند. در لایفری ۶٫۱٫۱ دو مدل کد در هر layout  ساخته میشود یکی برای مرورگر های قدیمی مانند ie8 و دیگری برای مرورگر های جدید که تفاوت آهنا در ساختار آنهاست. ساختار مرورگر های قدیمی تر با  tableو در مرورگر های جدید تر از div استفاده میشود.نحوه ساختن یک layout به صورت زیر است :

از منوی فایل گزینه new و بعد گزینه liferay layout template را انتخاب میکنیم. اگر میخواهیم در پروژه layout خود که وجود داشته ساختار جدیدی تعیین کنیم این گزنه را میزنیم اما اگر میخواهیم یک پروژه layout دیگر بسازیم از منوی فایل گزینه new  و بعد از آن همانند تم گزینه project را انتخاب میکنیم.

66711-9

 بعد از آن در پنجره باز شده نامی را برای پروژه خود انتخاب کرده و از قسمت plugin type نوع را layout انتخاب میکنیم. کدی مانند زیر در فایل .tpl تم یافت میشود.

 

 

کلاس هایی که در کد بالا مشخص هستند مانند portlet-column-only  برای ساخت ستون های لایفری میباشند که ستون اول کلاس portlet-column-first میگیرد و بعدی  portlet-column-only و آخری portlet-column-last که هرکدام بسته به نوع کلاس ها از float و margin خاص خود برخوردار هستند. برای کنار هم نشستن ستون ها کلاس row-fluid برای parent ستون ها نیاز است.

نحوه گرید بندی در لایفری :

نحوه گرید بندی در لایفری یه صورت افزودن کلاس های خاصی است که عرضهای مخصوصی به آنها اختصاص داده شده است. مثلا .grid_12 در اصل در لایفری با کلاس span12 مشخص میشود. به دلیل استفاده لایفری ۶٫۲ از بوت استرپ کلاس های گرید آن با پیشوند span شروع میشوند. در لایفری ۶٫۱٫۱  از کلاس های مخصوص خود لایفری یعنی .aui-w100 که به ستون ها داده میشود، استفاده میشود.

نحوه sync کردن تم :

در لایفری مسقیما بعد از تغییر css و چیز های دیگر بلافاصله نمیتوان تغییرات را دید و مانند پورتلت های دگر هم تم و هم layout باید دیپلوی deploy شوند، بنابر این برای سهولت کار طراحان تم امکانی به نام sync برای تم و layout قرار داده شده که با sync کردن میتوان این به آسانی بلافاصله بعد از تغییر تم آن تغییرات را صرفا با یک refresh کردن صفحه مشاهده کرد.

برای این کار روی سرور ساخته شده در eclipse کلیک راست کرده، گزینه add or remove را انتخاب میکنیم.

66711-10

بعد از آن در پنجره باز شده لیست تم ها و layout های قابل sync به ما نمایش داده میشود. تم مورد نظر را انتخاب میکنیم و با دکمه add آن را به لیست سمت راست اضافه میکنیم. سپس دکمه finish را میزنیم. در این حالت تم ما sync  شده است.

66711-11

دیپلوی تم

جهت دیپلوی تم و layout از طریق گزینه ant که به شکل مورچه میباشد ، اقدام میکنیم. اگر تم یا پورتلت مورد نظر ما در آن قسمت وجود نداشت باید build file مورد نظر را به این قسمت اضافه کنیم.

66711-12

66711-13

 اگر وجود داشت بر روی تم یا پورتلت دابل کلیک کرده و تم دیپلوی میشود اگر نبود از گزینه add Buildfile استفاده میکنیم تا build file مورد نظر را به این قسمت اضافه کنیم.

نظرات کاربران

بالا