LiveCode for FM Manual Custom ComponentsHow do I create a custom component?

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 preOpenStack

The 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 DoCloseStack

Importing 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

E-Mail me when someone replies to this comment