XaeroDegreaz
Topic Author
Posts: 29
Joined: 26 Nov 2013, 04:47

Unity tutorials seems to have invalid attributes listed for UserControl

12 Mar 2017, 06:26

On this tutorial: http://www.noesisengine.com/docs/Gui.Co ... unity.html

It mentions setting up a class like this:
[Noesis.Extended]
[Noesis.UserControlSource("Assets/Test/ColorPicker.xaml")]
public class ColorPicker : Noesis.UserControl
however those attribute classes don't seem to exist in the 2.0.0 unity package I just downloaded.

I Looked through some of the sample classes that are bundled with the package and it seems they are using
void InitializeComponent()
{
    Noesis.GUI.LoadComponent(this, "Assets/NoesisGUI/Samples/Login/LoginWindow.xaml");
}
to set their classes up?

What should I do? Is the documentation correct or not?
 
XaeroDegreaz
Topic Author
Posts: 29
Joined: 26 Nov 2013, 04:47

Re: Unity tutorials seems to have invalid attributes listed for UserControl

12 Mar 2017, 07:32

I seem to also be having problems getting Noesis to work out of the box. The code-behind doesn't seem to work properly.

I have a button with a "Click" event on it, and the method on the code-behind, but it doesn't fire. I can see that the OnInitialized method does fire, so it appears that the code-behind class is being constructed properly.

I also had problems naming the button, and manually registering the click event in the code. I'm sure there's some sort of set-up problem. Can anyone assist me?
<UserControl
    x:Class="KazBall.Ui.StartScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:KazBall.Ui"
    Width="800" Height="600">
    <Grid>
        <Button
            Content="Button"
            HorizontalAlignment="Left"
            Margin="361,296,0,0"
            VerticalAlignment="Top"
            Width="75"
            Click="OnButtonClick" />
    </Grid>
</UserControl>
using Noesis;
using UnityEngine;

namespace KazBall.Ui
{
    public class StartScreen : UserControl
    {
        public StartScreen()
        {
            Initialized += OnInitialized;
            Noesis.GUI.LoadComponent( this, "Assets/Ui/StartScreen.xaml" );
        }

        private void OnInitialized( object sender, EventArgs eventArgs )
        {
            Debug.Log( "OnInitialized" );
        }

        public void OnButtonClick( object sender, RoutedEventArgs routedEventArgs )
        {
            Debug.Log( "CLICKED" );
        }
    }
}
 
User avatar
ai_enabled
Posts: 221
Joined: 18 Jul 2013, 05:28
Contact:

Re: Unity tutorials seems to have invalid attributes listed for UserControl

12 Mar 2017, 08:57

This Unity tutorial is outdated - there are no need for these attributes in NoesisGUI 2.0. You need to use Noesis.GUI.LoadComponent() method to load the XAML for your user control.

Code-behind generation in NoesisGUI is not yet released but was promised by the NoesisGUI team (perhaps coming in 2.0.1?) . When it will be released, there is also will be no need to call Noesis.GUI.LoadComponent(xamlPath) as it will be done automatically in the generated code-behind.

So you cannot use event handlers defined in XAML now. You need to manually register the event in code.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
XaeroDegreaz
Topic Author
Posts: 29
Joined: 26 Nov 2013, 04:47

Re: Unity tutorials seems to have invalid attributes listed for UserControl

12 Mar 2017, 09:18

Thanks for the information.

So basically the Click attributes don't work, and we have to use the Command attribute, and define the delegates in our view models for now?

What about accessing elements objects in the code-behind as a property field by their x:Name? Is that also coming in the future?
 
User avatar
ai_enabled
Posts: 221
Joined: 18 Jul 2013, 05:28
Contact:

Re: Unity tutorials seems to have invalid attributes listed for UserControl

12 Mar 2017, 09:26

Yes, we prefer to use MVVM approach when possible so each user control has a view model (which is provided to this.DataContext during initialization) and define properties and commands there.

There is no code-behind generation right now. It means there is no mirror-representation of XAML named objects in partial C# file. You have to access all the controls you need by their names by using FindName(name) method. Then you can hook up the event handlers.
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
User avatar
jsantos
Site Admin
Posts: 2903
Joined: 20 Jan 2012, 17:18
Contact:

Re: Unity tutorials seems to have invalid attributes listed for UserControl

13 Mar 2017, 06:20

Sorry for the confusion about this. The documentation is not updated properly for v2.0, we are working on that. We recommend having a look at our provided examples:
namespace Noesis.Samples
{
    /// <summary>
    /// Interaction logic for LoginWindow.xaml
    /// </summary>
    public partial class LoginWindow : UserControl
    {
        public LoginWindow()
        {
            this.Initialized += OnInitialized;
            this.InitializeComponent();
        }
        void InitializeComponent()
        {
            Noesis.GUI.LoadComponent(this, "Assets/NoesisGUI/Samples/Login/LoginWindow.xaml");
        }
        private void OnInitialized(object sender, EventArgs args)
        {
            this.DataContext = new LoginViewModel();
        }
    }
}
As you can see this is exactly the same code that is generated by Blend. We plan to also provide this automatically in the future. For now, it must be done manually. Regarding events, I recommend reading the following tutorial:

http://www.noesisengine.com/docs/Gui.Co ... orial.html

And yes, for elements marked with x:Name you need to manually do the FindName() and assign to member variables.
 
XaeroDegreaz
Topic Author
Posts: 29
Joined: 26 Nov 2013, 04:47

Re: Unity tutorials seems to have invalid attributes listed for UserControl

14 Mar 2017, 05:06

So if we are supposed to use the view model for hooking our UI bindings / events up, what is the best practice for passing in other UI dependencies?

Just
Initialized += ( sender, args ) =>
{
    DataContext = new MyScreenViewModel
    {
        MyViewDependency = FindName( "MyView" ) as MyViewType
    };
};
Noesis.GUI.LoadComponent(this, "Assets/Ui/MyScreen.xaml");
for every UI element that we plan on interacting with? Are there any other recommended or best-practices for this?

Also, since we use the DataContext for all of the important stuff, what use is the main class? Doe anything ever really go in there? Is it mostly for just initializing the user interface? What are some best practices for the type of code that would go in this class?

Thanks for all of your help, I'm well on my way now!
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Unity tutorials seems to have invalid attributes listed for UserControl

15 Mar 2017, 20:06

Hi,

You can follow 2 approaches to interact with UI elements:

- Use code-behind class to manage all the logic. In that case you will specify a name for the elements you want to access, so they can be found in the InitializeComponent, and event handlers implemented in the code-behind. For example:
<UserControl x:Class="Test.TestControl"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Rectangle x:Name="rect" Margin="200" Fill="Red"/>
        <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="10" Content="Change color" Click="ChangeColor"/>
    </Grid>
</UserControl>
#if UNITY_5_3_OR_NEWER
#define NOESIS
using Noesis;
#else
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
#endif

namespace Test
{
    /// <summary>
    /// Interaction logic for TestControl.xaml
    /// </summary>
    public partial class TestControl : UserControl
    {
        public TestControl()
        {
            InitializeComponent();
        }

        #if NOESIS
        Rectangle rect;

        private void InitializeComponent()
        {
            Noesis.GUI.LoadComponent(this, "Assets/UI/TestControl.xaml");

            this.rect = FindName<Rectangle>("rect");
        }

        protected override void Connect(object source, string eventName, string handlerName)
        {
            if (eventName == "Click" && handlerName == "ChangeColor")
            {
                ((Button)source).Click += this.ChangeColor;
            }
        }
        #endif

        private void ChangeColor(object sender, RoutedEventArgs e)
        {
            if (this.rect.Fill == Brushes.Blue)
            {
                this.rect.Fill = Brushes.Red;
            }
            else
            {
                this.rect.Fill = Brushes.Blue;
            }
        }
    }
}
- Or you can use a MVVM pattern to separate logic from UI completely:
<UserControl x:Class="Test.TestControl"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Rectangle Margin="200" Fill="{Binding Color}"/>
        <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="10" Content="Change color" Command="{Binding ChangeColor}"/>
    </Grid>
</UserControl>
#if UNITY_5_3_OR_NEWER
#define NOESIS
using Noesis;
#else
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
#endif
using System.ComponentModel;

namespace Test
{
    public class ViewModel: INotifyPropertyChanged
    {
        public ViewModel()
        {
            ChangeColor = new Noesis.Samples.DelegateCommand(this.OnChangeColor);
        }

        private SolidColorBrush color;
        public SolidColorBrush Color
        {
            get { return color; }
            set
            {
                if (color != value)
                {
                    color = value;
                    if (PropertyChanged != null)
                        PropertyChanged(this, new PropertyChangedEventArgs("Color"));
                }
            }
        }

        public Noesis.Samples.DelegateCommand ChangeColor { get; private set; }

        private void OnChangeColor(object param)
        {
            if (Color == Brushes.Blue)
            {
                Color = Brushes.Red;
            }
            else
            {
                Color = Brushes.Blue;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

    /// <summary>
    /// Interaction logic for TestControl.xaml
    /// </summary>
    public partial class TestControl : UserControl
    {
        public TestControl()
        {
            InitializeComponent();

            // this context may be set outside from application logic and inherited here
            this.DataContext = new ViewModel { Color = Brushes.Red };
        }

        #if NOESIS
        private void InitializeComponent()
        {
            Noesis.GUI.LoadComponent(this, "Assets/UI/TestControl.xaml");
        }
        #endif
    }
}

Who is online

Users browsing this forum: No registered users and 2 guests