After those readings you can understand that reading the example in
http://lessons.livecode.com/m/datagrid/ ... -of-people
You create a datagrid
You change datagrid style form table to
Form.
A Form have a different template. It has also a
row behavior.
The row behavior has this standard code (it's already wrote in it):
Code: Select all
-- This script defines the behavior of your data grid's custom template. This behavior
-- only applies to 'forms' and not 'tables'.
on FillInData pDataArray
-- This message is sent when the Data Grid needs to populate
-- this template with the data from a record. pDataArray is an
-- an array containing the records data.
-- You do not need to resize any of your template's controls in
-- this message. All resizing should be handled in resizeControl.
-- Example:
set the text of field "Label" of me to pDataArray["label 1"]
end FillInData
on LayoutControl pControlRect
local theFieldRect
-- This message is sent when you should layout your template's controls.
-- This is where you resize the 'Background' graphic, resize fields and
-- position objects.
-- For fixed height data grid forms you can use items 1 through 4 of pControlRect as
-- boundaries for laying out your controls.
-- For variable height data grid forms you can use items 1 through 3 of pControlRect as
-- boundaries, expanding the height of your control as needed.
-- Example:
put the rect of field "Label" of me into theFieldRect
put item 3 of pControlRect - 5 into item 3 of theFieldRect
set the rect of field "Label" of me to theFieldRect
set the rect of graphic "Background" of me to pControlRect
end LayoutControl
on ResetData
-- Sent when data is being emptied because the control is no longer being used to display data
set the text of field "Label" of me to empty
end ResetData
on PreFillInData
-- Sent right before new data is going to replace existing data in the control
end PreFillInData
setprop dgHilite pBoolean
-- This custom property is set when the highlight of your custom template has
-- changed. By default the "Background" graphic will be highlighted for you.
-- You only add script here if you want to further customize the highlight.
-- Example:
if pBoolean then
set the foregroundColor of me to the dgProp["hilited text color"] of the dgControl of me
else
set the foregroundColor of me to empty
end if
end dgHilite
getprop dgDataControl
-- Required by library so that it can locate your control.
return the long ID of me
end dgDataControl
on mouseDoubleUp pMouseBtnNum
local theKey
-- Example of how to edit the contents of a field.
-- By passing the index of the record associated with copy of this template being displayed and
-- a key (array key) the data grid will automatically save the changes the user
-- makes and refresh the UI by calling FillInData and resizeControl.
if pMouseBtnNum is 1 then
if the dgProps["allow editing"] of the dgControl of me then
switch the short name of the target
case "Label"
put "Label 1" into theKey
EditFieldText the long ID of the target, the dgIndex of me, theKey
break
end switch
end if
end if
pass mouseDoubleUp
end mouseDoubleUp
Now let's see the example.
Remember that in a PC the coordinates X,Y of positions are starting from the top left;to right (X) and to down (Y).
The rect property specify the position of a control with two couple X,Y of point: the upper left and the bottom right, like "0,0,200,50".
The example changes the code of the row behaviour, it changes the
LayoutControl message:
########CODE#######
on LayoutControl pControlRect #pControlRect is a variable containing the rect of the row
#pControl rect is "0,0,200,50"
set the right of image "image" of me to item 3 of pControlRect - 5 #the right the the right border of the image, it set to 195
put the left of image "image" of me into theLeft #now theLeft contains the position of left side of the image
put the rect of field "name" of me into theRect #now theRect contains the rect boundaries like "10,10,50,60"
put theLeft - 10 into item 3 of theRect #now theRect is like "10,10,40,60", so theRect represent a shorter rect
set the rect of field "Name" of me to theRect #now field "Name" is shorter, there is a space between it and the image
#now we shrink to the left also the title#
put the rect of field "title" of me into theRect
put theLeft - 10 into item 3 of theRect
set the rect of field "Title" of me to theRect
#shrinked#
set the rect of graphic "Background" of me to pControlRect # this fill the background with the background image choosen
end LayoutControl
#####END OF CODE#####