Following atomic design principles with Fuse

How-to Discussions
1

Hi guys,

I am in the process of building an app while following the atomic design (http://atomicdesign.bradfrost.com/chapter-2/) principles. It seems good fit because of the subclassing system in Fuse. In my case I have a molecule called ‘Tab’ which is part of the larger organism called ‘Header’. Example setup is as following:

components/Tab.ux:

<Panel ux:Class="Tab" Alignment="Center" Value="Default Tab">
    <string ux:Property="Value" />
    <Text Value="{ReadProperty Value}" Color="#FFF" />
</Panel>

components/Header.ux:

<StackPanel ux:Class="Header">
    <Panel Color="#6665DD" Height="75">
        <Text Value="Laura's List" Color="#fff" Alignment="Center" />
    </Panel>
    <Panel Color="#6665DD">
        <Grid ColumnCount="2">
            <Tab Value="Series"></Tab>
            <Tab Value="Books"></Tab>
        </Grid>
    </Panel>
</StackPanel>

and then in MainView.ux:

<App Background="#FFF">
    <Font File="./fonts/fontawesome-webfont.ttf" ux:Global="fa" />
    <ClientPanel>
        <DockPanel>
            <Header Dock="Top" />
            <PageControl ux:Name="navigation">
                <Page ux:Name="Series">
                    <Text Value="Page 1" />
                </Page>
                <Page ux:Name="Books">
                    <Text Value="Page 2" />
                </Page>
            </PageControl>
        </DockPanel>
    </ClientPanel>
</App>

So far so good here and everything working as expected. However I cannot reference properties from components outside of the current component’s scope. For example when referencing to the active property from the PageControl when setting a click handler in the Tab component I receive the error: 'navigation' declared in MainView.ux(6) is a member of 'MainView' and cannot be accessed from 'Tab'.

<Panel ux:Class="Tab" Alignment="Center" Value="Default Tab">
    <string ux:Property="Value" />
    <Text Value="{ReadProperty Value}" Color="#FFF" />
    <Clicked>
        <Set navigation.Active="{ReadProperty Value}" />
    </Clicked>
</Panel>

I understand where the error is coming from. Is there at all a way to circumvent this? Would this be a good case for ux:InnerClass? And yes, how can I set this up?

2

Hi,

the use of ux:InnerClass indeed used to be the recommended approach to give children access to parents’ things. That is not the case any more. Instead, you should explicitly pass in whatever the child needs access to as a Dependency.

I should note that the particular use case you have there can be solved differently, by using {Page bindings in a PageIndicator, as seen in this example.

Hope this helps!

3

Hi Uldis,

Passing in dependencies indeed works for me. I’ve got the header component now setup as following:

<StackPanel ux:Class="Header">
    <PageControl ux:Dependency="Pages" />
    <Page ux:Dependency="Books" />
    <Page ux:Dependency="Series" />
    <Panel Background="#7B904B" Height="50" Dock="Top">
        <Text Value="Laura's List" Alignment="Center" Color="#fff" />
    </Panel>
     <Grid Dock="Top" ColumnCount="2" Background="#7B904B">
        <Tab Value="Books">
            <Clicked>
                <Set Pages.Active="Books" />
            </Clicked>
        </Tab>
        <Tab Value="Series">
            <Clicked>
                <Set Pages.Active="Series" />
            </Clicked>
        </Tab>
    </Grid>
</StackPanel>

I was wondering if it’s necessary to pass in the pages as their own dependency or if they can also be accessed through their parent? I tried the following but that doesn’t work. Is there maybe another way?

<Page ux:Dependency="Pages.Books">

Also, can attributes from nodes be created dynamically? In my example I have only two tabs called “Series” and “Books” From MainView.ux they’re currently being instantiated as

<Header Dock="Top" Pages="Pages" Books="Books" Series="Series" />

Would it be anyhow possible to connect them to a javascript observable and have those dependencies passed in dynamically?

4

It appears to me that you’re in need of far too many dependencies. And I have trouble understanding why you would need them in the first place. Normally, components should not care about what context they are put it and be self-contained.

It would be best if you explained what it is that you want to achieve, and we could suggest the right approach to build that.

5

Haha yes I tend to go too far sometimes when applying certain principles…
I wasn’t looking for something particular though, just seeing how far I can go with Fuse and componentization. At the moment I’m just playing around with UX to get to know the basics and trying to a build a basic first prototype.

6

Alright then, in that case your one-stop-shop for creating components is the Componentization article. Covers dependencies, properties and much more.