두 방식 섞기

한 화면의 HTML 과 위젯 계획

두 어휘는 지금 크레이트에 모두 있고, rsx! 블록 하나는 그중 하나를 씁니다. 둘을 한 화면에 두는 것은 정해졌지만 아직 만들어지지 않았습니다. 이 페이지는 방향을 볼 수 있도록 설계를 설명하며, 아직 동작하는 것은 없습니다.

지금

앱은 prelude 하나를 고릅니다. dioxus_compose::html::prelude::* 는 HTML 요소를, dioxus_compose::prelude::* 는 위젯을 각각 dioxus_elements 라는 이름으로 들여오므로, rsx! 블록 하나는 한쪽만 봅니다. 위젯 경로는 지금 그려지고, HTML 경로는 배치와 계획까지 하고 아직 그려지지 않으며 (#43), 섞기는 그 다리 위에 올라갑니다.

노드 하나, 세계 하나

모든 노드는 요소 이름으로 정해지는 한 세계에만 속하게 됩니다. 이 크레이트가 정의한 위젯 이름이면 위젯이고, 그 밖은 HTML 입니다. 두 세계는 자리 표시 노드에서만 만나므로, 어느 쪽도 상대의 규칙을 알 필요가 없습니다.

위젯 안의 HTML

HtmlView 위젯이 HTML 섬을 담게 됩니다. 크기는 바깥의 Compose 레이아웃이 정하고, Host 는 그 폭에서 HTML 을 배치합니다. 창 크기가 바뀌면 그 섬만 다시 배치합니다.

rsx! {
    Column {
        fill_max_width: true,
        TopAppBar { title: "Release notes" }
        HtmlView {
            weight: 1.0,
            article { class: "notes",
                h1 { "Version 0.2" }
                p { "Screens written with HTML and CSS are drawn." }
            }
        }
    }
}

HTML 안의 위젯

HTML 안의 위젯은 이미지처럼 CSS 가 내용을 모르는 상자가 됩니다. 본래 크기는 텍스트를 재는 것과 같은 동기 호출로 레이아웃 도중 렌더러에 묻습니다. 그래서 TextField 나 DatePicker 는 Compose 가 준 크기로 줄에 놓이고, 주변 텍스트는 그것을 비켜 흐릅니다.

경계를 넘는 규칙

• CSS 는 HTML 세계에만 적용됩니다. 위젯 노드는 상자를 놓는 속성(위치, 크기, 여백)만 받고, 안쪽은 디자인 시스템이 그립니다.
• 이벤트는 각 세계를 따릅니다. HTML 의 적중 판정은 위젯 상자에서 멈추고, 그 안은 Compose 가 판정합니다. div 안의 위젯을 누르면 CSS 이벤트 흐름대로 위젯의 핸들러가 먼저 불리고 그다음 div 의 onclick 으로 전파됩니다.
• 스크롤, 포커스, 선택은 두 세계 모두 렌더러의 것이고, 입력란은 두 세계에서 같은 입력기 규칙을 따릅니다.
• 테마는 하나입니다. 두 세계가 같은 색 역할을 쓰고 CSS 변수가 그 역할에 이어지므로, 테마를 바꾸면 두 쪽이 같은 프레임에 바뀝니다.

상태

계획 설계는 정해졌고, HTML 경로가 화면에 그려진 뒤에 할 일로 잡혀 있습니다. #59가 추적하고, #43 위에 올라갑니다.