ویجت
در اپادیتور، ویجت یا Widget کوچکترین واحد سازنده رابط کاربری است. هر چیزی که کاربر در یک صفحه میبیند یا با آن تعامل میکند، معمولاً یک ویجت است.
صفحه بهتنهایی فقط یک بستر برای طراحی است؛ این ویجتها هستند که ظاهر، ساختار و رفتار صفحه را شکل میدهند. متن، تصویر، دکمه، فرم، ویدئو، گروه، تب، لیست و بسیاری از عناصر دیگر، همگی در قالب ویجت در صفحه قرار میگیرند.
حتی برخی عناصر ساختاری مثل گروه و ابزارهای چیدمان نیز خودشان نوعی ویجت محسوب میشوند.
ویجت چه نقشی در اپلیکیشن دارد؟
ویجتها نقش بسیار مهمی در ساخت اپلیکیشن دارند، چون هم وظیفه نمایش محتوا را بر عهده دارند و هم میتوانند رفتارهای تعاملی ایجاد کنند.
مهمترین نقشهای ویجتها عبارتاند از:
- نمایش محتوا: نمایش متن، تصویر، ویدئو، صدا، فایل، HTML و سایر محتواها
- دریافت ورودی از کاربر: مانند فیلدهای متنی، فرمها، چکباکسها و سوئیچها
- ایجاد تعامل: مانند کلیک روی دکمه، لمس تصویر، جابهجایی بین تبها یا اجرای عملکردها
- ساختاردهی به صفحه: با استفاده از گروهها، تبها، اسلایدرها و سایر ویجتهای ساختاری
- نمایش محتوای پویا: بر اساس متغیرها، شرطها، وضعیت کاربر یا دادههای دریافتی
برای درک بهتر جایگاه ویجت، پیشنهاد میشود ابتدا یا همزمان صفحه صفحه را نیز مطالعه کنید.
ویجتها کجا قرار میگیرند؟
ویجتها همیشه داخل یک صفحه قرار میگیرند و بهطور مستقیم در ساختار صفحه استفاده میشوند. هر ویجت معمولاً درون یک گروه قرار دارد و از طریق همین گروه، جایگاه و چیدمان آن تعیین میشود.
نکات مهم درباره جایگاه ویجتها:
- ویجتها بدون صفحه قابل نمایش نیستند.
- هر ویجت معمولاً داخل یک گروه قرار میگیرد.
- گروه اصلی صفحه، پایه ساختار سایر ویجتهاست.
- ویجتها در قالب یک ساختار درختی مدیریت میشوند.
- ترتیب قرارگیری ویجتها در درخت، روی چیدمان و نمایش آنها تأثیر میگذارد.
برای آشنایی بیشتر با چیدمان و محیط طراحی، این صفحات را ببینید:
در صفحات بزرگ، ویجتها را داخل گروههای معنیدار و منظم قرار دهید. این کار مدیریت چیدمان، شرطها و رویدادها را سادهتر میکند.
افزودن ویجت به صفحه
در اپادیتور، ویجتها همیشه داخل یک گروه اضافه میشوند. برای این کار، باید وارد صفحه موردنظر شوید و از طریق دکمه + در همان گروه، ویجت جدید را انتخاب کنید.
مراحل کلی افزودن ویجت به صفحه:
- وارد صفحه موردنظر شوید.
- گروهی را انتخاب کنید که میخواهید ویجت داخل آن قرار بگیرد.
- روی دکمه + در همان گروه کلیک کنید.
- نوع ویجت را از فهرست انتخاب کنید.
- ویجت به ساختار صفحه اضافه میشود.
- تنظیمات اختصاصی، ظاهری و رفتاری آن را انجام دهید.
بعد از اضافه شدن ویجت، میتوانید موقعیت، اندازه، محتوا، استایل، رویدادها و شرطهای آن را تنظیم کنید.
افزودن ویجت فقط به معنی قرار دادن یک عنصر در صفحه نیست. در بیشتر مواقع، تنظیمات ویجت، رویدادها، شرط نمایش و شناسه آن نیز در نتیجه نهایی نقش مهمی دارند.
انواع کلی ویجتها
ویجتها در اپادیتور از نظر کاربرد، نقشهای متفاوتی دارند. در مستندات فعلی، بخشی از ویجتهای اصلی در سایدبار تعریف شدهاند و میتوانید از طریق لینکهای زیر به مستندات هرکدام دسترسی داشته باشید.
ویجتهای نمایشی
این ویجتها برای نمایش محتوا در صفحه استفاده میشوند، مانند:
ویجتهای تعاملی
این ویجتها برای تعامل با کاربر و دریافت یا مدیریت ورودیها استفاده میشوند، مانند:
ویجتهای ساختاری
این ویجتها برای ساختاردهی صفحه و چیدمان بخشهای مختلف استفاده میشوند، مانند:
برای آشنایی کلی با ساختار و فهرست ویجتها، میتوانید ابتدا صفحه فهرست ویجتها را مشاهده کنید.
ساختار و تنظیمات یک ویجت
هر ویجت، صرفنظر از نوع آن، معمولاً از چند بخش اصلی تشکیل میشود.
۱. تنظیمات اختصاصی ویجت
هر ویجت تنظیماتی دارد که فقط مربوط به همان نوع ویجت است. این تنظیمات ماهیت اصلی آن ویجت را مشخص میکنند.
برای مثال:
- در ویجت متن میتوانید فونت، رنگ، اندازه و ترازبندی را تنظیم کنید.
- در ویجت تصویر میتوانید منبع تصویر، نسبت تصویر و نحوه نمایش را مشخص کنید.
- در ویجتهای ورودی میتوانید نوع داده، متن راهنما و رفتار فیلد را کنترل کنید.
این بخش مهمترین قسمت برای تعیین کارکرد اصلی ویجت است.
۲. تنظیمات عمومی ظاهری
بیشتر ویجتها یک مجموعه تنظیمات عمومی دارند که روی ظاهر و جایگاه آنها اثر میگذارد.
این تنظیمات معمولاً شامل موارد زیر است:
- عرض و ارتفاع
- فاصله داخلی و خارجی
- رنگ یا تصویر پسزمینه
- حاشیه و گردی گوشهها
- شفافیت
- سایه
- چرخش
- تاری
- لایهبندی ظاهری
- انیمیشن ورود یا نمایش
این ویژگیها کمک میکنند ویجت از نظر بصری با طراحی کلی صفحه هماهنگ شود.
۳. رویدادها و تعاملات
بسیاری از ویجتها میتوانند به رویدادهای کاربر واکنش نشان دهند. برای مثال، برخی ویجتها مانند دکمه، عکس و گروه دارای رویداد کلیک هستند و میتوانید برای کلیک روی آنها یک یا چند عملکرد تعریف کنید.
برای نمونه، با کلیک روی یک دکمه، تصویر یا گروه میتوانید صفحهای را باز کنید، یک فرم را ارسال کنید، مقدار یک متغیر را تغییر دهید یا عملیات دیگری را اجرا کنید.
برای مطالعه بیشتر، صفحات زیر را ببینید:
۴. شرط نمایش
ویجتها میتوانند بهصورت پویا نمایش داده شوند یا مخفی بمانند. این کار با استفاده از شرط نمایش انجام میشود.
برای مثال، میتوانید تعیین کنید:
- یک دکمه فقط در صورت ورود کاربر نمایش داده شود
- یک پیام فقط زمانی نمایش داده شود که متغیری مقدار خاصی داشته باشد
- یک بخش از صفحه فقط در حالت آنلاین دیده شود
این قابلیت برای طراحی رابطهای هوشمند و منعطف بسیار مهم است.
شرط نمایش را می توانید در تنظیمات هر ویجت در سربرگ شرط نمایش تنظیم کنید.
برای اطلاعات بیشتر، صفحه شرط را مطالعه کنید.
۵. شناسه ویجت
در بسیاری از سناریوها، لازم است یک ویجت را با شناسه مشخص تعریف کنید تا بتوان در منطقها، عملکردها یا پردازشهای خاص به آن ارجاع داد.
شناسه ویجت معمولاً زمانی کاربرد بیشتری دارد که:
- بخواهید رفتار ویجت را در منطقهای پیچیده کنترل کنید
- در جاوااسکریپت یا عملکردهای خاص به آن ارجاع دهید
- بین چند ویجت مشابه تمایز ایجاد کنید
- بخواهید نگهداری پروژه منظمتر باشد
اگر قرار است در عملکردها، متغیرها یا منطقهای پیچیده به یک ویجت ارجاع دهید، شناسه آن را واضح، یکتا و قابل فهم انتخاب کنید.
نکات مهم در استفاده از ویجتها
برای استفاده بهتر از ویجتها، این نکات را در نظر بگیرید:
- ویجتی را انتخاب کنید که دقیقاً با نیاز شما همخوانی دارد.
- قبل از تنظیم جزئیات ظاهری، ساختار کلی صفحه و گروهها را مشخص کنید.
- از افزودن ویجتهای زیاد و غیرضروری خودداری کنید.
- برای مدیریت بهتر، ویجتهای مرتبط را داخل گروههای جداگانه قرار دهید.
- از شرطها و متغیرها برای ساخت رابط پویا استفاده کنید.
- برای ویجتهای مهم، نامگذاری یا شناسهگذاری واضح داشته باشید.
- رفتار هر ویجت را فقط در صورت نیاز پیچیده کنید.
- در صفحات بزرگ، ساختار درختی ویجتها را منظم نگه دارید.
در بسیاری از موارد، یک طراحی ساده و ساختارمند با تعداد ویجت کمتر، نتیجهای بهتر از یک صفحه شلوغ و پیچیده خواهد داشت.
جمعبندی
ویجتها عناصر اصلی ساخت رابط کاربری در اپادیتور هستند. هر صفحه از مجموعهای از ویجتها ساخته میشود و این ویجتها میتوانند محتوا نمایش دهند، ورودی بگیرند، تعامل ایجاد کنند و رفتارهای پویا داشته باشند.
برای طراحی حرفهایتر در اپادیتور، لازم است علاوه بر شناخت ویجتها، نحوه ارتباط آنها با صفحه، رویدادها، عملکردها، شرطها و متغیرها را نیز بهخوبی یاد بگیرید.
پیشنهاد برای مطالعه بعدی: