Drupal 6 JavaScript and jQuery - Ebook-Cours.com

Recommendations

Info

[ 9 ] Chapter 1 The focus of this book will be on JavaScript. We will make use of a lot of HTML, CSS, and also a subset of PHP. But Drupal's use of these technologies is fairly standard, and we won't be doing anything really startling with HTML or CSS. In Drupal, XML is used primarily to provide support for RSS (Really Simple Syndication) feeds and AJAX (Asynchronous JavaScript And XML). In fact, we will be using Drupal's XML support for these things. We will make use of some light PHP programming—mainly for writing templates—but it won't play a major role in this book. We won't be using SQL at all. While we encounter many Drupal technologies, we will stay on target. JavaScript will be our focus. Okay, so Drupal makes use of several languages. Impressive, sure...but why? And how? Let's take a two-minute tour of each of these languages to learn about the roles they play. PHP PHP (http://php.net) is a procedural, object-oriented scripting language. Originally, it was designed to perform server-side HTML processing like the antiquated SSI (Service Side Includes) technology introduced in the mid-1990s. But while SSI grew stale and died off, PHP developers kept growing their language. With each release of the PHP engine, it grew in power and flexibility. As a result, it achieved superstar status among web developers. These days, you're likely to find PHP on Windows, Mac, Linux, and UNIX boxes across the Web. Since PHP can now be used to write shell scripts and even windowed applications, you might find it doing more than just driving a web site. Drupal's server-side logic is written primarily in PHP. How so? When the web server hands Drupal a connection from a client, it is the PHP code that gets executed to handle the client's request. Other than the queries passed to the database, all of the processing that the server does is handled by PHP. While this is a book on JavaScript, we will be writing some PHP code. Not a PHP developer? Don't worry. For the most part, we will be using a very small subset of PHP. We will be calling basic functions to handle formatting and layout from Drupal's template engine called PHPTemplate. The purpose of PHPTemplate is simple: Provide an easy method for inserting dynamic values into HTML. You only need know a handful of PHP functions to be able to use PHPTemplate. This book will cover those functions without assuming you're already a PHP ninja. Here's a quick example of what PHPTemplate programming looks like: This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 2205 hilda ave., , missoula, , 59801
Drupal and JavaScript The and tags are just you're regular old HTML tags. The part indicates that the enclosed information is PHP code that the server should execute. Inside that is the line print t("Good Day"), which simply uses the t() function to translate Good Day into whatever the user's language is. Then using the print directive, prints the results to the HTML. Assuming my preferred language is German, the previous code would generate something like this: Guten Tag That's the sort of PHP we'll be writing in this book. Drupal's translation features, which are available in JavaScript, will be covered in Chapter 4. Towards the very end of the book, we will use a little more PHP to build a Drupal module. This might be a little more demanding, but those are the chapters you can skim if you don't want to learn PHP. If you're interested in learning more about PHP development, there are several other great books available, including (shameless plug) my book Learning Drupal 6 Module Development Packt Publishing, 978-1847194442. SQL SQL is an acronym for Structured Query Language. What do you query with SQL? A database! SQL is the industry standard for writing queries that relational database systems can then parse and execute. But while the language is standardized, there are multiple flavors of SQL. Each database program seems to use a slightly different version of SQL—supporting some subset of the standardized language while also adding on additional database-specific features. Historically, Drupal development has targeted the open source MySQL database (http://mysql.com) as the "official" database. Another popular open source database, PostgreSQL (http://postgresql.org), is also supported by recent Drupal releases (though not all add-on modules currently support it). While you will need to run a database in order to use Drupal, we won't be making much use of the SQL language in this book. Drupal provides built-in tools that we can use to get the content we need out of the database without having to write our own queries. [ 10 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 2205 hilda ave., , missoula, , 59801
Page 2 and 3: Drupal 6 JavaScript and jQuery Putt
Page 4 and 5: Author Matt Butcher Reviewers Dave
Page 6 and 7: About the reviewers Dave Myburgh ha
Page 8 and 9: Table of Contents Preface 1 Chapter
Page 10 and 11: [ iii ] Table of Contents The Drupa
Page 12 and 13: [ v ] Table of Contents The bettere
Page 14 and 15: JavaScript: It's not just for calcu
Page 16 and 17: [ 3 ] Preface You will also need to
Page 18 and 19: [ 5 ] Preface Errata Although we ha
Page 20 and 21: Drupal and JavaScript If you're any
Page 24 and 25: [ 11 ] Chapter 1 HTML HTML is the p
Page 26 and 27: Thus, when rendered through the bro
Page 28 and 29: The web browser will never see a li
Page 30 and 31: [ 17 ] Chapter 1 The Drupal Core al
Page 32 and 33: Where does our JavaScript go? As we
Page 34 and 35: [ 21 ] Chapter 1 You can choose whi
Page 36 and 37: On this page, we can see the node's
Page 38 and 39: For example, here's a screenshot of
Page 40 and 41: The tool looks like this: [ 27 ] Ch
Page 42 and 43: Working with JavaScript in Drupal T
Page 44 and 45: [ 31 ] Chapter 2 Where Drupal JavaS
Page 46 and 47: The printer script Our script will
Page 48 and 49: [ 35 ] Chapter 2 • Indenting shou
Page 50 and 51: var PrinterTool = {}; PrinterTool.w
Page 52 and 53: * The ID of the tag that contains t
Page 54 and 55: var title = document.title; if (!ta
Page 56 and 57: Now we have a new window with the c
Page 58 and 59: Creating a theme: first steps To cr
Page 60 and 61: [ 47 ] Chapter 2 Creating the .info
Page 62 and 63: [ 49 ] Chapter 2 The logo image, ti
Page 64 and 65: Now, after clearing the cache, we c
Page 66 and 67: Let's take a quick look at the page
Page 68 and 69: [ 55 ] Chapter 2 First, templates a
Page 70 and 71: [ 57 ] Chapter 2 This is the s
Page 72 and 73:
jQuery: Do More with Drupal In the
Page 74 and 75:
The jQuery site is a great source f
Page 76 and 77:
sample Title Paragraph 1 Para
Page 78 and 79:
[ 65 ] Chapter 3 So if we hit ENTER
Page 80 and 81:
[ 67 ] Chapter 3 To style all the e
Page 82 and 83:
[ 69 ] Chapter 3 Sounds confusing?
Page 84 and 85:
In this case, we have a string obje
Page 86 and 87:
[ 73 ] Chapter 3 Don't do it yourse
Page 88 and 89:
[ 75 ] Chapter 3 Nodes are marked a
Page 90 and 91:
stylesheets[all][] = frobnitz.css s
Page 92 and 93:
The first line is our function assi
Page 94 and 95:
[ 81 ] Chapter 3 So in that one cor
Page 96 and 97:
[ 83 ] Chapter 3 All we do here is
Page 98 and 99:
[ 85 ] Chapter 3 jQuery comes with
Page 100 and 101:
Let's break this function into two
Page 102 and 103:
[ 89 ] Chapter 3 The callback funct
Page 104 and 105:
[ 91 ] Chapter 3 $(document) create
Page 106 and 107:
Drupal Behaviors In the previous ch
Page 108 and 109:
[ 95 ] Chapter 4 Finally, Drupal of
Page 110 and 111:
Let's take a look at an example tha
Page 112 and 113:
[ 99 ] Chapter 4 So in this example
Page 114 and 115:
[ 101 ] Chapter 4 At the beginning
Page 116 and 117:
}; }); function () { $(this).siblin
Page 118 and 119:
[ 105 ] Chapter 4 Any block that ge
Page 120 and 121:
The second toggle function performs
Page 122 and 123:
[ 109 ] Chapter 4 The query we use
Page 124 and 125:
Earlier, when we inserted our new c
Page 126 and 127:
[ 113 ] Chapter 4 That's where Drup
Page 128 and 129:
[ 115 ] Chapter 4 Let's start out b
Page 130 and 131:
}; }); }); /** * Insert a tag. * @p
Page 132 and 133:
[ 119 ] Chapter 4 The main part of
Page 134 and 135:
} $(bar).attr('id', 'buttons-' + tx
Page 136 and 137:
For all practical purposes, we have
Page 138 and 139:
var middle = value.substring(start,
Page 140 and 141:
Lost in Translations Drupal offers
Page 142 and 143:
Translation functions are the porti
Page 144 and 145:
[ 131 ] Chapter 5 On this screen yo
Page 146 and 147:
[ 133 ] Chapter 5 For multi-languag
Page 148 and 149:
[ 135 ] Chapter 5 The string looks
Page 150 and 151:
[ 137 ] Chapter 5 So 1 is the only
Page 152 and 153:
[ 139 ] Chapter 5 The Extract tab (
Page 154 and 155:
$('body').append(dayDiv).children('
Page 156 and 157:
@count days"), "@saturday": Day.day
Page 158 and 159:
[ 145 ] Chapter 5 To do our transla
Page 160 and 161:
"PO-Revision-Date: YYYY-mm-DD HH:MM
Page 162 and 163:
[ 149 ] Chapter 5 Next is a block o
Page 164 and 165:
[ 151 ] Chapter 5 If, for some reas
Page 166 and 167:
[ 153 ] Chapter 5 "Thursday": "Juev
Page 168 and 169:
JavaScript Theming In this chapter,
Page 170 and 171:
[ 157 ] Chapter 6 For example, call
Page 172 and 173:
[ 159 ] Chapter 6 The purpose of th
Page 174 and 175:
[ 161 ] Chapter 6 We are still usin
Page 176 and 177:
This list gets passed to the Drupal
Page 178 and 179:
That's the entire thing. It is a sh
Page 180 and 181:
[ 167 ] Chapter 6 Earlier, when we
Page 182 and 183:
$output .= theme('menu_item', $link
Page 184 and 185:
} // Create item var li = $(''); //
Page 186 and 187:
} var li = $(''); // figure out if
Page 188 and 189:
[ 175 ] Chapter 6 Theming tables Ta
Page 190 and 191:
[ 177 ] Chapter 6 In this example,
Page 192 and 193:
[ 179 ] Chapter 6 The other two mes
Page 194 and 195:
[ 181 ] Chapter 6 Oh, and we also w
Page 196 and 197:
We might want to flag a node as unp
Page 198 and 199:
[ 185 ] Chapter 6 The name paramete
Page 200 and 201:
Theming with templates The last par
Page 202 and 203:
The out variable is going to hold t
Page 204 and 205:
} tpl.find('.' + value).html(node[v
Page 206 and 207:
[ 193 ] Chapter 6 To make it possib
Page 208 and 209:
} else { var txt = Drupal.theme('de
Page 210 and 211:
AJAX and Drupal Web Services In the
Page 212 and 213:
[ 199 ] Chapter 7 These application
Page 214 and 215:
The basic workflow, regardless of b
Page 216 and 217:
Using our previous example, if we w
Page 218 and 219:
Wouldn't it be nice if Drupal provi
Page 220 and 221:
[ 207 ] Chapter 7 To accomplish our
Page 222 and 223:
Drupal.behaviors and Drupal.themes
Page 224 and 225:
A rule of thumb How do we determine
Page 226 and 227:
feedUrl = Drupal.settings.basePath
Page 228 and 229:
[ 215 ] Chapter 7 Since we just wan
Page 230 and 231:
[ 217 ] Chapter 7 The WebClips.show
Page 232 and 233:
[ 219 ] Chapter 7 Project: real-tim
Page 234 and 235:
[ 221 ] Chapter 7 Views Datasource
Page 236 and 237:
Here is a labeled screenshot showin
Page 238 and 239:
[ 225 ] Chapter 7 Curly braces ({})
Page 240 and 241:
} }; CommentWatcher.check(); var ch
Page 242 and 243:
[ 229 ] Chapter 7 There are six fun
Page 244 and 245:
[ 231 ] Chapter 7 The next task of
Page 246 and 247:
[ 233 ] Chapter 7 As usual, the fir
Page 248 and 249:
[ 235 ] Chapter 7 The jQuery show a
Page 250 and 251:
[ 237 ] Chapter 7 The job of this f
Page 252 and 253:
The cookie format is very specific.
Page 254 and 255:
Building a Module In the previous c
Page 256 and 257:
[ 243 ] Chapter 8 The directory Eac
Page 258 and 259:
The scripts[] directive is an examp
Page 260 and 261:
[ 247 ] Chapter 8 This script is go
Page 262 and 263:
*/ function jsloader_init() { $path
Page 264 and 265:
[ 251 ] Chapter 8 There are dozens
Page 266 and 267:
[ 253 ] Chapter 8 Drupal will simpl
Page 268 and 269:
[ 255 ] Chapter 8 3. To add an indi
Page 270 and 271:
Here's what bettereditor.info looks
Page 272 and 273:
*/ function bettereditor_help($path
Page 274 and 275:
); $buttons[] = array( 'name' => 'S
Page 276 and 277:
[ 263 ] Chapter 8 Basically, we hav
Page 278 and 279:
[ 265 ] Chapter 8 Right now, we hav
Page 280 and 281:
The JSON notation is identical to t
Page 282 and 283:
var BetterEditor = BetterEditor ||
Page 284 and 285:
Drupal.theme.prototype.buttonBar =
Page 286 and 287:
}; var txtarea = $(this); var txtar
Page 288 and 289:
} }); sel.start = sel.end = -1; The
Page 290 and 291:
[ 277 ] Chapter 8 So in the click h
Page 292 and 293:
var html = placeholder.html(); plac
Page 294 and 295:
var current = placeholder; // Copy
Page 296 and 297:
The current variable points to this
Page 298 and 299:
Every button is passed through this
Page 300 and 301:
Integrating and Extending In this f
Page 302 and 303:
[ 289 ] Chapter 9 Our plan For our
Page 304 and 305:
[ 291 ] Chapter 9 Since it has been
Page 306 and 307:
} // The Taxonomy ID. $tid = 2; $au
Page 308 and 309:
[ 295 ] Chapter 9 The main task of
Page 310 and 311:
[ 297 ] Chapter 9 Adding this class
Page 312 and 313:
This shouldn't cause any problems.
Page 314 and 315:
The library is constructed in a mod
Page 316 and 317:
function accordion_init() { $path =
Page 318 and 319:
This is the area that the ID identi
Page 320 and 321:
[ 307 ] Chapter 9 The jQuery UI acc
Page 322 and 323:
[ 309 ] Chapter 9 That wraps up our
Page 324 and 325:
We are going to call this plug-in d
Page 326 and 327:
[ 313 ] Chapter 9 If we were to run
Page 328 and 329:
The divWrap() function Inside of ou
Page 330 and 331:
[ 317 ] Chapter 9 That's all there
Page 332 and 333:
A AJAX about 198 in Web 2.0 199 web
Page 334 and 335:
originating 31 Drupal JavaScript Be
Page 336 and 337:
about 22, 23 ImageNode module 23 Se
Page 338 and 339:
Thank you for buying Drupal 6 JavaS
Page 340:
Drupal 6 Site Builder Solutions ISB
show all

Drupal 6 JavaScript and jQuery - Ebook-Cours.com

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?