Skip to content

Commit 766cc12

Browse files
sarmadkasarmadka
authored
Merge pull request #59 from sarmadka/main
Added RadioButton & CheckBox widgets and gap style.
2 parents 91594c4 + f2bac57 commit 766cc12

17 files changed

+1558
-3
lines changed

‎Doc/styling.ar.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
لون_الآوتلاين: لـون
5151
تسلسل_العمق: صـحيح
5252
المرونة: مـرونة
53+
الفجوة: مـسافة
5354
الهامش: مـسافة4
5455
لون_زخرفة_النص: لـون
5556
سمك_زخرفة_النص: مـسافة
@@ -168,6 +169,7 @@ scalingAlgorithm: ScalingAlgorithm
168169
* `لون_الآوتلاين` (`outlineColor`) لون الخط حول الإطار.
169170
* `تسلسل_العمق` (`zIndex`) تفيد هذه الخاصية في ترتيب العناصر عند توضعها فوق بعضها.
170171
* `المرونة` (`flex`) الطرز الخاص بالمرونة و التي تحدد نسق لتوضع العناصر.
172+
* `الفجوة` (`gap`) تحدد المسافة بين عناصر flex أو grid، وتوفر مسافات متسقة دون الحاجة للهوامش.
171173
* `الهامش` (`margin`) الهامش حول العنصر.
172174
* `لون_زخرفة_النص` (`textDecorationColor`) اللون الخاص بالزخرفة للنص.
173175
* `سمك_زخرفة_النص` (`textDecorationThickness`) سمك زخرفة النص.

‎Doc/styling.en.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ outlineOffset: Length4
5050
outlineColor: Color
5151
zIndex: Int
5252
flex: Flex
53+
gap: Length
5354
margin: Length4
5455
textDecorationColor: Color
5556
textDecorationThickness: Length
@@ -109,6 +110,7 @@ style type.
109110
* `outlineColor` The color of outline.
110111
* `zIndex` This used to order items when they are on top of each other.
111112
* `flex` The flex style, determine a layout for items placement.
113+
* `gap` Sets the space between flex items or grid items, providing consistent spacing without the need for margins.
112114
* `margin` Margin around the item.
113115
* `textDecorationColor` Text decoration color.
114116
* `textDecorationThickness` Text decoration thickness.

‎Doc/widgets.ar.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -540,6 +540,109 @@ Text(tag: String, text: String);
540540
* `النص` (`text`): `نـص` (`String`). النص الذي نريد عرضه على الزر.
541541

542542

543+
### الـزر_الانتقائي (RadioButton)
544+
545+
صنف يمثل زر انتقائي لتحديد خيار واحد من مجموعة خيارات.
546+
547+
#### التهيئة
548+
549+
```
550+
الـزر_الانتقائي(الاسم: نـص، القيمة: نـص)؛
551+
الـزر_الانتقائي(الاسم: نـص، القيمة: نـص، محدد: ثـنائي)؛
552+
```
553+
554+
<div dir=ltr>
555+
556+
```
557+
RadioButton(name: String, value: String);
558+
RadioButton(name: String, value: String, checked: Bool);
559+
```
560+
561+
</div>
562+
563+
* الشكل الأول ينشئ زر انتقائي بالاسم والقيمة المحددين.
564+
* الشكل الثاني يسمح بتحديد الحالة الابتدائية للتحديد.
565+
566+
#### الخصال
567+
568+
* `الاسم` (`name`): `نـص` (`String`). خاصية الاسم التي تجمع الأزرار الانتقائية معًا. يمكن تحديد زر انتقائي واحد فقط بنفس الاسم في الوقت ذاته.
569+
570+
* `القيمة` (`value`): `نـص` (`String`). قيمة هذا الزر الانتقائي عند تحديده.
571+
572+
* `محدد` (`checked`): `ثـنائي` (`Bool`). ما إذا كان هذا الزر الانتقائي محدد حاليًا أم لا.
573+
574+
* `معطل` (`disabled`): `ثـنائي` (`Bool`). ما إذا كان هذا الزر الانتقائي معطل أم لا.
575+
576+
#### الأحداث
577+
578+
##### عند_التغيير (onChanged)
579+
580+
```
581+
عرف عند_التغيير: إشـارة_حدث_دوم[الـزر_الانتقائي، صـحيح]؛
582+
```
583+
584+
<div dir=ltr>
585+
586+
```
587+
def onChanged: DomEventSignal[RadioButton, Int];
588+
```
589+
590+
</div>
591+
592+
يُطلق عند تحديد الزر الانتقائي أو إلغاء تحديده. يُطلق الحدث عندما ينقر المستخدم على الزر الانتقائي أو عندما يتغير التحديد برمجيًا.
593+
594+
595+
### صـندوق_تفعيل (CheckBox)
596+
597+
يعرض صندوق تفعيل للخيارات متعددة الاختيار.
598+
599+
#### التهيئة
600+
601+
```
602+
صـندوق_تفعيل()؛
603+
صـندوق_تفعيل(القيمة: نـص)؛
604+
صـندوق_تفعيل(القيمة: نـص، مفعل: ثـنائي)؛
605+
```
606+
607+
<div dir=ltr>
608+
609+
```
610+
CheckBox();
611+
CheckBox(value: String);
612+
CheckBox(value: String, checked: Bool);
613+
```
614+
615+
</div>
616+
617+
* الشكل الأول ينشئ صندوق تفعيل فارغ.
618+
* الشكل الثاني ينشئ صندوق تفعيل بالقيمة المحددة.
619+
* الشكل الثالث يسمح بتعيين الحالة المبدئية للتفعيل.
620+
621+
#### الخصال
622+
623+
* `القيمة` (`value`): `نـص` (`String`). قيمة صندوق التفعيل.
624+
* `مفعل` (`checked`): `ثـنائي` (`Bool`). ما إذا كان صندوق التفعيل مُفعلًا حاليًا.
625+
* `معطل` (`disabled`): `ثـنائي` (`Bool`). ما إذا كان صندوق التفعيل معطلًا.
626+
627+
#### الأحداث
628+
629+
##### عند_التغيير (onChanged)
630+
631+
```
632+
عرف عند_التغيير: إشـارة_حدث_دوم[صـندوق_تفعيل، صـحيح]؛
633+
```
634+
635+
<div dir=ltr>
636+
637+
```
638+
def onChanged: DomEventSignal[CheckBox, Int];
639+
```
640+
641+
</div>
642+
643+
يُطلق عند تفعيل صندوق التفعيل أو إلغاء تفعيله. يُطلق الحدث عندما ينقر المستخدم على صندوق التفعيل أو عندما تتغير الحالة برمجيًا.
644+
645+
543646
### مـدخل_نـص (TextInput)
544647

545648
صنف يستعمل لإدخال نص، أي مثل مربع نص.

‎Doc/widgets.en.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,74 @@ Displays a button.
359359
* `text`: `String`. The text we want to show on the button.
360360

361361

362+
### RadioButton
363+
364+
Displays a radio button for single-choice selections within a group.
365+
366+
#### Initialization
367+
368+
```
369+
RadioButton(name: String, value: String);
370+
RadioButton(name: String, value: String, checked: Bool);
371+
```
372+
373+
* The first form creates a radio button with the specified name and value.
374+
* The second form allows setting the initial checked state.
375+
376+
#### Properties
377+
378+
* `name`: `String`. The name attribute that groups radio buttons together. Only one radio button with the same name can be selected at a time.
379+
380+
* `value`: `String`. The value of this radio button when selected.
381+
382+
* `checked`: `Bool`. Whether this radio button is currently selected.
383+
384+
* `disabled`: `Bool`. Whether this radio button is disabled.
385+
386+
#### Events
387+
388+
##### onChanged
389+
390+
```
391+
def onChanged: DomEventSignal[RadioButton, Int];
392+
```
393+
394+
Gets fired when the radio button is selected or deselected. The event is triggered when the user clicks on the radio button or when the selection changes programmatically.
395+
396+
397+
### CheckBox
398+
399+
Displays a checkbox for multiple-choice selections.
400+
401+
#### Initialization
402+
403+
```
404+
CheckBox();
405+
CheckBox(value: String);
406+
CheckBox(value: String, checked: Bool);
407+
```
408+
409+
* The first form creates an empty checkbox.
410+
* The second form creates a checkbox with the specified value.
411+
* The third form allows setting the initial checked state.
412+
413+
#### Properties
414+
415+
* `value`: `String`. The value of this checkbox.
416+
* `checked`: `Bool`. Whether this checkbox is currently checked.
417+
* `disabled`: `Bool`. Whether this checkbox is disabled.
418+
419+
#### Events
420+
421+
##### onChanged
422+
423+
```
424+
def onChanged: DomEventSignal[CheckBox, Int];
425+
```
426+
427+
Gets fired when the checkbox is checked or unchecked. The event is triggered when the user clicks on the checkbox or when the state changes programmatically.
428+
429+
362430
### TextInput
363431

364432
A text entry box.

‎Examples/checkbox_test.alusus‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import "Srl/Console";
2+
import "Apm";
3+
Apm.importFile("Alusus/WebPlatform");
4+
use Srl;
5+
use WebPlatform;
6+
7+
//==============================================================================
8+
// Backend
9+
10+
@assetsRoute def assetsRoute: "Assets/";
11+
12+
//==============================================================================
13+
// Frontend
14+
15+
@uiEndpoint["/"]
16+
@title["WebPlatform Example - CheckBox"]
17+
func main {
18+
def statusText: SrdRef[Text];
19+
20+
// Build the view
21+
Window.instance.style.{
22+
padding = Length4.pt(20);
23+
margin = Length4.pt(0);
24+
};
25+
Window.instance.setView(Box({}).{
26+
style.{
27+
display = Display.FLEX;
28+
layout = Layout.COLUMN;
29+
gap = Length.pt(10);
30+
};
31+
addChildren({
32+
Text(String("CheckBox Test")).{
33+
style.{
34+
fontSize = Length.pt(24.0);
35+
fontWeight = 700;
36+
margin = Length4.pt(0, 0, 20, 0);
37+
};
38+
},
39+
40+
Text(String("Select your preferences:")).{
41+
style.{
42+
fontSize = Length.pt(18.0);
43+
margin = Length4.pt(0, 0, 10, 0);
44+
};
45+
},
46+
47+
// CheckBox options
48+
Box({}).{
49+
style.{
50+
display = Display.FLEX;
51+
layout = Layout.COLUMN;
52+
gap = Length.pt(8);
53+
margin = Length4.pt(0, 0, 0, 20);
54+
};
55+
addChildren({
56+
Box({}).{
57+
style.{
58+
display = Display.FLEX;
59+
layout = Layout.ROW;
60+
gap = Length.pt(8);
61+
align = Align.CENTER;
62+
};
63+
addChildren({
64+
CheckBox(String("newsletter"), true).{
65+
onChanged.connect(closure (statusText: by_ref)&(widget: ref[CheckBox], payload: ref[Int]) {
66+
if widget.checked {
67+
statusText.setText(String("Newsletter: Subscribed"));
68+
} else {
69+
statusText.setText(String("Newsletter: Unsubscribed"));
70+
}
71+
});
72+
},
73+
Text(String("Subscribe to newsletter"));
74+
});
75+
},
76+
77+
Box({}).{
78+
style.{
79+
display = Display.FLEX;
80+
layout = Layout.ROW;
81+
gap = Length.pt(8);
82+
align = Align.CENTER;
83+
};
84+
addChildren({
85+
CheckBox(String("updates")).{
86+
onChanged.connect(closure (statusText: by_ref)&(widget: ref[CheckBox], payload: ref[Int]) {
87+
if widget.checked {
88+
statusText.setText(String("Updates: Enabled"));
89+
} else {
90+
statusText.setText(String("Updates: Disabled"));
91+
}
92+
});
93+
},
94+
Text(String("Receive updates"));
95+
});
96+
},
97+
98+
Box({}).{
99+
style.{
100+
display = Display.FLEX;
101+
layout = Layout.ROW;
102+
gap = Length.pt(8);
103+
align = Align.CENTER;
104+
};
105+
addChildren({
106+
CheckBox(String("notifications")).{
107+
onChanged.connect(closure (statusText: by_ref)&(widget: ref[CheckBox], payload: ref[Int]) {
108+
if widget.checked {
109+
statusText.setText(String("Notifications: Enabled"));
110+
} else {
111+
statusText.setText(String("Notifications: Disabled"));
112+
}
113+
});
114+
},
115+
Text(String("Enable notifications"));
116+
});
117+
}
118+
});
119+
},
120+
121+
Text(String("Newsletter: Subscribed")).{
122+
statusText = this;
123+
style.{
124+
fontSize = Length.pt(16.0);
125+
margin = Length4.pt(20, 0, 0, 0);
126+
fontWeight = FontWeight.BOLD;
127+
};
128+
}
129+
});
130+
});
131+
132+
runEventLoop();
133+
}
134+
135+
function startMyServer() {
136+
Console.print("Starting server on port 8010...\nURL: http://localhost:8010/\n");
137+
buildAndRunServer(Array[CharsPtr]({ "listening_ports", "8010", "static_file_max_age", "0" }));
138+
}
139+
140+
startMyServer();

0 commit comments

Comments
 (0)