Smart Office SDK – First Project Part 7 – the Toolbar

Update: see https://potatoit.wordpress.com/2013/10/03/smart-office-sdk-first-project-part-8-the-next-previous-close-the-toolbar-and-commandbar-gah/ for a cleaner implementation of this code.

This is the 7th in a long series of posts of using the Smart Office SDK to remove modifications

In this post I’ll discuss the trials and tribulations of recreating parts of the M3 Select/Create/Change toolbar using the Smart Office SDK.

vs

In my vessel modification, I have need of creating new Vessels. These vessels get written back to a ‘mod’ database. As such, I need a method which will allow me to produce a similar experience to the original modification within my code. And ideally we want the transition between this and other M3 programs to be as seamless as possible.

I did originally do some digging, hoping that there was a toolbar object that I could just add to my application, but sadly I couldn’t find one.

This of you will have noticed that several days ago I posted an entry about finding the correct icons (https://potatoit.wordpress.com/2013/09/18/using-the-pretty-infor-images-but-which-is-the-right-one/) – and the precursor to that script (a C# program rather than the jscript) was what I used to determine which icons I needed.

This is a pretty straight forward solution which I pushed in to its own UserControl so I could easily reuse it.

  1. we create a horizontal StackPanel
  2. we add buttons with icons
  3. we subscribe to and then republish the click events
  4. we subscribe to the mouse enter/leave events to provide visual feedback

Pretty simple really…

So I guess that’s the post done right?

No…not quite…

Again, most of the time on this little part of the project was spent around the UI front – and people wonder why my UIs are generally pretty…functional…but crap to look at 🙂

As mentioned in a previous post, finding the appropriate icons was little challenging – then determining what the difference between the Active and the normal icon were. Trivial things but they take time when you are compiling a project or you didn’t see all the enumerations members or whatever.

Then there was getting the layout consistent – this involved figuring out the width of each of the controls in the M3 toolbar because the icons used are actually smaller than the buttons that host them.

This involved using a tool that comes with Visual Studio called “Inspect Object”. This tool is WPF aware and allows you to inspect all of the visual elements on an open window.

Expanding out the toolbar I can see that there are buttons. Selecting one of the buttons changes the highlighting and provides me a wealth of information

I can see from the BoundingRectangle that the button is 30 width and 36 high.

From there I can calculate the width the of the toolbar for the buttons I want to display.

As I mentioned above, one of the things that we need to do is subscribe to the MouseLeave/MouseEnter events – so when the mouse moves over the icons we can swap the icon images.

Likewise, we need to handle the disabling and enabling of the buttons – providing different images depending on their state.

It is worth noting that in ISO10.0.5.x that the buttons actually had padding images in them. When I created this control I simply centred the icon in the button.

Several images instead of just the one.

Here we can see one of them is effectively ‘blank’

Anyways, most of the code is pretty straight forward no great tricks…though I must mention one thing…

I was reading a manual on C# a few weeks back (yes, it does happen) and discovered the AS keyword.

AS is a convenient way of casting, if the cast isn’t compatible then it leaves a null object…very handy.

Button currentButton = sender as Button;

Provides a nice wee example…

The results of the code are this:

Anyways, the XAML – pretty basic






And the Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace VesselMod
{
    ///
/// Interaction logic for ISOStandardToolbar.xaml
    ///
    public partial class ISOStandardToolbar : UserControl
    {
        public enum ToolbarButtons { btnSelect, btnChange, btnCopy, btnDelete, btnDisplay, btnCreate, btnRefresh };

        public delegate void CreateClickedEventHandler(object sender, RoutedEventArgs e);
        public event CreateClickedEventHandler CreateClicked;
        public delegate void SelectClickedEventHandler(object sender, RoutedEventArgs e);
        public event SelectClickedEventHandler SelectClicked;
        public delegate void ChangeClickedEventHandler(object sender, RoutedEventArgs e);
        public event ChangeClickedEventHandler ChangeClicked;
        public delegate void CopyClickedEventHandler(object sender, RoutedEventArgs e);
        public event CopyClickedEventHandler CopyClicked;
        public delegate void DeleteClickedEventHandler(object sender, RoutedEventArgs e);
        public event DeleteClickedEventHandler DeleteClicked;
        public delegate void DisplayClickedEventHandler(object sender, RoutedEventArgs e);
        public event DisplayClickedEventHandler DisplayClicked;
        public delegate void RefreshClickedEventHandler(object sender, RoutedEventArgs e);
        public event RefreshClickedEventHandler RefreshClicked;

        private Button btnCreate { get; set; }
        private Button btnSelect { get; set; }
        private Button btnChange { get; set; }
        private Button btnCopy { get; set; }
        private Button btnDelete { get; set; }
        private Button btnDisplay { get; set; }
        private Button btnRefresh { get; set; }

        public bool RefreshEnabled
        {
            get
            {
                return btnRefresh.IsEnabled;
            }
            set
            {
                btnRefresh.IsEnabled = value;
            }
        }

        public bool DisplayEnabled
        {
            get
            {
                return btnDisplay.IsEnabled;
            }
            set
            {
                btnDisplay.IsEnabled = value;
            }
        }

        public bool DeleteEnabled
        {
            get
            {
                return btnDelete.IsEnabled;
            }
            set
            {
                btnDelete.IsEnabled = value;
            }
        }

        public bool CopyEnabled
        {
            get
            {
                return btnCopy.IsEnabled;
            }
            set
            {
                btnCopy.IsEnabled = value;
            }
        }

        public bool ChangeEnabled
        {
            get
            {
                return btnChange.IsEnabled;
            }
            set
            {
                btnChange.IsEnabled = value;
            }
        }

        public bool SelectEnabled
        {
            get
            {
                return btnSelect.IsEnabled;
            }
            set
            {
                btnSelect.IsEnabled = value;
            }
        }

        public bool CreateEnabled
        {
            get
            {
                return btnCreate.IsEnabled;
            }
            set
            {
                btnCreate.IsEnabled = value;
            }
        }

        public ISOStandardToolbar()
        {
            InitializeComponent();

            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
            {
                return;
            }

            spTools.Background = Mango.UI.Core.StyleManager.BrushBackgroundApplicationBar;
            spTools.Orientation = Orientation.Horizontal;

            btnSelect = createToolbarButton(ToolbarButtons.btnSelect);
            btnChange = createToolbarButton(ToolbarButtons.btnChange);
            btnCopy = createToolbarButton(ToolbarButtons.btnCopy);
            btnDisplay = createToolbarButton(ToolbarButtons.btnDisplay);
            btnDelete = createToolbarButton(ToolbarButtons.btnDelete);
            btnCreate = createToolbarButton(ToolbarButtons.btnCreate);
            btnRefresh = createToolbarButton(ToolbarButtons.btnRefresh);

            btnSelect.IsEnabled = false;
            btnChange.IsEnabled = false;
            btnCopy.IsEnabled = false;
            btnDisplay.IsEnabled = false;
            btnDelete.IsEnabled = false;
            btnCreate.IsEnabled = true;
            btnRefresh.IsEnabled = true;

            spTools.Children.Add(btnCreate);
            spTools.Children.Add(btnSelect);
            spTools.Children.Add(btnChange);
            spTools.Children.Add(btnCopy);
            spTools.Children.Add(btnDisplay);
            spTools.Children.Add(btnDelete);
            spTools.Children.Add(btnRefresh);
        }

        ///
/// build a toolbar button - this includes subscribing to the appropriate events and setting the appropriate image
        ///
        ///the type of toolbar button to create
        /// the newly created button - this needs to then be added to our tree
        Button createToolbarButton(ToolbarButtons atbButtonType)
        {
            Button result = null;

            result = new Button();

            result.Style = Mango.UI.Core.StyleManager.StyleButtonToolBar;

            result.IsEnabledChanged += ToolbarButton_IsEnabledChanged;
            result.MouseEnter += ToolbarButton_MouseEnter;
            result.MouseLeave += ToolbarButton_MouseLeave;
            result.Click += ToolbarButton_Click;

            result.Name = atbButtonType.ToString();

            switch (atbButtonType)
            {
                case ToolbarButtons.btnCreate:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.New.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Create";
                    break;
                case ToolbarButtons.btnSelect:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.Select.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Select";
                    break;
                case ToolbarButtons.btnChange:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.Edit.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Change";
                    break;
                case ToolbarButtons.btnCopy:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.Copy.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Copy";
                    break;
                case ToolbarButtons.btnDelete:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.Delete.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Delete";
                    break;
                case ToolbarButtons.btnDisplay:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.Display.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Display";
                    break;
                case ToolbarButtons.btnRefresh:
                    result.Content = new Image() { Source = Mango.UI.Core.ImageResources.Refresh.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    result.ToolTip = "Refresh";
                    break;
            }

            return (result);
        }

        ///
/// One of the buttons has been clicked, generate an event
        ///
        ///
        ///
        void ToolbarButton_Click(object sender, RoutedEventArgs e)
        {
            Button currentButton = sender as Button;

            if (currentButton != null)
            {
                if (true == currentButton.IsEnabled)
                {
                    switch (currentButton.Name)
                    {
                        case "btnCreate":
                            if (null != CreateClicked)
                            {
                                CreateClicked(sender, e);
                            }
                            break;
                        case "btnSelect":
                            if (null != SelectClicked)
                            {
                                SelectClicked(sender, e);
                            }
                            break;
                        case "btnChange":
                            if (null != ChangeClicked)
                            {
                                ChangeClicked(sender, e);
                            }
                            break;
                        case "btnCopy":
                            if (null != CopyClicked)
                            {
                                CopyClicked(sender, e);
                            }
                            break;
                        case "btnDelete":
                            if (null != DeleteClicked)
                            {
                                DeleteClicked(sender, e);
                            }
                            break;
                        case "btnDisplay":
                            if (null != DisplayClicked)
                            {
                                DisplayClicked(sender, e);
                            }
                            break;
                        case "btnRefresh":
                            if (null != RefreshClicked)
                            {
                                RefreshClicked(sender, e);
                            }
                            break;
                    }
                }
            }
        }

        ///
/// Change the image displayed in the toolbar to the 'normal' icon
        ///
        ///
        ///
        void ToolbarButton_MouseLeave(object sender, MouseEventArgs e)
        {
            Button currentButton = sender as Button;

            if (currentButton != null)
            {
                if (true == currentButton.IsEnabled)
                {
                    switch (currentButton.Name)
                    {
                        case "btnCreate":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.New.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnSelect":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Select.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnChange":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Edit.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnCopy":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Copy.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDelete":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Delete.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDisplay":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Display.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnRefresh":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Refresh.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                    }

                }
            }
        }

        ///
/// Change the image displayed in the toolbar to the 'active' icon
        ///
        ///
        ///
        void ToolbarButton_MouseEnter(object sender, MouseEventArgs e)
        {
            Button currentButton = sender as Button;

            if (currentButton != null)
            {
                if (true == currentButton.IsEnabled)
                {
                    switch (currentButton.Name)
                    {
                        case "btnCreate":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.NewActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnSelect":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.SelectActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnChange":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.EditActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnCopy":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.CopyActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDelete":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.DeleteActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDisplay":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.DisplayActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnRefresh":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.RefreshActive.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                    }
                }
            }
        }

        ///
/// change the image displayed in the toolbar when the IsEnabled state changes
        ///
        ///
        ///
        void ToolbarButton_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            Button currentButton = sender as Button;

            if (currentButton != null)
            {
                bool? bState = e.NewValue as bool?;
                if (true == bState)
                {
                    // btnCurrentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Select.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                    switch (currentButton.Name)
                    {
                        case "btnCreate":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.New.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnSelect":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Select.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnChange":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Edit.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnCopy":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Copy.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDelete":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Delete.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDisplay":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Display.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnRefresh":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.Refresh.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                    }
                }
                else
                {
                    switch (currentButton.Name)
                    {
                        case "btnCreate":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.NewDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnSelect":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.SelectDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnChange":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.EditDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnCopy":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.CopyDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDelete":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.DeleteDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnDisplay":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.DisplayDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                        case "btnRefresh":
                            currentButton.Content = new Image() { Source = Mango.UI.Core.ImageResources.RefreshDisabled.Source, Stretch = Stretch.None, HorizontalAlignment = System.Windows.HorizontalAlignment.Center, VerticalAlignment = System.Windows.VerticalAlignment.Center };
                            break;
                    }
                }
            }
        }
    }
}

This entry was posted in Development, M3 / MoveX, SDK. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s