استفاده از Layouts برای ایجاد یک برنامه چند صفحه

Summarize this content to 400 words in Persian Lang

هنگامی که یک برنامه چند صفحه ای ایجاد می کنید، بخش هایی از رابط کاربری وجود دارد که در چندین فرم به اشتراک گذاشته می شود – به عنوان مثال، یک نوار پیمایش. Layout به شما امکان می دهد رابط های کاربری ایجاد کنید که چندین فرم می توانند از آن استفاده کنند. من به شما نشان خواهم داد که چگونه یکی را ایجاد کنید.

در این آموزش، ما یک Layout صفحه اصلی با یک نوار کناری پیمایش می‌سازیم و از آن به عنوان Layout برای سایر فرم‌ها در برنامه خود استفاده می‌کنیم. وقتی کاربر روی پیوندی در نوار کناری کلیک می‌کند، برنامه فرم جدیدی را باز می‌کند که محتوای متفاوتی دارد اما منوی پیمایش یکسانی دارد.

Layouts چیست؟

در Anvil، Layout فرمی است که می تواند توسط سایر فرم ها برای تعریف ساختار خود استفاده شود. یک Layout Form می تواند اجزایی به آن اضافه شود. هر فرمی که از طرح بندی یکسانی استفاده کند، همه آن اجزای یکسان را خواهد داشت. هنگامی که یک Layout Form ایجاد می کنید، Slots را به طرح اضافه می کنید. شکاف‌ها تعیین می‌کنند که کجا فرم‌ها با استفاده از Layout می‌توانند اجزا را اضافه کنند.

پیش نیازهای آموزشی

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

فهرست

این مراحلی است که به آنها خواهیم پرداخت:

مرحله 1 – یک برنامه Anvil ایجاد کنید

مرحله 2 – یک Layout صفحه اصلی ایجاد کنید

مرحله 3 – یک منوی ناوبری ایجاد کنید

مرحله 4 – یک اسلات اضافه کنید

مرحله 5 – از Layout استفاده کنید

مرحله 6 – منوی ناوبری را سیم کشی کنید

مرحله 7 – پیوند را انتخاب شده نشان دهید

مرحله 8 – برنامه را تست کنید

مرحله 9 – اختیاری: Layout صفحه اصلی را تغییر دهید

مرحله 1 – برنامه Anvil خود را ایجاد کنید

وارد Anvil شوید و روی «Blank App» کلیک کنید.

وقتی از شما پرسیده می شود که دوست دارید صفحه شما چگونه باشد، Material Design 3 را انتخاب کنید:

روی نام در بالای صفحه کلیک کنید و به برنامه خود یک نام بدهید.

مرحله 2 – قالب صفحه اصلی خود را ایجاد کنید

برنامه ما قبلاً فرمی به نام Form1 اضافه کرده است که ما آن را به صفحه اصلی Layout خود تبدیل می کنیم. Form1 را باز کنید و نام را به “Homepage” تغییر دهید:

سپس، روی نماد سه نقطه بالای فرم کلیک کنید و “Use as layout” را انتخاب کنید:

اولین باری که از Layouts در برنامه خود استفاده می کنید، برای استفاده از ویژگی های رابط کاربری جدید باید برنامه را انتقال دهید. اگر برنامه هنوز منتقل نشده است، زمانی که فرم خود را به یک طرح بندی تغییر می دهید، یک پیام بازشو خواهید دید. این یک تغییر غیرقابل برگشت در برنامه ما است، بنابراین اگر برنامه‌ای را که با طراح قدیمی Anvil ساخته‌اید مهاجرت می‌کنید، لطفاً آگاه باشید.

بیایید توضیحی از Layout خود را در منوی پیکربندی فرم اضافه کنیم. این اطلاعات هنگام تصمیم گیری از اینکه یک فرم جدید از کدام الگو استفاده کند نشان داده می شود. دوباره روی نماد سه نقطه بالای فرم کلیک کنید و “Edit properties and events” را انتخاب کنید. سپس یک توضیحات اضافه کنید.

عالیه. در مرحله بعد، بیایید یک رابط کاربری ناوبری در ayout خود بسازیم تا فرم‌های دیگر به ارث بروند.

مرحله 3 – ایجاد رابط کاربری منوی ناوبری ما

بیایید با اضافه کردن یک پنل ستونی به نوار کناری فرم شروع کنیم.

سپس می‌توانیم دو مؤلفه پیوند را به پنل ستون بکشیم – یکی برای هر فرمی که از این Layout استفاده می‌کند. ما متن پیوند اول را به “درباره ما” و متن پیوند دوم را به “تماس با ما” تغییر می دهیم.

در نهایت، اجازه دهید با کشیدن یک برچسب به قسمت عنوان در سمت چپ بالای صفحه، به برنامه خود عنوانی بدهیم. Homepage فرم. سپس نقش Label را به تغییر دهید Title.

مرحله 4 – اضافه کردن یک شکاف

اکنون که Layout را که می‌خواهیم سایر فرم‌هایمان استفاده کنند ساخته‌ایم، بیایید یک Slot اضافه کنیم. اسلات ها مکان هایی را که می توان اجزاء را توسط فرم هایی که از Layout استفاده می کنند درج کرد، تعیین می کند.

یک اسلات به آن اضافه می کنیم content_panel از ما Homepage با کشیدن «اسلات» از جعبه ابزار به سمت راست طراح.

هر شکاف یک نام دارد. ما می توانیم اسلات خود را با استفاده از پالت شی تغییر نام دهیم. بیایید آن را صدا کنیم main_slot.

توجه داشته باشید که اگر یک اسلات را از یک Layout که توسط فرم دیگری استفاده می‌شود حذف یا تغییر نام دهید، هر مؤلفه‌ای که در آن شکاف وجود دارد نمی‌داند کجا باید برود. می توانید آنها را در پنل اجزای یتیم پیدا کنید و دوباره به صفحه خود اضافه کنید. برای اطلاعات بیشتر، به مستندات ما در مورد Layouts مراجعه کنید

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

مرحله 5 – استفاده از Layout

اکنون دو فرم به نام‌های «AboutUs» و «ContactUs» ایجاد می‌کنیم که از Form Layout ما استفاده می‌کنند. بعداً، توابع رویداد کلیک را به پیوندهایی که در مرحله قبل اضافه کردیم اضافه می کنیم تا با کلیک کردن، فرم مربوطه را باز کنند.

اول، ما ایجاد می کنیم AboutUs با کلیک بر روی “افزودن فرم” در مرورگر برنامه.

سپس، صفحه اصلی را انتخاب کنید.

سپس می‌توانیم نام فرم را به «AboutUs» تغییر دهیم، به همان روشی که نام آن را تغییر دادیم Homepage فرم.

سپس، بیایید یک برچسب به شکاف اصلی اضافه کنیم و متن آن را تغییر دهیم.

این روند را برای ContactUs صفحه، اضافه کردن یک برچسب دیگر با متن متفاوت.

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

مرحله 6 – سیم کشی منوی ناوبری

باز کن Homepage پیوند “درباره ما” را در منوی پیمایش فرم داده و انتخاب کنید. بیایید ابتدا نام پیوند را تغییر دهیم تا ارجاع در کد آسانتر باشد. در پالت آبجکت شناور، روی آن کلیک کنید link_1 و نام لینک را تغییر دهید about_us_link. بعد، انتخاب کنید on click event، این نمای کد را برای فرم ما باز می کند و یک تابع کنترل کننده رویداد برای ما ایجاد می کند.

در داخل تابع رویداد، ما از آن استفاده خواهیم کرد open_form تابع برای باز کردن ما AboutUs صفحه را با گذاشتن نام فرم به عنوان یک رشته.

def about_us_link_click(self, **event_args):
“””This method is called when the link is clicked”””
open_form(‘AboutUs’)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون هر بار که روی پیوند “درباره ما” کلیک شود، صفحه مربوطه بارگذاری می شود. همچنین با تغییر نام پیوند و افزودن آن، همین کار را برای پیوند “تماس با ما” انجام خواهیم داد click رویداد و باز کردن فرم مربوطه در تابع.

در نهایت، بیایید یک را ایجاد کنیم reset_links تابع برای فرم ها با استفاده از الگوی ما برای استفاده. تابع را ایجاد کنید و در داخل، نقش هر مؤلفه پیوند را روی یک رشته خالی تنظیم کنید:

def reset_links(self, **event_args):
self.contact_us_link.role=””
self.about_us_link.role=””

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 7 – انتخاب پیوند به نظر برسد

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

انتخاب کنید AboutUs از فرم در طراح و در قسمت رویدادهای پنل خواص، روی دکمه آبی رنگ کنار رویداد «نمایش» کلیک کنید.

با این کار نمای کد باز می شود و تابعی اضافه می شود که هر بار اجرا می شود AboutUs فرم نشان داده شده است.

در داخل تابع، می‌توانیم با چیدمانی که فرم ما از آن استفاده می‌کند تعامل داشته باشیم self.layout. این به ما توانایی فراخوانی توابع تعریف شده در Layout و تغییر خصوصیات اجزای Layout را می دهد. بیایید پیوندها را بازنشانی کنیم و نقش را تنظیم کنیم Homepage.about_us_link برای “انتخاب” شدن.

def form_show(self, **event_args):
“””This method is called when the form is shown on the screen”””
self.layout.reset_links()
self.layout.about_us_link.role=”selected”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این روند را برای ContactUs.

مرحله 8 – آزمایش برنامه

برای مشاهده عملکرد برنامه، روی دکمه “Run” در بالای صفحه کلیک کنید:

روی هر پیوند در نوار کناری کلیک کنید و صفحه مربوطه باید با استفاده از Layout ما ظاهر شود.

مرحله 9 – اختیاری: تغییر طرح صفحه اصلی

این قسمت اختیاری است! بهترین راه برای یادگیری هر فناوری جدید این است که درک خود را به چالش بکشید. چرا خودتان را به چالش نمی‌کشید تا آنچه را که آموخته‌اید تقویت کنید و بیشتر بیاموزید؟

یکی از بهترین چیزها در مورد Layout ایجاد تغییر در Layout است که فوراً با استفاده از Layout به همه اشکال منتشر می شود. بنابراین، چرا تغییراتی در فرم صفحه اصلی خود ایجاد نکنید و ببینید که چگونه بر سایر فرم ها تأثیر می گذارد. شما می توانید:

پیوند دیگری را به نوار کناری ناوبری اضافه کنید و آن را سیم کشی کنید
یک شکاف به نوار کناری اضافه کنید Homepage به طوری که سایر فرم ها با استفاده از Layout می توانند پیوندهای بیشتری را به منوی پیمایش اضافه کنند
طرح بندی زنجیره ای با هم. سعی کنید یک صفحه “Admin” ایجاد کنید که از آن استفاده می کند Homepage Layout و به نوبه خود، آن را به یک Layout تبدیل کنید. صفحه مدیریت می تواند منوی ناوبری خود را در شکاف اصلی صفحه اصلی با پیوندهایی برای “نمایه” و “تنظیمات تماس” داشته باشد.

برنامه را کلون کنید

می توانید کد منبع برنامه تمام شده Anvil را از اینجا باز کنید.

اطلاعات بیشتر در مورد سندان

اگر تازه وارد اینجا هستید، خوش آمدید! Anvil پلتفرمی برای ساخت برنامه های وب تمام پشته با چیزی جز پایتون است. بدون نیاز به مبارزه با JS، HTML، CSS، Python، SQL و همه فریمورک های آنها – فقط همه را در پایتون بسازید.

هنگامی که یک برنامه چند صفحه ای ایجاد می کنید، بخش هایی از رابط کاربری وجود دارد که در چندین فرم به اشتراک گذاشته می شود – به عنوان مثال، یک نوار پیمایش. Layout به شما امکان می دهد رابط های کاربری ایجاد کنید که چندین فرم می توانند از آن استفاده کنند. من به شما نشان خواهم داد که چگونه یکی را ایجاد کنید.

در این آموزش، ما یک Layout صفحه اصلی با یک نوار کناری پیمایش می‌سازیم و از آن به عنوان Layout برای سایر فرم‌ها در برنامه خود استفاده می‌کنیم. وقتی کاربر روی پیوندی در نوار کناری کلیک می‌کند، برنامه فرم جدیدی را باز می‌کند که محتوای متفاوتی دارد اما منوی پیمایش یکسانی دارد.

فهرست مطالب

Toggle

Layouts چیست؟

در Anvil، Layout فرمی است که می تواند توسط سایر فرم ها برای تعریف ساختار خود استفاده شود. یک Layout Form می تواند اجزایی به آن اضافه شود. هر فرمی که از طرح بندی یکسانی استفاده کند، همه آن اجزای یکسان را خواهد داشت. هنگامی که یک Layout Form ایجاد می کنید، Slots را به طرح اضافه می کنید. شکاف‌ها تعیین می‌کنند که کجا فرم‌ها با استفاده از Layout می‌توانند اجزا را اضافه کنند.

پیش نیازهای آموزشی

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

فهرست

این مراحلی است که به آنها خواهیم پرداخت:

• مرحله 1 – یک برنامه Anvil ایجاد کنید

• مرحله 2 – یک Layout صفحه اصلی ایجاد کنید

• مرحله 3 – یک منوی ناوبری ایجاد کنید

• مرحله 4 – یک اسلات اضافه کنید

• مرحله 5 – از Layout استفاده کنید

• مرحله 6 – منوی ناوبری را سیم کشی کنید

• مرحله 7 – پیوند را انتخاب شده نشان دهید

• مرحله 8 – برنامه را تست کنید

• مرحله 9 – اختیاری: Layout صفحه اصلی را تغییر دهید

---

مرحله 1 – برنامه Anvil خود را ایجاد کنید

وارد Anvil شوید و روی «Blank App» کلیک کنید.

وقتی از شما پرسیده می شود که دوست دارید صفحه شما چگونه باشد، Material Design 3 را انتخاب کنید:

روی نام در بالای صفحه کلیک کنید و به برنامه خود یک نام بدهید.

---

مرحله 2 – قالب صفحه اصلی خود را ایجاد کنید

برنامه ما قبلاً فرمی به نام Form1 اضافه کرده است که ما آن را به صفحه اصلی Layout خود تبدیل می کنیم. Form1 را باز کنید و نام را به “Homepage” تغییر دهید:

سپس، روی نماد سه نقطه بالای فرم کلیک کنید و “Use as layout” را انتخاب کنید:

اولین باری که از Layouts در برنامه خود استفاده می کنید، برای استفاده از ویژگی های رابط کاربری جدید باید برنامه را انتقال دهید. اگر برنامه هنوز منتقل نشده است، زمانی که فرم خود را به یک طرح بندی تغییر می دهید، یک پیام بازشو خواهید دید. این یک تغییر غیرقابل برگشت در برنامه ما است، بنابراین اگر برنامه‌ای را که با طراح قدیمی Anvil ساخته‌اید مهاجرت می‌کنید، لطفاً آگاه باشید.

بیایید توضیحی از Layout خود را در منوی پیکربندی فرم اضافه کنیم. این اطلاعات هنگام تصمیم گیری از اینکه یک فرم جدید از کدام الگو استفاده کند نشان داده می شود. دوباره روی نماد سه نقطه بالای فرم کلیک کنید و “Edit properties and events” را انتخاب کنید. سپس یک توضیحات اضافه کنید.

عالیه. در مرحله بعد، بیایید یک رابط کاربری ناوبری در ayout خود بسازیم تا فرم‌های دیگر به ارث بروند.

---

مرحله 3 – ایجاد رابط کاربری منوی ناوبری ما

بیایید با اضافه کردن یک پنل ستونی به نوار کناری فرم شروع کنیم.

سپس می‌توانیم دو مؤلفه پیوند را به پنل ستون بکشیم – یکی برای هر فرمی که از این Layout استفاده می‌کند. ما متن پیوند اول را به “درباره ما” و متن پیوند دوم را به “تماس با ما” تغییر می دهیم.

در نهایت، اجازه دهید با کشیدن یک برچسب به قسمت عنوان در سمت چپ بالای صفحه، به برنامه خود عنوانی بدهیم. Homepage فرم. سپس نقش Label را به تغییر دهید Title.

---

مرحله 4 – اضافه کردن یک شکاف

اکنون که Layout را که می‌خواهیم سایر فرم‌هایمان استفاده کنند ساخته‌ایم، بیایید یک Slot اضافه کنیم. اسلات ها مکان هایی را که می توان اجزاء را توسط فرم هایی که از Layout استفاده می کنند درج کرد، تعیین می کند.

یک اسلات به آن اضافه می کنیم content_panel از ما Homepage با کشیدن «اسلات» از جعبه ابزار به سمت راست طراح.

هر شکاف یک نام دارد. ما می توانیم اسلات خود را با استفاده از پالت شی تغییر نام دهیم. بیایید آن را صدا کنیم main_slot.

توجه داشته باشید که اگر یک اسلات را از یک Layout که توسط فرم دیگری استفاده می‌شود حذف یا تغییر نام دهید، هر مؤلفه‌ای که در آن شکاف وجود دارد نمی‌داند کجا باید برود. می توانید آنها را در پنل اجزای یتیم پیدا کنید و دوباره به صفحه خود اضافه کنید. برای اطلاعات بیشتر، به مستندات ما در مورد Layouts مراجعه کنید

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

---

مرحله 5 – استفاده از Layout

اکنون دو فرم به نام‌های «AboutUs» و «ContactUs» ایجاد می‌کنیم که از Form Layout ما استفاده می‌کنند. بعداً، توابع رویداد کلیک را به پیوندهایی که در مرحله قبل اضافه کردیم اضافه می کنیم تا با کلیک کردن، فرم مربوطه را باز کنند.

اول، ما ایجاد می کنیم AboutUs با کلیک بر روی “افزودن فرم” در مرورگر برنامه.

سپس، صفحه اصلی را انتخاب کنید.

سپس می‌توانیم نام فرم را به «AboutUs» تغییر دهیم، به همان روشی که نام آن را تغییر دادیم Homepage فرم.

سپس، بیایید یک برچسب به شکاف اصلی اضافه کنیم و متن آن را تغییر دهیم.

این روند را برای ContactUs صفحه، اضافه کردن یک برچسب دیگر با متن متفاوت.

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

---

مرحله 6 – سیم کشی منوی ناوبری

باز کن Homepage پیوند “درباره ما” را در منوی پیمایش فرم داده و انتخاب کنید. بیایید ابتدا نام پیوند را تغییر دهیم تا ارجاع در کد آسانتر باشد. در پالت آبجکت شناور، روی آن کلیک کنید link_1 و نام لینک را تغییر دهید about_us_link. بعد، انتخاب کنید on click event، این نمای کد را برای فرم ما باز می کند و یک تابع کنترل کننده رویداد برای ما ایجاد می کند.

در داخل تابع رویداد، ما از آن استفاده خواهیم کرد open_form تابع برای باز کردن ما AboutUs صفحه را با گذاشتن نام فرم به عنوان یک رشته.

def about_us_link_click(self, **event_args):
  """This method is called when the link is clicked"""
  open_form('AboutUs')

اکنون هر بار که روی پیوند “درباره ما” کلیک شود، صفحه مربوطه بارگذاری می شود. همچنین با تغییر نام پیوند و افزودن آن، همین کار را برای پیوند “تماس با ما” انجام خواهیم داد click رویداد و باز کردن فرم مربوطه در تابع.

در نهایت، بیایید یک را ایجاد کنیم reset_links تابع برای فرم ها با استفاده از الگوی ما برای استفاده. تابع را ایجاد کنید و در داخل، نقش هر مؤلفه پیوند را روی یک رشته خالی تنظیم کنید:

def reset_links(self, **event_args):
  self.contact_us_link.role=""
  self.about_us_link.role=""

---

مرحله 7 – انتخاب پیوند به نظر برسد

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

انتخاب کنید AboutUs از فرم در طراح و در قسمت رویدادهای پنل خواص، روی دکمه آبی رنگ کنار رویداد «نمایش» کلیک کنید.

با این کار نمای کد باز می شود و تابعی اضافه می شود که هر بار اجرا می شود AboutUs فرم نشان داده شده است.

در داخل تابع، می‌توانیم با چیدمانی که فرم ما از آن استفاده می‌کند تعامل داشته باشیم self.layout. این به ما توانایی فراخوانی توابع تعریف شده در Layout و تغییر خصوصیات اجزای Layout را می دهد. بیایید پیوندها را بازنشانی کنیم و نقش را تنظیم کنیم Homepage.about_us_link برای “انتخاب” شدن.

def form_show(self, **event_args):
    """This method is called when the form is shown on the screen"""
    self.layout.reset_links()
    self.layout.about_us_link.role="selected"

این روند را برای ContactUs.

---

مرحله 8 – آزمایش برنامه

برای مشاهده عملکرد برنامه، روی دکمه “Run” در بالای صفحه کلیک کنید:

روی هر پیوند در نوار کناری کلیک کنید و صفحه مربوطه باید با استفاده از Layout ما ظاهر شود.

---

مرحله 9 – اختیاری: تغییر طرح صفحه اصلی

این قسمت اختیاری است! بهترین راه برای یادگیری هر فناوری جدید این است که درک خود را به چالش بکشید. چرا خودتان را به چالش نمی‌کشید تا آنچه را که آموخته‌اید تقویت کنید و بیشتر بیاموزید؟

یکی از بهترین چیزها در مورد Layout ایجاد تغییر در Layout است که فوراً با استفاده از Layout به همه اشکال منتشر می شود. بنابراین، چرا تغییراتی در فرم صفحه اصلی خود ایجاد نکنید و ببینید که چگونه بر سایر فرم ها تأثیر می گذارد. شما می توانید:

• پیوند دیگری را به نوار کناری ناوبری اضافه کنید و آن را سیم کشی کنید
• یک شکاف به نوار کناری اضافه کنید Homepage به طوری که سایر فرم ها با استفاده از Layout می توانند پیوندهای بیشتری را به منوی پیمایش اضافه کنند
• طرح بندی زنجیره ای با هم. سعی کنید یک صفحه “Admin” ایجاد کنید که از آن استفاده می کند Homepage Layout و به نوبه خود، آن را به یک Layout تبدیل کنید. صفحه مدیریت می تواند منوی ناوبری خود را در شکاف اصلی صفحه اصلی با پیوندهایی برای “نمایه” و “تنظیمات تماس” داشته باشد.

---

برنامه را کلون کنید

می توانید کد منبع برنامه تمام شده Anvil را از اینجا باز کنید.

---

اطلاعات بیشتر در مورد سندان

اگر تازه وارد اینجا هستید، خوش آمدید! Anvil پلتفرمی برای ساخت برنامه های وب تمام پشته با چیزی جز پایتون است. بدون نیاز به مبارزه با JS، HTML، CSS، Python، SQL و همه فریمورک های آنها – فقط همه را در پایتون بسازید.

---