Adobe 65007312 Programming Guide - Page 201

Customizing the Web Gallery UI, Add a binding to a control

Page 201 highlights

CHAPTER 11: Web Gallery Plug-ins: A Tutorial Example Customizing the Web Gallery UI 201 6. After the pagination code, add the link that actually retrieves the large image to be shown: Customizing the Web Gallery UI The next step is to customize the control panel of the Web Gallery page so that users can adjust values in the model data that we have defined, and allow changes that the user makes to be shown immediately in the Web Gallery browser using Live Update. To demonstrate these techniques, we will add an entry to the Site Info section of the panel that will allow users to modify the main title of the page, shown in the main frame. We will allow the user to edit the title string using a text-edit control in the Site Info section of the main control panel, or using in-place edit in the preview panel. Add a binding to a control 1. Add a variable to the data model to hold the title text. In the galleryInfo.lrweb file, add these lines to the model entry: ["metadata.siteTitle.value"] = "MySample", ["appearance.siteTitle.cssID"] = "#siteTitle", The second value associates the title with a style-sheet ID. 2. Add a views entry to the table returned by the galleryInfo.lrweb file: views = function( controller, f ) local LrView = import "LrView" local bind = LrView.bind local multibind = f.multibind return { labels = f:panel_content { bind_to_object = controller, f:subdivided_sections { f:labeled_text_input { title = "MySample", value = bind "metadata.siteTitle.value end, The Site Info section of the control panel on the Web Gallery page corresponds to the labels return value of the views function. We are creating a labeled_text_input control in this section, and binding its value to the data-model value that holds the site-title text.

  • 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
11: Web Gallery Plug-ins: A Tutorial Example
Customizing the Web Gallery UI
201
</lr:NextDisabled>
</lr:Pagination>
</ul>
</div>
6.
After the pagination code, add the link that actually retrieves the large image to be shown:
<a href="$gridPageLink">
<img src="bin/images/large/<%= image.exportFilename %>.jpg" />
</a>
Customizing the Web Gallery UI
The next step is to customize the control panel of the Web Gallery page so that users can adjust values in
the model data that we have defined, and allow changes that the user makes to be shown immediately in
the Web Gallery browser using Live Update.
To demonstrate these techniques, we will add an entry to the Site Info section of the panel that will allow
users to modify the main title of the page, shown in the main frame. We will allow the user to edit the title
string using a text-edit control in the Site Info section of the main control panel, or using in-place edit in
the preview panel.
Add a binding to a control
1.
Add a variable to the data model to hold the title text. In the galleryInfo.lrweb file, add these lines to
the
model
entry:
["metadata.siteTitle.value"] = "MySample",
["appearance.siteTitle.cssID"] = "#siteTitle",
The second value associates the title with a style-sheet ID.
2.
Add a
views
entry to the table returned by the
galleryInfo.lrweb
file:
views = function( controller, f )
local LrView = import "LrView"
local bind = LrView.bind
local multibind = f.multibind
return {
labels
= f:panel_content {
bind_to_object = controller,
f:subdivided_sections {
f:labeled_text_input
{
title = "MySample",
value = bind "
metadata.siteTitle.value
",
},
},
},
}
end,
The Site Info section of the control panel on the Web Gallery page corresponds to the
labels
return
value of the
views
function. We are creating a
labeled_text_input
control in this section, and
binding its value to the data-model value that holds the site-title text.