# Window

```ts
import { Window } from 'cx/widgets';
```



Windows are overlays with headers, footers, and special appearance. They provide a familiar dialog-like experience for displaying forms, messages, or complex content.

```tsx
import { createModel } from "cx/data";
import { LabelsLeftLayout } from "cx/ui";
import { Button, Window, TextField, TextArea, DateField } from "cx/widgets";

interface PageModel {
  contact: {
    visible: boolean;
    name: string;
    email: string;
    message: string;
    date: string;
  };
}

const m = createModel<PageModel>();

export default (
  <div>
    <Button
      onClick={(e, { store }) => {
        store.set(m.contact.visible, true);
      }}
    >
      Open Window
    </Button>
    <Window
      title="Contact"
      visible={m.contact.visible}
      center
      modal
      draggable
      closeOnEscape
    >
      <div>
        <LabelsLeftLayout>
          <TextField value={m.contact.name} label="Name" />
          <TextField value={m.contact.email} label="Email" />
          <TextArea value={m.contact.message} label="Message" rows={5} />
          <DateField value={m.contact.date} label="Date" />
        </LabelsLeftLayout>
      </div>
      <div
        putInto="footer"
        style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}
      >
        <Button mod="primary">Submit</Button>
        <Button dismiss>Cancel</Button>
      </div>
    </Window>
  </div>
);

```

Use `putInto="footer"` or `putInto="header"` to place content in the window footer or header. Add the `dismiss` prop to buttons that should close the window.

## Programmatic Windows

Windows can also be opened programmatically using `Widget.create` and the `open` method. This approach creates an independent window with its own store:

```tsx
import { Store } from "cx/data";
import { Button, Widget, Window } from "cx/widgets";

export default (
  <Button
    onClick={(e) => {
      let window: Window = Widget.create(
        <Window title="Programmatic Window" center modal>
          <div>
            <p>This window was opened programmatically.</p>
          </div>
          <div
            putInto="footer"
            style={{ display: "flex", justifyContent: "flex-end" }}
          >
            <Button dismiss>Close</Button>
          </div>
        </Window>,
      );
      window.open(new Store(), { initiatingEvent: e });
    }}
  >
    Open Programmatic Window
  </Button>
);

```

### Hot Module Replacement (HMR)

Programmatic windows have issues with HMR during development - changes to the window content won't reflect until you close and reopen the window. Use `createHotPromiseWindowFactory` or `createHotPromiseWindowFactoryWithProps` to solve this:

```tsx
import { createHotPromiseWindowFactoryWithProps, Window, Button } from "cx/widgets";

const openUserDialog = createHotPromiseWindowFactoryWithProps(
  module,
  (userId: string) => (resolve, reject) => {
    let result = null;
    return Window.create({
      title: `User ${userId}`,
      onDestroy: () => resolve(result),
      children: (
        <div>
          <p>Edit user details here...</p>
          <Button onClick={() => { result = "saved"; }} dismiss>
            Save
          </Button>
        </div>
      ),
    });
  }
);

// Usage
const result = await openUserDialog("123");
```

The factory returns a Promise that resolves when the window is closed, making it easy to get results back from dialog windows.

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `title` | `string` | Text displayed in the header. |
| `header` | `object` | Custom Cx component for advanced headers. |
| `visible` | `boolean` | Controls window visibility. |
| `modal` | `boolean` | Adds a backdrop that masks mouse events for the rest of the page. |
| `backdrop` | `boolean` | Adds a backdrop that dismisses the window when clicked. |
| `center` | `boolean` | Centers the window on the page. |
| `draggable` | `boolean` | Enables dragging the window by its header. |
| `resizable` | `boolean` | Enables window resizing. |
| `closable` | `boolean` | Controls close button visibility. Defaults to `true`. |
| `closeOnEscape` | `boolean` | Closes the window when Escape key is pressed. |
| `fixed` | `boolean` | Disables moving the window by dragging the header. |
| `pad` | `boolean` | Adds default padding to the window body. |