GUI Overview
The GUI section covers everything needed to build user interfaces in Oidis — from the Page-Panel-Controller architecture to specific components like tables, dialogs, and form controls. All GUI code lives in the Gui/ subdirectory of your project namespace.
Pages in This Section
| Page | Purpose |
|---|---|
| Panels and Controllers | Practical guide to building UI features — lifecycle hooks, data binding, events, validation, and CRUD patterns |
| Data Binding | The data-oidis-bind system — connecting HTML elements to typed component references in Panels |
| Events and Validation | EventsBinding.SingleClick, component events via getEvents(), and form validation with TextField and ValidationBinding |
| Tables | Table<T> component — the 3-callback BindData pattern, pagination, refresh, and custom items |
| Dialogs | Dialog and DialogBinding — modal dialogs for confirmations, forms, and detail views |
| User Controls | Built-in UI components — Button, TextField, Label, DropDown, CheckBox, Table, Dialog, and Toast |
| Events System | Deep dive into the event system — EventType enum, EventArgs classes, two-level architecture, and direct getEvents() patterns |
| ElementManager | Direct DOM utilities — visibility control, z-index management, and global theme switching |
| Component Internals | Inheritance hierarchy, lifecycle states, rendering pipeline, and responsive layout — for building custom components |
| File Upload | FileUploadBinding for file selection, reading, and upload — button, drag-drop, chunked transfer, and progress tracking |
| Page Layouts | Hub GUI page layout variants — BasePageLayout, StickyHeaderLayout, MenuPageLayout — tab configuration, mobile menu, and built-in primitives |
| Autocomplete | Typeahead search component with dropdown results — server-side or client-side filtering, keyboard navigation, and custom formatters |
| ResponsiveTable | ResponsiveTable<T> — responsive data table with column filtering, pagination, select-all, and row state management |
| Pagination | Page navigation component for data tables — standalone usage or integrated into Table and ResponsiveTable |
| Person Cards | Avatars with initials fallback, MemberBinding, hover person card fed by an app resolver that decides visibility |
| GUI Pitfalls | Common mistakes — Text() renders HTML, member name clashes, component creation, validation feedback, dialog bindings |
Which Component Do I Need?
| Task | Component | Page |
|---|---|---|
| Display a data list/grid | Table<T> or ResponsiveTable<T> | Tables |
| Show a modal form or confirmation | Dialog + DialogBinding | Dialogs |
| Search with typeahead | Autocomplete | Autocomplete |
| Upload files | FileUploadBinding | File Upload |
| Add page navigation | Pagination | Pagination |
| Build a form with inputs | TextField, DropDownList, CheckBox | User Controls |
| Create a page with tabs | BasePageLayout | Page Layouts |
| Respond to DOM events | EventsBinding.SingleClick, getEvents() | Events and Validation |
| Validate form inputs | TextField.Validate(), ValidationBinding | Events and Validation |
Where to Start
If you're new to Oidis GUI, read Panels and Controllers first — it covers the full lifecycle from creating a panel to wiring up events and displaying data. Then explore specific topics as needed.
For the architectural concepts behind the GUI system, see Page-Panel-Controller in the Architecture section.
See also: Architecture Overview | Page-Panel-Controller | Decorators