NoesisGUI

Application Prototyping

github Tutorial Data

Although noesisGUI can be fully integrated within your application, as shown in the integration tutorial, sometimes you need a fast way to prototype an idea without having to tackle with boring details like window creation, graphics device initialization or resource building. For that purpose, you can use the XamlPlayer included in the SDK and the class Window.

Window

A Window is used as a container that shows its contents in an operating system window. Public properties like Title, Icon, Width and Height control the aspect of the native window. For example:

Note

If you drop a XAML that contains a Window root element, XamlPlayer will create the corresponding native window.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White" Title="RSS Reader" Width="285" Height="375" Icon="rss.ico">

    <DockPanel Background="#FF2F3F4F" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock DockPanel.Dock="Top" Text="RSS Reader" FontSize="32" Foreground="White"
          TextAlignment="Center" Margin="0,10,0,0"/>
        <Border DockPanel.Dock="Top" Background="SlateGray" BorderBrush="Gray"
          BorderThickness="1" CornerRadius="2" Margin="10" Padding="5">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="URL: " VerticalAlignment="Center"/>
                <TextBox x:Name="Address" Width="180" Text="http://www.metacritic.com/"/>
                <Button Content="Go" Click="OnGoToClicked" Margin="2,0,0,0"/>
            </StackPanel>
        </Border>
        <Grid DockPanel.Dock="Bottom" Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Prev" Click="OnPrevClicked"/>
            <Button Grid.Column="1" Content="Next" Click="OnNextClicked"/>
        </Grid>
        <Border Background="SlateGray" BorderBrush="Gray" BorderThickness="1"
          CornerRadius="2" Margin="10,0" Padding="5">
            <StackPanel x:Name="ContentPanel">
                <TextBlock x:Name="Title" FontSize="16" FontWeight="Bold"
                  Foreground="LightSkyBlue" TextAlignment="Center" Margin="0,0,0,10"/>
                <ScrollViewer VerticalScrollBarVisibility="Auto" Height="150">
                    <TextBlock x:Name="Desc" TextWrapping="Wrap" Width="200"/>
                </ScrollViewer>
            </StackPanel>
        </Border>
    </DockPanel>
</Window>

Code-Behind

The behavior of the application is implemented using a code-behind class. This is a native class that is referenced in the XAML using the x:Class directive. You can also write event handlers that must be implemented in the code-behind. For this sample we are interested whenever the buttons are clicked.

 <Window
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="White"
   Title="RSS Reader"
   Width="285" Height="375" Icon="rss.ico"
   x:Class="RssReader">

     <DockPanel Background="#FF2F3F4F" HorizontalAlignment="Center" VerticalAlignment="Center">
         <TextBlock DockPanel.Dock="Top" Text="RSS Reader" FontSize="32" Foreground="White"
           TextAlignment="Center" Margin="0,10,0,0"/>
         <Border DockPanel.Dock="Top" Background="SlateGray" BorderBrush="Gray"
           BorderThickness="1" CornerRadius="2" Margin="10" Padding="5">
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="URL: " VerticalAlignment="Center"/>
                 <TextBox x:Name="Address" Width="180" Text="http://www.metacritic.com/"/>
                 <Button x:Name="GoTo" Content="Go" Click="OnGoToClicked" Margin="2,0,0,0"/>
             </StackPanel>
         </Border>
         <Grid DockPanel.Dock="Bottom" Margin="10">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
             </Grid.ColumnDefinitions>
             <Button x:Name="Prev" Grid.Column="0" Content="Prev" Click="OnPrevClicked"/>
             <Button x:Name="Next" Grid.Column="1" Content="Next" Click="OnNextClicked"/>
         </Grid>
         <Border Background="SlateGray" BorderBrush="Gray" BorderThickness="1"
           CornerRadius="2" Margin="10,0" Padding="5">
             <StackPanel x:Name="ContentPanel">
                 <TextBlock x:Name="Title" FontSize="16" FontWeight="Bold"
                   Foreground="LightSkyBlue" TextAlignment="Center" Margin="0,0,0,10"/>
                 <ScrollViewer VerticalScrollBarVisibility="Auto" Height="150">
                     <TextBlock x:Name="Desc" TextWrapping="Wrap" Width="200"/>
                 </ScrollViewer>
             </StackPanel>
         </Border>
     </DockPanel>

 </Window>

The code-behind is a class implemented in C++ following the guidelines described in the Extending NoesisGUI tutorial.

class RssReader: public Window
{
public:
    RssReader(): _index(0) {}

    void OnInit()
    {
        ParentClass::OnInit();
        Update();
    }

    void OnGoToClicked(BaseComponent* sender, const RoutedEventArgs& e) {}

    void OnPrevClicked(BaseComponent* sender, const RoutedEventArgs& e)
    {
        _index = _index == 0 ? 2 : _index -  1;
        Update();
    }

    void OnNextClicked(BaseComponent* sender, const RoutedEventArgs& e)
    {
        _index = _index == 2 ? 0 : _index +  1;
        Update();
    }

private:
    void Update()
    {
        TextBlock* title = NsStaticCast<TextBlock*>(FindName("Title"));
        title->SetText(gTitles[_index]);

        TextBlock* desc = NsStaticCast<TextBlock*>(FindName("Desc"));
        desc->SetText(gBodies[_index]);
    }

private:
    NsUInt _index;

    NS_IMPLEMENT_INLINE_REFLECTION(RssReader, Window)
    {
        NsMeta<TypeId>("RssReader");
        NsFunc("OnGoToClicked", &RssReader::OnGoToClicked);
        NsFunc("OnPrevClicked", &RssReader::OnPrevClicked);
        NsFunc("OnNextClicked", &RssReader::OnNextClicked);
    }
};

Running the Application

For launching this prototype just drop the XAML to the XamlPlayer window or pass the filename as argument to the XamlPlayer executable.

Note

It is very important that the working directory of XamlPlayer is set to the location where your native library can be found.

ApplicationTutorialImg1.jpg
© 2017 Noesis Technologies