How do I create a custom component?
Custom Components
Custom components are LiveCode stack files that have a `FileMakerAction` handler in their main stack script. This is the main event to be handled when the stack needs to do something. In this lesson we will create a simple notification dialog that stays on screen for a set number of seconds and then goes away. You will need the LiveCode IDE and a copy of FileMaker 14 or 15 in order to complete this lesson. We will be including a customised build of the LiveCode IDE with your plugin download shortly. In the meantime, if you don't have a copy of Livecode you can download a free trial from your LiveCode for FM account, here. Once downloaded use your LiveCode for FM email address and password to activate the LiveCode IDE when prompted.
The screenshots in this lesson were made with LiveCode 9. There may be some variations depending on the version of Livecode you use to complete the lesson.
Creating the stack
Open LiveCode IDE and choose `File > New Stack > Default Size` from the menu
Choose `Object > Stack Inspector` from the menu to open the inspector
In the inspector change the name of the stack to `notification`
Add a background graphic
Drag a rounded rectangle graphic onto the stack from the `Tools`
When placed on your stack it should be selected. Double-click to open the inspector for the graphic and change the name to `background`.
Go to the `Colors` tab of the inspector and set the `Background fill` to black and the `Blend level` to 50
Add a title field
Drag a label style field from the `Tools` palette onto the stack and double-click to open its inspector.
Set its name to `title` in the inspector
Go to the `Colors` tab and set the `Text fill` to white
Go to the `Text` tab and set the text size to 21 and text alignment to center
Add a message field
The message field has almost the same settings as the title field with the exception of name and text size. Click on the `title` field and drag away while holding down the `alt` key. This will duplicate the field. Double-click and change the name to `message` and the text size to 14.
Grouping the objects
Click on the stack and choose `Edit > Select All` from the menu
With all the objects selected click on the `Group` button on the `Toolbar` then click on the `Select Grouped` toggle button on the `Toolbar` to make it look like it does in the picture below. This means that when you click on grouped objects you select the group rather than the individual objects. Double-click the group to open the inspector and name it `notification`
The stack script
Choose `Object > Stack Script` from the menu to open the script editor.
All of the code for this stack is in the stack script. The first thing our script will do is layout the objects on the stack and create a snapshot of the `notification` group to use as a window shape. It will do this by handling the `preOpenStack` event which is sent by LiveCode just before the stack is presented on screen.
on preOpenStack
-- delete any old window shape images
if there is an image "windowshape" then
delete image "windowshape"
end if
-- layout the title and message to fit the content
set the width of field "title" to max(the formattedWidth of field "title", 300)
set the topLeft of field "title" to 10,10
set the width of field "message" to the width of field "title"
set the height of field "message" to the formattedHeight of field "message"
set the topLeft of field "message" to the bottomLeft of field "title"
-- resize the background graphic to fit the content
set the rect of graphic "background" to 4,4,the right of field "message" + 6, the bottom of field "message" + 6
set the height of this stack to the height of group "notification"
set the width of this stack to the width of group "notification"
-- create an image from the notification group and use it as the stack window shape
import snapshot from group "notification"
set the name of the last image to "windowshape"
set the windowShape of me to the id of image "windowshape"
hide image "windowshape"
-- center the stack on screen
set the location of me to the screenLoc
end preOpenStackThe next step is to add the `FileMakerAction` handler to the stack script.
on FileMakerAction pAction
-- set the text of the fields to the parameters sent from FileMaker
put fmParam(1) into field "title"
put fmParam(2) into field "message"
-- the third parameter is an optional duration the stack will
-- be presented to the user with a default of 5 seconds
local tTimeOut = 5
if fmParam(3) is a number then
put fmParam(3) into tTimeOut
end if
-- send a message in time to close the stack and return to FileMaker
send "DoCloseStack" to me in tTimeOut seconds
-- open the stack as a modal dialog
go this stack as modal
end FileMakerAction
on DoCloseStack
-- closing the modal stack will allow the FileMakerAction handler to
-- complete and return to FileMaker
close this stack
end DoCloseStackImporting into LiveCode for FM
The stack is now complete and just needs to be imported into LiveCode for FM as a custom component. Save the stack in a location you can remember and open the LiveCode for FM solution and click on the `Custom Components` button.
Click on the `+`(1) icon to add a new component and choose the saved stack file in the file dialog. Name the component `notification` to match the stack name and click `OK`. When you return to the `LiveCode Workspace` click the `Close`(2) button
Testing in a solution
Open an existing FileMaker solution or create a new solution in by choosing `File > New Solution...` from the FileMaker menubar
Enter layout mode if not already by clicking on the `Edit Layout` button.
Add a button to the layout by choosing the button tool and dragging on the solution to draw the button.
With the button selected right click and choose `Button Action > Single Step..` to open a script step editor for the button.
Set the script step for the button as follows:
Return to `Browse` mode and click on the button and you should see something like the animation below.
0 Comments
Add your comment