Forum rules
A place to show off your creations with noesisGUI and comment on them. From XAML snippets to full projects.
 
movra
Topic Author
Posts: 70
Joined: 02 Apr 2014, 20:35

uFrame integration - visual modelling and auto-binding

14 Aug 2014, 14:03

A couple of days ago Noesis Technologies announced they are working together with InvertStudios to provide integration of NoesisGUI with uFrame. Because I suggested this upcoming feature I want to talk a little about it.

Like NoesisGUI, uFrame is based on the MVVM pattern and it's nominated for the Unity Awards 2014. Both NoesisGUI and uFrame were recently in the Unity Madness Sale.

So what will the integration of NoesisGUI and uFrame do for us? It will save us a lot of boilerplate code. In uFrame we are able to visually design the elements of a game. When hitting the save & compile button uFrame generates the bindings and other boilerplate, hidden away in partial classes so we never even have to look at it.

The integration creates a special ViewModel wrapper that can be specified as a DataContext of a Noesis GUI Panel. The wrapper provides automatic 2-way bindings between the NoesisGUI controls and the underlying code.


A simple example of the upcoming Noesis+uFrame integration
  • We are going to make a chat box. In uFrame's Element Designer, create a TestChat element with an Input and an Output string. Also add a SayHelloCommand. An element is basically a ViewModel, an abstraction of the View.

    Image
  • Create a View and connect it to the element. In the View we can react to property changes, but we're not going to do that in this example.
  • Now for our game logic. Open TestChatController.cs and implement the SayHelloCommand.
    public class TestChatController : TestChatControllerBase
    {
        public override void SayHelloCommand(TestChatViewModel testChat)
        {
            testChat.Output = "Hello, " + testChat.Input;
        }
    }
  • Here's a basic XAML for the chat box. Note that the bindings match the property names.
    <Grid
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    
         <Viewbox>
           <StackPanel x:Name="chatbox">
              <TextBox Text="{Binding Input, Mode=TwoWay}"/>
              <Button Content="Say Hello" Command="{Binding SayHelloCommand}" />
              <TextBlock Text="{Binding Output}" />
           </StackPanel>
         </Viewbox>
    </Grid>
  • Add the TestChatView.cs and NoesisGUIPanel component to the Main Camera. In the Inspector go to the Noesis GUIPanel component and pick the wrapper in the DataContext field. All hooked up :)

    The method SayHelloCommand() in TestChatController.cs will be called when the command is triggered by pressing the button. In the method we change the contents of the Output property, causing the output textblock to be automatically updated.
  • Play! Type in something in the input box, press the button and you will see that "Hello, " plus your input will be printed in the output box.

    Image
While this is a very minimal example, I hope you can see the benefit of automatic binding between the UI and the game code in a bigger project.

What do you think about this feature?
Last edited by movra on 16 Aug 2014, 10:34, edited 2 times in total.
 
bilke
Posts: 1
Joined: 15 Aug 2014, 10:32

Re: uFrame integration - visual modelling and auto-binding

15 Aug 2014, 10:36

This is awesome! Do you know when it will be available?
 
movra
Topic Author
Posts: 70
Joined: 02 Apr 2014, 20:35

Re: uFrame integration - visual modelling and auto-binding

15 Aug 2014, 10:46

I don't know, but both teams are working on it and we already made some progress during the preparations.

It's going to be awesome indeed. Right now I have to write the wrappers by hand and it's a pain in the neck. For every element and enum you have to write a wrapper, implement properties and bindings for 2 directions, collections need 2 extra conversion steps and every linked element inside a wrapper you need another wrapper. It's wrapperception.
 
PandaChuZero
Posts: 11
Joined: 06 May 2014, 06:05

Re: uFrame integration - visual modelling and auto-binding

16 Aug 2014, 03:39

I"m really looking forward to this feature - uFrame is greatest thing ever. Combined with NoesisGUI will be a dream come true.
 
wwizz
Posts: 3
Joined: 17 Aug 2014, 21:27

Re: uFrame integration - visual modelling and auto-binding

19 Aug 2014, 22:42

Totally agree!

i bought both uFrame and NoesisGUI in the madness sale recently. Both assets are cool in their own right but combining them will create a unique and powerful programming experience!

Who is online

Users browsing this forum: No registered users and 2 guests