Raxol Examples

View Source

A collection of examples demonstrating Raxol's features and capabilities.

Directory Structure

graph TD
    A[Examples] --> B[Basic]
    A --> C[Advanced]
    A --> D[Display]
    A --> E[Interactive]
    A --> F[Layout]
    A --> G[Showcase]
    A --> H[Without Runtime]

    B --> B1[Counter]
    B --> B2[MultipleViews]
    B --> B3[Rendering]
    B --> B4[Subscriptions]
    B --> B5[TableFeatures]

    C --> C1[Commands]
    C --> C2[DocumentationBrowser]
    C --> C3[Editor]
    C --> C4[Snake]

    D --> D1[ProgressBar]
    D --> D2[Charts]
    D --> D3[TreeMaps]

    E --> E1[FormValidation]
    E --> E2[EventHandling]
    E --> E3[KeyboardShortcuts]

    F --> F1[Dashboard]
    F --> F2[AdvancedLayout]
    F --> F3[Responsive]

    G --> G1[ComponentShowcase]
    G --> G2[ArchitectureDemo]
    G --> G3[ProgressBarDemo]

    H --> H1[HelloWorld]
    H --> H2[Clock]
    H --> H3[EventViewer]

Quick Start

# Run basic example
mix run examples/basic/counter.exs | cat

# Run showcase example
mix run examples/showcase/component_showcase.exs | cat

Example Categories

Basic Examples

  • Counter: Simple state management
  • MultipleViews: View composition
  • Rendering: Basic rendering patterns
  • Subscriptions: Event subscriptions
  • TableFeatures: Table component usage

Advanced Examples

  • Commands: Command pattern implementation
  • DocumentationBrowser: Documentation viewer
  • Editor: Text editor implementation
  • Snake: Game implementation

Display Examples

  • ProgressBar: Progress visualization
  • Charts: Data visualization
  • TreeMaps: Hierarchical data display

Interactive Examples

  • FormValidation: Form handling
  • EventHandling: Event system usage
  • KeyboardShortcuts: Shortcut implementation

Layout Examples

  • Dashboard: Dashboard layout
  • AdvancedLayout: Complex layouts
  • Responsive: Responsive design

Showcase Examples

  • ComponentShowcase: Component library
  • ArchitectureDemo: Architecture patterns
  • ProgressBarDemo: Progress bar variations

Without Runtime Examples

  • HelloWorld: Basic terminal output
  • Clock: Real-time updates
  • EventViewer: Event debugging

Creating Your Own Example

defmodule MyApp do
  use Raxol.Component
  alias Raxol.View.Elements

  @impl Raxol.Component
  def mount(_params, _session, socket) do
    {:ok, assign(socket, :message, "Hello from Raxol!")}
  end

  @impl Raxol.Component
  def handle_event("some_event", _payload, socket) do
    {:noreply, assign(socket, :message, "Event handled!")}
  end

  @impl Raxol.Component
  def render(assigns) do
    ~V"""
    <.panel title="My App">
      <.text>{assigns.message}</.text>
      <.button rax-click="some_event">Click Me</.button>
    </.panel>
    """
  end
end

Component Flow

sequenceDiagram
    participant U as User
    participant C as Component
    participant E as Event Handler
    participant R as Renderer

    U->>C: Interact
    C->>E: Handle Event
    E->>C: Update State
    C->>R: Render
    R->>U: Update UI

Best Practices

  1. Structure

    • Follow directory organization
    • Use appropriate category
    • Include documentation
  2. Implementation

    • Use component behaviour
    • Handle events properly
    • Follow naming conventions
  3. Documentation

    • Add file header
    • Document dependencies
    • Include usage examples

For more examples, check the examples directory.