Home » Adobe Manuals » Computer Software » Adobe 65007312 » Manual Viewer

Adobe 65007312 Programming Guide - Page 142

Example live-update implementation, Defining messages from a previewed to Lightroom

UPC - 883919154398

Add to My Manuals
Save this manual to your list of manuals

Page 142 highlights

CHAPTER 6: Writing a Web-engine Plug-in Web HTML Live Update 142 This function must locate the image using document.getElementById(), and set its dimensions using appropriate DOM methods. The function has this prototype: document.liveUpdateImageSize = function( imageID, width, height ) { // your code here return "invalidateAllContent"; } imageID width height The unique identifier of the image. The new image width in pixels. The new image height in pixels. If unable to perform the live update, return "failed". In this case, Lightroom reloads the browser as often as it can while the mouse is dragged. Example live-update implementation The Lightroom SDK includes the source code for the default HTML web engine, which includes an example implementation of document.liveUpdate() in the file live_update.js. To include this file in your project, you must construct your data model to match the names used in the JavaScript. X For any gallery text fields, you must place an id attribute on the immediately enclosing element. X The id value must match the dot-separated path to the corresponding model value defined in the galleryInfo.lrweb file. For example, in the default HTML gallery, the site title is in an h1 element. In the template source file it looks like this: $model.metadata.siteTitle.value Notice that the id is the same as the path in the model definition in the galleryInfo.lrweb file: ["metadata.siteTitle.value"] = "Site Title", NOTE: This example implementation issues a reload for compound cssID values, such as "#myId.myClass". Create unique classes for such cases to avoid the reload. Defining messages from a previewed page to Lightroom Lightroom provides a callback mechanism whereby JavaScript code running in the previewed page can communicate with Lightroom. The implementation differs slightly in Mac OS and in Windows, but the example live_update.js implements a wrapper function which hides this difference. This discussion assumes that you are including live_update.js in your web-engine folder.

Section	Page
Lightroom SDK 3.0	1
Preface	8
The Lightroom SDK	8
The Lua language	9
About this document	9
Conventions used in this document	10
Using the Lightroom SDK	11
Writing plug-ins for Lightroom	11
The Lightroom SDK scripting environment	12
Namespaces, classes, and objects	12
Accessing namespace functions directly	12
Creating objects	14
Accessing object functions and properties	18
Using function contexts for error handling	18
Using built-in Lua features	19
Defining function contexts and tasks	20
Including scripts with require()	20
Lua syntax notes	21
Writing a Lightroom Plug-in	22
Writing standard plug-ins for Lightroom	22
Declaring the contents of a plug-in	22
The loader environment	26
Delivering a standard plug-in	27
Automatic plug-in loading	29
Debugging standard plug-ins	30
Customizing plug-in load behavior	30
Initialization and termination functions for the Plug-in Manager	31
Adding custom sections to the Plug-in Manager	32
Defining menu items for a plug-in	33
Creating Export and Publish Services	35
Creating an export or publish service	35
Defining an export service	35
Initialization and termination functions for services	38
Defining a publish service	39
Publish service options	40
Adding an export post-process action	41
Inserting and removing actions	41
Action dependencies	43
Declaring export post-process actions	44
Defining a post-process action	45
Removing photos from the export operation	46
Defining post-processing of rendered photos	46
How post-process actions are executed	47
Stage 1: Deciding how the photos should be rendered	49
Stage 2: Deciding what photos should be rendered	49
Stage 3: Requesting renditions	49
Stage 4: Processing rendered photos	50
Stage 5: Error reporting and clean up	51
Final processing of rendered photos	51
Customizing the Export and Publishing Manager dialogs	52
Customizing the export destination	52
Adding custom sections to the Export or Publishing Manager dialog	53
A custom section example	54
Restricting existing service functionality	55
Remembering user choices	57
Export presets	58
Settings for publish services and post-process actions	59
Lightroom built-in property keys	59
Export Location section properties	59
File Naming section properties	60
Token patterns	60
File Settings section properties	64
Image Sizing section properties	65
Output Sharpening section properties	66
Metadata section properties	66
Watermarking section properties	66
Post-Processing Filter section properties	67
General export properties	67
Publish Service properties	67
Working with Metadata	68
Adding custom metadata	68
Declaring a Metadata Provider	68
Defining metadata fields	69
Metadata field entries	70
Custom metadata example	71
Adding custom metadata tagsets	73
Defining a metadata tagset	74
Custom metadata tagset example	75
Searching for photos by metadata values	75
Combining search criteria	79
Creating searches interactively	80
Creating a User Interface for Your Plug-in	82
Adding custom dialog views	82
Using dialog boxes	83
Displaying predefined dialog boxes	83
Creating custom dialog boxes	84
User interface elements	84
Containers	84
Controls	85
View properties	90
General view properties	91
Control node view properties	92
Edit-field view properties	92
Text view properties	94
Binding UI values to data values	94
Specifying bindings	95
Simple bindings	96
Creating observable property tables	97
Adding observers to tables	97
Bindings for selection controls	98
Binding checkbox selections	98
Binding radio button selections	99
Binding pop-up menu selections	100
Binding combo box selections	101
Complex bindings	103
Transforming values	103
Binding multiple keys	105
Determining layout	107
Relative placement of sibling nodes	108
Placement within the parent	108
Factory functions for obtaining layout values	109
Layout examples	110
Building a basic dialog	110
Making labels line up	111
Changing the contents of a view dynamically	112
Writing a Web-engine Plug-in	115
Creating a web-engine plug-in	115
Folder contents	115
Defining the data model	116
GalleryInfo top-level entries	117
Data model entries	118
Defining a UI for your model	120
Using web view factories	122
Customizing per-image text	123
Localizing the UI	124
Creating a dynamic data model	124
Creating a preview	125
Creating the Flash movie	126
Web SDK manifest API	127
AddPage	127
AddResource	127
AddResources	128
AddPhotoPages	128
AddGridPages	129
AddCustomCSS	130
IdentityPlate	131
importTags()	132
LuaPage syntax	133
Environment variables available to LuaPages	133
LuaPage data types	134
Web SDK tagsets	135
Defining custom tags	135
Using custom tags	136
Custom tag example	136
Lightroom built-in tagset	137
Thumbnail grid tags	137
Pagination tags	138
Web HTML Live Update	139
Defining messages from Lightroom to a previewed page	140
Returning values from live-update functions	140
document.liveUpdate	141
document.liveUpdateImageSize	141
Example live-update implementation	142
Defining messages from a previewed page to Lightroom	142
Specifying in-place edit	143
Using ZStrings for Localization	145
ZString format	145
ZString characters and escape sequences	146
The LOC function	147
Localization dictionary files	148
Localization dictionary file format	148
Example dictionary file	149
Supported languages	149
SDK Sample Plug-ins	150
The FTP Upload sample plug-in	151
Bring up the FTP plug-in	151
Configure the connection	152
Establish the connection	154
The Flickr plug-in	155
The Flickr API	155
Flickr plug-in walkthrough	155
Add photos and publish the collection	157
Publish modified photos	159
Get feedback from viewers	160
Metadata and filtering samples	161
Custom metadata sample walkthrough	161
Metadata filter sample	162
Post-processing samples	164
Post-processing actions walkthrough	164
Web engine sample	166
Getting Started: A Tutorial Example	168
Creating an export plug-in	168
Create the information file	168
Create the service scripts	169
Displaying a dialog	169
Displaying a custom dialog	170
Create a properties table for program data	170
Create UI elements	171
Run the plug-in	172
Transforming data	173
Create multiple bindings to one key	173
Run the plug-in	175
Binding to multiple keys	175
Create multiple bindings to one key	175
Run the plug-in	178
Adding a data observer	180
Set up the dialog and table	180
Create an observer for a data property	181
Create the dialog contents	181
Run the plug-in	182
Debugging your plug-in	183
Specifying a log	183
Viewing trace information using log files	184
Viewing trace information in a platform console	184
Debugging in Windows WinDbg	184
Debugging in Mac OS Console	186
Defining Metadata: A Walkthrough	187
Adding custom metadata	187
Define metadata fields	187
Define a tagset	189
Using the plug-in	190
Customizing the Plug-in Manager	192
Web Gallery Plug-ins: A Tutorial Example	195
Creating a Web Gallery plug-in	195
Add descriptive files	195
Add HTML template files	196
Add subfolders	196
Defining a data model and functionality	197
Add a grid using built-in tags	198
Add pagination using built-in tags	198
Add another photo size	199
Add the “large” photo size	199
Add link functionality	200
Define the large-image frame template	200
Customizing the Web Gallery UI	201
Add a binding to a control	201
Add the title to the HTML template	202
Testing the plug-in	202
Adding a customized tagset	202
Define the tags	203

Match case Limit results 1 per page

HAPTER

6: Writing a Web-engine Plug-in

Web HTML Live Update

142

This function must locate the image using

document.getElementById()

, and set its dimensions using

appropriate DOM methods.

The function has this prototype:

document.liveUpdateImageSize = function(

imageID

width

height

) {

// your code here

return "invalidateAllContent";

}

If unable to perform the live update, return

"failed"

. In this case, Lightroom reloads the browser as often

as it can while the mouse is dragged.

Example live-update implementation

The Lightroom SDK includes the source code for the default HTML web engine, which includes an example

implementation of

document.liveUpdate()

in the file

live_update.js

. To include this file in your

project, you must construct your data model to match the names used in the JavaScript.

For any gallery text fields, you must place an

attribute on the immediately enclosing element.

The

value must match the dot-separated path to the corresponding model value defined in the

galleryInfo.lrweb

file.

For example, in the default HTML gallery, the

site title

is in an

element. In the template source file it looks

like this:

<h1 onclick="clickTarget( this, 'siteTitle.text' ); "

id="metadata.siteTitle.value"

class="textColor">

$model.metadata.siteTitle.value

</h1>

Notice that the

is the same as the path in the

model

definition in the

galleryInfo.lrweb

file:

["metadata.siteTitle.value"] = "Site Title",

OTE

This example implementation issues a reload for compound

cssID

values, such as

#myId.myClass

". Create unique classes for such cases to avoid the reload.

Defining messages from a previewed page to Lightroom

Lightroom provides a callback mechanism whereby JavaScript code running in the previewed page can

communicate with Lightroom. The implementation differs slightly in Mac OS and in Windows, but the

example

live_update.js

implements a wrapper function which hides this difference. This discussion

assumes that you are including

live_update.js

in your web-engine folder.

imageID

The unique identifier of the image.

width

The new image width in pixels.

height

The new image height in pixels.