کشیدن برنامهٔ استودیو
هدف
صفحه را روی بوم بکشید و بگویید هر شیء چیست.
کجا باز می‌شود
راه‌حل خود را باز کنید، صفحه‌ها را انتخاب کنید، یکی را برگزینید و طراحی را بزنید. بوم همان‌جا باز می‌شود، زیر همان مسیر و همان انتخابگرهای محیط و راه‌حل — همان بومی که طراح گزارش و طراح داشبورد از آن استفاده می‌کنند، پس هر چه از آن می‌دانید تغییری نکرده است.
یک برنامه چند صفحه است
هر قابی که آن را «صفحه» نشانه‌گذاری کنید یک صفحه از این برنامه است. دومی را کنار اولی بکشید و همان‌طور نشانه‌گذاری کنید تا برنامه‌تان دو صفحه داشته باشد — روی یک بوم، کنار هم، جایی که هر دو را با هم می‌بینید.
نام صفحه همان نام قاب است. نام قاب را در فهرست لایه‌ها عوض کنید، نام صفحه عوض شده است. این نام تزئینی نیست: ناوبری با همین نام سراغ صفحه می‌رود، پس دو صفحه با یک نام هنگام ذخیره پذیرفته نمی‌شود و به شما گفته می‌شود کدام را تغییر دهید.
بگویید با کدام باز می‌شود. به‌محض اینکه برنامه دو صفحه داشته باشد، انتخابگر باز می‌شود با در نوار عنوان پیدا می‌شود. صفحه‌ای را برگزینید که تازه‌وارد باید روی آن فرود بیاید. با یک صفحه انتخابگری در کار نیست، چون چیزی برای انتخاب نیست.
کشیدن دو صفحه و انتخاب صفحهٔ آغازین امروز کار می‌کند. آنچه هنوز نیست navigate است — کنشی که کسی را
از یکی به دیگری می‌برد — و دکمه‌هایی که آن را صدا می‌زنند. این گام بعدی است و عمداً غایب است: کنشی که
هیچ کاری نمی‌کند از کنشی که اصلاً پیشنهاد نشده بدتر است.
تنها چیز تازه: اینکه هر شیء چیست
شیئی را انتخاب کنید و زبانهٔ صفحه را کنار گرافیک باز کنید. آنجا یک پرسش هست:
این شیء …
پاسخ بدهید، و چیزی را به پلتفرم گفته‌اید که خودش نمی‌تواند بفهمد. مستطیلی از متن که عنوان است با مستطیلی از متن که بند است روی بوم یکسان‌اند؛ فقط شما می‌دانید کدام کدام است، و همین تفاوت است که صفحه‌خوان اعلام می‌کند و صفحهٔ نهایی از آن ساخته می‌شود.
| پاسخ | برای چه |
|---|---|
| خودِ صفحه | قابی که هر چیز دیگری درونش کشیده می‌شود. اندازه‌اش اندازهٔ صفحه است. |
| یک ناحیه | جعبه‌ای که چیزهای دیگر را گروه می‌کند — نوار بالا، ستون کناری، یک کارت. |
| یک عنوان | تیتر. |
| یک بند | متن معمولی. |
| یک فهرست / یک قلم فهرست | فهرست، و یک ورودی از آن. |
| یک دکمه | چیزی که فشرده می‌شود. |
| یک تصویر | تصویری که معنا دارد، در برابر تصویری که تزئین است. |
| (خالی) | گرافیکِ صفحه — کشیده می‌شود، اما دربارهٔ محتوای صفحه چیزی نمی‌گوید. |
زیر آن‌ها، همان فهرست کنترل را هم پیشنهاد می‌دهد: دکمه، کادر متن، ناحیهٔ متن، کادر تیک، فهرست کشویی یا انتخابگر تاریخ. پایین‌تر را ببینید — آن‌ها نقاشی نیستند.
می‌بینید که فهرست با آنچه انتخاب کرده‌اید تغییر می‌کند. یک قاب می‌تواند خودِ صفحه باشد؛ یک شیء متنی نمی‌تواند، چون اندازهٔ صفحه اندازهٔ صفحه است. یک خط یا یک شکل اصلاً پاسخی ندارد، و زبانه همین را می‌گوید به‌جای آنکه پانلی خالی نشانتان دهد.
با کشیدن یک قاب شروع کنید و آن را خودِ صفحه علامت بزنید. هر چیز دیگری درونش می‌رود، و شیءهای درون یک قاب را می‌توان به لبه‌هایش سنجاق کرد تا با تغییر اندازه دنبالش بیایند — همان سنجاق‌کردنی که در آن دو طراح دیگر به کار می‌برید.
اندازهٔ یک متن
هر متنی را انتخاب کنید؛ بخش متن آن با دو دکمه تمام می‌شود:
- اندازه را خودتان بدهید — پیش‌فرض، و همان کاری که متن همیشه می‌کرده. پهنا از آنِ شماست و کلمه‌ها در آن می‌شکنند. ارتفاع هم از آنِ شماست و کفِ اندازه است: جعبه را بلندتر کنید اگر خواستید؛ هرگز کوتاه‌تر از خودِ کلمه‌ها نمی‌شود. (پیش از این دستگیره‌های عمودی حرکت می‌کردند و جعبه بی‌درنگ به جای اولش برمی‌گشت، و همین بود که متن را تنها شیئی می‌کرد که نمی‌شد اندازه‌اش را عوض کرد.)
- به اندازهٔ متن — جعبه دقیقاً همان متن می‌شود: به پهنای بلندترین سطری که نوشته‌اید و به بلندای همان سطرها. چیزی نمی‌شکند و دستگیره‌های تغییر اندازه می‌روند، چون دیگر چیزی برای تصمیم‌گرفتن ندارند. برای بازگرداندنشان اندازه را خودتان بدهید را بزنید.
عمداً حالت سومی نیست که بگذارد جعبه کوتاه‌تر از کلمه‌هایش باشد. جعبه‌ای که آنچه نوشته‌اید را پشت لبهٔ خودش پنهان کند خطایی است که دیده نمی‌شود، و کف اندازه هر چه «تغییر اندازه» لازم دارد را بدون آن می‌دهد.
متن کجای جعبه بنشیند
ردیف چینش در بخش متن گروه دومی هم دارد: متن در بالای کادر، در میانه‌ی کادر و در پایین کادر. این می‌گوید وقتی جعبه از کلمه‌ها بلندتر است، متن به کدام لبه چسبیده است.
پیش‌فرض میانه است، و همان چیزی است که نوشتهٔ روی یک دکمه لازم دارد: کادر نوشته‌ای که درون دکمه‌ای ۴۰ نقطه‌ای کشیده می‌شود عمداً از یک سطرش بلندتر است، و میانه‌چینی همان است که کلمه‌ها را جایی می‌گذارد که دکمه را کشیده‌اید.
برای هر چیزی که ممکن است بلندتر شود، بالا را برگزینید. جعبه‌ای میانه‌چین که کوچک‌تر از آب درآید از هر دو سو بیرون می‌زند، پس یادداشتی که به سه سطر رسیده از بالا روی برچسب بالای خودش می‌آید. چسباندنش به بالا یعنی فقط می‌تواند رو به پایین رشد کند، به فضایی که می‌بینید. این همان چیزی است که بوم همیشه کشیده، پس تنها تنظیمی است که در آن نقاشی و صفحه دقیقاً هم‌داستان‌اند.
برای برگزیدن دوبارهٔ قاب صفحه، یک بار روی پس‌زمینهٔ خالی‌اش کلیک کنید — کلیک روی قاب معمولاً به آنچه درونش کشیده شده می‌رسد، و یک کلیک روی تکه‌ای خالی خودِ قاب را با همهٔ دستگیره‌هایش برمی‌گزیند. وقتی تکهٔ خالی‌ای نمانده، راست‌کلیک ← گزینش لایه، یا از پنل لایه‌ها. اندازه‌اش را با کشیدن دستگیره یا با تایپ عرض و ارتفاع در بازرس تغییر دهید؛ به هر دو شیوه، شیءهای سنجاق‌شدهٔ درونش دنبال می‌آیند.
وقتی چند چیز روی هم‌اند، روی یکی کار کنید
صفحه‌ای زبانه‌دار چند پنل است که در یک مستطیل کشیده شده‌اند و هر بار یکی نشان داده می‌شود. رو ی بوم همه‌شان کشیده می‌شوند، پس فقط بالایی را می‌توان کلیک، جابه‌جا یا اندازه کرد و بقیه زیرش، دور از دسترس، می‌مانند.
دکمهٔ هدف را روی سطر یک لایه بزنید (کنار چشم و قفل) تا هر چیز دیگری از بوم برود. رویش کار کنید و دوباره همان دکمه را بزنید — یا نمایش همه در نواری که بالای فهرست لایه‌ها می‌آید، که هست تا بومی که نیمه‌خالی شده همیشه بگوید چرا.
هیچ‌چیزِ برنامهٔ شما را تغییر نمی‌دهد. چشمِ کنارش هم راه را باز می‌کند، اما چشم دیدپذیریِ خودِ نقاشی است: لایه‌ای که پنهان کرده‌اید اصلاً در برنامه‌تان نمی‌آید، پس پنهان‌کردن دو پنل و یادنیاوردنِ بازگرداندنشان یعنی انتشار صفحه‌ای که دو پنل کم دارد. این فقط بوم است، ذخیره نمی‌شود، و بار بعد که طراح را باز کنید نیست.
فهرست لایه‌ها همان منوی راست‌کلیک را دارد
روی سطری در درخت لایه‌ها راست‌کلیک کنید و همان منویی را می‌گیرید که بوم به شما می‌دهد: چیدنِ ت رتیب، گروه، ماسک، وارونه‌سازی، ساخت مؤلفه، قفل، تکثیر، حذف — همه‌اش، روی همان سطر.
نخست سطر را برمی‌گزیند، پس منو همیشه روی چیزی عمل می‌کند که به آن اشاره کرده‌اید، نه روی هر چه پیش‌تر انتخاب بوده. اینجا زیرمنوی گزینش لایه نیست: آن یکی برای رفعِ ابهامِ کلیک روی شکل‌های روی‌هم است، و یک سطر در درخت از پیش یک شیء است.
بیشترین کاربردش دقیقاً برای شیءهایی است که بوم دشوارشان می‌کند — چیزی دفن‌شده درون یک فریم، پشت چیز دیگر، یا بیرون از نما. آن را در درخت پیدا کنید و همان‌جا کار را انجام دهید.
کلیدهای نما و شکل‌ها
- بزرگ‌نمایی با Ctrl+= و Ctrl+- (در مک ⌘)، یا با Ctrl و چرخ ماوس. Ctrl+0 به ۱۰۰٪ برمی‌گرداند.
- Shift+1 همه‌چیز روی بوم را نشان می‌دهد. Shift+2 پنجره را با آنچه انتخاب کرده‌اید پر می‌کند.
- جابه‌جایی نما با چرخ ماوس (با Shift به پهلو)، با نگه داشتن Space و کشیدن، یا با ابزار دست (H).
- کلیدهای جهت انتخاب را یک پیکسل جابه‌جا می‌کنند؛ با Shift ده پیکسل. هر فشار یک گام بر گرداندن است.
- شکلی که تازه کشیده‌اید انتخاب‌شده است و ابزار انتخاب برگشته، پس همان لحظه می‌توانید رنگ و نامش را بدهید.
- نوشتن چرخش شکل را گرد مرکزش می‌چرخاند، همان‌طور که دستگیرهٔ چرخش می‌چرخاند.
- هنگام کشیدن، خط‌های راهنما لبه‌ها و مرکزها را با آنچه روی صفحه است هم‌تراز می‌کنند. برای جای دادنِ آزاد، Alt را نگه دارید.
- با ابزار متن کلیک کنید و بنویسید. متن تازه انتخاب شده و نوشتهٔ پیش‌فرضش برگزیده است، پس نخستین کلید جایش را می‌گیرد.
- کلیک روی شکلی در یک گروه کل گروه را انتخاب می‌کند. برای رسیدن به خودِ آن شکل دوبار کلیک کنید.
- اجتماع، تفریق، اشتراک و حذف اشتراک نتیجه را جای شکلِ زیرین می‌گذارند: در همان قاب، با نام آن، و با گوشه‌های گرد اگر گرد بودند.
- Ctrl+D روی چیزی درون یک چیدمان خودکار نسخه را درست پس از آن، در همان ردیف، می‌گذارد.
پیش‌نیازها
- صفحه از پیش وجود دارد — ساختن صفحهٔ استودیو.
گام‌ها
- راه‌حل خود را باز کنید، صفحه‌ها را انتخاب کنید، یکی را برگزینید و طراحی را بزنید.
- یک قاب بکشید. با انتخاب آن، زبانهٔ صفحه را باز کنید و این شیء را روی خودِ صفحه بگذارید.
- درونش بکشید: قاب برای ناحیه‌ها، متن برای عنوان‌ها و نوشته‌ها، تصویر هر جا تصویر می‌خواهید.
- هر کدام را انتخاب کنید و بگویید چیست. آن‌هایی را که فقط تزئین‌اند خالی بگذارید.
- پیش‌نمایش را بزنید تا صفحه را همان‌گونه که کاربر می‌بیند ببینید.
- ذخیره را بزنید.
بار بعد که صفحه را باز کنید، طرح شما دقیقاً همان‌طور که رهایش کرده‌اید برمی‌گردد.
پیش‌نمایش خودِ چیز را نشان می‌دهد
پیش‌نمایش بوم را با خودِ صفحه عوض می‌کند — نه عکسی از آن، و نه بوم با راهنماهای خاموش. همان جزئی است که پوستهٔ پلتفرم سوار می‌کند، پس آنچه می‌بینید همان است که کاربر می‌گیرد. متنی در آن را انتخاب کنید؛ انتخاب می‌شود. Ctrl+F بزنید؛ مرورگر پیدایش می‌کند.
برای بازگشت طراحی را بزنید. پیش‌نمایش همیشه آنچه را اکنون روی بوم است نشان می‌دهد، از جمله ویرایش‌هایی که ذخیره نکرده‌اید.
ذخیره در واقع چه می‌کند
ذخیره دو چیز را نگه می‌دارد: طرح شما، و صفحه که به عنصرهای معمولی وب تبدیل شده است. عنوان به یک عنوان واقعی بدل می‌شود، بند به یک بند واقعی، دکمه به یک دکمهٔ واقعی. همین است که متن را انتخاب‌شدنی و جست‌وجوپذیر می‌کند، به دکمه حلقهٔ فوکوس می‌دهد و به صفحه‌خوان اجازه می‌دهد صفحه را درست اعلام کند — هیچ‌کدام از عهدهٔ یک طرح برنمی‌آید.
پس پاسخ‌های شما در فهرست این شیء برچسب نیستند. آن‌ها تعیین می‌کنند هر شیء چه می‌شود.
دو نتیجه از آن برمی‌آید که دانستنش می‌ارزد:
- صفحهٔ شما برای خوانندهٔ فارسی و عربی آینه می‌شود. هر چه به چپ سنجاق کرده‌اید در راست می‌آید، و متنی که چپ‌چین کرده‌اید به لبهٔ خواندن می‌چسبد. لازم نیست دو بار بکشیدش.
- تغییر اندازه هزینه‌ای ندارد. سنجاق‌کردن یک شیء به هر دو لبه آن را کشسان می‌کند و سنجاق‌کردن به پایین آنجا نگهش می‌دارد — مرورگر خودش این کار را می‌کند، پس صفحه هرچه تغییر اندازه بدهد روان می‌ماند. اگر خیلی باریک شود، به جای کوچک‌شدن پیمایش می‌کند: صفحه چیزی است که مردم می‌خوانند و در آن تایپ می‌کنند، و کوچک‌کردنش متنی می‌سازد که کسی نمی‌تواند بخواند.
اگر ذخیره چیزی به شما گفت
ذخیره ممکن است با نکته‌ای برگردد. هیچ‌کدام جلوی ذخیره را نمی‌گیرد:
- هیچ شیئی به عنوان صفحه نشانه‌گذاری نشده — به جایش کل طرح به کار رفت. یک قاب را صفحه کنید تا شیءهای درونش چیزی برای سنجاق‌شدن داشته باشند.
- شیء دیگری هم به عنوان صفحه نشانه‌گذاری شده — تنها اولی به کار می‌رود؛ بقیه جعبهٔ معمولی شدند.
- دکمه‌ای هیچ متنی ندارد — صفحه‌خوان چیزی برای اعلام ندارد. یک شیء متنی درون دکمه بکشید.
وقتی کنترل واقعی می‌خواهید، نه نقاشی‌ای از آن
یک جعبه بکشید و در زبانهٔ صفحه به‌جای یک عنصر، یکی از ورودی‌های کنترل را برگزینید. آنچه روی صفحهٔ نهایی پدیدار می‌شود خودِ کنترل سکو است — همان انتخابگر تاریخی که فرم‌های رکورد به کار می‌برند، همان کادر متن، همان دکمه.
این مهم‌تر از آن است که به نظر می‌رسد. مستطیلی که شبیه کادر تاریخ است تقویم ندارد. مستطیلی که شبیه کادر متن است نه مکان‌نما دارد، نه انتخاب متن، نه تکمیل خودکار و نه رفتار صفحه‌کلید. و وقتی کاربری فارسی‌زبان صفحهٔ شما را باز کند، انتخابگر تاریخ واقعی تقویم جلالی را نشان می‌دهد — بدون آنکه شما کاری کرده باشید، چون هرگز دوباره کشیده نشده است.
چه نگه می‌دارید، و چه از آنِ سکو می‌ماند. جایی که کشیده‌اید، اندازه‌اش، و رنگ‌آمیزی‌اش همه از آنِ شماست — پرشدگی، کادر، گردی گوشه‌ها، و رنگ و ضخامت کلمه‌های درونش. آنچه از آنِ سکو می‌ماند هر چیزی است که یک نقاشی نمی‌تواند بگوید: مکان‌نما، تقویم، ارقام، رفتار صفحه‌کلید، و حلقهٔ تمرکزی که روی‌اش رنگ نزده‌اید.
هر چه را دست‌نخورده بگذارید از آنِ سکو می‌ماند، و همین نکته است نه محدودیت. کنترلی که هرگز رنگ‌آمیزی‌اش نکرده‌اید دقیقاً مثل هر کنترل دیگرِ محصول دیده می‌شود و با تغییر پوسته همراه می‌رود. تنها کادر را رنگ بزنید، تنها کادر از آنِ شماست.
به‌جای تایپ‌کردن یک کد شانزده‌شانزدهی، از ردیف توکن‌های زیر پرشدگی یکی را برگزینید. «اصلی» رنگ تأکیدِ مستأجر است در حالت روشن و تیره؛ یک کد رنگ تنها در یکی از آن دو درست است. کنتر لی که از جعبه‌ابزار کنترل‌ها رها می‌کنید از پیش با توکن رنگ خورده است، و به همین دلیل در هر دو حالت درست دیده می‌شود.
برچسب را درون جعبه بنویسید. کلماتی که درونش می‌کشید می‌شوند عنوان دکمه، برچسب کادر تیک، یا متن راهنمای کم‌رنگ درون کادر متن — فیلد جداگانه‌ای برای پرکردن نیست.
چیزهایی را تایپ می‌کنید نه می‌کشید:
- گزینه‌ها، روی فهرست کشویی، هر خط یکی. تنها چیزی که در یک کنترل نمی‌توان کشید: فهرست کشویی بسته یک مقدار را نشان می‌دهد و هرگز خود فهرست را.
- می‌پذیرد، روی جعبهٔ متن — چه نوع مقداری نگه می‌دارد: متن، گذرواژه، نشانی ایمیل، عدد، شمارهٔ تلفن، نشانی وب. این تزئین نیست: جعبهٔ گذرواژه آنچه را تایپ می‌شود می‌پوشاند و با کلید نمایشِ خودِ سکو می‌آید، جعبهٔ ایمیل یا نشانی وب روی گوشی صفحه‌کلید مناسب را بالا می‌آورد و جعبهٔ عدد صفحه‌کلید عددی را.
- فقط‌خواندنی، روی جعبهٔ متن یا ناحیهٔ متن — می‌توان خواند، انتخاب و رونوشت کرد اما تغییر نه. با غیرفعال فرق دارد که روی هر کنترلی هست و یعنی این کنترل اصلاً برای این کاربر نیست: کنترل غیرفعال را صفحه‌کلید و صفحه‌خوان رد می‌کنند، ولی فقط‌خواندنی را نه.
- بیشترین نویسه، روی جعبهٔ متن یا ناحیهٔ متن — مرورگر تایپ را در آن اندازه متوقف می‌کند.
- می‌پذیرد، روی یک انتخابگر فایل — هر فایلی یا یک تصویر. این یک فیلد دو چیز را با هم تعیین می‌کند: اینکه پنجرهٔ انتخاب فایل چه پیشنهاد دهد، و اینکه آنچه انتخاب شد به‌صورت تصویر نمایش داده شود یا نه.
- انتخاب می‌کند، روی یک انتخابگر تاریخ — یک تاریخ، تاریخ و ساعت، یا یک ساعت.
- تقویم، روی انتخابگر تاریخ — تنظیم مستأجر، میلادی یا شمسی. آن را روی گزینهٔ نخست بگذارید مگر آنکه تقویم واقعیتی دربارهٔ خودِ داده باشد نه دربارهٔ خواننده: تاریخ انقضای گذرنامه برای همه میلادی است، حال آنکه «تاریخ تأیید» را باید در تقویمی دید که خوانندهٔ آن به کار می‌برد.
مقدار را به یک فیلد وضعیت ببندید تا فایل انتخاب‌شده در آن بنشیند. متنی که به همان فیلد بسته شود
نام فایل را نشان می‌دهد. برای نگه‌داشتن فایل، آن فیلد را به‌عنوان مقدار یک فیلد فایل یا تصویر به
createRecord یا updateRecord بدهید — updateRecord("contact", id, { new_photo: getState("photo") })
— تا همراه رکورد ذخیره شود. تا دست‌گیره‌ای این کار را نکند، فایل در همان صفحه می‌ماند و با ترک صفحه از
بین می‌رود. فایلی بزرگ‌تر از ۴ مگابایت پیش از خوانده‌شدن، در همان انتخابگر رد می‌شود.
اگر فعال را به یک عبارت بسته باشید، تیکِ غیرفعال خاکستری می‌شود و دلیلش را می‌گوید: عبارت
پیش‌تر پاسخ داده که کنترل کِی قابل استفاده است و تیک کنارش پاسخ دومی می‌شد. یا enabled را ببندید
یا غیرفعال را تیک بزنید، نه هر دو.
کنترل‌ها هم حالتِ کشیده‌شده می‌پذیرند. کنترل را بکشید، رونوشتی بگیرید، رنگ‌های رونوشت را عوض کنید و آن را نامعتبر برچسب بزنید — دقیقاً همان‌طور که برای جعبه‌ای که خودتان کشیده‌اید. آنچه سفر می‌کند تفاوت است، و روی خودِ کنترل می‌نشیند. استفادهٔ دوباره از یک طرح با مؤلفه‌ها می‌گوید یک حالت چگونه اعلام می‌شود.
پس کدام را به کار ببرید؟ وقتی ظاهر مهم است بکشید — دکمه‌ای با رنگ‌های خودتان و حالتی که خودتان کشیده‌اید. وقتی رفتار مهم است کنترل را برگزینید: تقویم، مکان‌نما، صفحه‌کلید.
ساختن «دکمهٔ خطر»
فهرست کشویی ظاهر وجود ندارد، و لازم هم نیست. برای رسیدن به یک دکمهٔ قرمز:
- از جعبه‌ابزار کنترل‌ها یک دکمه رها کنید.
- پرشدگی‌اش را روی توکن خطا و رنگ عنوانش را سفید بگذارید.
- برگزینیدش و ساختن مؤلفه را بزنید — خودِ دکمه مؤلفه می‌شود. نام لایه را دکمهٔ خطر بگذارید؛ نام مؤلفه هم با آن عوض می‌شود.
حالا در فهرست مؤلفه‌هاست، و هر صفحه‌ای که یکی از آن را بگذارد همان دکمهٔ قرمز را می‌گیرد. حالت اشاره می‌خواهید؟ به مؤلفه یک حالت بیفزایید و رونوشتش را تیره‌تر بکشید. دکمهٔ موفقیت هم می‌خواهید؟ همین کار را دوباره بکنید — که یک حرکتِ آشناست، نه ورودیِ پنجمِ فهرستی که کسی باید برایتان به آن بیفزاید.
پیوند به جایی
یک جعبه یا یک متن را انتخاب کنید و در زبانهٔ صفحه، یک پیوند است را برگزینید. دو فیلد می‌آید:
- نشانی — کجا می‌رود:
https://example.com/docs، mailto:someone@example.com، tel:+441234567890، یا مسیری درون همین برنامه مانند /reports/monthly. - باز می‌شود — در همین پنجره (معمول) یا در زبانهٔ تازه.
برای رفتن به صفحهٔ دیگری از این برن امه، نامش را بنویسید: Contacts. پیوند هر جا برنامه باز شود به همان صفحه می‌رود، چه برنامه به‌تنهایی باز شده باشد چه درون یک برنامهٔ مدل‌محور که نشانی همان صفحه در آن فرق دارد. با فشردنش، بی‌آنکه صفحه دوباره بارگذاری شود، درون برنامه جابه‌جا می‌شوید، و کلیک میانی همچنان صفحه را در زبانه‌ای تازه باز می‌کند.
چرا این پیوند است و نه دکمه‌ای با یک دستگیره. کلیک وسط یک زبانه باز می‌کند. راست‌کلیک باز کردن پیوند در زبانهٔ تازه و رونوشت نشانی پیوند را پیشنهاد می‌دهد. با بردن نشانگر روی آن، مرورگر مقصد را در نوار وضعیت نشان می‌دهد. صفحه‌خوان می‌تواند همهٔ پیوندهای صفحه را فهرست کند و پیوند شما را میانشان بخواند. هیچ‌کدام از این‌ها از یک دستگیره نمی‌آید — همه از این می‌آید که عنصر یک پیوند واقعی است.
وقتی مقصد محاسبه می‌شود، به‌جای تایپ کردن، نشانی را ببندید —
"https://example.com/" + state.topic. اتصال برنده است و پنل جعبه را خاکستری می‌کند و می‌گوید
چرا. ببینید صفحه را واکنش‌گر کنید.
بعضی نشانی‌ها پذیرفته نمی‌شوند و پنل هنگام تایپ قرمز می‌شود: تنها نشانی وب (http،
https)، نشانی رایانامه، شمارهٔ تلفن و مسیرهای درون همین برنامه مجازند. پیوندی که اسکریپت اجرا
کند پیوند نیست، و صفحه می‌تواند از یک درون‌ریزی آمده باشد نه از دست خودتان.
وقتی صفحه تصمیم می‌گیرد کجا برود — پس از ذخیره، یا بر پایهٔ آنچه انتخاب شده — به‌جایش در یک
دستگیره openUrl("…") بنویسید. همان قاعدهٔ نشانی‌ها، و
صفحه را واکنش‌گر کنید را ببینید.
بکشید که وقتی به آن اشاره می‌شود چگونه دیده شود
حالت‌ها به مؤلفه تعلق دارند. روی چیزی که می‌خواهید حالت بگیرد راست‌کلیک کنید و ساخت مؤلفه را بزنید — سپس حالت‌هایش را روی خودِ مؤلفه بیفزایید، جایی که همه با هم فهرست می‌شوند. شرح کامل: استفادهٔ دوباره از یک طرح با مؤلفه‌ها.
این یعنی یک جا به‌جای دو جا. پیش‌تر روی همین زبانه هم جعبهٔ کشیدن یک حالت بود که پیش از کشیدن هر چیزی نام و تعامل می‌خواست و روی اشیائی می‌نشست که اصلاً فهرست حالتی نداشتند؛ حالا زبانهٔ صفحه می‌گوید حالت‌ها کجا زندگی می‌کنند.
مؤلفه‌ای با یک نمونه هم مؤلفهٔ کاملاً درستی است. اگر تنها چیزی که می‌خواهید یک حالتِ اشاره روی یک دکمه است، آن را مؤلفه کنید و حالت را بدهید — بهایش همین است، و همان است که فردا اجازه می‌دهد آن دکمه را دو بار بگذارید.
نام یک حالت چیست، و «در حالِ» چیست
هر حالت دو نیمه دارد و هر نیمه را جای دیگری می‌گویید:
- نام از آنِ شماست —
invalid،overBudget،awaitingApproval. انتخاب‌شده، تیک‌خورده، نامعتبر، موفق، هشدار، در حال بارگذاری و فقط‌خواندنی فقط پیشنهادند. - در حالِ — روی پنل خودِ صیغه: همیشه، یا اشاره‌شده، فشرده، فوکوس‌شده. این سه تا مالِ مرورگرند، پس همان‌هایی‌اند که نمی‌توانید از خودتان بسازید.
«غیرفعال» یک نام است، نه یک «در حالِ». پیش‌تر در همان انتخابگر بود و جایش آنجا نیست:
اشاره‌شده، فشرده و فوکوس‌شده کارهایی‌اند که کسی دارد انجام می‌دهد و هر کدام همان لحظه که
بایستد تمام می‌شود. غیرفعال چیزی است که کنترل هست — صفحهٔ شما تصمیمش را گرفته — پس مثل هر نام
حالت دیگری است و disabled نوشته می‌شود.
لازم نیست بگویید کِی روشن است. صفحه از پیش می‌داند، از تیکِ غیرفعال کنترل یا از عبارتِ فعال
آن، و خودش حالت را روشن می‌کند. یک صیغه بکشید، نامش را disabled بگذارید، و کنترلی که نمی‌شود از
آن استفاده کرد همان را می‌پوشد.
هر دو را بگذارید و یک ترکیب دارید — نامعتبر در حالِ اشاره‌شده. هرگز لازم نیست همهٔ ترکیب‌ها را بکشید: اگر کاربری به چیزی که در حالت نامعتبر است اشاره کند و شما فقط نامعتبر را کشیده باشید، همان نامعتبر را می‌بیند.
از حرف، رقم، - و _ استفاده کنید و با حرف شروع کنید. نامی که نمی‌تواند حالت باشد دکمه را غیرفعال
می‌کند و دلیلش را می‌گوید، به‌جای اینکه بگذارد چهار حالت بکشید و سرِ ذخیره با ردّش روبه‌رو شوید.
سه نکته که دانستنش می‌ارزد:
- تنها تفاوت‌ها نگه داشته می‌شوند. اگر پس‌زمینهٔ رونوشت را عوض کنید، فقط پس‌زمینه به یاد می‌مانَد. پس تغییر اندازهٔ شیء اصلی یا ویرایش نوشته‌اش لازم نیست در هر حالت تکرار شود — و همین است که جلوی دکمه‌ای را می‌گیرد که با اشاره‌کردن جابه‌جا می‌شود.
- هرجا خواستید رونوشت را بگذارید. جای رونوشت روی بوم بخشی از حالت نیست؛ فقط جایی است برای دیدنش.
- اما جابه‌جاکردن چیزی درون رونوشت بخشی از حالت است. دستهٔ یک کلید را در رونوشت به آن سر ریلش ببرید؛ وقتی حالت روشن شود دسته همان‌جا می‌سُرد — نرم، نه با پرش. کلید، گام‌شمار و هر برجسته‌سازی متحرک را همین‌طور می‌کشید. تغییر اندازهٔ چیزی درون رونوشت هم شمرده می‌شود، اما ناگهانی رخ می‌دهد: بزرگ‌شدن یک جعبه چیدمان پیرامونش را به‌هم می‌ریزد و متحرک‌کردن آن صفحه را می‌لرزاند.
- چیزی اجرا نمی‌شود. مرورگر همهٔ کار را می‌کند، پس صفحه‌ای با پنجاه حالت دقیقاً به‌اندازهٔ صفحه‌ای بدون حالت سریع است.
اگر در رونوشت شیئی اضافه یا کم کنید حالت کار نمی‌کند و ذخیره با نام‌بردنش همین را می‌گوید. حالت باید همان شکلِ چیزی باشد که آینه‌اش است. برای نشان‌دادن چیزی اضافه هنگام اشاره، آن را در اصل بکشید، همان‌جا پنهانش کنید و در حالت نمایانش کنید — پنهان و نمایان تفاوتی در ظاهر است، و این کاری است که یک حالت می‌تواند بکند.
نقشکی روی آن بگذارید
مؤلفه‌ها ← نقشک… گزینگر نقشک خود سکو را باز می‌کند — همهٔ مجموعهٔ Lucide، جست‌وجوپذیر بر پایهٔ معنای نقشک نه نام دقیقش. یکی را برگزینید تا روی بوم بنشیند.
آنچه می‌نشیند یک شیء کشیده‌شدهٔ معمولی است، نه گونه‌ای ویژه:
- با همان رنگ‌آمیزی بقیه رنگ می‌شود، پس یک نشانهٔ طراحی به آن بدهید تا حالت روشن/تاریک خواننده را دنبال کند؛
- حالت‌های کشیده‌شده می‌گیرد، پس می‌تواند همراه کارتی که در آن است با اشارهٔ ماوس رنگ عوض کند؛
- می‌تواند نمایش را ببندد، و همین است که یک دکمه دو نگاره می‌برد و آن را نشان می‌دهد که برازنده است — دکمهٔ حالت رنگ در نمونه، ماه و خورشید می‌کشد و هرکدام را که حالت کنونی نیست نشان می‌دهد.
با خطِ دور (نه پرشده)، به رنگ color.text و در ۲۴×۲۴ می‌آید. اندازه‌اش را عوض کنید، رنگش را عوض
کنید، درون دکمه‌ای کنار نوشته بگذاریدش. پس از آن هیچ چیزش ویژه نیست.
دکمه‌ای که تنها یک نقشک دارد پذیرفته نمی‌شود. ذخیره هشدار می‌دهد هیچ متنی ندارد، پس صفحه‌خوان چیزی برای خواندن ندارد — نوشته را کنار نگاره بگذارید، همان‌گونه که کنترل حالت تاریک در نمونهٔ میز پشتیبانی می‌کند. آن کنترلِ مهربان‌تری هم هست: همه نیاموخته‌اند که ماه یعنی تاریک.
آن ردیف تنها با کلیک کار می‌کند و کشیده نمی‌شود، چون یک کشیدن باید بداند چه می‌برد و این یکی یک گفت‌وگو می‌برد.
نقشک اشتباهی برگزیدید؟ عوضش کنید
نقشک را برگزینید؛ در تابلوی ویژگی‌ها زیر نامش میدانی به نام نقشک با همان انتخابگر می‌بینید. یکی دیگر برگزینید و تنها طرحش جایگزین می‌شود — اندازه، رنگ، حالت‌ها و اتصال‌هایش دقیقاً همان می‌ماند که تنظیم کرده بودید.
دلیل عوض‌کردنش از همان‌جا به‌جای پاک‌کردن و گذاشتن یکی تازه همین است: نقشک تازه ۲۴ در ۲۴ و با رنگ color.text می‌آید و چیزی از دکمه‌ای که آن یکی را درونش گذاشته بودید نمی‌داند.
نقشکی که خودتان با قلم کشیده‌اید میدان نقشک ندارد، و نباید داشته باشد: نامی پشتش نیست که عوض شود، و تنها کاری که یک انتخابگر می‌توانست بکند دورانداختن طرح شماست.
نقشکی درون دکمه بگذارید
دکمه‌ای را برگزینید تا پنل ویژگی‌ها فیلد نماد دکمه را با همان انتخابگر نشان دهد. نمادی برگزینید تا درون دکمه کشیده شود: اگر دکمه نوشته‌ای ندارد در میانهٔ آن، و اگر دارد پیش از نوشته؛ به اندازهٔ نیمی از بلندی دکمه، و با تغییر اندازهٔ دکمه سر جایش می‌ماند. برای عوض کردنش نماد دیگری برگزینید، یا فیلد را پاک کنید تا برداشته شود.
فهرست، جدول یا منو: ردیف‌ها را رنگ کنید
جعبه‌ای بکشید، ردیف‌ها را درونش بگذارید، و بخش ردیف‌های همان جعبه آن‌ها را رنگ می‌کند — روی هر آنچه خودتان برای هر ردیف کشیده‌اید. چهار مورد:
-
یک‌درمیان — اثر گورخری. ردیف نخست همان می‌ماند که کشیده‌اید، پس آنچه هنگام کشیدن می‌بینید همان ردیف یکم است.
-
ردیف زیر نشانگر — برجسته‌سازی‌ای که همراه ماوس در فهرست پایین می‌آید. هیچ هزینه‌ای ندارد: کارِ مرورگر است، پس جدولی با دویست ردیف به‌اندازهٔ جدول خالی سریع است.
-
ردیف برگزیده — ردیفی که کسی انتخابش کرده. پایین‌تر ببینید یک ردیف چگونه می‌گوید برگزیده است.
-
لبهٔ ردیف برگزیده — نواری روی همان ردیف، و جای نوار می‌گوید روی کدام لبه:
- در لبهٔ آغازین — در فارسی سمت راست و در انگلیسی سمت چپ، بی‌آنکه لازم باشد دو بار تنظیمش کنید. چیزی که یک نوار راهبری می‌خواهد.
- زیر ردیف، مانند زبانه — چیزی که یک نوار زبانه می‌خواهد، چون زبانهٔ برگزیده در هر محصولی این‌گونه نشان داده می‌شود. زبانه‌ها در عرض می‌روند، پس نواری در سمت آغازینِ زبانهٔ اول کنترلی است که کسی نمی‌شناسدش.
پیش‌فرضش رنگ تأکید است، چون در فهرستی آرام ردیف برگزیده و ردیف زیر نشانگر دو سایه از یک خاکستری‌اند و این نوار همان است که در یک نگاه می‌گوید اینجایید.
هرجا دو رنگ یک ردیف را رنگ کنند، آنکه در این فهرست دیرتر آمده می‌برد: نشانگر روی اثر گورخری را می‌پوشاند، و ردیف برگزیده حتی زیر نشانگر رنگ خودش را نگه می‌دارد. اینکه ردیف برگزیده درست وقتی کسی به سویش می‌رود نابرگزیده به نظر برسد، بدتر از آن است که برجسته‌سازی برای یک ردیف ساکت بماند. لبه رنگِ ردیف نیست و از این رقابت بیرون است — همراه هر رنگی که برنده شده کشیده می‌شود و چیزی را روی ردیف جابه‌جا نمی‌کند، پس هنگام تغییر ا نتخاب چیزی به پهلو نمی‌پرد.
نوار را نکشید. مستطیلی کنار یک مورد نمی‌تواند حرکت کند، پس با فشردن مورد دیگر همان‌جا می‌ماند — که تصویری از یک انتخاب است نه خودِ انتخاب. لبهٔ ردیف برگزیده را تنظیم کنید تا همان پاسخی را دنبال کند که رنگ دنبال می‌کند.
این‌ها بر جعبه‌هایی اعمال می‌شوند که مستقیم درون جعبهٔ تنظیم‌شده‌اند و عمیق‌تر نمی‌روند — پس فهرستی از کارت‌ها، کارت‌ها را راه‌راه می‌کند، نه جعبه‌های درون هر کارت.
هرجا می‌توانید رنگ زمینهٔ پوسته را برگزینید، نه رنگی از خودتان. خاکستری‌ای که برمی‌دارید در حالت روشن درست و در حالت تیره نادرست است — و نامرئی نادرست: نقاشی همچنان نقاشیِ یک صفحهٔ روشن است.
وقتی ردیف‌ها از بلن دای جعبه بیشترند
جعبه‌ای که برای شش ردیف کشیده‌اید، همین که یک جدول واقعی پشتش بنشیند صد ردیف خواهد داشت؛ پس هر فهرستی باید به این پرسش پاسخ دهد. فهرست کشویی محتوایی که جا نمی‌شود روی خودِ جعبه همان‌جاست:
- نشان داده شود — بیرون می‌زند کاری است که یک نقاشی می‌کند و برای کارتی با سایه درست است. روی یک فهرست همین است که ردیف‌ها را روی صفحه‌شمار و هر چه زیر آن است می‌ریزد.
- پنهان شود آن‌ها را می‌بُرد. آنگاه ردیف هفتم دست‌نیافتنی است، که به‌ندرت منظور کسی بوده.
- با پیمایش در دسترس باشد پاسخِ یک فهرست است: جعبه به همان اندازه‌ای که کشیده‌اید می‌ماند و درونش پیمایش می‌شود. فهرستی که کوتاه باشد اصلاً نوار پیمایش نشان نمی‌دهد.
سپس بگویید در چه جهتی پیمایش شود. همین که با پیمایش در دسترس باشد را برگزینید، فهرست کشویی دوم، جهت پیمایش، پیدا می‌شود:
- هر دو جهت چیزی است که یک فهرست می‌خواهد.
- عمودی — واژه‌ها می‌شکنند چیزی است که یک ستون نوشته می‌خواهد. محوری که پیمایش نمی‌شود بریده می‌شود، و بریدنِ افقی دقیقاً همان است که یک بند را وامی‌دارد سطر بشکند نه آنکه از کنارهٔ جعبه بیرون بزند. هرجا جعبه‌ای میدان متنی بلندی دارد، سراغ همین بروید.
- افقی — هر ردیف در یک خط می‌ماند چیزی است که یک جدول پهن از ستون‌ها می‌خواهد، تا ردیف، ردیف بماند.
این فهرست کشویی روی قاب است. یک تکه متن چیزی از آنِ خود ندارد که برابرش بریده شود، چون به اندازهٔ واژه‌هایش بزرگ می‌شود — پس قابی به اندازه‌ای که یادداشت باید بگیرد بکشید، متن را درونش بگذارید، و همان قاب را روی با پیمایش در دسترس باشد و عمودی — واژه‌ها می‌شکنند بگذارید.
اینکه هر بار چقدر دید ه می‌شود، همان اندازه‌ای است که قاب را کشیده‌اید. بلندتر کردن خود متن چیزی را که می‌بینید عوض نمی‌کند، چون قاب است که دید را نگه داشته. گفت‌وگوی جزئیاتِ نمونهٔ میز پشتیبانی دقیقاً همین است، روی میدان یادداشتِ دوهزار نویسه‌ای.
دو کار که ارزش دارد هم‌زمان انجام دهید:
- جعبه را از بالا و پایین سنجاق کنید در مهارها، تا پنجرهٔ بلندتر ردیف بیشتری نشان دهد نه فضای خالی بیشتر زیر آن‌ها.
- سرستون را بیرون جعبه نگه دارید. سرستونی که به‌عنوان نخستین ردیفِ خود فهرست کشیده شود همراه ردیف‌ها پیمایش می‌شود و از دید می‌رود؛ اگر قابی جدا بالای آن باشد سرِ جا می‌ماند. تختهٔ نمونهٔ میز پشتیبانی دقیقاً همین کار را می‌کند.
یک ردیف بکشید، به‌ازای هر رکورد یکی بگیرید
ردیف‌های یک جدول بیست جعبه‌ای نیستند که کشیده باشید. یکی بکشید و بگویید روی چه چیزی تکرار شود:
۱. رکوردها را بار کنید. در دستگیرهٔ بار شد صفحه بنویسید
loadRecords("par_account", "accounts") — نام جدول، و میدان وضعیتی که ردیف‌ها در آن بنشینند.
آرگومان سوم می‌گوید حداکثر چند تا، یا پرسش کامل‌تری می‌کند:
{ top: 20, where: { par_status: "Open" }, orderBy: "par_name" }. ببینید
خواندن و نوشتن رکوردها.
۲. بگویید چه چیزی تکرار می‌شود. ردیفی را که کشیده‌اید برگزینید و یکی از این‌ها به‌ازای هر را
با state.accounts پر کنید.
۳. بگویید هر خانه چه نشان می‌دهد. نوشته‌ای درون ردیف را به row.par_name مقید کنید — row همان
رکورد است. rowIndex جای آن است، از صفر.
دو نکته دربارهٔ جعبهٔ پیرامون ردیف:
- باید فرزندانش را روی هم بچیند — چیدمان خودکار را روشن کنید. هر رونوشتِ جعبه‌ای که جای‌گذاری کرده‌اید همان‌جا می‌ماند، پس هر چهل‌تا روی اولی می‌افتند. اگر فراموش کنید، ذخیره همین را می‌گوید.
- هرچه دیگر در آن جعبه هست دست‌نخورده می‌ماند. ردیف سرآیندی که بالای بدنه کشیده‌اید تکرار نمی‌شود، چون تکرار روی ردیف است نه روی جعبه.
یک کنترل را هم به همان آسانیِ یک جعبه می‌توان تکرار کرد — یک جعبهٔ تیک به‌ازای هر ردیف، همان
راهی است که کسی چند رکورد را برمی‌گزیند، و جعبهٔ تیکی معمولی است با row.id در دستگیره‌اش.
یک محدودیت که بهتر است پیش از برخورد بدانید: تکرار درون تکرار نمی‌شود. آنگاه row در یک جا دو
معنی می‌داشت، پس ذخیره تکرار درونی را رد می‌کند و می‌گوید کدام.
کدام ردیف برگزیده است
دو نیمه، و هیچ‌کدام بیش از یک سطر نیست:
۱. بگویید کدام — ویژگی برگزیدهی هر ردیف را به یک مقایسه مقید کنید، مانند
row.id == state.picked. این یک قید است نه چیزی که روشنش کنید، و همین است که ردیف پیشین را در
همان لحظه از برگزیدگی درمی‌آورد: با تغییر وضعیت، هر ردیف دوباره به پرسش پاسخ می‌دهد.
۲. هنگام فشرده‌شدن بنویسیدش — setState("picked", "…") در دستگیرهٔ فشرده‌شد همان ردیف.
اگر صیغهٔ برگزیدهی ردیف را هم کشیده باشید، همان قید آن را نیز روشن می‌کند. اینجا یک مفهومِ «برگزیده» هست، نه دو: رنگ و صیغه هر دو یک پاسخ را می‌خوانند.
پر کردن ردیف، و منویی برای تلفن همراه
هر شیئی درون یک قاب با چیدمان خودکار به همان طولی است که کشیده‌اید — پس یک ردیف هرگز نمی‌تواند از آنچه درونش است باریک‌تر شود، و روی تلفن همراه از کناره بیرون می‌زند. شیء را انتخاب کنید و در زبانهٔ گرافیک، زیر تغییر اندازه، پر کردن ردیف (یا پر کردن ستون) را تیک بزنید: هر طولی را که بقیه باقی می‌گذارند می‌گیرد، و وقتی جا کمتر است پس می‌دهد.
نوار بالای یک وب‌سایت همین‌طور کشیده می‌شود: نام سایت ردیف را پر می‌کند، پس پیوندها در هر پهنایی به لبهٔ دیگر چسبیده می‌مانند.
فرمی به پهنای کامل گوشی، و کارتی روی رایانه. قابی را درون یک چیدمان خودکار عمودی انتخاب کنید و زیر تغییر اندازه برایش بیشینهٔ پهنا بگذارید: ستون آن را در صفحهٔ باریک سراسر می‌کشد و در صفحهٔ پهن‌تر در همان چند پیکسل می‌ایستد و در وسط می‌نشیند. کارت ورود یا فرم تماس این‌گونه یک بار کشیده می‌شود — نه یک بار برای هر پهنا. خالی یعنی بی‌حد.
سه کارت کنار هم روی رایانه، و زیر هم روی گوشی. یک چیدمان خودکار افقی را انتخاب کنید و زیر چیدمان خودکار گزینهٔ شکستن به چند سطر را تیک بزنید. هر جزء ردیف از همان پهنایی شروع می‌کند که کشیده‌اید؛ وقتی صفحه برای همه باریک است، آن‌هایی که دیگر جا نمی‌شوند به سطر بعد می‌روند. به هر کارت پر کردن ردیف هم بدهید تا باقی‌ماندهٔ سطرش را هم پر کند — سه کارت روی رایانه کنار هم‌اند، تبلت سومی را به سطری جدا می‌برد، و گوشی در هر سطر یکی می‌گذارد. یک بار کشیده می‌شود: نسخهٔ دومی از کارت‌ها نیست که پنهانش کنید. بوم همان یک سطری را نشان می‌دهد که کشیده‌اید؛ شکستن کاری است که صفحهٔ باریک‌تر با آن می‌کند.
برای تلفن همراه، هم پیوندها و هم یک دکمهٔ منو بکشید، و به هر کدام یک اتصال نمایش روی پهنای صفحه بدهید:
screen.width >= 720 روی پیوندها
screen.width < 720 روی دکمهٔ منو
screen.width پهنای جعبه‌ای است که صفحه در آن نمایش داده می‌شود، و با تغییر اندازهٔ پنجره تغییر
می‌کند. دکمهٔ منو را در ابتدای نوار بگذارید و وادارش کنید openStartDrawer("Site menu") را اجرا
کند؛ Site menu یک کارت هم‌پوشان است با همان پیوندها — پس منو از همان سمتی باز می‌شود که دکمه‌اش
آنجاست (چپ در انگلیسی، راست در فارسی). به برگزیدهٔ هر پیوند screen.name == "Home" بدهید و به
ردیفی که در آن است رنگ اشاره و برگزیده، تا منو جای شما را نشان دهد. نمونهٔ
portal-pages-and-navigation یکی برایتان کشیده است.
نوار را یک بار بکشید. نواری که روی هر صفحه هست یک مؤلفه است: آن را بکشید، مؤلفه‌اش کنید و روی
هر صفحه نمونه‌ای از آن بگذارید — اصل را عوض کنید و همهٔ صفحه‌ها دنبالش می‌روند. چون پیوند
screen.name را می‌خواند، لازم نیست به نمونه گفته شود روی کدام صفحه است.
قابی درون یک قاب دستی (چیدمان خودکار خاموش) به‌جای آن قیدها دارد — آن را به لبه‌ها سنجاق کنید تا با تغییر اندازهٔ قاب فاصله‌اش را از آن‌ها نگه دارد. درون چیدمان خودکار، چیدمان تصمیم می‌گیرد هر چیز کجا برود، پس تغییر اندازه تنها پرسش باقی‌مانده است.
تولید صفحه‌ها با هوش مصنوعی
AI را بزنید، برنامه را در یک جمله یا یک بند توصیف کنید و Generate (یا Ctrl/⌘+Enter) را بزنید. برای نمونه: «یک برنامهٔ سفارش‌ها با صفحهٔ خانه، فهرست سفارش‌ها و فرم سفارش تازه، که همه یک نوار بالا و یک منوی کناری مشترک دارند.» آنچه برمی‌گردد به بوم افزوده می‌شود. چیزی که خودتان کشیده‌اید جایگزین نمی‌شود.
آنچه می‌گیرید یک برنامه است، نه عکسی از آن:
- صفحه‌ها قاب‌هایی‌اند که صفحه برچسب خورده‌اند و با واژه نام گرفته‌اند، پس دکمه‌هایی که میان آن‌ها جابه‌جا می‌کنند در پیش‌نمایش کار می‌کنند.
- کنترل‌ها خودِ کنترل‌اند. جعبهٔ متن همان جعبهٔ متن سکوست و تاریخ همان انتخابگر تاریخ. مستطیل‌هایی با واژه‌ای رویشان نیستند.
- کارها انجام می‌شوند. دکمه‌ها رسیدگی‌کنندهٔ کلیک دارند، جعبهٔ متن در وضعیت صفحه می‌نویسد، و فهرست می‌تواند هنگام باز شدن صفحه‌اش رکوردها را بار کند.
- هر چه روی بیش از یک صفحه باشد یک مؤلفه است. نوار بالا، منوی کناری یا پانویس یک بار کشیده می‌شود، روی قفسهٔ زیر صفحه‌ها، و روی هر صفحه به‌صورت یک نمونه گذاشته می‌شود. اصل را عوض کنید و همهٔ صفحه‌ها دنبالش می‌روند. اگر پاسخ همان نوار را باز هم روی دو صفحه بکشد، طراح خودش آن را یک مؤلفه می‌کند و پنجره می‌گوید کدام بخش را یکی کرده است.
بخواهید «یک مؤلفهٔ کارت» و دقیقاً همان را می‌گیرید: مؤلفه‌ای روی قفسه، آماده برای گذاشتن از Components.
برنامه برای رایانهٔ رومیزی کشیده می‌شود مگر بگویید تلفن. برنامهٔ تلفن بخواهید تا صفحه‌هایش اندازهٔ تلفن باشند. نوار بالای آن دکمهٔ منویی دارد که ناوبری را در یک کشو باز می‌کند، و صفحهٔ جزئیات به جای آن یک پیکان بازگشت دارد.
نام جدول را بیاورید تا هوش مصنوعی ستون‌های واقعی‌اش را به کار ببرد. در Parsware for Power Apps، وقتی توصیف شما جدولی را نام می‌برد، با نامش (expenses) یا نام منطقی‌اش (par_expense)، پیش از کشیدن، ستون‌های آن جدول به هوش مصنوعی گفته می‌شود. آنگاه فهرست ستون‌هایی را نشان می‌دهد که جدول واقعاً دارد، نه ستون‌های حدسی.
پس از آن، چیزهایی را که هوش مصنوعی نمی‌توانست بداند بررسی کنید: نام جدول‌هایی که فهرست از آن‌ها بار می‌کند، و واژه‌های روی صفحه‌ها. پنجره هر چیز نیمه‌کاره‌ای را که یافته نام می‌برد، مانند دکمه‌ای که کلیکش هنوز کاری نمی‌کند یا فهرستی که چیزی آن را بار نمی‌کند. سپس پیش‌نمایش را بزنید. صفحهٔ تولیدشده نقطهٔ شروعی است که مانند هر نقاشی دیگری ویرایشش می‌کنید.
پیش از دست کشیدن خودش را درست می‌کند، همان‌گونه که در گزارش. وقتی چیز قابل‌استفاده‌ای برنگردد، پاسخ با نام بردن از مشکل تا سه بار به مدل برگردانده می‌شود. پاسخی که فقط یک عکس است، بی هیچ صفحه و هیچ مؤلفه‌ای، قابل‌استفاده به شمار نمی‌آید.
اگر دکمهٔ AI نیست، هوش مصنوعی اینجا تنظیم نشده است. در سکو، مدیر یک بار یک ارائه‌دهندهٔ هوش مصنوعی وصل می‌کند (اتصال یک ارائه‌دهندهٔ هوش مصنوعی). در Parsware for Power Apps، دکمه از اعتبارهای AI Builder خودِ محیط شما استفاده می‌کند.
آنچه یک برنامهٔ تولیدشده برایتان انجام می‌دهد. عنوان نوار بالا جای خالی را می‌گیرد، پس دکمه‌هایش در هر پهنایی که نوار گذاشته شود، حتی کنار منوی کناری، در انتهای نوار می‌نشینند. فهرست زیر نوار درون خودش پیمایش می‌شود، نه کل صفحه؛ و روی رایانهٔ رومیزی ردیف‌هایش مانند جدول خوانده می‌شوند. نمادها با نامشان از مجموعهٔ پلتفرم برگزیده می‌شوند، پس دکمهٔ نمادی نماد واقعی را در میانه دارد، بی حاشیه، و فیلد نماد برای عوض کردنش. هر مؤلفه هر ویژگی‌ای را که می‌خواند اعلام می‌کند.
آنچه AI کشیده را هم مرتب می‌کند. بخش‌هایی که در یک ستون کنار هم کشیده شده‌اند، ردیفی درون آن ستون می‌شوند، پس کارت فاصله از لبه و فاصله‌های میان بخش‌هایش را نگه می‌دارد. ردیف‌های فهرست روی رایانهٔ رومیزی گوشه‌دار و بی حاشیهٔ جداگانه‌اند: فهرست آن‌ها را یکی‌درمیان رنگ می‌کند و ردیف زیر نشانگر را روشن می‌کند. متن یا کنترل‌هایی که مستقیم زیر نوار گذاشته شده‌اند بدنه‌ای با فاصله از لبه می‌گیرند. فرم روی رایانهٔ رومیزی ستونی خوانا است، نه به پهنای پنجره. دکمه‌ای در نوار مشترک که یک صفحه به کارش نمی‌برد، مانند «بازگشت» در صفحهٔ نخست، در آن صفحه پنهان می‌شود. تصویر در ویژگی‌هایش شعاع گوشه دارد و بوم آن را نشان می‌دهد: آواتار گرد است چون شعاعش نصف اندازه‌اش است.
پنجره فقط با دکمهٔ «بستن» خودش بسته می‌شود. کلیک کنار آن یا Escape دیگر توصیف شما را دور نمی‌ریزد.
صفحه‌ای که منتظر داده‌اش است این را نشان می‌دهد. تا فهرستی بار شود یا رکوردی ذخیره شود، دایره‌ای در میانهٔ صفحه می‌چرخد. در Parsware برای Power Apps، کاری که صفحه نتوانست انجام دهد به‌صورت پیامی شناور روی صفحه نشان داده می‌شود و می‌رود، نه نواری که برنامه را پایین می‌راند.
آنچه هنوز اینجا نیست
عمداً، و هر کدام در نسخهٔ خودش:
- نماهای ذخیره‌شده، و آن بخش‌هایی از پالایه که یک خط نیستند. یک صفحه یک جدول را نام می‌برد، با جفت‌های برابری، جفت‌های «شامل»، یک مرتب‌سازی و یک صفحه — ببینید نمایش یک فهرست، صفحه‌به‌صفحه. نمی‌تواند یکی از نماهای ذخیره‌شدهٔ سکو را نام ببرد، پس پالایه‌ای که آنجا کشیده‌اید اینجا دوباره کشیده می‌شود. و هیچ یایی، هیچ بازه‌ای و هیچ تودرتویی نیست: آنجا جایی است که پالایه دیگر یک خط در دستگیره نیست و طراح پرس‌وجو می‌شود.
- جمع و میانگین. یک صفحه ردیف‌ها را می‌شمارد — کاشی‌های نمونهٔ داشبورد همین‌اند — اما نمی‌تواند ستونی را جمع بزند یا بر پایهٔ آن گروه‌بندی کند.
- کنترل جست‌وجوگر رکورد. بقیه رسیده‌اند: شبکه و فرم سریع همان کنترل نمای جدول یا فرم هستند
(گذاشتن یک داشبورد روی صفحه‌ای کشیده‌شده)، گفت‌وگو یک کارت پوشانه
است، زبانه‌ها یک مقدار برگزیده و یک بستِ نمایش برای هر پنل اند، و جابه‌جایی میان صفحه‌ها
navigateاست. آنچه هنوز کنترل خودش را ندارد گزینگر رکورد است — کتابخانهٔ مؤلفه‌ها یکی کشیده دارد که نمونهٔ میز پشتیبانی آن را می‌گذارد و حالت خودش را به آن می‌دهد. - جاگاه‌ها (slots). یک مؤلفه ویژگی می‌گیرد و رویداد برمی‌انگیزد؛ آنچه هنوز نمی‌تواند این است که جایی خالی بگذارد تا صفحه‌ای که آن را می‌گذارد پُرش کند.
- صفحه‌کلید، و هر چیزی روی زمان‌سنج. هشت رویداد هست، و تنها یکی از آن‌ها دربارهٔ زندگی خود صفحه است: بارگذاری.
زبانه فقط آنچه را امروز معنا دارد پیش می‌گذارد. کنترلی که کاری نمی‌کند، حرکتی به شما یاد می‌دهد که کاری نمی‌کند.
عیب‌یابی
- زبانهٔ صفحه می‌گوید شیء من بخشی از گرافیک است. — خط‌ها، شکل‌ها و مسیرها معنایی برای دادن ندارند. قاب‌ها، متن‌ها و تصویرها آن‌هایی‌اند که می‌توانید برایشان پاسخ بدهید.
- «خودِ صفحه» پیشنهاد نمی‌شود. — یک شیء متنی یا یک تصویر انتخاب کرده‌اید. تنها یک قاب می‌تواند خودِ صفحه باشد.
- کنترل من هیچ شباهتی به جعبه‌ای که کشیدم ندارد. — نکته همین است: کنترل ظاهر خودش را می‌آورد. تنها جا و اندازه‌اش از طرح شما می‌آید. اگر رنگ‌هایی را که برگزیده بودید می‌خواهید، آن را جعبه نگه دارید و به‌جایش عنصرِ یک دکمه را به آن بدهید.
- «کشیدن یک حالت» ناپدید شده است. — شیء یک کنترل است، و کنترل خودش می‌داند در هر حالت چگونه دیده شود.
- ذخیره خاموش است. — از آخرین ذخیره چیزی تغییر نکرده است.
- پیش‌نمایش خالی است. — چیزی به عنوان صفحه نشانه‌گذاری نشده، یا قابِ صفحه چیزی درونش ندارد. یک قاب بکشید، صفحه علامتش بزنید و چیزی درونش بگذارید.
- حالتم کاری نمی‌کند. — یا رونوشت با اصل یکسان است (تفاوتی برای نگه‌داشتن نیست)، یا فقط جابه‌جایش کرده‌اید که حالت عمداً نادیده‌اش می‌گیرد. رنگی را عوض کنید.
- ذخیره می‌گوید حالت ساختار را عوض می‌کند. — رونوشت شیءهای بیشتر یا کمتری از اصل دارد. بالا را ببینید.
- شیئی که از آن رونوشت گرفته بودم نیست. — ذخیره همین را می‌گوید: حالتی که چیزی برای حالت‌بودن ندارد چیزی نمی‌کشد. رونوشت را حذف کنید، یا شیء را دوباره بکشید.
- صفحه‌ام در برنامه پیدا نم یشود. — صفحه باید در برنامه گذاشته شود؛ بازکردن صفحهٔ استودیو در یک برنامه را ببینید.
- طرحم درست است اما صفحه ساده به نظر می‌رسد. — ببینید هر شیء روی چه تنظیم شده است. شیئی که خالی مانده بخشی از گرافیک است؛ کشیده می‌شود، اما چیزی دربارهٔ محتوای صفحه نمی‌گوید.
سناریوهای مرتبط
- کاری کنید صفحه واکنش نشان دهد — وضعیت و اتصال‌ها، تا طرح کاری انجام دهد.
- ساختن صفحهٔ استودیو.
- بازکردن صفحهٔ استودیو در یک برنامه.