expected output: > Entities arrange information about e.g. an object into semantic groups; this example focusses on the possible contents of those groups and shows a possible representation of a made up event. From top to bottom, left to right:
46{
48 $f =
$DIC->ui()->factory();
50
51
52
53
54
55 $primary_id = "Building Better UX by Considering Information Architecture and User Intent";
56 $secondary_id =
$f->symbol()->icon()->standard(
'crs',
'course icon',
'large');
57
58
59 $entity =
$f->entity()->standard(
60 $primary_id,
61 $secondary_id
62 );
63
64
65
66
67
68 $actions = [
69 $f->button()->shy(
"ILIAS",
"https://www.ilias.de"),
70 $f->button()->shy(
"GitHub",
"https://www.github.com")
71 ];
72 $entity = $entity->withActions(...$actions);
73
74
75
76
77
78 $av_data = ['Available Seats' => 4, 'Available' => 'until 24.12.2023', 'Expected Preconditions' => 'UI Design 101', 'Passed Courses' => 'Painting'];
79
80 $blocking =
$f->listing()->property();
81 $availability =
$f->listing()->property();
82
83 $precondition_link =
$f->link()->standard(
"Preconditions",
"http://www.ilias.de");
84
85
86 $blocking = ($av_data['Expected Preconditions'] === $av_data['Passed Courses'])
87 ? $blocking : $blocking->withProperty("Preconditions", $precondition_link, false);
88
89
90 $blocking = ($av_data['Available Seats'] === 0)
91 ? $blocking->withProperty("Available Seats", (string) $av_data['Available Seats']) : $blocking;
92 $availability = ($av_data['Available Seats'] > 0)
93 ? $availability->withProperty("Available Seats", (string) $av_data['Available Seats']) : $availability;
94
95
96 $availability = $availability->withProperty("Available", $av_data['Available']);
97
98 $entity = $entity
99 ->withBlockingAvailabilityConditions($blocking)
100 ->withAvailability($availability);
101
102
103
104
105
106 $reactions = [
107 $f->button()->tag(
'UX/UI',
'#'),
$f->button()->tag(
'First Semester',
'#')
108 ];
109
110 $details =
$f->listing()->property()
111 ->withProperty('Duration', '90 minutes')
112 ->withProperty('Recording', 'recording available', false)
113 ;
114
115 $status =
$f->legacy()->content(
116 $renderer->render(
$f->symbol()->icon()->custom(
'./assets/images/learning_progress/in_progress.svg',
'incomplete'))
117 . ' in progress'
118 );
119
120 $entity = $entity
121 ->withPersonalStatus($status)
122 ->withDetails($details)
123 ->withReactions(...$reactions)
124 ;
125
126
127
128
129
130 $featured_properties =
$f->listing()->property()
131 ->withProperty('Event Date', '14.02.2023');
132
133 $prio_reactions = [
134 $f->symbol()->glyph()->love()
135 ->withCounter(
$f->counter()->status(2)),
136 $f->symbol()->glyph()->comment()
137 ->withCounter(
$f->counter()->novelty(3))
138 ->withCounter(
$f->counter()->status(7))
139 ];
140
141 $main_detail_1 =
$f->listing()->property()
142 ->withProperty('Room', '7')
143 ;
144 $main_detail_2 =
$f->listing()->property()
145 ->withProperty('Description', 'This lecture is an introduction to basic concepts fundamental for an intuitive user experience. These basic principles are not directly connected to the visual design, yet they help us to discover a hierarchy in relevance that needs to be respected for the visual appearance.', false)
146 ;
147
148 $entity = $entity
149 ->withFeaturedProperties($featured_properties)
150 ->withMainDetails($main_detail_1, $main_detail_2)
151 ->withPrioritizedReactions(...$prio_reactions)
152 ;
153
155}