زبان سلام
ویرایشگر آنلاین

کتابخانه‌ی استاندارد · گرافیک و بازی

رابط کاربری gui.ui

زمان اجرای رابط بومی: یک صفحه‌ی سلام را در پنجره‌ای بومی نشان می‌دهد که خود سلام می‌کشد، همان‌گونه که مرورگر همان صفحه را نشان می‌دهد، با چیدمان، متن فارسی، رویدادها و کنترل‌های فرم.

واردسازی رابط گرافیکی.رابط کاربری

نام آرگومان‌ها شناسه‌ی خود کد است و معادل فارسی ندارد؛ گونه‌ها، کلیدواژه‌ها و نام بسته‌ها با معادل فارسی نوشته می‌شوند.

در این صفحه
  1. پنجره‌ای از یک صفحه
  2. نگاره بی‌پنجره
  3. صفحه‌های ترجمه‌شده
  4. فقط آنچه عوض شده دوباره اجرا می‌شود
  5. گونه‌ها
  6. تابع‌ها

این بسته یک صفحه را در پنجره‌ای بومی اجرا می‌کند که خود سلام آن را می‌کشد. کامپایلر یک صفحه: را به همان سند HTML تبدیل می‌کند که برای وب می‌نویسد، با CSS صفحه در یک <style> و ویژگی‌های رویداد مانند onclick="add()" که نام تابع‌های سلام را می‌برند. رابط کاربری یک موتور مرورگر کوچک برای همین خروجی است: سند را تجزیه می‌کند، سبک‌ها را با سی اس اس حساب می‌کند (برگه‌ی سبک پیش‌فرض مرورگر، قاعده‌های hover، focus، active و media)، جعبه‌ها را با جعبه سی اس اس می‌چیند (بلوکی، flex و جای‌گذاری مطلق)، متن را با حروف‌چینی می‌شکند و شکل می‌دهد (عنصرهای درون‌خطی، دوسویگی، شکل‌دهی فارسی، نشانه‌ی فهرست)، با نقاشی می‌کشد و با پنجره ها نشان می‌دهد.

برنامه رسیدگی‌کننده‌هایش را با ثبت رسیدگی ثبت می‌کند و اجرا را با تابعی صدا می‌زند که صفحه را برمی‌گرداند. پس از هر رسیدگی تابع نما دوباره اجرا می‌شود؛ سند تازه با سند پیشین بر پایه‌ی جایگاه، برچسب، id و key جفت می‌شود تا hover، تمرکز، جابجایی پیمایش، نشانگر متن و مقدارهای نوشته‌شده در ورودی‌ها بمانند، و فقط بخش‌هایی از پنجره که عوض شده‌اند دوباره کشیده می‌شوند. اجرای سند یک سند ثابت را نشان می‌دهد. نگاره صفحه را بی‌پنجره می‌کشد، برای آزمون و تصویر.

کنترل‌های فرم را خود زمان اجرا می‌کشد و از CSS صفحه پیروی می‌کنند: دکمه، ورودی‌های متن، گذرواژه، عدد، ایمیل و جستجو با نشانگر، گزینش، کلیپ‌بورد و واگرد، جعبه‌ی تیک، گروه‌های رادیویی، بازه، ناحیه‌ی متن، فهرست کشویی با فهرست بازشو، progress، meter، details با summary، و برچسب‌هایی که کنترلشان را متمرکز یا تیک می‌کنند. پیوند به نشانی‌های http و https در مرورگر کاربر باز می‌شود و پیوند نسبی صفحه‌ی دیگری را باز می‌کند که با صفحه برنامه ثبت شده است.

نکته‌ها

  • تغییرهایی که با با شناسه داده می‌شوند (متن، کلاس، ویژگی) تا اجرای بعدی نما می‌مانند؛ منبع درستی نماست. مقدارهای نوشته‌شده در ورودی‌ها تا وقتی می‌مانند که نما ویژگی value دیگری بنویسد.
  • قلم‌ها از پوشه‌های قلم سیستم می‌آیند، مگر آن‌که برنامه پیش از نمایش نخستین صفحه قلم‌های خودش را با افزودن پرونده قلم یا افزودن پوشه قلم بیفزاید؛ این کار خروجی را در هر رایانه یکسان هم می‌کند.
  • با SALAM_WINDOW_BACKEND=headless پنجره در حافظه کشیده می‌شود. اگر SALAM_UI_SCRIPT نام یک پرونده‌ی متنی باشد، اجرا گام‌های آن را، هر خط یک گام، دنبال می‌کند و در quit یا پایان پرونده برمی‌گردد: click SELECTOR، dblclick SELECTOR، hover SELECTOR، press SELECTOR، release SELECTOR، move X Y، key NAME (مانند Tab، Enter، ctrl+a، shift+Tab)، type TEXT، ime TEXT و commit TEXT (نوشتن با روش ورودی)، drag X1 Y1 X2 Y2، tripleclick SELECTOR، sel (گزینش، نشانگر و پیمایش متن کنترل دارای تمرکز را چاپ می‌کند)، scroll SELECTOR DY، resize W H، wait MS، dump (برچسب، شناسه، متن و جعبه‌ی هر عنصر را چاپ می‌کند)، hash، focus، reveal SELECTOR (عنصر را مانند نمایان کردن به دید می‌آورد)، shot FILE.png و quit. گزینشگرها گزینشگر CSS هستند و خط‌هایی که با # یا // آغاز می‌شوند نادیده گرفته می‌شوند. بی پرونده‌ی گام، اجرای بی‌سر یک بار می‌کشد و برمی‌گردد.
  • ویژگی‌های transform، transform-origin، translate، rotate و scale در CSS روی کشیدن، آزمون برخورد و کشیدن دوباره اثر دارند و گذارهای transform با ساعت پویانمایی اجرا می‌شوند. filter، backdrop-filter، text-shadow، outline-offset و کادرهای گرد خط‌چین یا نقطه‌چین مانند مرورگر کشیده می‌شوند.
  • جعبه‌ها همان‌گونه که Chromium می‌کشد کشیده می‌شوند: هر لایه‌ی پس‌زمینه با شعاع مناسب به جعبه‌ی background-clip خود بریده می‌شود و اندازه، جای و کاشی‌شدنش از جعبه‌ی background-origin می‌آید، پس کاشی گرادیان در ناحیه‌ی کادر تکرار می‌شود و پس‌زمینه‌ی دوگانه‌ی padding-box, border-box کادر گرادیانی با گوشه‌های گرد می‌کشد. border-image گرادیان یا تصویر را نه‌برشی می‌کشد، کادر double دو خط دارد، فاصله‌ی خط‌چین و نقطه‌چین مانند Chromium است و سایه‌ی درونی در جعبه‌ی padding می‌ماند. backdrop-filter آن‌چه را پشت عنصر تا ریشه‌ی پس‌زمینه‌اش (نزدیک‌ترین نیایی که opacity، پالایه یا پالایه‌ی پس‌زمینه دارد) کشیده شده با لبه‌های آینه‌ای می‌خواند و با opacity عنصر کم‌رنگ می‌شود؛ آسیبی که به عنصر پالایه‌دار برسد کل آن را دوباره می‌کشد. مرزهای inset، outset، groove و ridge با رنگ‌های تیره‌تر و روشن‌ترِ کرومیوم کشیده می‌شوند و groove و ridge دو نیمه دارند. جدولی با border-collapse: collapse هر لبه‌ی مشترک میان خانه‌ها، ردیف‌ها، گروه‌های ردیف، ستون‌ها و جدول را با قاعده‌های کشمکش CSS حل می‌کند و آن را تکه به تکه روی پس‌زمینه‌ی خانه‌ها می‌کشد؛ hidden لبه را برمی‌دارد و گوشه‌ها از آنِ مرز برنده است.
  • ورودی‌های متنی و ناحیه‌های متن، متن در حال نوشتن روش ورودی را با زیرخط کنار نشانگر نشان می‌دهند، با پیمایش نشانگر را در دید نگه می‌دارند (ناحیه‌ی متن با چرخ موشی هم پیمایش می‌شود و با wrap="off" به پهلو)، نشانگر را در متن آمیخته‌ی فارسی و انگلیسی به ترتیب دیداری جابجا می‌کنند و با موشی، Shift همراه کلیدهای جهت، دوبار کلیک (یک واژه) و سه بار کلیک (یک خط) گزینش می‌کنند.
  • پیمایش فهرست‌های بلند ارزان است: پیمایش فقط جعبه‌ها را جابجا می‌کند، کشیدن و کشیدن دوباره هر چیزی بیرون از ناحیه‌ی دیدنی را کنار می‌گذارد و عنصرهایی که بیرون از صفحه می‌مانند مقایسه نمی‌شوند. فهرستی با ۱۰۰۰۰ ردیف هنوز یک بار کامل چیده می‌شود.
  • شبکه‌ی CSS و جدول‌ها با جعبه سی اس اس به همان شیوه‌ی Chrome چیده می‌شوند: اندازه‌گذاری ردیف‌ها، ناحیه‌های نام‌دار و جای‌دهی خودکار برای شبکه؛ پهنای ستون از محتوا، colspan و rowspan، عنوان، گروه سرآیند و پاورقی، فاصله‌ی مرزها، مرزهای ادغام شده و تراز عمودی خانه‌ها برای جدول. در صفحه، جدول، سرصفحه، اصلی، پاورقی، ردیف، سلول و عنوان جدول همان جدول خروجی HTML را می‌سازند. جعبه‌های inline-table، inline-grid و inline-flex مانند یک بلوک درون‌خطی در سطر می‌نشینند، به اندازه‌ی محتوای خود، و مانند کرومیوم روی خط پایه‌ی نخستین ردیف یا نخستین فرزند خود تراز می‌شوند.
  • ویژگی style مانند سبک درون‌خطی در مرورگر، بدون توجه به ویژگی‌مندی بر همه‌ی قاعده‌های نویسنده پیروز می‌شود و سبک‌های زمان اجرای صفحه‌ی ترجمه‌شده هم همان جایگاه را دارند، پس مقداری که کد سلام می‌گذارد هیچ‌گاه زیر یک گزینشگر پنهان نمی‌شود. بلوک‌های درون‌خطی، تصویرها و کنترل‌ها در جعبه‌ی خط از vertical-align پیروی می‌کنند: baseline، sub، super، middle، text-top، text-bottom، طول‌ها و درصدها آن‌ها را نسبت به خط پایه‌ی والد جابه‌جا می‌کنند و top و bottom آن‌ها را با جعبه‌ی خط هم‌تراز می‌کنند که برای جا دادنشان بزرگ می‌شود؛ جایگاه‌ها همان جایگاه‌های کرومیوم است. background-clip: text پس‌زمینه را فقط از درون نویسه‌های عنصر و فرزندانش می‌کشد. مرزهای نقطه‌چین ۳ پیکسل و باریک‌تر با نقطه‌های مربعی کشیده می‌شوند و در جدول ادغامی، پهن‌ترِ دو لبه‌ای که در یک راستا هستند گوشه‌ی میانشان را می‌گیرد، مانند کرومیوم.
  • درخت چینش میان اجراهای دوباره‌ی نما و سبک‌دهی دوباره نگه داشته می‌شود: هر عنصر جعبه‌ی چینش خود را نگه می‌دارد، فقط جعبه‌هایی که سبک، متن، فرزندان یا محتوایشان تغییر کرده دوباره چیده می‌شوند و بقیه از حافظه‌ی نهان می‌آیند. کلیکی که یک برچسب را در صفحه‌ای با ۲۰۲ عنصر تغییر می‌دهد حدود ۶۰ درصد دستور چینش کمتری از چینش کامل اجرا می‌کند.
  • ظرف پیمایشی با بلندی یا بیشینه‌ی بلندی ثابت و دست‌کم ۲۰۰ فرزند بلوکی فقط سطرهای نزدیک بخش دیدنی (یک صفحه بالا و پایین) را می‌چیند و برای بقیه بلندی اندازه‌گرفته‌شده‌شان را، یا تا دیده نشده‌اند میانگین سطرهای اندازه‌گرفته‌شده را، به کار می‌برد. پیمایش، کلیک، تمرکز با کلید Tab و سطرهای کلیددار each مانند پیش کار می‌کنند؛ سطرهای بیرون از پنجره تا به دید نیایند جعبه ندارند، ولی مستطیل جای برآوردی آن‌ها را می‌دهد، تمرکز و نمایان کردن آن‌ها را به دید می‌آورند و گام اسکریپتی که روی چنین سطری کلیک یا درنگ می‌کند، مانند ابزارهای آزمون مرورگر، نخست آن را به دید می‌آورد. در فهرستی با ۱۰۰۰۰ سطر نخستین قاب به جای حدود ۶۰۰ میلی‌ثانیه حدود ۷۰ تا ۱۰۰ میلی‌ثانیه و هر قاب پیمایش به جای حدود ۱۰۰ میلی‌ثانیه حدود ۱۵ تا ۱۸ میلی‌ثانیه طول می‌کشد.

پنجره‌ای از یک صفحه

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

gui-ui-guide-run.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی رشته

ناپایا count := 0
ناپایا name := ""

تابع page(): رشته:
    برگشت `<!doctype html><html lang="en" dir="ltr"><head><title>Counter</title><style>button:hover{background:#dde}</style></head><body><h1 id="count">Count ` + count + `</h1><button id="add" onclick="add()">Add</button><input id="name" oninput="named(event)" placeholder="Name"><p>Hello ` + رشته.جایگزینی(name، "<"، "&lt;") + `</p><a href="https://salamlang.ir">site</a> <a href="/about">about</a></body></html>`
پایان

تابع about(): رشته:
    برگشت `<!doctype html><html><head><title>About</title></head><body><p>Made with Salam.</p><a href="/">back</a></body></html>`
پایان

تابع ریشه:
    رابط کاربری.ثبت رسیدگی("add"، (): count++ پایان)
    رابط کاربری.ثبت رسیدگی("named"، ():
        ev := رابط کاربری.رخداد جاری()
        name = ev.مقدار
        سرچاپ ev.گونه رخداد، ev.هدف، ev.متن، ev.کلید، ev.تیک خورده، ev.دکمه موشی، ev.کلیدهای کمکی، ev.ایکس، ev.ایگرگ، ev.جابجایی افقی، ev.جابجایی عمودی
    پایان)
    رابط کاربری.صفحه برنامه("/"، (): برگشت page() پایان)
    رابط کاربری.صفحه برنامه("/about"، (): برگشت about() پایان)
    رابط کاربری.تنظیم بازکننده نشانی((url: رشته):
        سرچاپ "would open"، url
        برگشت درست
    پایان)
    رابط کاربری.تنظیم ناوبر((url: رشته): برگشت url برابر "/never" پایان)
    اگر count بزرگتر 0:
        رابط کاربری.اجرا((): برگشت page() پایان)
        رابط کاربری.اجرای سند(`<p>A fixed page</p>`)
        رابط کاربری.اجرای سند با(`<p>A fixed page</p>`، رابط کاربری.گزینه‌ها { عنوان = "Fixed"، پهنا = 400.0، بلندی = 300.0 })
        رابط کاربری.تازه سازی()
        سرچاپ رابط کاربری.باز کردن نشانی("https://salamlang.ir")
    پایان
    رابط کاربری.اجرا با((): برگشت page() پایان، رابط کاربری.گزینه‌ها { عنوان = "Counter"، پهنا = 480.0، بلندی = 320.0، تغییر اندازه پذیر = درست، پس زمینه = "#ffffff"، بی سر = درست، مقیاس = 1.0، گام های آزمایشی = "click #add\nclick #add\nquit" })
    سرچاپ "count"، count، "opened"، رابط کاربری.نشانی های باز شده().طول()
پایان
خروجیcount 2 opened 0

نگاره بی‌پنجره

یک کارت فارسی را در تراکم عادی و دوبرابر روی بوم بکش، به شکل PNG ذخیره کن و زمان هر مرحله را بسنج. کشیدن صفحه‌ای با ۲۰۰ عنصر در اندازه‌ی ۱۰۲۴ در ۷۶۸ روی یک هسته‌ی رومیزی حدود ۰٫۱ میلی‌ثانیه تجزیه، ۲ میلی‌ثانیه سبک، ۲۰ میلی‌ثانیه چیدمان و ۲۳ میلی‌ثانیه نقاشی می‌گیرد؛ تغییر hover فقط کارتی را که موشی رویش است دوباره می‌کشد.

gui-ui-guide-render.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی سیستم عامل
واردسازی مسیر پرونده

تابع ریشه:
    _a := رابط کاربری.افزودن پرونده قلم("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf")
    _b := رابط کاربری.افزودن پوشه قلم("/usr/share/fonts/truetype/noto")
    doc := `<!doctype html><html lang="fa" dir="rtl"><head><style>.card{border:2px solid #36c;border-radius:10px;padding:12px;margin:12px;box-shadow:0 2px 6px rgba(0,0,0,.3)}</style></head><body><div class="card"><h2>سلام</h2><p>یک کارت با <b>متن فارسی</b>.</p></div></body></html>`
    ناپایا cv := رابط کاربری.نگاره(doc، 320، 200)
    سرچاپ "size"، cv.پهنا، cv.بلندی
    cv.رهاسازی()
    ناپایا hi := رابط کاربری.نگاره با مقیاس(doc، 320، 200، 2.0)
    سرچاپ "hidpi"، hi.پهنا، hi.بلندی
    hi.رهاسازی()
    path := مسیر پرونده.پیوند(سیستم عامل.پوشه موقت()، "gui-ui-render.png")
    سرچاپ "png"، رابط کاربری.نگاره پی ان جی(doc، 320، 200، path)
    سیستم عامل.حذف(path)
    tree := رابط کاربری.گزارش سند(doc، 320، 200)
    سرچاپ "dump starts with body"، tree.شروع با("body")
    p := رابط کاربری.سنجش زمان(doc، 320، 200)
    سرچاپ "elements"، p.شمار عنصرها، "timed"، p.زمان تجزیه بزرگتربرابر 0.0 و p.زمان سبک بزرگتربرابر 0.0 و p.زمان چیدمان بزرگتربرابر 0.0 و p.زمان نقاشی بزرگتربرابر 0.0
پایان
خروجیsize 320 200 hidpi 640 400 png true dump starts with body true elements 5 timed true

صفحه‌های ترجمه‌شده

صفحه‌ای که با --ui=native ساخته می‌شود اصلاً از متن اچ‌تی‌ام‌ال یا سی‌اس‌اس نمی‌گذرد. مترجم سبک‌های صفحه را به یک برنامه‌ی سی اس اس ترجمه می‌کند و نمایه‌ای می‌نویسد که یک سازنده‌صفحه می‌گیرد و عنصرها را با فراخوانی مستقیم می‌سازد: گشودن عنصر و بستن عنصر برای هر عنصر، اعلان های عنصر برای شناسه‌های فهرست‌های اعلان ترجمه‌شده‌اش، متن فرزند، شناسه عنصر، کلاس عنصر، ویژگی عنصر و رسیدگی رخداد با یک بستار سلام برای هر رسیدگی. اجرای ترجمه شده برنامه را یک بار می‌سازد و پس از هر رسیدگی نمایه را دوباره اجرا می‌کند. درخت تازه از همان تطبیق، سبک‌دهی، چیدمان، نقاشی و رخدادهای نمایه‌ی اچ‌تی‌ام‌ال می‌گذرد، پس هر دو همان پیکسل‌ها را می‌دهند. فقط مقدارهای سبکی که در زمان اجرا ساخته می‌شوند، هر کدام یک بار، با سبک زمان اجرا تجزیه می‌شوند.

برای صفحه‌ی ۲۰۰ عنصری tools/bench/gui_ui.salam روی یک هسته‌ی رایانه‌ی رومیزی، اجرای دوباره‌ی نمایه پس از یک کلیک (ساختن درخت، تطبیق، سبک‌دهی، چیدمان و نقاشی بخشی) در مسیر ترجمه‌شده حدود ۷٫۲ میلی‌ثانیه و در مسیر اچ‌تی‌ام‌ال حدود ۷٫۷ میلی‌ثانیه طول می‌کشد؛ چیدمان و نقاشی میان دو مسیر مشترک‌اند و بیشتر زمان را می‌گیرند. بندهای متنی شکل‌داده‌شده‌ای که متن و سبکشان تغییر نکرده در هر دو مسیر میان اجراها دوباره به کار می‌روند.

gui-ui-guide-compiled.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی رابط گرافیکی.سی اس اس

ناپایا count := 0

تابع styles(): سی اس اس.برنامه‌سبک:
    ناپایا p := سی اس اس.برنامه سبک تازه()
    _box := سی اس اس.ترجمه اعلان ها(p، "padding: 16px; font-family: sans-serif")
    _btn := سی اس اس.ترجمه اعلان ها(p، "padding: 6px 12px; border-radius: 6px")
    _hover := سی اس اس.ترجمه اعلان ها(p، "background: #dde")
    برگشت p
پایان

تابع page(b: رابط کاربری.سازنده‌صفحه):
    b.عنوان صفحه("Counter")
    b.زبان صفحه("en")
    b.جهت صفحه("ltr")
    b.گشودن عنصر("div")
    b.اعلان های عنصر(0، -1، -1، -1)
    b.گشودن عنصر("h1")
    b.شناسه عنصر("count")
    b.متن فرزند("Count " + count)
    b.بستن عنصر()
    b.گشودن عنصر("button")
    b.اعلان های عنصر(1، 2، -1، -1)
    b.شناسه عنصر("add")
    b.کلاس عنصر("primary")
    b.کلید عنصر("add")
    b.ویژگی عنصر("type"، "button")
    b.ویژگی دودویی عنصر("disabled"، count بزرگتر 5)
    b.رسیدگی رخداد("click"، (): count++ پایان)
    b.متن فرزند("Add")
    b.بستن عنصر()
    b.گشودن عنصر("p")
    b.سبک زمان اجرا("width"، (100 + count * 10) + "px")
    b.متن فرزند("Grows with the count")
    b.بستن عنصر()
    b.بستن عنصر()
پایان

تابع ریشه:
    اگر count بزرگتر 99:
        رابط کاربری.اجرای ترجمه شده((): برگشت styles() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان)
    پایان
    رابط کاربری.اجرای ترجمه شده با((): برگشت styles() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان، رابط کاربری.گزینه‌ها { پهنا = 320.0، بلندی = 200.0، بی سر = درست، گام های آزمایشی = "click #add\nclick #add\nquit" })
    سرچاپ "count"، count
    ناپایا cv := رابط کاربری.نگاره ترجمه شده((): برگشت styles() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان، 320، 200)
    سرچاپ "canvas"، cv.پهنا، cv.بلندی
    cv.رهاسازی()
پایان
خروجیcount 2 canvas 320 200

فقط آنچه عوض شده دوباره اجرا می‌شود

صفحه‌ی ترجمه‌شده پس از هر رسیدگی کل نمایه‌اش را اجرا نمی‌کند. مترجم هر نمونه‌ی بخش، و هر عنصر، اگر یا هر بیرون از بخش‌ها که وضعیت می‌خواند، را در یک دامنه واکنشی جداگانه می‌گذارد و هنگام ترجمه درمی‌یابد که هر دامنه کدام متغیرهای سراسری ناپایا را می‌خواند. به هر کدام از این متغیرها یک بیت تغییر می‌دهد و پیش از هر دستوری در برنامه که شاید آن را بنویسد (انتساب، ++، روش‌هایی مانند بیفزا، فرستادن با ارجاع) آن بیت را روشن می‌کند. متغیر بخش (خط نام := مقدار در بدنه‌اش) هنگام ترجمه دسته‌بندی می‌شود: متغیری که نمایه نشانش می‌دهد و کدی عوضش می‌کند وضعیت است و نوشتن در آن فقط همان نمونه را نشان می‌کند؛ متغیری که فقط رویدادگیرها به کار می‌برند برای هر نمونه نگه داشته می‌شود اما هیچ چیز را دوباره اجرا نمی‌کند؛ متغیری که هیچ چیز عوضش نمی‌کند مقداری برگرفته است که هر بار نمونه اجرا می‌شود دوباره حساب می‌شود. مقداری که به بخش فرزند داده می‌شود نشان‌داده‌شده به شمار می‌آید، پس فرزند وقتی فقط پارامترهایش عوض شوند هم دوباره اجرا می‌شود. پس از رسیدگی، زمان‌سنج یا گام پویانمایی، زمان اجرا بیت‌ها را می‌خواند: اگر هیچ‌کدام روشن نباشد هیچ چیز اجرا نمی‌شود؛ وگرنه فقط دامنه‌هایی که متغیر تغییرکرده را می‌خوانند، از بیرونی‌ترین، دوباره اجرا می‌شوند و نمونه‌ی بخش همیشه یکجا دوباره اجرا می‌شود. اگر عنصرهای یک دامنه همان شکل را نگه دارند، متن و ویژگی‌های تازه در همان عنصرها نوشته می‌شوند، فقط همان‌ها دوباره سبک می‌گیرند و متن تغییرکرده در جای خود دوباره شکل می‌گیرد، پس چیدمان فقط وقتی اجرا می‌شود که اندازه‌ای بتواند عوض شود.

نمونه‌های بخش درون هر با کلید سطرشان به خود پیشینشان وصل می‌شوند: ویژگی کلید نخستین عنصر سطر، یا شناسه اش. مترجم چنین نمونه‌ای را با دامنه کلیددار باز می‌کند، پس افزودن، برداشتن یا جابه‌جا کردن سطرها وضعیت هر نمونه را همراه سطرش می‌برد و عنصر کلیددار حالت کنترلش (متن نوشته‌شده، فوکوس) و هویت چیدمانش را نگه می‌دارد. بدون کلید، نمونه‌ها دنبال جایگاهشان می‌روند. همین متغیرهای بخش در وب با salam page build هم کار می‌کنند: اسکریپت صفحه هر نمونه را از وضعیتش می‌کشد و پس از هر رسیدگی فقط نمونه‌هایی را که نوشته شده‌اند دوباره می‌کشد و DOM آن‌ها را در جای خود وصله می‌کند. آنجا هم نمونه‌ی درون هر وضعیتش را با کلید سطر نگه می‌دارد، و بخش‌هایی از صفحه که یک متغیر سراسری ناپایا را می‌خوانند پس از رسیدگی‌ای که آن را می‌نویسد دوباره کشیده می‌شوند.

بخش‌ها بدون هیچ سازوکار زمان اجرا با بخش‌های دورشان حرف می‌زنند. والد می‌تواند تابعی را به‌عنوان پارامتر بدهد (شمارنده: تغییر = (م: صحیح): جمع += م پایان پایان) و فرزند آن را صدا بزند (تغییر(شمار))؛ فرزند می‌تواند با برانگیز("ذخیره"، مقدار) رویدادی بفرستد که به نزدیک‌ترین محل کاربرد با هنگام ذخیره = (م: گونه): ... پایان می‌رسد و سپس سطح به سطح تا صفحه بالا می‌رود، مگر رویدادگیری بایست() را صدا بزند. هر دو هنگام گسترش بخش‌ها حل می‌شوند، پس نوشتن‌های لامبدای والد نمونه‌ی والد را مثل هر نوشتن دیگری علامت می‌زنند و رویدادی از فرزندی در عمق فقط نمونه‌هایی را دوباره اجرا می‌کند که وضعیتشان عوض شده (tests/fa/ui/events_bubble.salam شمارهای شمار اجرای دامنه را چاپ می‌کند). همین کد در وب هم اجرا می‌شود.

برای صفحه‌ای با ۲۰۰ عنصر که یک شمارنده‌اش عوض می‌شود (tools/bench/gui_ui.salam، روی یک رایانه‌ی رومیزی شش‌هسته‌ای پرکار)، یک کلیک وقتی کل نمایه دوباره اجرا می‌شد ۳٫۴ تا ۴٫۰ میلی‌ثانیه طول کشید و وقتی فقط دامنه‌ی شمارنده اجرا شد ۰٫۵ تا ۰٫۷ میلی‌ثانیه. کلیکی که رسیدگی‌اش هیچ چیز را عوض نمی‌کند پیش‌تر ۳٫۱ تا ۳٫۸ میلی‌ثانیه بود و اکنون ۰٫۲ تا ۰٫۳ میلی‌ثانیه؛ آنچه می‌ماند فرستادن رخداد و نقاشی دوباره‌ی حالت فشرده است. نوشتن‌هایی که مترجم نمی‌بیند، مانند تغییر درون بسته‌ای دیگر، بی اعتبار سازی می‌خواهند.

گونه‌ها

گزینه‌ها Options

ساختار گزینه‌ها
چگونگی باز شدن پنجره.
نامانگلیسیگونهتوضیح
پهناwidthاعشار۶۴ = 1024پهنای پنجره به پیکسل منطقی.
بلندیheightاعشار۶۴ = 768بلندی پنجره به پیکسل منطقی.
عنوانtitleرشته = ""عنوانی برای پنجره به جای title صفحه.
تغییر اندازه پذیرresizableمنطقی = درستآیا کاربر می‌تواند اندازه‌ی پنجره را تغییر دهد.
پس زمینهbackgroundرشته = ""رنگ CSS برای پنجره پشت صفحه، به جای رنگ خود صفحه.
بی سرheadlessمنطقی = نادرستپنجره را در حافظه می‌کشد، برای آزمون و کارساز.
مقیاسscaleاعشار۶۴ = 0ضریب مقیاس دستگاه به جای ضریب نمایشگر.
گام های آزمایشیscriptرشته = ""گام‌های آزمایشی که اجرا با بی‌سر به جای انتظار برای ورودی دنبال می‌کند.
gui-ui-Run.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی رشته

ناپایا count := 0
ناپایا name := ""

تابع page(): رشته:
    برگشت `<!doctype html><html lang="en" dir="ltr"><head><title>Counter</title><style>button:hover{background:#dde}</style></head><body><h1 id="count">Count ` + count + `</h1><button id="add" onclick="add()">Add</button><input id="name" oninput="named(event)" placeholder="Name"><p>Hello ` + رشته.جایگزینی(name، "<"، "&lt;") + `</p><a href="https://salamlang.ir">site</a> <a href="/about">about</a></body></html>`
پایان

تابع about(): رشته:
    برگشت `<!doctype html><html><head><title>About</title></head><body><p>Made with Salam.</p><a href="/">back</a></body></html>`
پایان

تابع ریشه:
    رابط کاربری.ثبت رسیدگی("add"، (): count++ پایان)
    رابط کاربری.ثبت رسیدگی("named"، ():
        ev := رابط کاربری.رخداد جاری()
        name = ev.مقدار
        سرچاپ ev.گونه رخداد، ev.هدف، ev.متن، ev.کلید، ev.تیک خورده، ev.دکمه موشی، ev.کلیدهای کمکی، ev.ایکس، ev.ایگرگ، ev.جابجایی افقی، ev.جابجایی عمودی
    پایان)
    رابط کاربری.صفحه برنامه("/"، (): برگشت page() پایان)
    رابط کاربری.صفحه برنامه("/about"، (): برگشت about() پایان)
    رابط کاربری.تنظیم بازکننده نشانی((url: رشته):
        سرچاپ "would open"، url
        برگشت درست
    پایان)
    رابط کاربری.تنظیم ناوبر((url: رشته): برگشت url برابر "/never" پایان)
    اگر count بزرگتر 0:
        رابط کاربری.اجرا((): برگشت page() پایان)
        رابط کاربری.اجرای سند(`<p>A fixed page</p>`)
        رابط کاربری.اجرای سند با(`<p>A fixed page</p>`، رابط کاربری.گزینه‌ها { عنوان = "Fixed"، پهنا = 400.0، بلندی = 300.0 })
        رابط کاربری.تازه سازی()
        سرچاپ رابط کاربری.باز کردن نشانی("https://salamlang.ir")
    پایان
    رابط کاربری.اجرا با((): برگشت page() پایان، رابط کاربری.گزینه‌ها { عنوان = "Counter"، پهنا = 480.0، بلندی = 320.0، تغییر اندازه پذیر = درست، پس زمینه = "#ffffff"، بی سر = درست، مقیاس = 1.0، گام های آزمایشی = "click #add\nclick #add\nquit" })
    سرچاپ "count"، count، "opened"، رابط کاربری.نشانی های باز شده().طول()
پایان
خروجیcount 2 opened 0

رخداد Event

ساختار رخداد
رویدادی که به رسیدگی‌کننده می‌رسد.
نامانگلیسیگونهتوضیح
گونه رخدادkindرشته = ""نام رویداد بی on: click، input، keydown و مانند آن.
هدفtargetرشته = ""شناسه‌ی عنصری که رویداد روی آن رخ داد، یا رشته‌ی تهی.
ایکسxاعشار۶۴ = 0مختصات افقی اشاره‌گر به پیکسل منطقی از لبه‌ی چپ پنجره.
ایگرگyاعشار۶۴ = 0مختصات عمودی اشاره‌گر به پیکسل منطقی از لبه‌ی بالای پنجره.
دکمه موشیbuttonصحیح = 0دکمه‌ی موشی: ۰ چپ، ۱ میانی، ۲ راست.
کلیدkeyرشته = ""نام کلید همان‌گونه که مرورگر می‌گوید: a، Enter، ArrowLeft.
متنtextرشته = ""متن نوشته‌شده، برای رویدادهای input.
مقدارvalueرشته = ""مقدار ورودی، ناحیه‌ی متن یا فهرست کشویی هدف.
تیک خوردهcheckedمنطقی = نادرستآیا جعبه‌ی تیک یا دکمه‌ی رادیویی هدف تیک خورده است.
کلیدهای کمکیmodifiersصحیح = 0کلیدهای کمکی نگه‌داشته‌شده، به شکل پرچم‌های کلید کمکی پنجره ها.
جابجایی افقیdelta_xاعشار۶۴ = 0جابجایی افقی چرخ موشی.
جابجایی عمودیdelta_yاعشار۶۴ = 0جابجایی عمودی چرخ موشی.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

نمایه زمانی Profile

ساختار نمایه زمانی
زمانی که هر مرحله‌ی کشیدن صفحه گرفت.
نامانگلیسیگونهتوضیح
زمان تجزیهparse_msاعشار۶۴ = 0میلی‌ثانیه‌های تجزیه‌ی HTML.
زمان سبکstyle_msاعشار۶۴ = 0میلی‌ثانیه‌های حساب سبک‌ها.
زمان چیدمانlayout_msاعشار۶۴ = 0میلی‌ثانیه‌های چیدمان و متن.
زمان نقاشیpaint_msاعشار۶۴ = 0میلی‌ثانیه‌های نقاشی.
شمار عنصرهاelementsصحیح = 0شمار عنصرهای صفحه.
gui-ui-Render.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی سیستم عامل
واردسازی مسیر پرونده

تابع ریشه:
    _a := رابط کاربری.افزودن پرونده قلم("/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf")
    _b := رابط کاربری.افزودن پوشه قلم("/usr/share/fonts/truetype/noto")
    doc := `<!doctype html><html lang="fa" dir="rtl"><head><style>.card{border:2px solid #36c;border-radius:10px;padding:12px;margin:12px;box-shadow:0 2px 6px rgba(0,0,0,.3)}</style></head><body><div class="card"><h2>سلام</h2><p>یک کارت با <b>متن فارسی</b>.</p></div></body></html>`
    ناپایا cv := رابط کاربری.نگاره(doc، 320، 200)
    سرچاپ "size"، cv.پهنا، cv.بلندی
    cv.رهاسازی()
    ناپایا hi := رابط کاربری.نگاره با مقیاس(doc، 320، 200، 2.0)
    سرچاپ "hidpi"، hi.پهنا، hi.بلندی
    hi.رهاسازی()
    path := مسیر پرونده.پیوند(سیستم عامل.پوشه موقت()، "gui-ui-render.png")
    سرچاپ "png"، رابط کاربری.نگاره پی ان جی(doc، 320، 200، path)
    سیستم عامل.حذف(path)
    tree := رابط کاربری.گزارش سند(doc، 320، 200)
    سرچاپ "dump starts with body"، tree.شروع با("body")
    p := رابط کاربری.سنجش زمان(doc، 320، 200)
    سرچاپ "elements"، p.شمار عنصرها، "timed"، p.زمان تجزیه بزرگتربرابر 0.0 و p.زمان سبک بزرگتربرابر 0.0 و p.زمان چیدمان بزرگتربرابر 0.0 و p.زمان نقاشی بزرگتربرابر 0.0
پایان
خروجیsize 320 200 hidpi 640 400 png true dump starts with body true elements 5 timed true

سازنده‌صفحه Builder

ساختار سازنده‌صفحه
آنچه نمایه‌ی ترجمه‌شده برای ساختن عنصرهایش می‌گیرد. یک دستگیره‌ی کوچک است که به صورت مقدار فرستاده می‌شود؛ درختی که می‌سازد از آن زمان اجراست.
gui-ui-Builder.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی رابط گرافیکی.سی اس اس

ناپایا count := 0

تابع styles(): سی اس اس.برنامه‌سبک:
    ناپایا p := سی اس اس.برنامه سبک تازه()
    _box := سی اس اس.ترجمه اعلان ها(p، "padding: 16px; font-family: sans-serif")
    _btn := سی اس اس.ترجمه اعلان ها(p، "padding: 6px 12px; border-radius: 6px")
    _hover := سی اس اس.ترجمه اعلان ها(p، "background: #dde")
    برگشت p
پایان

تابع page(b: رابط کاربری.سازنده‌صفحه):
    b.عنوان صفحه("Counter")
    b.زبان صفحه("en")
    b.جهت صفحه("ltr")
    b.گشودن عنصر("div")
    b.اعلان های عنصر(0، -1، -1، -1)
    b.گشودن عنصر("h1")
    b.شناسه عنصر("count")
    b.متن فرزند("Count " + count)
    b.بستن عنصر()
    b.گشودن عنصر("button")
    b.اعلان های عنصر(1، 2، -1، -1)
    b.شناسه عنصر("add")
    b.کلاس عنصر("primary")
    b.کلید عنصر("add")
    b.ویژگی عنصر("type"، "button")
    b.ویژگی دودویی عنصر("disabled"، count بزرگتر 5)
    b.رسیدگی رخداد("click"، (): count++ پایان)
    b.متن فرزند("Add")
    b.بستن عنصر()
    b.گشودن عنصر("p")
    b.سبک زمان اجرا("width"، (100 + count * 10) + "px")
    b.متن فرزند("Grows with the count")
    b.بستن عنصر()
    b.بستن عنصر()
پایان

تابع ریشه:
    اگر count بزرگتر 99:
        رابط کاربری.اجرای ترجمه شده((): برگشت styles() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان)
    پایان
    رابط کاربری.اجرای ترجمه شده با((): برگشت styles() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان، رابط کاربری.گزینه‌ها { پهنا = 320.0، بلندی = 200.0، بی سر = درست، گام های آزمایشی = "click #add\nclick #add\nquit" })
    سرچاپ "count"، count
    ناپایا cv := رابط کاربری.نگاره ترجمه شده((): برگشت styles() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان، 320، 200)
    سرچاپ "canvas"، cv.پهنا، cv.بلندی
    cv.رهاسازی()
پایان
خروجیcount 2 canvas 320 200

عنوان صفحه Title

تابع عنوان صفحه(s: رشته)
عنوان پنجره را تعیین می‌کند، مانند title صفحه.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

زبان صفحه Lang

تابع زبان صفحه(s: رشته)
زبان صفحه را تعیین می‌کند، مانند lang روی html.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

جهت صفحه Dir

تابع جهت صفحه(s: رشته)
جهت صفحه، ltr یا rtl، را تعیین می‌کند، مانند dir روی html.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

گشودن عنصر Open

تابع گشودن عنصر(tag: رشته)
عنصری با برچسب اچ‌تی‌ام‌الی که ساخت وب به کار می‌برد، مانند div، h1، button یا input، را به عنوان آخرین فرزند عنصر باز می‌گشاید. هر گشودن یک بستن می‌خواهد، حتی برای عنصرهای تهی.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

اعلان های عنصر Decls

تابع اعلان های عنصر(base: صحیح، hover: صحیح، focus: صحیح، active: صحیح)
فهرست‌های اعلان ترجمه‌شده‌ی عنصر باز را می‌دهد: مال خودش و مال اشاره، تمرکز و فشردن. -1 یعنی هیچ.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

سبک زمان اجرا Dyn

تابع سبک زمان اجرا(prop: رشته، value: رشته)
مقدار سبکی را می‌افزاید که فقط در زمان اجرا معلوم است، مانند پهنایی که از وضعیت حساب می‌شود. هر مقدار یکتا یک بار تجزیه و نگه داشته می‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

شناسه عنصر Id

تابع شناسه عنصر(s: رشته)
شناسه‌ی عنصر را تعیین می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

کلاس عنصر Class

تابع کلاس عنصر(s: رشته)
یک کلاس به عنصر می‌افزاید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

کلید عنصر Key

تابع کلید عنصر(s: رشته)
کلیدی که عنصر را در اجراهای دوباره، وقتی هم‌نیاها جابه‌جا می‌شوند، به خود پیشینش پیوند می‌دهد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

ویژگی عنصر Attr

تابع ویژگی عنصر(name: رشته، value: رشته)
ویژگی‌ای مانند href، type، value یا placeholder را تعیین می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

ویژگی دودویی عنصر BoolAttr

تابع ویژگی دودویی عنصر(name: رشته، value: منطقی)
وقتی مقدار درست باشد ویژگی دودویی‌ای مانند checked یا disabled را می‌گذارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

متن فرزند Text

تابع متن فرزند(s: رشته)
متنی به عنصر باز می‌افزاید. متن کنار عنصرهای فرزند، مانند اچ‌تی‌ام‌ال، با آنها یک بند می‌سازد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

رسیدگی رخداد On

تابع رسیدگی رخداد(event: رشته، fn: تابع())
وقتی رخدادی با این نام به عنصر برسد بستار را اجرا می‌کند: click، dblclick، input، change، submit، keydown، keyup، focus، blur و دیگران، با نام ویژگی اچ‌تی‌ام‌ال بی on. رخدادها بالا می‌روند؛ رخداد جاری درون بستار رخداد را توصیف می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

بستن عنصر Close

تابع بستن عنصر()
عنصر باز را می‌بندد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

دامنه واکنشی Scope

تابع دامنه واکنشی(site: صحیح، fn: تابع(سازنده‌صفحه))
بخشی از صفحه را درون بستاری می‌سازد که زمان اجرا می‌تواند جداگانه دوباره اجرایش کند. site جای این بخش در نمایه است که با جایگاه دامنه ثبت می‌شود؛ بستار سازنده را می‌گیرد و همان دم اجرا می‌شود. صفحه‌ی ترجمه‌شده هر نمونه‌ی بخش، و هر عنصر، اگر یا هر که وضعیت می‌خواند، را در یک دامنه می‌گذارد.
gui-ui-Scope.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی رابط گرافیکی.سی اس اس

ناپایا count := 0
ناپایا touched := 0 برگردان صحیح۶۴
ناپایا likes := وکتور {} برگردان وکتور<صحیح>

تابع take(w: صحیح): صحیح۶۴:
    ناپایا t := 0 برگردان صحیح۶۴
    اگر w == 0:
        t = touched
        touched = 0
    پایان
    برگشت t
پایان

تابع sites():
    رابط کاربری.جایگاه دامنه(1، -1، 0، 1)
    رابط کاربری.جایگاه دامنه(2، 0، 0، 0)
پایان

تابع card(b: رابط کاربری.سازنده‌صفحه، name: رشته):
    b.دامنه واکنشی(2، (b: رابط کاربری.سازنده‌صفحه):
        k := b.نمونه بخش(0)
        اگر b.نمونه تازه():
            اگر k < likes.طول():
                likes[k] = 0
            وگرنه:
                likes.بیفزا(0)
            پایان
        پایان
        b.گشودن عنصر("button")
        b.شناسه عنصر(name)
        b.رسیدگی رخداد("click"، ():
            likes[k] += 1
            رابط کاربری.لمس نمونه(0، k)
        پایان)
        b.متن فرزند(name + " " + likes[k])
        b.بستن عنصر()
    پایان)
پایان

تابع page(b: رابط کاربری.سازنده‌صفحه):
    b.راه اندازی واکنش(1، (w: صحیح): برگشت take(w) پایان، (): sites() پایان)
    b.گشودن عنصر("div")
    b.دامنه واکنشی(1، (b: رابط کاربری.سازنده‌صفحه):
        b.گشودن عنصر("h1")
        b.شناسه عنصر("count")
        b.متن فرزند("Count " + count)
        b.بستن عنصر()
    پایان)
    b.گشودن عنصر("button")
    b.شناسه عنصر("add")
    b.رسیدگی رخداد("click"، ():
        count++
        touched |= 1
    پایان)
    b.متن فرزند("Add")
    b.بستن عنصر()
    b.گشودن عنصر("button")
    b.شناسه عنصر("redraw")
    b.رسیدگی رخداد("click"، (): رابط کاربری.بی اعتبار سازی() پایان)
    b.متن فرزند("Redraw")
    b.بستن عنصر()
    card(b، "tea")
    card(b، "cake")
    b.بستن عنصر()
پایان

تابع ریشه:
    script := "click #add\nclick #add\nclick #tea\nclick #cake\nclick #cake\nclick #redraw\nquit"
    رابط کاربری.اجرای ترجمه شده با((): برگشت سی اس اس.برنامه سبک تازه() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان، رابط کاربری.گزینه‌ها { پهنا = 320.0، بلندی = 200.0، بی سر = درست، گام های آزمایشی = script })
    سرچاپ "count"، count، "tea"، likes[0]، "cake"، likes[1]
    سرچاپ "scope runs"، رابط کاربری.شمار اجرای دامنه()
پایان
خروجیcount 2 tea 1 cake 2 scope runs 6

دامنه کلیددار KeyedScope

تابع دامنه کلیددار(site: صحیح، key: رشته، fn: تابع(سازنده‌صفحه))
مانند دامنه واکنشی، اما دامنه با site و key به دامنه‌ی ساخته‌شده‌ی دفعه‌ی پیش وصل می‌شود نه با جایگاه، پس وضعیت نمونه‌ی بخش در یک سطر فهرست هنگام جابه‌جا شدن سطرها همراه سطر می‌رود. صفحه‌ی ترجمه‌شده آن را برای نمونه‌های بخش در سطری که کلید یا شناسه دارد به کار می‌برد.
gui-ui-KeyedScope.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری
واردسازی رابط گرافیکی.سی اس اس

ناپایا names := وکتور {} برگردان وکتور<رشته>
ناپایا touched := 0 برگردان صحیح۶۴
ناپایا likes := وکتور {} برگردان وکتور<صحیح>

تابع take(w: صحیح): صحیح۶۴:
    ناپایا t := 0 برگردان صحیح۶۴
    اگر w برابر 0:
        t = touched
        touched = 0
    پایان
    برگشت t
پایان

تابع sites():
    رابط کاربری.جایگاه دامنه(1، -1، 0، 1)
    رابط کاربری.جایگاه دامنه(2، 0، 0، 0)
پایان

تابع check():
    ناپایا line := ""
    هر n در names:
        اگر line.طول() بزرگتر 0:
            line += ", "
        پایان
        line += رابط کاربری.با شناسه(n).متن عنصر()
    پایان
    سرچاپ line
پایان

تابع reverse_names():
    ناپایا out := وکتور {} برگردان وکتور<رشته>
    هر n در names:
        out.درج(0، n)
    پایان
    names.پاک سازی()
    هر n2 در out:
        names.بیفزا(n2)
    پایان
    out.آزادکن()
    touched |= 1
پایان

تابع row(b: رابط کاربری.سازنده‌صفحه، name: رشته):
    b.دامنه کلیددار(2، name، (b: رابط کاربری.سازنده‌صفحه):
        k := b.نمونه بخش(0)
        اگر b.نمونه تازه():
            اگر k کوچکتر likes.طول():
                likes[k] = 0
            وگرنه:
                likes.بیفزا(0)
            پایان
        پایان
        b.گشودن عنصر("li")
        b.کلید عنصر(name)
        b.شناسه عنصر(name)
        b.رسیدگی رخداد("click"، ():
            likes[k] += 1
            رابط کاربری.لمس نمونه(0، k)
        پایان)
        b.متن فرزند(name + " " + likes[k])
        b.بستن عنصر()
    پایان)
پایان

تابع page(b: رابط کاربری.سازنده‌صفحه):
    b.راه اندازی واکنش(1، (w: صحیح): برگشت take(w) پایان، (): sites() پایان)
    b.گشودن عنصر("div")
    b.گشودن عنصر("button")
    b.شناسه عنصر("rev")
    b.رسیدگی رخداد("click"، (): reverse_names() پایان)
    b.متن فرزند("Reverse")
    b.بستن عنصر()
    b.گشودن عنصر("button")
    b.شناسه عنصر("drop")
    b.رسیدگی رخداد("click"، ():
        names.حذف در(0)
        touched |= 1
    پایان)
    b.متن فرزند("Drop")
    b.بستن عنصر()
    b.گشودن عنصر("button")
    b.شناسه عنصر("check")
    b.رسیدگی رخداد("click"، (): check() پایان)
    b.متن فرزند("Check")
    b.بستن عنصر()
    b.گشودن عنصر("ul")
    b.دامنه واکنشی(1، (b: رابط کاربری.سازنده‌صفحه):
        هر n در names:
            row(b، n)
        پایان
    پایان)
    b.بستن عنصر()
    b.بستن عنصر()
پایان

تابع ریشه:
    names.بیفزا("tea")
    names.بیفزا("cake")
    names.بیفزا("milk")
    script := "click #tea\nclick #cake\nclick #cake\nclick #check\nclick #rev\nclick #check\nclick #drop\nclick #check\nquit"
    رابط کاربری.اجرای ترجمه شده با((): برگشت سی اس اس.برنامه سبک تازه() پایان، (b: رابط کاربری.سازنده‌صفحه): page(b) پایان، رابط کاربری.گزینه‌ها { پهنا = 320.0، بلندی = 200.0، بی سر = درست، گام های آزمایشی = script })
پایان
خروجیtea 1, cake 2, milk 0 milk 0, cake 2, tea 1 cake 2, tea 1

راه اندازی واکنش Reactive

تابع راه اندازی واکنش(words: صحیح، take: تابع(صحیح): صحیح۶۴، sites: تابع())
اجرای دوباره‌ی جزئی را برای نمایه‌ی ترجمه‌شده روشن می‌کند: شمار واژه‌های تغییر، تابعی که یک واژه از بیت‌های تغییر را برمی‌گرداند و پاک می‌کند، و تابعی که جایگاه‌ها را یک بار ثبت می‌کند. نمایه پیش از هر چیز آن را فرا می‌خواند. بی آن، پس از هر رسیدگی کل نمایه اجرا می‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam

نمونه بخش Instance

تابع نمونه بخش(comp: صحیح): صحیح
درون دامنه‌ی یک بخش، جایگاه این نمونه میان نمونه‌های زنده‌ی بخش comp. این جایگاه با اجرای دوباره‌ی پدر عوض نمی‌شود، پس وضعیت بخش را می‌توان برای هر جایگاه نگه داشت.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam

نمونه تازه Fresh

تابع نمونه تازه(): منطقی
هنگامی درست است که نمونه‌ی بخش برای نخستین بار ساخته می‌شود و وضعیتش باید از اعلان‌هایش مقدار بگیرد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam

عنصر Element

ساختار عنصر
عنصری از صفحه‌ی جاری که با شناسه‌اش یافت می‌شود. هر روش شناسه را دوباره جستجو می‌کند، پس عنصر پس از اجرای دوباره‌ی نما هم معتبر می‌ماند.
نامانگلیسیگونهتوضیح
شناسهidرشته = ""شناسه‌ای که عنصر با آن یافت می‌شود.
gui-ui-Start.salam
// زبان: فارسی
واردسازی رابط گرافیکی.رابط کاربری

ناپایا clicks := 0

تابع view(): رشته:
    برگشت `<!doctype html><html><head><title>Start</title><style>.on{color:red}</style></head><body><p id="msg" class="on">Clicked ` + clicks + `</p><button id="btn" onclick="hit()">Hit</button><input id="field" value="abc"><input id="box" type="checkbox"></body></html>`
پایان

تابع ریشه:
    رابط کاربری.ثبت رسیدگی("hit"، (): clicks++ پایان)
    ok := رابط کاربری.آغاز((): برگشت view() پایان، رابط کاربری.گزینه‌ها { پهنا = 320.0، بلندی = 200.0، بی سر = درست })
    سرچاپ "started"، ok، رابط کاربری.پنجره جاری().عنوان پنجره()، رابط کاربری.گام(0)
    رابط کاربری.اجرای گام ها("click #btn\nclick #field\ntype !")
    msg := رابط کاربری.با شناسه("msg")
    سرچاپ "text"، msg.متن عنصر()، "tag"، msg.برچسب()، "exists"، msg.وجود دارد()
    field := رابط کاربری.با شناسه("field")
    سرچاپ "value"، field.مقدار عنصر()
    field.تنظیم مقدار("set")
    box := رابط کاربری.با شناسه("box")
    box.تنظیم تیک(درست)
    سرچاپ "checked"، box.تیک خورده است()، "value"، field.مقدار عنصر()
    msg.افزودن کلاس("big")
    msg.حذف کلاس("on")
    msg.تنظیم ویژگی("title"، "note")
    سرچاپ "class"، msg.دارای کلاس("big")، msg.دارای کلاس("on")، "attr"، msg.ویژگی("title")
    msg.تنظیم متن("replaced until the next view")
    رابط کاربری.با شناسه("btn").تمرکز()
    رابط کاربری.با شناسه("btn").نمایان کردن()
    رابط کاربری.با شناسه("btn").کلیک()
    _alive := رابط کاربری.گام(0)
    سرچاپ "clicks"، clicks، msg.متن عنصر()، "red"، msg.سبک محاسبه شده().رنگ متن.قرمز
    r := msg.مستطیل()
    سرچاپ "has box"، r.پهنا بزرگتر 0.0، r.بلندی بزرگتر 0.0، r.ایکس بزرگتربرابر 0.0، r.ایگرگ بزرگتربرابر 0.0
    سرچاپ "frames"، رابط کاربری.شمار قاب() بزرگتر 0، "dump lines"، رابط کاربری.گزارش درخت().طول() بزرگتر 0
    رابط کاربری.اجرای گام ها("hover #btn")
    سرچاپ "damage"، رابط کاربری.شمار آسیب آخر() بزرگتربرابر 0، رابط کاربری.مساحت آسیب آخر() بزرگتربرابر 0
    partial := رابط کاربری.قاب().چکیده()
    رابط کاربری.بازنگاری کامل()
    سرچاپ "partial equals full"، partial برابر رابط کاربری.قاب().چکیده()
    رابط کاربری.توقف()
    _ok := رابط کاربری.آغاز سند(`<p>fixed</p>`، رابط کاربری.گزینه‌ها { بی سر = درست })
    رابط کاربری.توقف()
پایان
خروجیstarted true Start true text Clicked 1 tag p exists true value abc! checked true value set class true false attr note clicks 2 Clicked 2 red 255 has box true true true true frames true dump lines true damage true true partial equals full true

وجود دارد Exists

تابع وجود دارد(): منطقی
آیا صفحه عنصری با این شناسه دارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

برچسب Tag

تابع برچسب(): رشته
نام برچسب عنصر.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

متن عنصر Text

تابع متن عنصر(): رشته
متن عنصر همراه با متن نوادگانش. آزادسازی با فراخواننده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تنظیم متن SetText

تابع تنظیم متن(text: رشته)
محتوای عنصر را تا اجرای بعدی نما با متن جایگزین می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

مقدار عنصر Value

تابع مقدار عنصر(): رشته
مقدار یک ورودی، ناحیه‌ی متن یا فهرست کشویی، همان‌گونه که نوشته یا برگزیده شده.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تنظیم مقدار SetValue

تابع تنظیم مقدار(value: رشته)
مقدار یک ورودی، ناحیه‌ی متن یا فهرست کشویی را می‌گذارد و نشانگر را به پایان آن می‌برد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تیک خورده است Checked

تابع تیک خورده است(): منطقی
آیا جعبه‌ی تیک یا دکمه‌ی رادیویی تیک خورده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تنظیم تیک SetChecked

تابع تنظیم تیک(is_on: منطقی)
جعبه‌ی تیک یا دکمه‌ی رادیویی را تیک می‌زند یا برمی‌دارد؛ تیک زدن دکمه‌ی رادیویی تیک دیگر دکمه‌های گروهش را برمی‌دارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تمرکز Focus

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

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

نمایان کردن ScrollIntoView

تابع نمایان کردن()
ظرف پیمایش عنصر را چنان پیمایش می‌کند که بالای عنصر در بالای ناحیه‌ی دیدنی بیاید، مانند scrollIntoView() در مرورگر، حتی برای ردیف‌هایی از فهرست بلند که هنوز جعبه ندارند. جای تازه در گام بعد چیده می‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

کلیک Click

تابع کلیک()
همان‌گونه که کاربر کلیک می‌کند روی عنصر کلیک می‌کند: رسیدگی‌کننده‌ها اجرا می‌شوند و پیوند، برچسب، دکمه و جعبه‌ی تیک کار خود را می‌کنند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

دارای کلاس HasClass

تابع دارای کلاس(name: رشته): منطقی
آیا عنصر یک کلاس دارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

افزودن کلاس AddClass

تابع افزودن کلاس(name: رشته)
تا اجرای بعدی نما یک کلاس می‌افزاید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

حذف کلاس RemoveClass

تابع حذف کلاس(name: رشته)
تا اجرای بعدی نما یک کلاس را برمی‌دارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

ویژگی Attr

تابع ویژگی(name: رشته): رشته
مقدار یک ویژگی، یا رشته‌ی تهی.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تنظیم ویژگی SetAttr

تابع تنظیم ویژگی(name: رشته، value: رشته)
تا اجرای بعدی نما یک ویژگی را می‌گذارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

سبک محاسبه شده Style

تابع سبک محاسبه شده(): سی اس اس.سبک‌محاسبه‌شده
سبک محاسبه‌شده‌ی عنصر.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

مستطیل Rect

تابع مستطیل(): نقاشی.مستطیل
جعبه‌ی مرزی عنصر به پیکسل منطقی پنجره. برای ردیفی از فهرست بلند که بیرون از پنجره‌ی چیده‌شده است، و هر چه درون آن است، جعبه‌ی برآوردی ردیف را می‌دهد: بالای برآوردی از بلندی‌های سنجیده یا میانگین، پهنای محتوای فهرست و بلندی برآوردی.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

تابع‌ها

اجرای ترجمه شده با RunCompiledWith

تابع اجرای ترجمه شده با(program: تابع(): سی اس اس.برنامه‌سبک، view: تابع(سازنده‌صفحه)، options: گزینه‌ها)
مانند اجرای ترجمه شده با گزینه‌هایی مانند اندازه، عنوان یا گام‌های آزمایشی بی‌سر.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

اجرای ترجمه شده RunCompiled

تابع اجرای ترجمه شده(program: تابع(): سی اس اس.برنامه‌سبک، view: تابع(سازنده‌صفحه))
برای یک صفحه‌ی ترجمه‌شده پنجره باز می‌کند: تابعی که برنامه‌ی سبکش را برمی‌گرداند و نمایه‌ای که عنصرها را با یک سازنده‌صفحه می‌سازد. تا بسته شدن پنجره اجرا می‌شود. مترجم برای صفحه‌ای که با --ui=native ساخته می‌شود همین را فرا می‌خواند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

نگاره ترجمه شده RenderCompiled

تابع نگاره ترجمه شده(program: تابع(): سی اس اس.برنامه‌سبک، view: تابع(سازنده‌صفحه)، width: صحیح، height: صحیح): نقاشی.بوم
یک صفحه‌ی ترجمه‌شده را بی‌پنجره در بوم تازه‌ای به اندازه‌ی داده‌شده می‌کشد. آزادسازی بوم با فراخواننده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Builder.salam

با شناسه ById

تابع با شناسه(id: رشته): عنصر
عنصری با یک شناسه، برای رسیدگی‌کننده‌هایی که صفحه را مستقیم تغییر می‌دهند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

ثبت رسیدگی Handle

تابع ثبت رسیدگی(name: رشته، fn: تابع())
یک تابع سلام را زیر یک نام ثبت می‌کند تا ویژگی‌های رویداد مانند onclick="name()"، onclick="name(event)" و onclick="window['name']()" آن را اجرا کنند. ثبت دوباره‌ی همان نام تابع را جایگزین می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

رخداد جاری CurrentEvent

تابع رخداد جاری(): رخداد
رویدادی که در حال رسیدگی است، تا وقتی رسیدگی‌کننده اجرا می‌شود: گونه، شناسه‌ی هدف، جای اشاره‌گر، دکمه، کلید، متن و مقدار کنترل هدف.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

آغاز Start

تابع آغاز(view: تابع(): رشته، options: گزینه‌ها): منطقی
برای یک تابع نما پنجره‌ای باز می‌کند، نخستین قاب را نشان می‌دهد و بی‌درنگ برمی‌گردد؛ با گام یا اجرای گام ها پیش برده می‌شود. اگر پنجره‌ای باز نشود نادرست برمی‌گرداند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

آغاز سند StartHtml

تابع آغاز سند(doc: رشته، options: گزینه‌ها): منطقی
مانند آغاز برای یک سند ثابت.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

گام Step

تابع گام(timeout_ms: صحیح): منطقی
رویدادهای در انتظار پنجره را رسیدگی می‌کند، اگر رسیدگی‌کننده‌ای اجرا شده باشد نما را دوباره اجرا می‌کند و آنچه عوض شده را می‌کشد. اگر رویدادی نباشد تا میلی‌ثانیه‌های داده‌شده منتظر می‌ماند. پس از بسته شدن پنجره نادرست برمی‌گرداند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

توقف Stop

تابع توقف()
پنجره‌ای را که آغاز یا اجرا باز کرده می‌بندد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

اجرا با RunWith

تابع اجرا با(view: تابع(): رشته، options: گزینه‌ها)
برای یک تابع نما با گزینه‌های داده‌شده پنجره باز می‌کند و تا بسته شدن پنجره اجرا می‌شود. نما پس از هر رسیدگی دوباره اجرا می‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

اجرا Run

تابع اجرا(view: تابع(): رشته)
برای یک تابع نما پنجره‌ای به اندازه‌ی ۱۰۲۴ در ۷۶۸ با عنوان title صفحه باز می‌کند و تا بسته شدن پنجره اجرا می‌شود. کامپایلر برای صفحه همین را صدا می‌زند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

اجرای سند با RunHtmlWith

تابع اجرای سند با(doc: رشته، options: گزینه‌ها)
یک سند ثابت را با گزینه‌های داده‌شده تا بسته شدن پنجره نشان می‌دهد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

اجرای سند RunHtml

تابع اجرای سند(doc: رشته)
یک سند ثابت را تا بسته شدن پنجره نشان می‌دهد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

تازه سازی Refresh

تابع تازه سازی()
می‌خواهد نما پیش از قاب بعدی دوباره اجرا شود، برای تغییرهایی که بیرون از رسیدگی‌کننده داده شده‌اند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

نگاره Render

تابع نگاره(doc: رشته، width: صحیح، height: صحیح): نقاشی.بوم
سند را بی‌پنجره روی بوم تازه‌ای به اندازه‌ی داده‌شده می‌کشد، یک پیکسل دستگاه برای هر پیکسل CSS. آزادسازی بوم با فراخواننده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

نگاره با مقیاس RenderScaled

تابع نگاره با مقیاس(doc: رشته، width: صحیح، height: صحیح، scale: اعشار۶۴): نقاشی.بوم
مانند نگاره با یک ضریب مقیاس، برای نمایشگرهای پرتراکم: اندازه‌ی بوم ضرب در مقیاس است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

نگاره پی ان جی RenderPNG

تابع نگاره پی ان جی(doc: رشته، width: صحیح، height: صحیح، path: رشته): منطقی
سند را می‌کشد و در پرونده‌ی PNG ذخیره می‌کند. اگر پرونده نوشته نشود نادرست برمی‌گرداند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

گزارش درخت Dump

تابع گزارش درخت(): رشته
طرحی متنی از صفحه‌ی پنجره‌ی جاری: برای هر عنصر نمایان یک خط با برچسب، شناسه، متن خودش، مقدار یا وضعیت کنترل، تمرکز و جعبه‌ی مرزی. آزادسازی با فراخواننده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

گزارش سند DumpHtml

تابع گزارش سند(doc: رشته، width: صحیح، height: صحیح): رشته
همان طرح برای سندی که بی‌پنجره کشیده می‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

سنجش زمان Measure

تابع سنجش زمان(doc: رشته، width: صحیح، height: صحیح): نمایه زمانی
سند را یک بار بی‌پنجره می‌کشد و زمان هر مرحله را گزارش می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

اجرای گام ها RunSteps

تابع اجرای گام ها(steps: رشته)
گام‌های آزمایشی را، هر خط یک گام، روی پنجره‌ای که آغاز باز کرده اجرا می‌کند، با همان زبان گام‌های SALAM_UI_SCRIPT. ساعت به زمان دستی می‌رود تا wait آن را جلو ببرد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

بازنگاری کامل RepaintAll

تابع بازنگاری کامل()
همه‌ی پنجره را دوباره می‌کشد. آزمون‌ها با آن بررسی می‌کنند که بازنگاری بخشی همان پیکسل‌ها را داده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

شمار آسیب آخر LastDamageCount

تابع شمار آسیب آخر(): صحیح
شمار مستطیل‌های آسیبی که قاب آخر کشید؛ ۰ یعنی همه‌ی پنجره.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

شمار چینش آخر LastLayoutCalls

تابع شمار چینش آخر(): صحیح
شمار جعبه‌هایی که چینش آخر به جای برداشتن از حافظه‌ی نهان حساب کرد؛ پس از اجرای دوباره‌ی نما که یک متن را تغییر می‌دهد فقط جعبه‌ی همان متن و نیاکانش شمرده می‌شوند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

مساحت آسیب آخر LastDamageArea

تابع مساحت آسیب آخر(): صحیح
شمار پیکسل‌های دستگاه که قاب آخر کشید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

قاب Frame

تابع قاب(): نقاشی.بوم
بومی که پنجره نشان می‌دهد. از آن زمان اجراست.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

شمار قاب FrameCount

تابع شمار قاب(): صحیح
شمار قاب‌های کشیده‌شده.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

پنجره جاری CurrentWindow

تابع پنجره جاری(): پنجره ها.پنجره
پنجره‌ی پنجره ها که صفحه را نشان می‌دهد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Start.salam

صفحه برنامه Page

تابع صفحه برنامه(path: رشته، view: تابع(): رشته)
نمای دیگری را برای یک مسیر ثبت می‌کند تا پیوندی با همان نشانی نسبی آن را در همین پنجره باز کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

تنظیم بازکننده نشانی SetUrlOpener

تابع تنظیم بازکننده نشانی(opener: تابع(رشته): منطقی)
تابعی را که پیوندهای http، https و mailto را باز می‌کند جایگزین می‌کند، برای آزمون یا برنامه‌ای که خودش آن‌ها را رسیدگی می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

تنظیم ناوبر SetNavigator

تابع تنظیم ناوبر(navigator: تابع(رشته): منطقی)
تابعی می‌گذارد که هر پیوند نسبی را پیش از همه می‌بیند؛ اگر درست برگرداند پیوند رسیدگی شده و صفحه‌های ثبت‌شده جستجو نمی‌شوند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

نشانی های باز شده OpenedUrls

تابع نشانی های باز شده(): وکتور<رشته>
همه‌ی نشانی‌های پیوندهایی که تاکنون دنبال شده‌اند، به ترتیب. از آن زمان اجراست.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

باز کردن نشانی OpenUrl

تابع باز کردن نشانی(url: رشته): منطقی
نشانی را در مرورگر کاربر باز می‌کند: xdg-open در لینوکس، open در مک و ShellExecuteW در ویندوز. اگر SALAM_UI_NO_BROWSER گذاشته شده یا نشانی تهی باشد چیزی باز نمی‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Run.salam

افزودن پرونده قلم AddFontFile

تابع افزودن پرونده قلم(path: رشته): صحیح
چهره‌های یک پرونده‌ی قلم را به قلم‌های صفحه‌ها می‌افزاید و شمار افزوده‌ها را برمی‌گرداند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

افزودن پوشه قلم AddFontDir

تابع افزودن پوشه قلم(dir: رشته): صحیح
همه‌ی پرونده‌های قلم یک پوشه و زیرپوشه‌هایش را می‌افزاید و شمار چهره‌های افزوده را برمی‌گرداند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Render.salam

جایگاه دامنه ScopeSite

تابع جایگاه دامنه(site: صحیح، comp: صحیح، word: صحیح، mask: صحیح۶۴)
آنچه یک جایگاه به آن وابسته است را ثبت می‌کند: بخشی که جایگاه از آن است (‎-1 برای هیچ) و نقابی از بیت‌های تغییر در یک واژه. جایگاهی که به چند واژه وابسته است برای هر واژه یک بار فراخوانده می‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam

لمس نمونه TouchInstance

تابع لمس نمونه(comp: صحیح، slot: صحیح)
یک نمونه‌ی بخش را تغییرکرده نشان می‌کند تا پس از رسیدگی فقط همان دوباره اجرا شود. مترجم این را پیش از هر نوشتن در متغیری از بخش که نمایه نشانش می‌دهد می‌نویسد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam

بی اعتبار سازی Invalidate

تابع بی اعتبار سازی()
پس از رسیدگی کنونی کل نمایه را دوباره اجرا می‌کند. هنگامی به کار می‌آید که وضعیت به راهی عوض شده که مترجم نمی‌بیند: درون بسته‌ای دیگر، با یک اشاره‌گر، یا با نام دومی برای همان وکتور.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam

شمار اجرای دامنه ScopeRuns

تابع شمار اجرای دامنه(): صحیح
از آغاز صفحه چند دامنه دوباره اجرا شده‌اند؛ اجرای کل نمایه یکی شمرده می‌شود. آزمون‌ها آن را چاپ می‌کنند تا ببینند یک کلیک فقط آنچه باید را دوباره اجرا کرده است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-ui-Scope.salam