Adobe 65007312 Programming Guide - Page 181

CHAPTER 9: Getting Started: A Tutorial Example Adding a data observer 181 Create an observer for a data property To make the text dynamic, we are going to add an observer for the props.myObservedString key. The observer is notified whenever the observed property changes; we will tell it to update the text in showValue_st. 6. When the observer receives a notification it invokes a function. Create the function that will be used by the observer: local myCalledFunction = function() showValue_st.title = updateField.value -- reflect the value entered in edit box showValue_st.text_color = LrColor( 1, 0, 0 ) -- make the text red end This makes the showValue_st text dynamic, by resetting its title value when the observed property changes. It also turns the text red to show that it has fired. 7. Now add the observer to the observable table. This associates the function with a specific property in the table: props:addObserver( "myObservedString", myCalledFunction ) This observer is notified, and calls the response function, whenever the value of the key myObservedString is modified. Create the dialog contents Now you will create the view hierarchy that defines the custom-UI portion of the dialog. This one uses a column as the top-level container, which contains two rows, which in turn contain the visible controls. In this case, the controls include the showValue text box and the updateField edit box that we already defined, along with additional labels and a push button. 8. Create the view hierarchy: local c = f:column { --The top-level container, arranges all the rows vertically f:row { -- a group of labels arranged horizontally fill_horizontal = 1, -- the row fills its parent's width f:static_text { -- add a right-aligned label alignment = "right", width = LrView.share "label_width", -- all get the same width title = "Bound value: " }, showValue_st, -- the text box we already defined }, -- end f:row f:row { -- another group, a labeled edit box and button f:static_text { alignment = "right", width = LrView.share "label_width", -- shared with other label title = "New value: " }, updateField, -- the edit box we already defined -- add push button }, -- end row } -- end column 9. We will add one more element, a push button. This demonstrates another way to define the behavior of your UI, by specifying a direct action to be taken in response to clicking the button. In this case, the