Create very first UI

Prev: Install ReUI

Create your first UI with ReUI

To understand how ReUI works let's create simplest UI and going deeper. ReUI will request any xmls from IContentProvider, while we're using ContentResourcesProvider from ReUI.Integration we must create our UIs inside Resources folder to allow provider find them.

1. Create XML declaration

Create file SimpleUI.xml inside Resources folder somewhere inside your project and fill it with:

<?xml version="1.0" encoding="utf-8" ?>
<Root>
  <Text Size="250, 100">Hello world from ReUI</Text>
</Root>

2. Show UI on start

Since we have some UI to push in UIPool we're ready to do that. Let's change out Bootstrap a little bit to show SimpleUI at start of application:

private void Start()
{
    // create instance of rentitas application
    _application = new SampleApplication(
        new SimpleViewProvider(),
        new ContentResourcesProvider(),
        new XLuaProvider());

    var _uiPool = _application.Pools.Get<IUIPool>();
    _uiPool.CreateEmbed("SimpleUI");
}

3. Play and cry

Start playing mode at Unity and realize how ugly our UI

4. Stylize our label

Change our declaration to:

<?xml version="1.0" encoding="utf-8" ?>
<Root>
  <Text Anchor="MiddleStretch" Pivot="TopBottom" Alignment="MiddleCenter" FontSize="32" Size="0, 50">
    HELLO WORLD
  </Text>
  <Text Anchor="MiddleStretch" Pivot="TopCenter" Alignment="MiddleCenter" FontSize="18" Size="0, 25">
    @ ReUI and Rentitas
  </Text>
</Root> 

Not so excited yet..

5. Change font

Let's make HELLO WORLD string so much better with custom bold and light fonts? Add Resource="proxima-black" and Resource="source-sans" as attributes (get proper resource from zip)

<?xml version="1.0" encoding="utf-8" ?>
<Root>
  <Text 
        Anchor="MiddleStretch" 
        Pivot="TopBottom" 
        Alignment="MiddleCenter" 
        FontSize="32" 
        Size="0, 50" 
        Resource="bowlby">
    HELLO WORLD
  </Text>
  <Text Anchor="MiddleStretch" 
        Pivot="TopCenter" 
        Alignment="MiddleCenter" 
        FontSize="18" 
        Size="0, 25" 
        Resource="source-sans">
    @ ReUI and Rentitas
  </Text>
</Root> 

Much better! Next: Reusable components