XCon Studio

Appearance

XCon Widget Framework - Overview ​

XCon Widget Framework is a powerful widget development framework that offers advanced template rendering, reactive binding system, and comprehensive lifecycle management for modern web applications.

Key Features ​

🎯 Reactive Property System ​

  • Reactive properties with @xproperty decorator
  • Computed properties with @xcomputed decorator
  • Automatic DOM updates
  • Performance-focused selective update system

📝 Template & Binding System ​

  • Inline template support (template property)
  • External template files (templateUrl)
  • Reactive text bindings: x:text="expression"
  • Event bindings: x:on:click="handler"
  • Attribute bindings: x:attr:disabled="expression"
  • Class bindings: x:class:active="expression"

🔄 Lifecycle Management ​

Widgets have a comprehensive lifecycle system:

  • OnWidgetInit - Widget initialization
  • OnWidgetReady - When template is ready
  • OnWidgetRendered - After DOM render
  • OnWidgetDestroy - Widget cleanup
  • OnWidgetPropertyChanged - Property change
  • OnWidgetResize - Size change
  • OnWidgetDataUpdated - Data update
  • OnWidgetEditMode - Edit mode change
  • OnWidgetMobileMode - Mobile mode change

🎨 Style Encapsulation ​

  • none - Global styles
  • emulated - Encapsulation with CSS scope
  • shadow - Shadow DOM encapsulation
  • component - XCon-style component encapsulation

Quick Start ​

Simple Widget ​

Usage in HTML ​

html
<!DOCTYPE html>
<html>
<head>
  <script src="path/to/xcon-widgets.js"></script>
</head>
<body>
  <!-- Widget automatically binds to this element -->
  <div class="my-widget"></div>
</body>
</html>

Widget Registry & DOM Management ​

XCon Widget Framework automatically detects and initializes widgets:

typescript
// Register widget
XConWidgets.registerWidget('.custom-widget', CustomWidget, config);

// DOM scanning and initialization
XConWidgets.initializeAllWidgets();
XConWidgets.rescanDOM();

// Widget information
console.log(XConWidgets.getWidgets());
console.log(XConWidgets.getRegisteredCount());

Initialization Modes ​

Widgets support two different initialization modes:

  • auto (default): Automatically initialized when widget is created
  • manual: Waits for manual call of init() method
typescript
@Widget({
  widgetName: 'LazyWidget',
  initializationMode: 'manual'
})
export class LazyWidget {
  // Widget will be initialized manually
}

Advanced Features ​

Nested Reactive Models ​

typescript
class UserModel {
  @xproperty()
  name: string = '';
  
  @xproperty()
  email: string = '';
}

class MyWidget {
  @xproperty()
  user: UserModel = new UserModel();
  
  @xcomputed({ dependencies: ['user.name', 'user.email'] })
  get userSummary(): string {
    return `${this.user.name} (${this.user.email})`;
  }
}

Style Encapsulation Modes ​

typescript
@Widget({
  encapsulation: 'shadow', // Shadow DOM
  styles: [`
    :host {
      display: block;
      border: 1px solid blue;
    }
  `]
})

Error Handling & Debugging ​

Automatic logger is available inside widget:

typescript
this.safeLog('info', 'Widget initialized');
this.safeLog('debug', 'Context:', this.xctx);
this.safeLog('error', 'Error occurred:', error);

Conclusion ​

XCon Widget Framework is a performant and flexible widget development solution designed for modern web development needs. With reactive properties, powerful template system, and comprehensive lifecycle management, it provides developers the opportunity to create professional widgets.

For more detailed information, please review other API documentation files.