Neues Modul

Beginnen Sie mit der Erstellung einer neuen Ansicht, indem wir ein neues POS-Modul erstellen. Wählen Sie in Visual Studio ein neues Projekt WPF Custom Control Library aus. Dieser Typ des Projekts erstellt automatisch die erforderliche Struktur und ermöglicht das schnelle Hinzufügen neuer Elemente. Zuerst besteht das leere Projekt aus dem Ordner Themes, in dem sich die Dateien Generic.xaml und CustomControl1.cs befinden, die gelöscht werden können.

Der nächste Schritt besteht darin, eine Module.cs-Klasse zu erstellen, die für die Registrierung unseres Moduls in der POS-Anwendung verantwortlich ist. Diese Klasse muss von dem ModuleBase (Comarch.POS.Presentation.Core) vererben und die Initialize-Methode entsprechend implementieren. Innerhalb dieser Methode können Sie eigene Services, Ansichten und Viewmodels registrieren , die Schaltflächen im Dashboard registrieren, eigene Steuerelemente registrieren, die Sichtbarkeit der Eigenschaften von Steuerelementen in der Schnittstellenverwaltung steuern, vorhandene Container und DataGrid im System verbinden (erweitern).

Damit unsere Benutzer die zukünftige Ansicht während der Ausführung der POS-Anwendung verwalten können, müssen Sie dem Ordner Themes ein neues Element vom Typ Resource Dictionary hinzufügen (rechts im Ordner Themes, dann wählen Sie im Kontextmenü wie folgt aus: Add, Resource Dictionary…). Benennen Sie das Element als ModernUI.xaml und speichern Sie es. In dieser Datei können Sie die Standardeigenschaften für die verwalteten Schnittstellenelemente (Ansichten, Steuerelemente) definieren – weitere Informationen finden Sie in  Verwaltung von Ansichten und denen Elementen. Anschließend muss die Ressource noch registriert werden. Dies wird in dem Konstruktor der Module-Klasse gemacht, indem folgende Zeile eingefügt wird:

LayoutService.RegisterResources(typeof(Module));

(LayoutService ist eine statische Klasse, die sich in Comarch.POS.Presentation.Core.Services befindet).

Eine Ansicht erfassen

Beginnen Sie mit der Erstellung einer neuen Ansicht, indem wir einen Ordner Views erstellen, in dem alle Ansichten des Projekts gespeichert werden, und einen Ordner ViewModels für ViewModels. Dann fügen Sie im Ordner Views ein neues Element vom Typ User Control (WPF) hinzu, z. B. mit dem Namen OrdersView.xaml.

Der nächste Schritt besteht darin, den Typ UserControl auf View in Comarch.POS.Presentation.Core zu ändern.

<core:View x:Class="Comarch.POS.Presentation.Sales.Views.OrdersView"
           xmlns:core="clr-namespace:Comarch.POS.Presentation.Core;assembly=Comarch.POS.Presentation.Core"

In code-behind entfernen Sie die Vererbung von einem UserControl und implementieren die erforderliche View-Schnittstelle.

Die Header-Eigenschaft ist ein String, der in der Sektion der Kopfzeile der Anwendung angezeigt wird – sie wird nur für diese Ansichten erforderlich, die als Hauptansichten geöffnet werden, da nur diese über eine Kopzeilenansicht verfügen. Sonst (d. h. Modal View und Message View) ist es nur erforderlich, String.Empty einzustellen. Es ist auch möglich, eine eigene Kopfzeile mit beliebigem Inhalt zu erstellen – mehr dazu in Benutzerdefinierte Kopfzeile hinzufügen.

Die HeaderLayoutId-Eigenschaft muss dagegen einen eindeutigen Namen für die Layout-ID enthalten, die für die ordnungsgemäße Verwaltung der POS-Ansicht vom Benutzer erforderlich ist. Lässt sich die Ansicht nicht verwalten, kann die Eigenschaft als String.Empty eingestellt werden. Für diese Dokumentation setzen Sie hier den Wert “OrdersViewId”.

Der Konstruktor der Basisklasse fordert ein Objekt vom Typ IViewModel, deswegen muss im nächsten Schritt ein Viewmodel erfasst werden. Im Ordner ViewModels erstellen Sie zuerst einen Ordner mit dem Namen Orders. Dann fügen Sie dazu eine neue OrdersViewModel-Klasse und eine IOrdersViewModel-Schnittstelle hinzu. Die Schnittstelle muss öffentlich sein und von IViewModel vererben. Die OrdersViewModel-Klasse muss ebenfalls öffentlich sein und die soll die ViewModelBase-Basisklasse, sowie die IOrdersViewModel-Schnittstelle implementieren.

Wenn Sie von ViewModelBase vererben, müssen sie die IsTarget-Methode implementieren. Sie wird während der Navigation aufgerufen und lässt die ViewModel-Instanz bestimmen, ob sie aktiviert werden soll oder nicht (mehr dazu in Zwischen Ansichten navigieren) – an dieser Stelle definieren Sie, dass sie True zurückgibt.

Wenn die Ansicht vom POS-Benutzer verwaltet werden soll, müssen Sie außerdem eine weitere Klasse hinzufügen, ein Viewmodel mit dem Namen DesignOrdersViewModel, das von DesignViewModelBase vererbt und die IOrdersViewModel-Schnittstelle implementiert. Die ganze Struktur wird auf dem folgenden Bild dargestellt.

Kehren Sie nun zum code-behind der OrdersView-Klasse zurück (Datei OrdersView.xaml.cs) und parametrisieren Sie den Konstruktor so, dass er einen Parameter vom Typ IOrdersViewModel mit dem Namen viewModel annimmt (beachten Sie, dass dieser Name relevant ist und dass der Parameter immer so genannt werden muss!). Danach wird der Konstruktor vervollständigt, indem ihm das ViewModel übergeben wird.

Der letzte Schritt ist die Registrierung der neuen Ansicht, die im Kapitel Ansichten für die Layoutverwaltung und -Navigierung registrieren .

Vorgefertigte Vorlage zur Erstellung eines Moduls mit leerer Ansicht im Beispiel Einfaches Modul mit einer neuen leeren Ansicht.

Benutzerdefinierte Kopfzeile hinzufügen

Für jede Basisansicht können Sie den Text der Kopfzeile festlegen, der oben in der POS-Anwendung angezeigt wird. Standardmäßig können Sie dort nur eine Zeichenfolge einfügen, die in der Header-Eigenschaft der Ansicht definiert ist. Wenn Sie eine komplexere Struktur in den Header einfügen möchten, können Sie eine eigene Kopfzeilenansicht erstellen.

Um eine Kopfzeile zu definieren, fügen Sie zuerst dem Ansichtsordner ein neues Element User Control (WPF) hinzu. Damit die Struktur klar wird, soll das Element mit dem Namen der Ansicht + der Suffix Header genannt werden (also wenn die Ansicht den Namen OrdersView hat, soll das Element OrdersViewHeader genannt werden).

Kehren Sie zum Schluss zum code-behind der OrdersView Ansicht zurück und stellen Sie im Konstruktor die Eigenschaften CustomHeaderType als Typ des genannten Headers ein. Der Kopfzeilenansicht wird der DataContext automatisch zugeordnet, der sich auf das ViewModel bezieht. In diesem Fall wird das OrdersViewModel. Dadurch können Sie Bindung direkt bei Eigenschaften auf dem Viewmodel verwenden.

public partial class OrdersView 
{
        public OrdersView(IOrdersViewModel viewModel) : base(viewModel)
        {
            CustomHeaderType = typeof (OrdersViewHeader);
            InitializeComponent();
        }
…
…

Ansichten für die Layoutverwaltung und -Navigierung registrieren

Nachdem die Ansicht erstellt wurde (Implementierung der Logik im ViewModel und UI in xaml), müssen Sie die Ansicht registrieren. Dazu öffnen Sie die Module-Klasse, die beim Erfassen des Projekts erstell wurde (siehe Neues Modul). In der Initialize-Methode fügen wir folgende Zeilen hinzu:

Register<IOrderViewModel, OrderViewModel>();
RegisterViews(new ViewStructure<OrdersView, DesignOrdersViewModel>("OrdersView", Resources.ResourceManager);

Die erste registriert das ViewModel im Container, wodurch eine Instanz der IOrdersViewModel-Schnittstelle automatisch in den Ansichtskonstruktor injiziert wird.

Mit der zweiten Methode kann der POS-Benutzer die Ansicht im Schnittstellenverwaltungsmodus registrieren, während die Anwendung ausgeführt wird. Dadurch wird der Benutzer die erstellte Ansicht sehen, nachdem er die Layoutverwaltung geöffnet hat. In der Ansicht können alle Elemente geöffnet und geändert werden, die Sie als verwaltbar definieren (mehr dazu im Kapitel Verwaltung von Ansichten und denen Elementen). In der Methode müssen zwei Parameter übertragen werden. Der erste ist der Schlüsselname in Ressourcen und der zweite ist die Instanz der Ressourcenmanager. Mithilfe von diesen Parametern kann der Name einer Ansicht in der Baumstruktur der Ansichten in der Layoutverwaltung der POS-Anwendung.

Wenn Sie eine Ansicht nicht im Schnittstellenverwaltungsmodus registrieren wollen, müssen Sie anstelle von RegisterViews die Methode RegisterForNavigation<TView >() verwenden.

RegisterForNavigation<OrdersView>();

Eine Ansicht zum Dashboard hinzufügen

Jede Ansicht kann dem Dashboard als Kachel (TileButton) eingefügt werden, damit die Ansicht in der Basisansicht geöffnet werden kann. Wenn Sie eine Ansicht zum Dashboard hinzufügen, wird sie automatisch auch zum Pullout-Sidebar-Menü hinzugefügt, das Sie von jeder der Basisansichten aus aufrufen können.

Um dem Menü eine zuvor erstellte Kachelansicht hinzuzufügen, registrieren Sie die Ansicht in der Initialize-Methode der Module-Klasse mit der Methode RegisterMenuTile<TView>, wobei TView der Name der Ansichtsklasse ist. Die Aufrufparameter sind dagegen der Schlüsselname in Ressourcen, Ressourcenmanager. Optional können Sie auch einen Delegaten canExecute definieren. Falls false zurückgegeben wird, wird die Kachel ausgegraut und kann nicht angeklickt werden. Sie können auch einen Delegaten für die Aktion angeben, die vor dem Öffnen der Ansicht durchgeführt werden sollen, und/oder die Berechtigungen definieren, die zum Öffnen der Ansicht erforderlich werden, zusammen mit einem Schlüssel in den Ressourcen, in der die Nachricht gespeichert wird, die im Modalfenster zur Erhöhung der Berechtigungen erscheint, falls die Berechtigungen nicht erfüllt sind (mehr über Berechtigungen in Überprüfung von Berechtigungen). Im folgenden Beispiel werden wir die zuvor erstellte Ansicht OrdersView registrieren.

RegisterMenuTile<OrdersView>("OrdersView", Resources.ResourceManager);

Sobald eine Ansicht im Dashboard registriert ist, kann die Ansicht über die entsprechende Kachel geöffnet werden, die dort sichtbar ist. Standardmäßig sieht die Kachel so aus, wie sie in der globalen Konfiguration der POS-Schnittstelle definiert ist. Um die visuellen Eigenschaften zu ändern, fügen Sie die entsprechenden Einträge in der Datei ModernUI.xaml hinzu, die sich im Ordner Themes befindet. Um zum Beispiel eine neue Standardfarbe für die neue Kachel festzulegen, die die OrdersView öffnet, fügen Sie den folgenden Eintrag hinzu:

<SolidColorBrush x:Key="OrdersView.Default.Background" Color="Red" />

Jeder Schlüssel in ModernUI wird über folgendes Format verfügen:

[LayoutId oder Name des Typs des Steuerelements].Default.[Name der Eigenschaft]

Die vollständige Definition:

<[Name des Typs der Eigenschaft] x:Key=”[Schlüssel je nach dem Format oben]” [Attribute]>[Wert]</[Name des Typs der Eigenschaft>

Attribute und der Wert sind nicht obligatorisch und hängen streng von der Art der Eigenschaft ab, mit der wir es zu tun haben.

Die LayoutId für die Kachel OrdersView wird im ersten Parameter der Methode RegisterMenuTile definiert. In diesem Fall ist die LayoutId, die in dem Schlüssel verwendet wird, der die Farbe der Kachel definiert, OrdersView, da dies der Wert ist, den Sie zuvor durch den Aufruf der Methode festgelegt haben, die die Ansicht als Kachel im Dashboard registriert. Die Eigenschaften, die durch die Layoutverwaltung unterstützt sind, sind von dem Typ des Steuerelements abhängig. Bei Kacheln ist dies das Steuerelement TileButton. Die Liste der unterstützten Elementen für einzelne Steuerelemente kann hier gefunden werden: Liste unterstützten Elemente

Ein Modul in die POS-Anwendung einfügen

Der letzte Schritt nach dem Kompillieren des zu erstellenden Moduls besteht darin, es in der Zielumgebung, d. h. der POS-Anwendung, auszuführen. Dazu muss das als Bibliothek (oder Bibliotheken) erstellte Modul in das Installationsverzeichnis der POS-Anwendung kopiert werden. Öffnen Sie dann die Datei POS.exe.config zur Bearbeitung, suchen Sie darin den Abschnitt <modules> und fügen Sie am Ende dieses Abschnitts ein neues Modul wie folgt hinzu:

<module assemblyFile=”[Name_des_Moduls].dll” moduleType=”[namespace_der_Moduleklasse].Module, [namespace_der_Moduleklasse]” moduleName=”[ Name_des_Moduls]” />

Wenn Sie mehr als eine Bibliothek haben, registrieren Sie nur die Bibliotheken, in denen die Module-Klasse implementiert ist.