![]() ![]() This plugin will run a script via our tooltip calculation upon detecting we need to either open or close the drawer. We are in fact also making use of a script-triggering plugin. So now it boils down to what we put in our tooltip as to how we can control opening/closing the drawer. This evaluation of the tooltip occurs almost instantly and repeatedly each time the mouse is moved (even though it may still take 1-2 seconds for the tooltip contents to normally appear). ![]() The calculation within the tooltip will be evaluated whenever the mouse cursor falls over the tooltip. The method we are using to determine where a mouse cursor is on the layout is to place tooltips on the layout. So how can we initiate a script based on where the mouse is? So how is this possible? FileMaker has no native mouse-over functionality, and in order to expand and collapse the drawer we obviously have to run a script. The mere act of placing your mouse cursor over the panel will expand it. I wanted to take this one step further however and remove the need for the user clicking a button to initiate the drawer expanding - wouldn't it be cool if you could just put your mouse over the draw to initiate it, similar to the web? Wait a minute, did you say mouse-over? This is a great demo for showcasing what can be done with slide panels in FileMaker Pro, how to structure a panel object for this sliding effect, and how can it can be implemented. In his demo, the user initiates the slide panel by clicking a button to reveal it, and another click to hide. One of those was from John Sindelar from Seedcode who published this great article in which he presents an animated sliding panel example. Recently, there have been a couple of great articles concerning sliding panels which prompted me to get my arse into gear and publish this one too. The demo file for this article has been in progress for a while now and I had been tinkering with it from time to time but never ready to publish. The drawer will also collapse upon moving the mouse off the drawer, just like in the website example above. This is one that will also animated, but also be activated upon hovering the mouse over it. In this article we are going to build a sliding drawer, but not just any sliding drawer. Moving the mouse off the expanded drawer will collapse it. When the mouse is placed over the drawer, it expands with an animated effect, revealing the full contents. The first image shows the collapsed drawer. Here is an example of a website that contains a sliding drawer. ![]() These can be placed in the drawer and the drawer can be opened when required to give access to the additional functionality. The drawer is most useful when the screen does not have enough room on it to contain further functionality and actions. They generally appear on the left edge of a screen, but can be on any edge if desired. For these two reasons the slide control becomes a good candidate for a number of other UI patterns, one of which is a sliding drawer.Ī sliding drawer (also known as a Navigation Drawer) is a control which expands to fill a larger portion of the screen when either pressed, hovered over with the mouse, or swiped with the finger on a touchscreen device. We can also script the navigation between slide panels. The action of moving from one slide control panel to another can be animated (or not animated) by way of script. The slide control is one of the first UI tools that has animation built into it. However it is quickly finding it's place in FileMaker Pro with a number of cool uses for it being introduced into the community. Because of it's primary function of sliding via a swipe, it is built with FileMaker Go in mind. The slide control is an exciting new layout tool introduced in FileMaker 13. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |