Diving into MXHX

Welcome back! In part 1, we introduced you to Moonshine.dev, an innovative platform for building user interfaces with Haxe, Feathers UI, and the declarative XML component markup language, MXHX. We walked you through the steps to create a simple interface using the WYSIWYG editor, adding components like Labels, TextInput, and Buttons. Now, in part 2, we’re going to dive deeper into MXHX and explore its powerful features in the code tab.

Benefits of Using MXHX

Before we get started, let’s quickly revisit why MXHX is such a game-changer for UI development:

Exploring the Code Tab

Now that we have a basic understanding of MXHX, let’s switch to the Code tab in Moonshine.dev. Here, you can see the underlying MXHX code generated by the WYSIWYG editor. This code defines the UI components and their properties, making it easy to understand how the visual elements are structured.

Screenshot: Code Tabs

Let’s break down the provided MXHX code step by step:

XML Declaration
<?xml version="1.0" encoding="utf-8"?>

This line declares the XML version and the character encoding used in the document. Here, it specifies XML version 1.0 and UTF-8 encoding.

LayoutGroup Container
<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/basic"
    xmlns:f="https://ns.feathersui.com/mxhx">
Declarations Section
<mx:Declarations>
</mx:Declarations>

The <mx:Declarations> section is used to declare reusable components, styles, or other configurations. In this example, it is empty but typically, you would place shared resources here.

Label component
<f:Label text="First Name" x="50" y="50"/>
TextInput Component
<f:TextInput text="Text Input" x="50" y="70"/>
Button Component
<f:Button text="Submit" x="50" y="120"/>

Understanding Layouts in MXHX

Layouts are essential for organizing UI components in a structured and visually appealing manner. MXHX provides several layout options to help developers manage the positioning and sizing of components effectively. Here, we’ll explore three primary layout types: AnchorLayout, HorizontalLayout, and VerticalLayout.

The AnchorLayout is the most basic and default layout in MXHX. If you don’t specify any other layout, you are using AnchorLayout by default. This layout allows you to anchor UI components to the edges of the container or to other components, providing a high degree of flexibility and control over their positioning. It is particularly useful for precise placement of elements within a container.

The HorizontalLayout arranges components in a horizontal row. This layout is ideal for creating navigation bars, button groups, and other horizontal component arrangements. By using HorizontalLayout, you can ensure that your components are aligned in a neat row, making it easier to manage horizontal spacing and alignment.

The VerticalLayout arranges components in a vertical column. This layout is perfect for stacking components such as form fields, lists, and menus vertically. VerticalLayout helps you maintain a clean, organized vertical flow of elements, which is particularly useful for creating forms and lists.

Creating a LayoutGroup with VerticalLayout in the Editor

1. Add a new LayoutGroup component to the canvas, next to the existing components.

Screenshot: LayoutGroup

2. Go to the Properties, find the Layout section, and set it to VerticalLayout.

Screenshot: VerticalLayout

3. Drag your existing components one by one into the LayoutGroup component. The result should look like this:

Screenshot: LayoutGroup with Components

4. Try dragging more controls and using your knowledge of setting properties to achieve this result:

Screenshot: More components

5. With your LayoutGroup selected, go to the Properties, Layout section, and set the Gap property to 10. Set all Padding Left, Padding Right, Padding Top, and Padding Bottom to 5. The result should look like this:

Screenshot: Gap and Paddings

6. Go back to the Code tab and take a look:

<?xml version="1.0" encoding="utf-8"?>
<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/basic"
    xmlns:f="https://ns.feathersui.com/mxhx">
    <mx:Declarations>
    </mx:Declarations>
    <f:LayoutGroup width="200.0" height="200.0" x="258" y="46">
		
		<f:Label text="First Name"/>
		<f:TextInput text="Text Input"/>
		<f:Label text="Last Name"/>
		<f:TextInput text="Text Input"/>
		<f:Button text="Submit"/>
		<f:layout>
			<f:VerticalLayout gap="10" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
		</f:layout>
	</f:LayoutGroup>
</f:LayoutGroup>

7. Notice a few interesting things:

Conclusion

In this part of our series, we delved deeper into the functionalities of MXHX within the Moonshine.dev platform. We explored the Code tab to understand how the XML code defines UI components and their properties. We introduced the LayoutGroup and discussed three primary layout types in MXHX: AnchorLayout, HorizontalLayout, and VerticalLayout.

We also provided a step-by-step guide on how to create a LayoutGroup with VerticalLayout in the Moonshine.dev editor, emphasizing setting properties like gap and padding to achieve a clean, organized interface. This part has equipped you with the knowledge to start utilizing advanced layout features in MXHX, making your UI development more structured and efficient.

Stay tuned for the next part of our series, where we will explore more advanced features and best practices for creating exceptional user experiences with Moonshine.dev.

For more detailed documentation and examples, visit: