Jump to: navigation, search

Difference between revisions of "HowTo:Inject UI into UBIK Studio"

 
(31 intermediate revisions by one other user not shown)
Line 1: Line 1:
−
{{UnderConstructionStart}}
+
Since version 5.2 {{Version/ServerSince|5.2.0}} it is possible to inject UI into {{UBIK}} Studio.<br>
−
 
+
−
Since version 5.1 {{Version/ServerSince|5.1}} it is possible to inject UI into {{UBIK}} Studio.<br>
+
 
The injected UI can be displayed inside a User Control and or Window.<br>
 
The injected UI can be displayed inside a User Control and or Window.<br>
−
This article will help you to inject your UI!<br>
+
This article will explain how to inject the desired UI.<br>
 
<!-- DO NOT REMOVE THIS -->{{Template:HowTo/Begin}}<!-- DO NOT REMOVE THIS -->
 
<!-- DO NOT REMOVE THIS -->{{Template:HowTo/Begin}}<!-- DO NOT REMOVE THIS -->
 
= User Control =
 
= User Control =
−
The existing User Control list can be extended to provide additional controls.<br>
+
===Goal===
−
[[File:ControlDropDown.png|thumb|left|220px|Extended user control list]] <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+
The goal is to extend the existing user control list with the injected user control.<br>
 +
The mentioned list pops up every time an instance is dragged to a new tab header.
 +
[[File:InjectedUserControl.png|thumb|left|735px|Extended user control list]]
 +
<br clear="all" />
 
=== Implementation ===
 
=== Implementation ===
−
1. Paste your UserControl into your plugin solution.<br>
+
# Create or reuse a vs .NET library (DLL) project - it doesn't have to be a {{UBIK}} Module.
−
2. Make your UserControl implements IUBIKEnvironmentControl and add the export.<br>
+
# Add the designated control as a class deriving from System.Windows.Forms.UserControl to the project.
−
<syntaxhighlight lang="csharp">
+
# Implement the interface IUBIKEnvironmentControl for the control.
 +
# For automatic injection, add the "Export" Attribute with the "IUBIKControl" type parameter to the designated control.
 +
#;<syntaxhighlight lang="csharp">
 
[Export(typeof(IUBIKControl))]
 
[Export(typeof(IUBIKControl))]
 
public partial class TestUserControl: UserControl, IUBIKEnvironmentControl
 
public partial class TestUserControl: UserControl, IUBIKEnvironmentControl
 
</syntaxhighlight>
 
</syntaxhighlight>
−
3. The user control now has a property Description and Image.<br>
+
# The user control now has a property Description and Image.
−
4. Set the properties in the constructor of the User Control. The text of description and the image will show up in the User Control List.
+
# Set the properties in the user control's constructor. The image and description can be loaded directly from the .NET project's resources. These values will then be displayed in the User Control list.
−
<syntaxhighlight lang="csharp">
+
#;<syntaxhighlight lang="csharp">
 
   public TestUserControl()
 
   public TestUserControl()
 
   {
 
   {
 
       InitializeComponent();
 
       InitializeComponent();
−
       Description = "test control";
+
       Description = Properties.Resources.Description;
−
       Image = image;
+
       Image = Properties.Resources.MyImage;
 
   }
 
   }
 
</syntaxhighlight>
 
</syntaxhighlight>
−
5. After making the changes make sure to update the plugin in the injection folder.<br>
+
# Provide the updated DLL containing your user control in UBIK® Studio's [[Injection_Management#Injection_Folder.28s.29|Injection]] folder.
−
6. When starting {{UBIK}} Studio the new user control will show up in the list.<br><br>
+
# After connecting to a database with UBIK® Studio, the new control can be accessed by right-clicking or dragging a UBIK® object on a tab header - it should appear in the list of possible controls.
  
 
= Window =  
 
= Window =  
−
A new button can be added to the UI and open the injected UI
+
=== Goal ===
−
[[File:InjectedButton.png|thumb|280px|Injected button]]
+
The goal is to extend the toolbar by injecting a button that opens the desired window.<br>
 +
In addition, the “View” menu will be extended with a new entry that also opens the window.
 +
[[File:InjectedButton.png|thumb|left|298px|Injected button]]
 +
[[File:InjectedMenuEntry.png|thumb|left|508px|Injected menu entry]]
 +
<br clear="all" />
  
 +
=== Implementation ===
 +
# Create or reuse a vs .NET library (DLL) project - it doesn't have to be a {{UBIK}} Module.
 +
# Add the designated window as a class deriving from System.Windows.Window to the project.
 +
# Create a new class.
 +
# Implement the inferface IUBIKWindowFactory for the new class.
 +
# For automatic injection, add the "Export" Attribute with the "IUBIKWindowFactory" type parameter to the designated class.
 +
#;<syntaxhighlight lang="csharp">
 +
[Export(typeof(IUBIKWindowFactory))]
 +
public class TestWindowFactory : IUBIKWindowFactory
 +
{
 +
    public Bitmap Icon =>Properties.Resources.MyImage;
 +
 +
    public string Label => Properties.Resources.MyLabel;
 +
 +
    public Window GetWindow(UBIKEnvironment env)
 +
    {
 +
        return new TestWindow(env);
 +
    }
 +
}
 +
</syntaxhighlight>
 +
# The class now has a Icon and Label property.
 +
# Set the values for both properties. The icon and label can be loaded directly from the .NET project's resources (example above). The button and the menu entry will display the values.
 +
# In the GetWindow method, return your window (step 2).
 +
# Provide the updated DLL containing your window in UBIK® Studio's [[Injection_Management#Injection_Folder.28s.29|Injection]] folder.
 +
# After connecting to a database with UBIK® Studio, the new window can be accessed with the new button in the toolbar as well as under the "View" menu.
 
<!-- DO NOT REMOVE THIS -->{{Template:HowTo/End}}<!-- DO NOT REMOVE THIS -->
 
<!-- DO NOT REMOVE THIS -->{{Template:HowTo/End}}<!-- DO NOT REMOVE THIS -->
 +
 +
==See also==
 +
* [[Injection_Management#Injection_Folder.28s.29|Injection Management]]
 +
 +
[[Category:How-To|Inject UI into UBIK Studio]]
 +
[[Category:Injecting|Inject UI into UBIK Studio]]
 +
[[Category:Plugin|Inject UI into UBIK Studio]]
 +
[[Category:Studio|Inject UI into UBIK Studio]]

Latest revision as of 20:52, 17 June 2026

Since version 5.2 it is possible to inject UI into UBIK® Studio.
The injected UI can be displayed inside a User Control and or Window.
This article will explain how to inject the desired UI.

[edit]

User Control

Goal

The goal is to extend the existing user control list with the injected user control.
The mentioned list pops up every time an instance is dragged to a new tab header.

Extended user control list


Implementation

  1. Create or reuse a vs .NET library (DLL) project - it doesn't have to be a UBIK® Module.
  2. Add the designated control as a class deriving from System.Windows.Forms.UserControl to the project.
  3. Implement the interface IUBIKEnvironmentControl for the control.
  4. For automatic injection, add the "Export" Attribute with the "IUBIKControl" type parameter to the designated control.
    [Export(typeof(IUBIKControl))]
    public partial class TestUserControl: UserControl, IUBIKEnvironmentControl
  5. The user control now has a property Description and Image.
  6. Set the properties in the user control's constructor. The image and description can be loaded directly from the .NET project's resources. These values will then be displayed in the User Control list.
      public TestUserControl()
      {
          InitializeComponent();
          Description = Properties.Resources.Description;
          Image = Properties.Resources.MyImage;
      }
  7. Provide the updated DLL containing your user control in UBIK® Studio's Injection folder.
  8. After connecting to a database with UBIK® Studio, the new control can be accessed by right-clicking or dragging a UBIK® object on a tab header - it should appear in the list of possible controls.

Window

Goal

The goal is to extend the toolbar by injecting a button that opens the desired window.
In addition, the “View” menu will be extended with a new entry that also opens the window.

Injected button
Injected menu entry


Implementation

  1. Create or reuse a vs .NET library (DLL) project - it doesn't have to be a UBIK® Module.
  2. Add the designated window as a class deriving from System.Windows.Window to the project.
  3. Create a new class.
  4. Implement the inferface IUBIKWindowFactory for the new class.
  5. For automatic injection, add the "Export" Attribute with the "IUBIKWindowFactory" type parameter to the designated class.
    [Export(typeof(IUBIKWindowFactory))]
    public class TestWindowFactory : IUBIKWindowFactory
    {
        public Bitmap Icon =>Properties.Resources.MyImage;

        public string Label => Properties.Resources.MyLabel;

        public Window GetWindow(UBIKEnvironment env)
        {
            return new TestWindow(env);
        }
    }
  6. The class now has a Icon and Label property.
  7. Set the values for both properties. The icon and label can be loaded directly from the .NET project's resources (example above). The button and the menu entry will display the values.
  8. In the GetWindow method, return your window (step 2).
  9. Provide the updated DLL containing your window in UBIK® Studio's Injection folder.
  10. After connecting to a database with UBIK® Studio, the new window can be accessed with the new button in the toolbar as well as under the "View" menu.

See also

Retrieved from "https://wiki.augmensys.com/index.php?title=HowTo:Inject_UI_into_UBIK_Studio&oldid=29977"