Click here to Skip to main content
13,146,742 members (79,713 online)
Click here to Skip to main content
Add your own
alternative version

Stats

6.4K views
542 downloads
17 bookmarked
Posted 21 Nov 2016

ManagedUI

, 21 Nov 2016
Rate this:
Please Sign up or sign in to vote.
An advanced managed environment for C# desktop applications.

A quick look at the final code of the tutorials project (My Project). This code is from Program.cs, includes the start-up parameters of that project.

Introduction

ManagedUI (Managed User Interface) is a .NET framework library written in C#, and can be considered as a getting-started library for creating a very advanced C# desktop applications. The idea is that ManagedUI can be like an engine for .NET windows desktop applications.

I decided to write this library a few years ago, when attempting to create new version for one of my projects AHD Subtitles Maker. The point is that I needed to rebuild my project because the old version didn't allow for further updates and specially for add-ons support. I started the project rebuild then the idea of MUI came to my head. At that point I stopped working on ASM and started on ManagedUI, so that ASM next version will be built using MUI.

Let's say you need to make a simple windows forms application that does simple tasks. You do it simply by creating a Windows Forms Application in Visual Studio, add then some controls, menu strip, etc. You handle some events (menu item click, button click, etc.) then your program is done and ready for use. But when your program becomes more complicated and huge with many controls and tasks, then your application requires a more advanced build and design, like:

  • Editable and dynamic menu items and toolbars. Can give end-user options to edit main menu, toolbars, theme and shortcuts (hotkeys)
  • Editable and dynamic tabs (control windows in the main window). Also you can give the end-user option to edit the tabs layout easily.
  • Dynamic built-in settings engine. Allows end-user to manage your application configuration easily, easy to create setting pages as well.
  • Add-ons support, the project uses MEF (see here), use services instead of just add-reference style.
  • Uses commands and command combinations instead of just calling methods and creating instances.
  • Multilingual interface support built in. You can make your project multilingual or simply single language.
  • An engine that can be used more than once to create more applications.
  • Easy to deal with and coding.

And that's the basic idea of MUI (Managed User Interface). You just worry about your services, commands, menu items and controls and the enviroment will order them all, allowing you (and end-users, where you can configure what end-user can do) to edit and configure the enviroment.

With the binaries file, I included a Tutorials file that explain step by step how to create a project, to get the code that used in tutorials please download the file TutorialProjectCode_MyProject.zip.

Here we will talk about how's MUI work and how to get started with it.

How does it work?

The main idea of MUI is:

  • We have services that get detected by the main core MUI.cs
  • When a service is detected, the Initialize() method of it is called. (MEF import thus services can be anywhere)
  • ManagedUI has a main service for GUI called GUIService. This service is responsible for managing the main window, main menu, toolbars and controls.
  • Also, there is another main service called CommandsManager. This service is responsible for managing the commands of the application.

    Commands are detected as well (MEF import thus commands can be anywhere), but to use command: developer needs to use the CommandsManager service to execute them, end-user can execute commands using menu items and/or commands combinations.

As a developer, you only need to:

  • Create services. Services are not required but it would be better to use them. The best use for service is a core that holds the important information for your program. In the Tutorials that included in the binaries file, We use one service that hold all information. When info is changed, an event is raised so all components can act depending on that change.
  • Create commands. Commands are the basic elements of MUI. Simply, a command is something can be executed (for example, you can make a command that opens a file and other saves that file). A full example of commands can be found at the tutorials that comes in the binaries file.
  • Create menu items. Menu items can be used both in main menu and toolbars. A menu item can be a way to execute a command, or simplly to hold commands. A full example of menu items also can be found at the tutorials that comes in the binaries file.
  • Create controls. Controls can be TabControl or SettingsControl. Tab controls are displayed for the user in the main window while the settings controls are used in settings only.

Once these elements are created, your application will be ready for use. Also, MUI has a built-in engine that implement the localizing of Windows Forms so your project can be multilingual (see Localizing Windows Forms).

Installation

Installation of MUI is very easy:

  • If you want to use binaries, just create a Windows Forms Application then add reference for ManagedUI in your project. Start using ManagedUI by using ManagedUI namespace.
  • If you want to use the source code (which is better since you can debug and change the build configuration of your project) just add ManagedUI project into your solution then add reference for it in the main project.

Simply create a new Windows Forms Application project

Right-click on solution then Add existing project.

Now it is the time to add some references for MUI and MEF (right-click on references then Add reference)

Done! We can now start coding.

Using the code

Coding with MUI is very simple. For a quick start, just open the Program.cs file of new created Windows Forms Application, the code will be something like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;

namespace MyProject
{
static class Program
{
     /// <summary>
     /// The main entry point for the application.
     /// </summary>
     [STAThread]
     static void Main()
     {
           Application.EnableVisualStyles();
           Application.SetCompatibleTextRenderingDefault(false);
           Application.Run(new Form1());
     }
   }
}

Just change the code to be like this:

using System;
using System.Windows.Forms;
using ManagedUI;

namespace MyProject
{
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);

            // We need to setup the MUI using parameters.
            MUIParameters parameters = new MUIParameters();
            parameters.ProjectTitle = "My Project";// Project title, this wil be displayed in the splash window as well.
            parameters.ProjectCopyright = "Copyright (C) <Year> <Author name>";// Enter your copyright message here.
            parameters.ProjectCopyrightMessage = "A short copyright message for the application. i.e. This program is protected by the law ....etc";
            parameters.ProjectVersion = "1.0.0";// Enter the program version here

            // Optionals
            parameters.ProjectIcon = null;// You can use an icon from the resources, from a file ...etc
            parameters.ShowSplash = true;// Set to false if you don't want to show the splash window on load
            parameters.UseColorForSplashBackground = true;// We are going to use color as background for splash window istead of image.
            parameters.SplashBackgroundColor = System.Drawing.Color.White;// hmmm ...
            parameters.SplashBackgroundImage = null;// You can set a background image for the splash window (when parameters.ShowSplash = true of course), the image will be displayed stretched.
            parameters.SplashSize = new System.Drawing.Size(650, 260);// We set this when the splash window doesn't fit our information.

            // !! OPTIONALS !!
            // GUIConfiguration settings are optionals, allows for further config for the app. All settings (properties) are set to true by default.
            // Change the GUI configuration, what's the GUI allows the end-user to do. We MUST change these settings here before the core load.
            // We can set the default main window size here, later on, user resizing values will be saved and used. This value is 1444, 906 by default.
            GUIConfiguration.MainWindowDefaultSize = new System.Drawing.Size(1000, 700);
            // Here we can disable the alility for user to change the interface language. If false, this will remove the commands and the menu items that allows the user
            // to change the language.
            GUIConfiguration.UserCanChangeLanguage = true;
            // Here we can disable the alility for user to edit the main menu. Same as above ...
            GUIConfiguration.UserCanEditMenu = false;
            // Here we can disable the alility for user to edit the shortczts. Same as above ...
            GUIConfiguration.UserCanEditShortcuts = false;
            // Here we can disable the alility for user to edit the theme. Same as above ...
            GUIConfiguration.UserCanEditTheme = true;
            // Here we can disable the alility for user to edit the theme. Same as above ...
            GUIConfiguration.UserCanEditToolbars = false;
            // Here we can disable the alility for user to hide or show tab controls. Same as above ...
            GUIConfiguration.UserCanHideTabs = true;
            // Here we can disable the alility for user to hide or show toolbars. Same as above ...
            GUIConfiguration.UserCanHideToolbars = true;
            // If you want to disable the default exit menu item and make one of your own .... the command won't be affected and will be still there.
            GUIConfiguration.EnableExitCMI = true;
            // If you want to disable the default help menu item and make one of your own .... the command won't be affected and will be still there.
            GUIConfiguration.EnableHelpCMI = true;
            // If you want to disable the default settings menu item and make one of your own .... the command won't be affected and will be still there.
            GUIConfiguration.EnableShowSettingsCMI = false;
            // SETTINGS
            // You can disable enviroment settings here
            // This settings control allows to edit the main menu.
            GUIConfiguration.EnableMenuItemsSettingsControl = false;
            // This settings control allows to edit the hotkeys.
            GUIConfiguration.EnableShortcutsHotkeysSettingsControl = false;
            // This settings control allows to edit the theme.
            GUIConfiguration.EnableThemeSettingsControl = false;

            // All we need now is to call this method at program's main !!
            MUI.Initialize(parameters);
        }
    }
}

Done! Hit F5 and the program will start!

Follow the tutorials, and finally the application will be like:

With MUI, we deal with attributes and resources. Examples:

A code of a service:

using System;
using ManagedUI;
using System.ComponentModel.Composition;

namespace MyProject
{
    [Export(typeof(IService))]
    [Export(typeof(MainService))]
    [ServiceInfo("MainService", "main.service", "The core service of the application.")]
    class MainService : IService
    {
    }
}

This service is good to go.

A code of a command:

using System.IO;
using System.Windows.Forms;
using System.ComponentModel.Composition;
using ManagedUI;

namespace MyProject
{
    [Export(typeof(ICommand))]
    [CommandInfo("New", "new")]
    class NewCommand : ICommand
    {
        [Import]
        MainService service;

        public override void Execute(object[] parameters, out object[] responses)
        {
            // We are going to use responses, one bool value indicates if the operation successed or not.
            // If you don't want to use responses (the command has no response), simple put:
            // responses = new object[0];
            responses = new object[1];

            // Put your code here ...

            // Set it false; the command is not completed
            responses[0] = false;
        }
    }
}

Command now is ready and can be located and executed. To execute this command, we can create a menu item that can do this:

using System.ComponentModel.Composition;
using ManagedUI;

namespace MyProject
{
    [Export(typeof(IMenuItemRepresentator)), Export(typeof(CMI))]
    [MIRInfo("New", "cmi.new")]
    [MIRResourcesInfo("CMI_Name_New", "CMI_Tooltip_New", "page_white_text")]
    [CMIInfo("new")]
    [Shortcut("Control+N", false)]
    class CMI_New : CMI
    {
    }
}

And yes, this menu item now ready to use, and executes the command 'new' we've created before. The attribute MIRResourcesInfo is used to get the menu item properties values from resources, thus the application is multilingual, we just create some string keys in the resources file!

And yes, no more code is need for a menu item!

For controls:

using System;
using System.ComponentModel.Composition;
using ManagedUI;
using System.IO;

namespace MyProject
{
    [Export(typeof(ITabControl))]
    [ControlInfo("Disks", "tc.disks")]
    [TabControlResourceInfo("TC_Name_Disks", "")]
    class TCDisks : ITabControl
    {
        // Some fields will be created automatically by Visual Studio windows forms designer here ...

        private void InitializeComponent()
        {
            // This method is created automatically by Visual Studio windows forms designer.
            // Don't worry about it, MUI will find it and call it automatically. Never use, call or change it anywhere in your code !!
        }
        // To get and use services, you can do imports like this:
        [Import]
        private MainService service;
        // Or you can simple access it from MUI.cs

        public override void Initialize()
        {
            base.Initialize();
            // Some code when this control is first detected goes here ...
        }

        // Event handlers codes here....
    }
}

We just design our control, handle events, and change information in a service. Once that info is changed, events will be raised and other controls and components react! This is the main idea of MUI :)

I'm still working on a big document file that include all the references of each type of MUI. With the Demo Project that come with the source code and the tutorials, I think you can get started with the basics.

Publishing the project, the final touchs

When you are finished with menu items and need to edit the main menu, to create the default main menu just go to View>Edit Menu

And of course, the menu items you create will be listed when you want to add one of them. There are several types, each one have it's use.

  • Root items can be added as roots (File, edit ...etc)
  • Parent can be anywhere (but not as root), can have tooltip and icon, cannot be executed. Used for holding items (i.e. Add item in Add>Something).
  • Commandable (CMI) can be anywhere as well (but not as root), can have tooltip and icon, and can be executed (executes a command you specify in the attr of that menu item). These items can hold other items as well and can be executed at the same time. (New, Open, Save ...etc)
  • Spliter is used only for splitting between items. Cannot be coded or created. Only used in map (can be added by an editor only)
  • Dynamic can be anywhere, can only habe a tooltip. This one is used to have children items that dynamically changed (Recent OpendFiles, Recent Opened Projects ...)
  • Textbox is a text box item. Can be anywhere and have special events and handlers.
  • Combbox as same as textbox, can be anywhere and have special events and handlers.

Depending on your use, you create the items. When you done, you place them in toolbar and/or main menu. The same goes with toolbars, theme, shortcuts ....

But what about end-user? You may mot want your main menu editable, or toolbars, theme, tabs layout, etc.

Okay, let's talk how MUI handle this :)

  1. When MUI is started, it checks the GUIConfiguration (we add in Program.cs, remember?). To see what's allowed and what's not for end-user.
  2. MUI will look for menu, toolbar, theme, shortcuts and controls files for default menu, toolbar, theme, shortcuts and controls settings in the documents (MUI creates a folder titled as same as your project title in the documents)
  3. If these files are not found, it looks for them in the bin dir (binaries dir when your app exe file is located and ManagedUI.dll) to load the default ones.
  4. If nothing is found, not in documents nor in bin dir, MUI will create the default layouts (default menu you see when you start a blank project, no control is there ...etc)

Thus, to make default layouts for your app (Menu, Toolbars, etc.)

  1. Design your application normally, when you are done with everything, place the controls as you like, edit the main menu as you like ....etc
  2. Close the app, MUI will save the settings files in the documents. Open the folder using explorer !!

  3. Copy the content of that folder into your project binaries folder

Now the settings you edited in the final steps will be used as default settings since when your app will run in new pc, the documents folder will not be existed; the files will not be located in the documents, thus MUI will use these files.

And if you don't allow (for example) end-user to edit the main menu using GUIConfiguration at the startup code (in Program.cs) then he/she will be stuck with the default main menu.

Same for other stuff, the toolbars, shortcuts, etc.

There is a project ManagedUIUtilities (comes in the full source code of ManagedUI), placing that utility in a MUI bin dir (like this in the picture above), it will allows to edit the settings without the need to copy and paste from documents to your project each time.

Points of Interest

For me, I will use this library for bulding new major versions for my programs. I decided to publish this library so that it may a good use for other developers whom which to get started with creating desktop applications but don't have the time for the enviroment coding (how's controls layout handled, menu items ...etc), MUI can provide something to start with. Even if you don't want to use MUI, you may get interested with how MUI works.

Coding with attributes is the best way I think about with coding. For example, I want to descripe the name and the id of something, I just put an attribute instead of creating properties, fields.. etc.

Please note that MUI is one way of creating desktop application that uses MEF, commands module, etc. There are more and maybe better ways to acomplish this.

I know that MUI lacks proper documentation, so please feel free to contact me at my email: ahdsoftwares[at]hotmail.com if you have questions, ideas, or bugs.

Also, you can get the latest updates for bin files and source code on the original hosting website: https://sourceforge.net/projects/managedui/

History

First created ASM v6 at 2013. ASM engine was so dynamic that gave me the idea of ManagedUI but was buggy.

Recreated ASM v6 again at 2014. The engine was better and all bugs are gone, too much to be done for a huge project such as ASM ...

In 2015 I noticed that ASM v6 engine can be used for more project, thus I decided to start with a project like an engine can be used to create projects, I canceled ASM v6 and started planning MUI.

In July 2016 started with MUI coding, finished it in November. I had to do some tests of it and done it with a base code of ASM v6. All tests went create and the project become almost; bugs free.

I decided to publish MUI and still working on ASM v6.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

Share

About the Author

Ala Hadid
Software Developer
Germany Germany
Programming and software development is my life Smile | :)

You may also be interested in...

Comments and Discussions

 
QuestionExample Pin
Ala Hadid10-Jun-17 13:12
memberAla Hadid10-Jun-17 13:12 
QuestionDocument file is released !! Pin
Ala Hadid25-Dec-16 10:50
memberAla Hadid25-Dec-16 10:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 21 Nov 2016
Article Copyright 2016 by Ala Hadid
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid