Adobe 65007312 Programming Guide - Page 140

Defining messages from Lightroom to a previewed Returning values from live-update functions

Page 140 highlights

CHAPTER 6: Writing a Web-engine Plug-in Web HTML Live Update 140 While a page from your gallery is being previewed in Lightroom, a user might change a model variable using the control panel. In order to reflect the change in the previewed page, the Lightroom browser normally needs to reload the page. Lightroom clears all cached copies of the page, tells the browser to reload, and builds new HTML and CSS files in response to the browser's reload request. This process is time consuming, and can cause changes in color or other visually startling changes as the page loads. For a change as simple as a nudge in hue of a color slider, you might find this response unacceptably jarring. Live Update is intended to avoid browser reload, which disrupts the user experience. Live Update is a mechanism by which a web engine can intercept and prevent the reload operation, using DHTML/AJAX scripting techniques to alter the web page in place. DHTML/AJAX use JavaScript, which is executed in the context of the built-in web browser (rather than the Lua scripting environment of Lightroom in general). An HTML page in your web engine can incorporate JavaScript that uses Live Update to interact with Lightroom during a preview. This communication operates in both directions: X Lightroom sends messages to the page, making liveUpdate() JavaScript function calls into the page whenever the user alters a parameter in the gallery data model. If the call is successful, Lightroom does not request a page reload. X The page contains JavaScript that sends messages back to Lightroom in response to user events, such as a request for a text field edit, or to override a data model value. In order to enable this functionality, your plug-in must contain JavaScript implementations of the liveUpdate() functions and the event-handler callbacks. There is a sample implementation in the file live_update.js, which you can use or modify. It is part of the sample plug-ins provided with the SDK. To include the JavaScript file that implements Live Update in your pages, use a line such as this in your header.html template file: Defining messages from Lightroom to a previewed page To implement a message from Lightroom to your HTML web gallery, you define JavaScript live-update functions as properties of the JavaScript document object. There are two kinds of live update messages for different kinds of live update operations: X The document.liveUpdate function handles changes that involve gallery appearance (such as CSS properties) and text labels X The document.liveUpdateImageSize function handles changes that involve gallery image size. Implementation of either of these functions is optional. For simple galleries, the reload solution may be adequate. If you do not add any Live Update functions to your document object, Lightroom uses the default reload behavior. Returning values from live-update functions When a change affects a page that the browser has previously cached, Lightroom must ensure that the browser reloads that page, rather than displaying the cached version. Lightroom also maintains a cache,

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204

C
HAPTER
6: Writing a Web-engine Plug-in
Web HTML Live Update
140
While a page from your gallery is being previewed in Lightroom, a user might change a model variable
using the control panel. In order to reflect the change in the previewed page, the Lightroom browser
normally needs to reload the page. Lightroom clears all cached copies of the page, tells the browser to
reload, and builds new HTML and CSS files in response to the browser’s reload request. This process is time
consuming, and can cause changes in color or other visually startling changes as the page loads. For a
change as simple as a nudge in hue of a color slider, you might find this response unacceptably jarring.
Live Update is intended to avoid browser reload, which disrupts the user experience. Live Update is a
mechanism by which a web engine can intercept and prevent the reload operation, using DHTML/AJAX
scripting techniques to alter the web page in place. DHTML/AJAX use JavaScript, which is executed in the
context of the built-in web browser (rather than the Lua scripting environment of Lightroom in general).
An HTML page in your web engine can incorporate JavaScript that uses Live Update to interact with
Lightroom during a preview. This communication operates in both directions:
X
Lightroom sends messages to the page, making
liveUpdate()
JavaScript function calls into the page
whenever the user alters a parameter in the gallery data model. If the call is successful, Lightroom does
not request a page reload.
X
The page contains JavaScript that sends messages back to Lightroom in response to user events, such
as a request for a text field edit, or to override a data model value.
In order to enable this functionality, your plug-in must contain JavaScript implementations of the
liveUpdate()
functions and the event-handler callbacks. There is a sample implementation in the file
live_update.js
, which you can use or modify. It is part of the sample plug-ins provided with the SDK.
To include the JavaScript file that implements Live Update in your pages, use a line such as this in your
header.html
template file:
<script type="text/javascript" src="$theRoot/resources/js/live_update.js">
Defining messages from Lightroom to a previewed page
To implement a message from Lightroom to your HTML web gallery, you define JavaScript live-update
functions as properties of the JavaScript
document
object. There are two kinds of live update messages for
different kinds of live update operations:
X
The
document.liveUpdate
function handles changes that involve gallery appearance (such as CSS
properties) and text labels
X
The
document.liveUpdateImageSize
function handles changes that involve gallery image size.
Implementation of either of these functions is optional. For simple galleries, the reload solution may be
adequate. If you do not add any Live Update functions to your
document
object, Lightroom uses the
default reload behavior.
Returning values from live-update functions
When a change affects a page that the browser has previously cached, Lightroom must ensure that the
browser reloads that page, rather than displaying the cached version. Lightroom also maintains a cache,