Hoe werkt de grafische vormgeving achter het 2e VGA klantendisplay in RetailVista POS?

Dit document beschrijft de technische opzet achter het 2e VGA klanten display, in het bijzonder hoe dat grafisch vormgegeven wordt.

Het 2e VGA klantendisplay is gebouwd op basis van Windows Presentation Foundation en maakt gebruik van XAML bestanden voor de vormgeving. XAML bestanden zijn het beste uit te leggen als een alternieve vorm van HTML, vooral gericht op Win32 (niet-browser) schermen.

NedFox levert een standaard set van XAML files mee binnen RetailVista POS, maar een grafisch bureau kan ook eigen bestanden ontwerpe voor een afwijkende vormgeving.

Via een appSetting regel 'XamlResourcesPath' in het .Config bestand van RetailVista POS kan een afwijkend bestandspad opgegeven worden waar xaml bestanden te vinden zijn. Indien niet opgegeven dan wordt de standaard data directory van RetailVista POS gebruikt, standaard is dat: C:\ProgramData\NedFox\RetailVistaPosV2\CustomerUI\

Dat pad is eenvoudig via de Windows Verkenner te bereiken door vanuit RetailVista POS te gaan naar ‘Help’, ‘Over RetailVista POS’ en daar op het knopje ‘Data directory’ te klikken.

Het klantscherm is opgebouwd uit een basis klantscherm waarin widgets geladen worden. Het is mogelijk om zowel het klantscherm zelf als de widgets apart aan te bieden. Als deze niet op disk staan, dan worden ze uit de aplicatie zelf geladen. Bestaat een bestand op disk, dan gaat deze voor op de intern aanwezige bestanden.

Het klantscherm bestaat intern onder de naam CustomerSalesDisplay.xaml. Deze pagina laad verschillende widgets zodat er een compleet klantscherm ontstaat. Deze pagina mag eventueel van disk geladen worden, er wordt dan gekeken naar het bestand Sales.xaml.

Sales.xaml (Intern CustomerSalesDisplay.xaml)

In het basis klantscherm sales.Xaml is het erg belangrijk dat in de header een juiste assembly verwijziging bestaat naar de assembly NedFox.RetailVista POS.UI.Customer. Als deze niet zoals hieronder staat aanwezig is dan zal RetailVista POS crashen bij het opstarten.

d:DesignHeight="384" d:DesignWidth="512" xmlns:my="clr-namespace:NedFox.RetailVistaPos.UI.Customer.Widgets;assembly=NedFox.RetailVistaPos.UI.Customer">

Closed.xaml (Intern CustomerClosedDisplay.xaml)

Deze pagina wordt geladen als de kassa gesloten is.

Standaard widgets

Zoals in de vorige paragraaf aangegeven maken xaml schermen gebruik van widgets. Dit is het beste uit te leggen als modules die op een pagina geladen worden. Momenteel wordt gebruik gemaakt van de volgende widgets vanuit het standaard GUI ontwerp:

SalesWidget.xaml (verkoop regels)

WeightWidget.xaml (weegschaal proces informatie)

TransactionDetailsWidget.xaml (Transactie totaal informatie)

PaymentsWidget.xaml (Betalingen)

SalesPromotionalWidget.xaml - Promotie gedeelte (weergave van promo afbeeldingen)

ClockWidget.xaml (Klok op scherm)

Voor elke widget wordt bij opstarten gecontroleerd of er een widget op disk bestaat. Zo ja, dan wordt die geladen, zo nee dan wordt de interne widget uit RetailVista POS zelf gebruikt.

Resources.xaml

Er zijn Styles gedefinieerd in Resources.xaml, daar verwijzen verschillende .xaml files naar via Style element. In Resources.xaml kunnen bv lettertypes en size aangepast worden. Door dit bestand extern op disk te plaatsen is de stijl van een POS omgeving instelbaar.
Promotie afbeeldingen

In de rechter kolom kan een promotie afbeelding afbeelding worden geplaatst. Op dit moment wordt gezocht in de ..\PosImages\ folder naar het bestand Promo.png.

Achtergrond afbeelding

Voor de achtergrond van het scherm wordt gebruik gemaakt van het bestand back.png in de ..\PosImages\ folder. Deze verwijzing staat in CustomerDisplayControl.xaml en is een intern RetailVista POS bestand welke momenteel niet aangepast worden door een ander .Xaml bestand.

Veel voorbeeld materiaal is te vinden als binaries bij dit QA document.