Adobe 65007312 Programming Guide - Page 196

Add HTML template files, Add subfolders

Page 196 highlights

CHAPTER 11: Web Gallery Plug-ins: A Tutorial Example Creating a Web Gallery plug-in 196 Add HTML template files 1. The manifest references an HTML file to be used as a template, grid.html. Create this file in the myWebPlugin folder, putting in these initial references: 2. The two referenced HTML files contain common code for all HTML pages that will be created from this template. Create these two HTML files in the myWebPlugin folder. Z The content of header.html initializes the HTML code: My Sample Plug-in Z The content of footer.html simply closes off the HTML code: Add subfolders The plug-in folder now contains most of the top-level files for the plug-in: myWebPlugin/ galleryInfo.lrweb manifest.lrweb grid.html header.html footer.html The grid.html page is the template for the thumbnail filmstrip; later we will add a template HTML file for the large version of the selected thumbnail image. In addition to these top-level files, the plug-in will require resources of various kinds; default images, style sheets, JavaScript support code, and string dictionaries for localization. 1. Before going on to flesh out the content of the basic files, add some subfolders to hold resource files: myWebPlugin/ resources/ css/ js/ strings/ en/

  • 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
Creating a Web Gallery plug-in
196
Add HTML template files
1.
The manifest references an HTML file to be used as a template,
grid.html
. Create this file in the
myWebPlugin
folder, putting in these initial references:
<%@ include file="header.html" %>
<%@ include file="footer.html" %>
2.
The two referenced HTML files contain common code for all HTML pages that will be created from this
template. Create these two HTML files in the
myWebPlugin
folder.
Z
The content of
header.html
initializes the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Adobe Photoshop Lightroom" />
<title>My Sample Plug-in</title>
<link rel="stylesheet" type="text/css" media="screen"
title="Custom Settings" href="$others/custom.css" >
</head>
<body>
Z
The content of
footer.html
simply closes off the HTML code:
</body>
</html>
Add subfolders
The plug-in folder now contains most of the top-level files for the plug-in:
myWebPlugin/
galleryInfo.lrweb
manifest.lrweb
grid.html
header.html
footer.html
The
grid.html
page is the template for the thumbnail filmstrip; later we will add a template HTML file for
the large version of the selected thumbnail image.
In addition to these top-level files, the plug-in will require resources of various kinds; default images, style
sheets, JavaScript support code, and string dictionaries for localization.
1.
Before going on to flesh out the content of the basic files, add some subfolders to hold resource files:
myWebPlugin/
resources/
css/
js/
strings/
en/