I am a simple man – so it will come as no surprise that I get a little puzzled by some of the enumerations in ISO and what they actually mean. Colours, aesthetics, meh. 🙂

As I was in the process of trying to create a look-a-like create/edit toolbar like thisfor my replacement of a modification, I wasn’t really sure which icons I should be using.

I knew that I should be using the Mango.UI.Core.ImageResources from the Mango.UI.dll but really, what did the different variations mean?

We have Delete, we have DeleteActive and DeleteDisabled. For the toolbar and a few other buttons, I want to provide the M3 standard feel for them. The less change means the less phone calls I get explaining that yes, even though the colour of the icon is orange rather than red, it still does the same thing.

Trying the variations, going through the ‘search’, ‘change’, ‘compile’, ‘run’ process was just too time consuming. So what did I do? Wrote a jscript of-course. Well, truth be told I actually wrote a little feature with the SDK, but THEN I converted it so it was a jscript.

This little jscript will use reflection to get the names and vales from the ImageResources and it will display the names in a ComboBox (why I didn’t use a ListView I really don’t know). When you select an item out of the ComboBox it will display the corresponding image below.

Oh, and the script is a stand-alone script using the technique described in Thibauds blog here: http://thibaudatwork.wordpress.com/2012/05/08/stand-alone-scripts-for-smart-office/

And the results are here:

The C# version actually sorts the values in the ComboBox, but I didn’t get time to add the functionality to the jscript version.

The toolbar created in my Vessel Mod looks like this on Smart Office 10.1.0.19

And finally the code

import System;
import System.Windows;
import System.Windows.Controls;
import MForms;

import Mango.UI;
import Mango.UI.Core;
import Mango.UI.Services;
import Mango.Services;

import System.Reflection;

package MForms.JScript
{
	class setStyles
	{
		// the stack panel we use on our window
		var myStackPanel : StackPanel = new StackPanel();
		// the combobox which will be populated to a list of the images
		var myComboBox : ComboBox = new ComboBox();
		// where  we will display the actual image
		var myImage : Image = new Image();
		var gdebug;
		
		public function Init(element: Object, args: Object, controller : Object, debug : Object)
		{
			var content : Object = controller.RenderEngine.Content;
			
			gdebug = debug;
			
			// here we create our stand-alone window
			var myTask = new Task(new Uri("jscript://"));
			
			var myRunner = DashboardTaskService.Current.LaunchTask(myTask, HostType.Embedded);
			myRunner.Status = RunnerStatus.Running;
			var myHost = myRunner.Host;
			myHost.Width = 800;
			myHost.Height = 400;
			myHost.Show();
			// here we end the creation of our stand-alone window
			
			// set some parameters for our image UI object
			myImage.Width = 600;
			myImage.Height = 300;
			// ensure that we aren't going to stretch the image at all
			myImage.Stretch = System.Windows.Media.Stretch.None;
			
			// add the combobox and the image to the stackpanel
			myStackPanel.Children.Add(myComboBox);
			myStackPanel.Children.Add(myImage);
			// add the stackpanel to the window
			myHost.HostContent = myStackPanel;
			
			myComboBox.Width = 200;
			
			// we are going to display the "Name" property of the reflected information
			myComboBox.DisplayMemberPath = "Name";
			// retrieve the properties and add them to the ComboBox
			myComboBox.ItemsSource = getImagesList();
			// now register the event which will let us know the user has selected something
			// new from the combobox
			myComboBox.add_SelectionChanged(myCombboxSelectionChanged);
		}
		
		function myCombboxSelectionChanged(sender : Object, e : SelectionChangedEventArgs)
		{
			// I've put this in a try as not all of the values
			// that we get back are images.
			// As this is a quick hack, I'm not really interested
			// in spending too much time handling all of the situations
			// nicely
			try
			{
				// verify that we have a selected item errr...selected
				if(null != myComboBox.SelectedItem)
				{
					// we populated the ItemSource with a list of PropertyInfo items
					// then we will assume we get a PropertyItem back
					var myPropertyInfo : PropertyInfo = myComboBox.SelectedItem;
					
					// retrieve the value from this PropertyInfo item
					// we are pretty much going to assume that it is an Image
					// if not, we will generate an exception which gets captured below
					var currentImage = myPropertyInfo.GetValue(myPropertyInfo);
					if(null != currentImage)
					{
						// no exception, so we'll set the Image UI element to the image retrieved
						myImage.Source = currentImage.Source;
					}
				}
			}
			catch(ex)
			{
				gdebug.WriteLine("Exception: " + ex.Message + Environment.NewLine + ex.StackTrace);
			}
		}
		
		// retrieve the properties from the Mango.UI.Core.ImageResources
		// and return a list of them
		// this will be popped in to the ItemsSource of the ComboBox
		function getImagesList()
		{
			var result = null;
			
			var ir : Mango.UI.Core.ImageResources = new ImageResources();
			
			result = ir.GetType().GetProperties();
			
			return(result);
		}
	}
}

Update: if you have Mashups, there is an excellent post on the Smart Office blog to achieve what I was after which is far easier to use!
http://smartofficeblog.com/2013/10/30/icons-and-icon-buttons/