Comparing declarative UIs

declarative-nocss.go

ui.New(
	doc.NewDocument("Todo-App"),
		Children(
			E(doc.NewSection("Appsection","todoapp"),
				Children(
					E(doc.NewHeader("mainheader","header"),
						Children(
							E(doc.NewH1("todo", "apptitle").SetText("Todo")),
							E(NewTodoInput("todo", "new-todo")),
						),
					),
					E(doc.NewSection("mainsection","main"),
						Children(
							E(doc.NewInput("checkbox", "toggle-all", "toggle-all"),
								Listen("click",toggleallhandler,doc.NativeEventBridge),
							),
							E(doc.NewLabel("toggle-all-Label", "toggle-all-label").For(ToggleAllInput.AsElement())),
							E(NewTodosListElement("todo-list", "todo-list", doc.EnableLocalPersistence()),
								InitRouter,
							),
						),
					),
					E(doc.NewFooter("mainfooter","footer"),
						Children(
							E(NewTodoCount("todo-count", "todo-count")),
							E(Filterlist),
							E(ClearCompleteBtn("clear-complete", "clear-complete"),
								Listen("click",ClearCompleteHandler,doc.NativeEventBridge),
							),
						),
					),
				),
			),
			E(doc.NewFooter("Appfooter","infofooter"),
				Children(
					E(doc.NewParagraph("editinfo","editinfo").SetText("Double-click to edit a todo")),
					E(doc.NewParagraph("createdWith,createdWith").SetText("Created with: "),
						Children(
							E(doc.NewAnchor("particleui", "particleui").SetHREF("http://github.com/atdiar/particleui").SetText("ParticleUI")),
						),
					),
				),
			),
		),
	)
)

doc.AddClass(AppSection.AsElement(), "todoapp")
doc.AddClass(AppFooter.AsElement(), "info")
doc.AddClass(MainHeader.AsElement(), "header")
doc.AddClass(MainSection.AsElement(), "main")
doc.AddClass(MainFooter.AsElement(), "footer")
doc.AddClass(todosinput.AsElement(), "new-todo")
doc.AddClass(ToggleAllInput.AsElement(), "toggle-all")

semi-declarative-nocss.go

// CSS is added oputside the declarative UI tree

ui.New(Document,
		Children(
			E(AppSection,
				Children(
					E(MainHeader,
						Children(
							E(MainHeading),
							E(todosinput),
						),
					),
					E(MainSection,
						Children(
							E(ToggleAllInput,
								Listen("click",toggleallhandler,doc.NativeEventBridge),
							),
							E(ToggleLabel),
							E(TodosList),
						),
					),
					E(MainFooter,
						Children(
							E(Todocout),
							E(FilterList),
							E(ClearCompleteButton,
							  Listen("click",ClearCompleteHandler,doc.NativeEventBridge),
							),
						),
					),
				),
			),
			E(AppFooter,
				Children(
					E(editinfo),
					E(createdWith)
				),
			),
		),
	)
}

doc.AddClass(AppSection.AsElement(), "todoapp")
doc.AddClass(AppFooter.AsElement(), "info")
doc.AddClass(MainHeader.AsElement(), "header")
doc.AddClass(MainSection.AsElement(), "main")
doc.AddClass(MainFooter.AsElement(), "footer")
doc.AddClass(todosinput.AsElement(), "new-todo")
doc.AddClass(ToggleAllInput.AsElement(), "toggle-all")

semi-declarative.go

ui.New(Document,
		Children(
			E(AppSection,
				CSS("todoapp"),
				Children(
					E(MainHeader,
						CSS("header"),
						Children(
							E(MainHeading),
							E(todosinput,
								CSS("new-todo"),
							),
						),
					),
					E(MainSection,
						CSS("main"),
						Children(
							E(ToggleAllInput,
								CSS("toggle-all"),
								Listen("click",toggleallhandler,doc.NativeEventBridge),
							),
							E(ToggleLabel),
							E(TodosList),
						),
					),
					E(MainFooter,
						CSS("footer"),
						Children(
							E(Todocout),
							E(FilterList),
							E(ClearCompleteButton,
							  Listen("click",ClearCompleteHandler,doc.NativeEventBridge),
							),
						),
					),
				),
			),
			E(AppFooter,
				CSS("info"),
				Children(
					E(editinfo),
					E(createdWith),
				),
			),
		),
	)
}