Nieuwe interface elementen in FileMaker 14

Nieuwe interface elementen in FileMaker 14

Met de lancering van FileMaker 14 krijgen developers allerlei nieuwe tools ter beschikking. Sinds versie 12 zijn er grote stappen gezet voor de interface. Zaken als popoverknoppen, slidecontrols, bijvoorbeeld, maar ook de opzet met thema’s en stijlen geven nieuwe mogelijkheden.

In FileMaker 14 zijn er twee nieuwe elementen die vandaag toegelicht worden. Ze lijken op het eerste zicht niet zo grondbrekend, maar kunnen toch meer betekenen dan op het eerste zicht lijkt. Daarom willen we vandaag deze twee elementen met u overlopen.

Het Navigatiegedeelte

Part Definition

U heeft per layout keuze uit twee navigatiegedeelten. U kan er één bovenaan plaats, of onderaan. U kan ook beide gebruiken. Een navigatiegedeelte bevindt zich steeds bovenaan of onderaan het scherm en is steeds zichtbaar. Dit wil zeggen dat als u scrolt door een lange layout deze gedeelten niet verdwijnen. Ze nemen ook de volledige breedte van het venster in, ongeacht of de layout nu ingesteld is op uitrekken of niet. Dit is wel een belangrijke eigenschap: als je een layout van 400 punten breed hebt, en je venster is 600 punten breed, dan wordt het navigatiegedeelte ook 600 punten breed weergegeven.

De Button Bar

De knoppenbalk is een reeks knoppen die samen één geheel vormen. Het voordeel is het vlot beheer van de knoppen, en een consistent beheer van de styling ervan. Maar knoppen hebben ook andere nieuwe opties gekregen waardoor dit nog meer mogelijkheden biedt.

In het bijgevoegde voorbeeldbestand ziet u een aantal mogelijkheden van de knoppenbalk, inclusief de nieuwe opties. Laten we even die opties overlopen.

Button Bar Options

Als u een knoppenbalk op een layout plaatst, kan u zowel een horizontale als verticale balk maken. U kan er zoveel plaatsen als u wenst. Zo kan u bijvoorbeeld een horizontaal hoofdmenu plaatsen in een top-navigatiegedeelte en een submenu aan de zijde. Een knoppenbalk bestaat in hoofdzaak uit vier elementen: de knoppenbalk, de scheidingslijnen, de knoppen en de iconen. Deze vier elementen vindt u ook terug in de inspector voor het opmaken van de knoppenbalk

Button Bar Parts

Ik kom zometeen nog terug op het opmaken van deze elementen, maar laten we eerst even het opzetten van een knoppenbalk bekijken. Allereerst kan u het soort label voor elke knop kiezen. Vanaf FileMaker 14 kan u namelijk ook iconen gaan gebruiken in knoppen. Standaard bevat FileMaker 14 al een aantal basisiconen, maar u kan die ook zelf toevoegen. U zal later zien dat we bovendien heel wat controle krijgen over de styling van onze iconen.

Voor uw label kan u kiezen voor een tekstlabel, een icon, of een combinatie van beide, waarbij u kan kiezen of het icon boven, onder, links of rechts van de tekst staat. Vervolgens kan u ook kiezen welke knop actief is. Bijvoorbeeld voor een layout “Klanten” kan u de knop “Klanten” als actief tonen zodat de gebruiker vlot ziet waar hij zich bevindt in de layout. Let wel, de actieve staat blijft actief tot een andere knop in dezelfde knoppenbalk is aangeklikt en de actieve staat over neemt.

Nieuw voor tekstlabels is dat u ook calculaties kan gebruiken. Als we vroeger in een knop een aanpasbare tekst wilden, moest een variabele of een custom veld worden gebruikt. Nu kan u eenvoudig via calculaties uw tekstlabels invullen.

Calculated Button Bar Label

De “knoppennavigatie” is vergelijkbaar met die van de slidepanels. U kan doorheen uw knoppen navigeren en knoppen toevoegen of verwijderen. Een volgende handig element is hoe je een knop in de knoppenbalk ook kan gebruiken als popover knop. De popoverknop kwam er in FileMaker 13 en heeft zich nu al zeker bewezen. Developers gebruiken ze voor dingen als kleine actiemenu’s, pickers voor categorieën, tonen en verbergen van extra portals, …

Ook in de knoppenbalk kan dit handig zijn. Zaken als een submenu in een hoofdmenu, bijvoorbeeld. U kan daardoor een menu hebben met daarin een submenu, wat op zich ook weer een knoppenbalk kan zijn. Maar u kan dat nog een stap verder nemen en in een slide control extra mogelijkheden toevoegen. Bijvoorbeeld een zoekscherm, het beknopt toevoegen van records, …

Button Bar Submenu

Let wel: als u een submenu in een slidecontrol implementeert, moet u voor gebruikers ook zorgen dat ze nog vlot een overzicht hebben van hun positie binnen dat submenu. Gebruikers zijn dit gewoon in het gebruik van menubalken binnen een OS, binnen een website, …

Handig is ook dat u een gewone knop kan omvormen tot een popover-knop, trouwens, en omgekeerd.  In tegenstelling tot gewone knoppen hoeft u hiervoor geen nieuw object te maken.

Ten slotte zijn er nog de acties. Aan elke knop kan u een actie koppelen. Zoals voorheen kan dit louter een enkelvoudige scriptstap zijn, of een volledig script. Ook leuk is dat u een scriptstap kan omvormen tot een script. Voorheen moest u de scriptstap verwijderen en een nieuw script koppelen aan uw knop. Nu kan u vertrekken vanuit die ene scriptstap en een volledig script er omheen bouwen. Voor popover-knoppen kunnen hier de scriptactiveringen ingesteld worden.

Opmaak

Nieuwe objecten in layouts vragen ook even wat aandacht voor de opmaak ervan. De knoppenbalk is een complex geheel van diverse elementen. Door de invoering van thema’s en stijlen in FileMaker 13 is het eenvoudiger om gestructureerd te werk te gaan.

Allereerst is er de knoppenbalk op zich. Hiermee kan u de randen rond het geheel bepalen, samen met het verankeren van de knoppenbalk aan de randen van de layout.
Vervolgens zijn er de scheidingslijnen. Die bevinden zich tussen de knoppen, niet aan de buitenzijde van de knoppenbalk. Zowel de knoppenbalk als de scheidingslijn hebben slechts één staat: normaal.

Het derde element is het segment, de individuele knop. Deze heeft vijf staten: actief, inactief, hover, ingedrukt en focus. Hierin worden zowel de achtergrond als het tekstlabel gedefineerd, maar dit wordt toegepast op alle knoppen in de knoppenbalk, u kan de knoppen niet individueel opmaken. Wel kan hier conditionele formattering toegepast worden, bijvoorbeeld bij knoppen die extra aandacht vragen. Elke individuele knop kan ook verborgen worden met de functionaliteit van “Verberg object wanneer ..”. Hierdoor wordt geen lege ruimte gecreëerd, maar worden de resterende knoppen herverdeeld over de breedte van de knoppenbalk.

Ten slotte is er nog het icoon. Iconen kunnen apart gestyled worden. FileMaker raadt aan om SVG bestanden (Scalable Vector Graphics) te gebruiken voor iconen. Zo krijgt u scherpe afbeeldingen als iconen, en kan u ze ook een aangepaste achtergrondkleur geven.

Ten slotte zijn er nog een aantal mogelijke toepassingen van deze knoppenbalk die u terug kan vinden in het voorbeeldbestand=

Taakbalk

Een taakbalk geeft gebruikers snel en vlot toegang tot acties die regelmatig worden uitgevoerd. Zaken als nieuwe records, labels printen, rapporten tonen, … kan u onder het hoofdmenu plaatsen, wat de vertrouwde omgeving van een OS benadert.

Filterbalk

Als u een portaal regelmatig wil filteren op bepaalde zaken, dan kan een knoppenbalk handig zijn. Bovendien toont de actieve status welke filter momenteel toegepast wordt.

Functieknoppen

Op grote layouts wil u soms beknopte functieknoppen plaatsen vlakbij belangrijke onderdelen. Door enkel iconen te gebruiken kan u veel plaats besparen. Gecombineerd met de popoverknoppen kan u veel functionaliteit op een beperkte plaats vlot gaan beheren. En waarom niet in een navigatiegedeelte onderaan het venster?

Hamburger Menu

Op mobiele toestellen is ruimte op layouts schaars. Webdesigners hebben al met dat probleem geworsteld. Zij losten dat op met het “hamburgermenu”. In FileMaker kan je dit vlot realiseren met een knop, een popoverknop en een opgemaakte knoppenbalk.

Voorbeeldbestand

Klik om het bestand te downloaden.

clickworks_admin