جادویی

صفحات Wizard کاربران را در فرآیندهای چندمرحله‌ای یا آموزش‌ها راهنمایی می‌کنند، معمولاً به صورت مرتب و مرحله به مرحله با ناوبری گام‌به‌گام.

صفحه (Page)

این بخش رفتار اصلی صفحه Wizard را تعریف می‌کند: نوع، نام، رنگ و کاور را مشخص می‌کند، ناوبری را با مسیرها (Routes)، صفحه بعدی (NextPage) و Timeout کنترل می‌کند، مشخص می‌کند که آیا صفحه پایان توالی است یا خیر، گزینه‌های نمایش مثل تمام‌صفحه (Fullscreen)، حالت افقی (Landscape) و امکان گرفتن اسکرین‌شات را مدیریت می‌کند و چیدمان و جهت متن را تعیین می‌کند.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
@Type	PageType	"Wizard"	نوع صفحه را به عنوان Wizard مشخص می‌کند
Name	PageName	{name}	نام یا عنوان صفحه
Color	String	{color}	رنگ پس‌زمینه صفحه
Cover	String	{cover}	تصویر کاور اختیاری برای صفحه
Routes	Array	[]	لیست اسکریپت‌ها یا اقدامات مرتبط با صفحه
NextPage	Page	0	شناسه صفحه بعدی برای ناوبری
Timeout	Number	0	مدت زمان به ثانیه قبل از ناوبری خودکار
Finish	Boolean	false	مشخص می‌کند که آیا این صفحه پایان یک توالی است یا خیر
FullScreen	Boolean	false	نمایش صفحه در حالت تمام‌صفحه
CanLandScape	Boolean	false	اجازه جهت افقی اگر true
CanScreenShot	Boolean	false	اجازه گرفتن اسکرین‌شات توسط کاربر اگر true
Dir	Direction	{dir}	جهت چیدمان صفحه (ltr یا rtl)
Dir.Text	TextDirection	{dir}	جهت متن محتوای صفحه

نمونه کدنویسی:

{
  "@Type": "Wizard",

  "Name": "{name}",
  "Color": "{color}",
  "Cover": "{cover}",
  "Routes": [],
  "NextPage": 0,
  "Timeout": 0,
  "Finish": false,
  "FullScreen": false,
  "CanLandScape": false,
  "CanScreenShot": false,
  "Dir": "{dir}",
  "Dir.Text": "{dir}"
}

عنوان (Title)

این بخش نوار عنوان صفحه را مدیریت می‌کند: می‌توان آن را نمایش یا مخفی کرد، رنگ پس‌زمینه، متن عنوان، اندازه، رنگ و سبک آن را تنظیم نمود، صفحه منو را متصل کرد و آیکون‌های بازگشت (Back) و منو (Menu) را تعیین نمود.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Title.Show	Boolean	true	نمایش یا مخفی کردن نوار عنوان
Title.Color	Color	{titleColor}	رنگ پس‌زمینه نوار عنوان
Title.Text	String	{titleText}	متن عنوان نمایش داده شده
Title.Text.Size	Number	16	اندازه فونت متن عنوان
Title.Text.Color	Color	{titleTextColor}	رنگ متن عنوان
Title.Text.Style	TextStyle	{titleTextStyle}	سبک متن عنوان (bold/italic و غیره)
Title.Menu	PageName	{pageName}	نام صفحه منو برای دسترسی از عنوان
Title.Back.Logo	Logo	{backLogo}	آیکون دکمه بازگشت
Title.Menu.Logo	Logo	{menuLogo}	آیکون دکمه منو

نمونه کدنویسی:

{
  "@Type": "Wizard",

  "Title.Show": true,
  "Title.Color": "{titleColor}",
  "Title.Text": "{titleText}",
  "Title.Text.Size": 16,
  "Title.Text.Color": "{titleTextColor}",
  "Title.Text.Style": "{titleTextStyle}",
  "Title.Menu": "{pageName}",
  "Title.Back.Logo": "{backLogo}",
  "Title.Menu.Logo": "{menuLogo}"
}

دکمه بعدی (Next)

این بخش دکمه Next در Wizard را تعریف می‌کند: متن برچسب، شامل برچسب Finish برای آخرین مرحله، رنگ متن، سبک و اندازه متن، رنگ پس‌زمینه، شعاع گوشه‌ها، حاشیه‌ها، ارتفاع دکمه و دستورات OnClick برای ناوبری یا اعمال خاص را مشخص می‌کند.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Wizard.Next.Text	String	{nextText}	متن نمایش داده شده روی دکمه Next
Wizard.Next.Text.Finish	String	{nextTextFinish}	متن نمایش داده شده روی دکمه هنگام آخرین مرحله (مثلاً Finish)
Wizard.Next.Text.Color	Color	{nextTextColor}	رنگ متن دکمه
Wizard.Next.Text.Style	TextStyle	{nextTextStyle}	سبک فونت متن دکمه
Wizard.Next.Text.Size	Number	16	اندازه متن دکمه
Wizard.Next.Color	Color	{nextColor}	رنگ پس‌زمینه دکمه Next
Wizard.Next.Radius	Number	1000	شعاع گوشه‌های دکمه
Wizard.Next.Margin	Number	30	حاشیه بیرونی دکمه
Wizard.Next.MarginLine	Number	30	فاصله بین دکمه و هر المان خط/پیشرفت پایین
Wizard.Next.Size	Number	80	ارتفاع دکمه
Wizard.Next.OnClick	Array	[]	لیست دستورات اسکریپتی اجرا شده هنگام کلیک روی دکمه

نمونه کدنویسی:

{
  "@Type": "Wizard",

  "Wizard.Next.Text": "{nextText}",
  "Wizard.Next.Text.Finish": "{nextTextFinish}",
  "Wizard.Next.Text.Color": "{nextTextColor}",
  "Wizard.Next.Text.Style": "{nextTextStyle}",
  "Wizard.Next.Text.Size": 16,
  "Wizard.Next.Color": "{nextColor}",
  "Wizard.Next.Radius": 1000,
  "Wizard.Next.Margin": 30,
  "Wizard.Next.MarginLine": 30,
  "Wizard.Next.Size": 80,
  "Wizard.Next.OnClick": []
}

صفحات (Pages)

فیلد Pages مراحل Wizard اپ را تعریف می‌کند: هر مرحله به صورت آرایه‌ای از عناصر (Elements) است، که امکان ساخت جریان چندمرحله‌ای با هر صفحه دارای مجموعه‌ای از المان‌ها و چیدمان‌های خود را فراهم می‌کند.

فیلد	نوع	مقدار پیش‌فرض	توضیحات
Pages	Array<Array>	[]	لیستی از مراحل Wizard که هر مرحله شامل یک آرایه از Elements است

نمونه کدنویسی:

{
  "@Type": "Wizard",

  "Pages": [
    [

    ]
  ]
}

🔗 نسخهٔ بصری

برای مشاهدهٔ نحوهٔ ایجاد این صفحه در اپلیکیشن ساز اپلین (حالت بدون کدنویسی)، به لینک زیر مراجعه کنید:
طراحی صفحهٔ جادویی در اپلین استودیو