|
@@ -1,8 +1,8 @@
|
|
|
# UI Layout Definition Format
|
|
# UI Layout Definition Format
|
|
|
|
|
|
|
|
-**Version:** 1.5
|
|
|
|
|
-**Documentation Version:** 1.5
|
|
|
|
|
-**Author:** Dalibor Votruba
|
|
|
|
|
|
|
+**Version:** 1.6
|
|
|
|
|
+**Documentation Version:** 1.6
|
|
|
|
|
+**Author:** Dalibor Votruba
|
|
|
**URL:** [quadarax.com/ui-layout-def](https://quadarax.com/ui-layout-def)
|
|
**URL:** [quadarax.com/ui-layout-def](https://quadarax.com/ui-layout-def)
|
|
|
|
|
|
|
|
A comprehensive XML-based format for describing user interface layouts with inheritance, pattern definitions, view organization, external includes, platform-specific extensions, and advanced validation. This format enables cross-platform UI generation with strict validation, modular component libraries, and modern development practices.
|
|
A comprehensive XML-based format for describing user interface layouts with inheritance, pattern definitions, view organization, external includes, platform-specific extensions, and advanced validation. This format enables cross-platform UI generation with strict validation, modular component libraries, and modern development practices.
|
|
@@ -10,7 +10,7 @@ A comprehensive XML-based format for describing user interface layouts with inhe
|
|
|
## Table of Contents
|
|
## Table of Contents
|
|
|
|
|
|
|
|
- [Overview](#overview)
|
|
- [Overview](#overview)
|
|
|
-- [What's New in v1.5](#whats-new-in-v14)
|
|
|
|
|
|
|
+- [What's New in v1.6](#whats-new-in-v16)
|
|
|
- [Core Concepts](#core-concepts)
|
|
- [Core Concepts](#core-concepts)
|
|
|
- [Document Structure](#document-structure)
|
|
- [Document Structure](#document-structure)
|
|
|
- [View Definitions](#view-definitions)
|
|
- [View Definitions](#view-definitions)
|
|
@@ -38,9 +38,22 @@ The UI Layout Definition Format provides a standardized way to define user inter
|
|
|
- **Cross-Platform**: Platform-specific control libraries with unified abstractions
|
|
- **Cross-Platform**: Platform-specific control libraries with unified abstractions
|
|
|
- **Modern Features**: State management, accessibility, performance optimization, testing support
|
|
- **Modern Features**: State management, accessibility, performance optimization, testing support
|
|
|
|
|
|
|
|
-## What's New in v1.5
|
|
|
|
|
|
|
+## What's New in v1.6
|
|
|
|
|
|
|
|
-### Major Enhancements
|
|
|
|
|
|
|
+### New in v1.6
|
|
|
|
|
+
|
|
|
|
|
+1. **Supported View Modes**
|
|
|
|
|
+ - New `supported-view-modes` element for views
|
|
|
|
|
+ - Define multiple display modes: grid, gallery, tree
|
|
|
|
|
+ - Set default mode and enable/disable modes per view
|
|
|
|
|
+ - Mode descriptions for documentation
|
|
|
|
|
+
|
|
|
|
|
+2. **Enhanced View Descriptions**
|
|
|
|
|
+ - Added `description` attribute to `DataPropertyType` for documenting data context properties
|
|
|
|
|
+ - Added `description` attribute to `ViewBehaviorType` for documenting behaviors
|
|
|
|
|
+ - Added `description` attribute to `PublishedEventType` for documenting events
|
|
|
|
|
+
|
|
|
|
|
+### Major Enhancements (from v1.5)
|
|
|
|
|
|
|
|
1. **Advanced State Management**
|
|
1. **Advanced State Management**
|
|
|
- Redux and MobX pattern support
|
|
- Redux and MobX pattern support
|
|
@@ -98,8 +111,9 @@ The UI Layout Definition Format provides a standardized way to define user inter
|
|
|
- Performance-optimized validation
|
|
- Performance-optimized validation
|
|
|
- Integration testing for rules
|
|
- Integration testing for rules
|
|
|
|
|
|
|
|
-### Breaking Changes from v1.5
|
|
|
|
|
|
|
+### Breaking Changes from v1.6
|
|
|
|
|
|
|
|
|
|
+- No breaking changes from v1.5 to v1.6
|
|
|
- Enhanced schema validation requires updates to custom validators
|
|
- Enhanced schema validation requires updates to custom validators
|
|
|
- Some deprecated attributes removed (see migration guide)
|
|
- Some deprecated attributes removed (see migration guide)
|
|
|
- New required accessibility attributes for certain control types
|
|
- New required accessibility attributes for certain control types
|
|
@@ -146,8 +160,8 @@ Comprehensive security framework with vulnerability protection, data encryption,
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
<ui-layout-def xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
<ui-layout-def xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
|
xsi:schemaLocation="ui-layout-definition ui-layout-def.xsd"
|
|
xsi:schemaLocation="ui-layout-definition ui-layout-def.xsd"
|
|
|
- version="1.5"
|
|
|
|
|
- schema-version="1.5"
|
|
|
|
|
|
|
+ version="1.6"
|
|
|
|
|
+ schema-version="1.6"
|
|
|
target-platform="avalonia"
|
|
target-platform="avalonia"
|
|
|
accessibility-compliance="wcag-aa">
|
|
accessibility-compliance="wcag-aa">
|
|
|
|
|
|
|
@@ -188,7 +202,7 @@ Comprehensive security framework with vulnerability protection, data encryption,
|
|
|
|
|
|
|
|
<!-- Enhanced window definitions -->
|
|
<!-- Enhanced window definitions -->
|
|
|
<window name="ModernWindow" title="Enhanced Application"
|
|
<window name="ModernWindow" title="Enhanced Application"
|
|
|
- target-platform="avalonia" schema-version="1.5">
|
|
|
|
|
|
|
+ target-platform="avalonia" schema-version="1.6">
|
|
|
<data-binding>
|
|
<data-binding>
|
|
|
<data-context source="ModernViewModel" mode="TwoWay" />
|
|
<data-context source="ModernViewModel" mode="TwoWay" />
|
|
|
</data-binding>
|
|
</data-binding>
|
|
@@ -204,6 +218,18 @@ Comprehensive security framework with vulnerability protection, data encryption,
|
|
|
|
|
|
|
|
## Advanced Features
|
|
## Advanced Features
|
|
|
|
|
|
|
|
|
|
+### Supported View Modes
|
|
|
|
|
+
|
|
|
|
|
+```xml
|
|
|
|
|
+<view name="ProductView" type="business-entity" category="core">
|
|
|
|
|
+ <supported-view-modes>
|
|
|
|
|
+ <mode name="grid" enabled="true" default="true" description="Tabular data view with sorting and filtering"/>
|
|
|
|
|
+ <mode name="gallery" enabled="true" default="false" description="Card-based gallery view for visual browsing"/>
|
|
|
|
|
+ <mode name="tree" enabled="false" default="false" description="Hierarchical tree view"/>
|
|
|
|
|
+ </supported-view-modes>
|
|
|
|
|
+</view>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
### State Management
|
|
### State Management
|
|
|
|
|
|
|
|
```xml
|
|
```xml
|
|
@@ -307,10 +333,53 @@ Comprehensive security framework with vulnerability protection, data encryption,
|
|
|
|
|
|
|
|
## Migration Guide
|
|
## Migration Guide
|
|
|
|
|
|
|
|
|
|
+### From Version 1.5 to 1.6
|
|
|
|
|
+
|
|
|
|
|
+#### No Breaking Changes
|
|
|
|
|
+Version 1.6 is backward compatible with v1.5. Simply update the version attributes:
|
|
|
|
|
+
|
|
|
|
|
+```xml
|
|
|
|
|
+<!-- Old -->
|
|
|
|
|
+<ui-layout-def version="1.5" schema-version="1.5">
|
|
|
|
|
+
|
|
|
|
|
+<!-- New -->
|
|
|
|
|
+<ui-layout-def version="1.6" schema-version="1.6">
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+#### New Features Available
|
|
|
|
|
+
|
|
|
|
|
+1. **Supported View Modes**
|
|
|
|
|
+ ```xml
|
|
|
|
|
+ <view name="ProductView" type="business-entity" category="core">
|
|
|
|
|
+ <supported-view-modes>
|
|
|
|
|
+ <mode name="grid" enabled="true" default="true" description="Tabular data view"/>
|
|
|
|
|
+ <mode name="gallery" enabled="true" default="false" description="Card-based gallery view"/>
|
|
|
|
|
+ <mode name="tree" enabled="false" default="false" description="Hierarchical tree view"/>
|
|
|
|
|
+ </supported-view-modes>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ ```
|
|
|
|
|
+
|
|
|
|
|
+2. **Enhanced Descriptions**
|
|
|
|
|
+ ```xml
|
|
|
|
|
+ <data-context>
|
|
|
|
|
+ <property name="Products" type="IEnumerable<Product>" description="Collection of products to display"/>
|
|
|
|
|
+ </data-context>
|
|
|
|
|
+
|
|
|
|
|
+ <behaviors>
|
|
|
|
|
+ <behavior name="auto-refresh" description="Automatically refreshes data every 30 seconds"/>
|
|
|
|
|
+ </behaviors>
|
|
|
|
|
+
|
|
|
|
|
+ <communication>
|
|
|
|
|
+ <publishes>
|
|
|
|
|
+ <event name="ProductSelected" description="Fired when user selects a product"/>
|
|
|
|
|
+ </publishes>
|
|
|
|
|
+ </communication>
|
|
|
|
|
+ ```
|
|
|
|
|
+
|
|
|
### From Version 1.4 to 1.5
|
|
### From Version 1.4 to 1.5
|
|
|
|
|
|
|
|
#### Automatic Migration Support
|
|
#### Automatic Migration Support
|
|
|
-Version 1.5 includes an automatic migration tool that can upgrade most 1.3 documents:
|
|
|
|
|
|
|
+Version 1.5 includes an automatic migration tool that can upgrade most 1.4 documents:
|
|
|
|
|
|
|
|
```bash
|
|
```bash
|
|
|
ui-layout-migrate --from 1.4 --to 1.5 --input myapp.xml --output myapp-v15.xml
|
|
ui-layout-migrate --from 1.4 --to 1.5 --input myapp.xml --output myapp-v15.xml
|
|
@@ -322,7 +391,7 @@ ui-layout-migrate --from 1.4 --to 1.5 --input myapp.xml --output myapp-v15.xml
|
|
|
```xml
|
|
```xml
|
|
|
<!-- Old -->
|
|
<!-- Old -->
|
|
|
<ui-layout-def version="1.4">
|
|
<ui-layout-def version="1.4">
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- New -->
|
|
<!-- New -->
|
|
|
<ui-layout-def version="1.5" schema-version="1.5">
|
|
<ui-layout-def version="1.5" schema-version="1.5">
|
|
|
```
|
|
```
|
|
@@ -333,7 +402,7 @@ ui-layout-migrate --from 1.4 --to 1.5 --input myapp.xml --output myapp-v15.xml
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
3. **Update Control Declarations**
|
|
3. **Update Control Declarations**
|
|
|
- - Add `schema-version="1.5"` to custom controls
|
|
|
|
|
|
|
+ - Add `schema-version="1.6"` to custom controls
|
|
|
- Update deprecated attribute names
|
|
- Update deprecated attribute names
|
|
|
- Add accessibility attributes where required
|
|
- Add accessibility attributes where required
|
|
|
|
|
|
|
@@ -366,17 +435,19 @@ ui-layout-migrate --from 1.4 --to 1.5 --input myapp.xml --output myapp-v15.xml
|
|
|
|
|
|
|
|
#### Compatibility Matrix
|
|
#### Compatibility Matrix
|
|
|
|
|
|
|
|
-| Feature | v1.3 | v1.5 | Migration Required |
|
|
|
|
|
-|---------|------|------|-------------------|
|
|
|
|
|
-| Basic Controls | ✓ | ✓ | No |
|
|
|
|
|
-| Window Includes | ✓ | ✓ | No |
|
|
|
|
|
-| View Definitions | ✓ | ✓ | Optional |
|
|
|
|
|
-| State Management | ✗ | ✓ | New Feature |
|
|
|
|
|
-| Accessibility | Basic | Enhanced | Recommended |
|
|
|
|
|
-| Performance | ✗ | ✓ | New Feature |
|
|
|
|
|
-| Security | Basic | Enhanced | Recommended |
|
|
|
|
|
-| Testing | ✗ | ✓ | New Feature |
|
|
|
|
|
-| Localization | Basic | Enhanced | Optional |
|
|
|
|
|
|
|
+| Feature | v1.4 | v1.5 | v1.6 | Migration Required |
|
|
|
|
|
+|---------|------|------|------|-------------------|
|
|
|
|
|
+| Basic Controls | ✓ | ✓ | ✓ | No |
|
|
|
|
|
+| Window Includes | ✓ | ✓ | ✓ | No |
|
|
|
|
|
+| View Definitions | ✓ | ✓ | ✓ | Optional |
|
|
|
|
|
+| State Management | ✗ | ✓ | ✓ | New Feature (v1.5) |
|
|
|
|
|
+| Accessibility | Basic | Enhanced | Enhanced | Recommended |
|
|
|
|
|
+| Performance | ✗ | ✓ | ✓ | New Feature (v1.5) |
|
|
|
|
|
+| Security | Basic | Enhanced | Enhanced | Recommended |
|
|
|
|
|
+| Testing | ✗ | ✓ | ✓ | New Feature (v1.5) |
|
|
|
|
|
+| Localization | Basic | Enhanced | Enhanced | Optional |
|
|
|
|
|
+| Supported View Modes | ✗ | ✗ | ✓ | New Feature (v1.6) |
|
|
|
|
|
+| Description Attributes | Basic | Basic | Enhanced | Optional |
|
|
|
|
|
|
|
|
### Breaking Changes
|
|
### Breaking Changes
|
|
|
|
|
|
|
@@ -565,7 +636,7 @@ Version 1.5 introduces comprehensive support for Web Awesome (formerly Shoelace)
|
|
|
|
|
|
|
|
```xml
|
|
```xml
|
|
|
<patterns>
|
|
<patterns>
|
|
|
- <control name="EnhancedTextBox" type="input" category="basic" schema-version="1.5">
|
|
|
|
|
|
|
+ <control name="EnhancedTextBox" type="input" category="basic" schema-version="1.6">
|
|
|
<description>Enhanced text input with validation and accessibility</description>
|
|
<description>Enhanced text input with validation and accessibility</description>
|
|
|
<constraints>
|
|
<constraints>
|
|
|
<allowed-parents>Panel,FormField</allowed-parents>
|
|
<allowed-parents>Panel,FormField</allowed-parents>
|
|
@@ -647,7 +718,7 @@ Version 1.5 introduces comprehensive support for Web Awesome (formerly Shoelace)
|
|
|
```xml
|
|
```xml
|
|
|
<views>
|
|
<views>
|
|
|
<view name="ModernProductView" type="ai-assisted" category="ai-enhanced"
|
|
<view name="ModernProductView" type="ai-assisted" category="ai-enhanced"
|
|
|
- schema-version="1.5" platform="avalonia" singleton="false" lazy-loading="true">
|
|
|
|
|
|
|
+ schema-version="1.6" platform="avalonia" singleton="false" lazy-loading="true">
|
|
|
<description>AI-enhanced product management with real-time collaboration</description>
|
|
<description>AI-enhanced product management with real-time collaboration</description>
|
|
|
|
|
|
|
|
<metadata>
|
|
<metadata>
|
|
@@ -735,4 +806,4 @@ Version 1.5 introduces comprehensive support for Web Awesome (formerly Shoelace)
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-*This format specification v1.5 enables modern, accessible, performant, and secure cross-platform UI definitions with advanced development practices, comprehensive validation, and state-of-the-art tooling support.*
|
|
|
|
|
|
|
+*This format specification v1.6 enables modern, accessible, performant, and secure cross-platform UI definitions with advanced development practices, comprehensive validation, and state-of-the-art tooling support.*
|