Skip to content

Commit 1c65b17

Browse files
DucasseDucasse
committed
final version
1 parent d1bffb4 commit 1c65b17

File tree

1 file changed

+230
-3
lines changed

1 file changed

+230
-3
lines changed

‎Chapters/17-JQuery/jquery.pillar‎

Lines changed: 230 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ Alternatively you can use a dictionary-like protocol to read and write attribute
295295
==aQuery attributeAt: 'href'.
296296
==aQuery attributeAt: 'href' put: 'http://www.seaside.st/'.
297297

298-
!!!! Replace Content
298+
!!!! Replace Contents
299299

300300
A common operation on DOM elements is to change their contents, for example to update a view or to display additional information. To set the HTML contents of matched elements you can use the following construct that will replace the contents with ==<div></div>==:
301301

@@ -315,7 +315,7 @@ Last but not least you can set the value. This is especially useful for form fie
315315
aQuery value: 'some value'.
316316
]]]
317317

318-
!!!! Insert Content
318+
!!!! Insert Contents
319319

320320
Alternatively to replacing the contents you can append new contents. ==before:== inserts content before each element in the set of matched elements; ==prepend:== inserts content to the beginning of each element in the set of matched elements; ==append:== inserts content to the end of each element in the set of matched elements; and ==after:== inserts content after each element in the set of matched elements.
321321

@@ -347,10 +347,237 @@ aQuery hide: 1 second.
347347

348348
!!! Adding JQuery
349349

350+
After creating a jQuery object on the Pharo side, it is time to investigate on how to add them to the Seaside application.
351+
352+
The standard way of doing so in jQuery is to keep all the Javascript functionality ''unobtrusive'' in a separate Javascript file. This is possible with Seaside, but not the suggested way. In Seaside we try to encapsulate views and view-related functionality in components. Furthermore we keep components independent of each other and reusable in different contexts, what does not work well with sharing unobtrusive Javascript code. Additionally, the unobtrusiveness comes into the way when we want to define AJAX interactions.
353+
354+
!!!! Attaching to Element
355+
356+
The following scripts show how a query can be attached to an anchor and activated.
357+
358+
[[[
359+
html anchor
360+
onClick: (html jQuery: 'div') remove;
361+
with: 'Remove DIVs'
362+
]]]
363+
364+
365+
[[[
366+
html anchor
367+
onClick: (html jQuery this) remove;
368+
with: 'Remove Myself'
369+
]]]
370+
371+
!!!! Execute at Load-Time
372+
373+
Javascript proposes a way to execute a query at load-time using ==$(document).ready(...)==.
374+
With Seaside, you can forget about $(document).ready(...), since Seaside has its own mechanism there.
375+
376+
[[[
377+
html document addLoadScript: (html jQuery: 'div') remove
378+
]]]
379+
350380
!!! AJAX
351381

352-
!!! How to
382+
AJAX is an acronym for ''Asynchronous JavaScript and XML''. The fact that it is asynchronous means that additional data is passed to, or requested from the web server in the background, without the user waiting for it to arrive. JavaScript obviously names the programming language that is used to trigger the request. Fortunately the data being transmitted by an AJAX request doesn't have to be in XML. It can be anything that can be sent through the HTTP protocol. The reason for the ``XML\'' in the name is that in most web browsers the internal implementation of this functionality can be found in an object called ==XMLHttpRequest==. JQuery also supports the AJAX.
383+
384+
!!!!Loading
385+
386+
[[[
387+
aQuery load html: [ :r | r div: Time now ].
388+
]]]
389+
390+
!!!!No Query
391+
Once loaded we can get an AJAX object using ==ajax== query.
392+
393+
[[[
394+
html jQuery ajax
395+
]]]
396+
397+
!!!!Generators
398+
399+
An AJAX object can be configure to emit either html or script using the corresponding messages:
400+
[[[
401+
anAjax html: [ :r | r div ].
402+
anAjax script: [ :s | s alert: 'Hello' ].
403+
]]]
404+
405+
!!Triggering Callbacks
406+
407+
Finally a query can be stored and triggered later.
408+
409+
[[[
410+
anAjax serialize: aQuery.
411+
anAjax trigger: [ :p | ... ] passengers: aQuery.
412+
anAjax callback: [ :v | ... ] value: anObject.
413+
]]]
414+
415+
!!! How tos
416+
417+
The following shows a list of possible actions
418+
419+
!!!! Click and Show
420+
421+
The following shows how to toggle a given div (here help) on click.
422+
423+
[[[
424+
html anchor
425+
onClick: (html jQuery: 'div.help') toggle;
426+
with: 'About jQuery'.
427+
428+
html div
429+
class: 'help';
430+
style: 'display: none';
431+
with: 'jQuery is a fast and ...'
432+
]]]
433+
434+
!!!! Open Light box
435+
In the following we show how we can open a modal dialog box.
436+
437+
[[[
438+
| id |
439+
html div
440+
id: (id := html nextId);
441+
script: (html jQuery new dialog
442+
title: 'Lightbox Dialog';
443+
modal: true);
444+
with: [ self renderDialogOn: html ]
445+
html anchor
446+
onClick: (html jQuery id: id) dialog open;
447+
with: 'Open Lightbox'
448+
]]]
449+
450+
!!!! Replace a Component
451+
In the following we show how to replace a component by a new one.
452+
453+
[[[
454+
html div
455+
id: (id := html nextId);
456+
with: child.
457+
458+
html anchor
459+
onClick: ((html jQuery id: id) load
460+
html: [ :r |
461+
child := OtherComponent new;
462+
r render: child ]);
463+
with: 'Change Component'
464+
]]]
465+
466+
!!!! Updating multiple components
467+
The following snippet shows how we can update multiple element of the DOM.
468+
Here we have two components date and time. In the script we will render each component
469+
on click.
470+
471+
[[[
472+
html div id: #date.
473+
...
474+
html div id: #time.
475+
476+
html anchor
477+
onClick: (html jQuery ajax script: [ :s |
478+
s << (s jQuery: #date)
479+
html: [ :r | r render: Date today ].
480+
s << (s jQuery: #time)
481+
html: [ :r | r render: Time now ] ]);
482+
with: 'Update'
483+
]]]
353484

354485
!!! Enhanced To Do Application
486+
jQuery is an increasingly popular Javascript library. Let’s port the the ToDo application to use jQuery for the Javascript functionality.
487+
488+
First, we’ll implement the heading highlight effect with jQuery UI. Then we’ll move on to implementing a couple of interesting effects and eye-candy possible with jQuery. Drag and drop is easy to implement, but we’ll need to do something special to get the "in place" editing to work in jQuery.
489+
490+
If you have already worked through enhancing the ToDo application with Prototype and Scriptaculous, then the jQuery version will seem very familiar - we are still working with JavaScript underneath the covers after all.
491+
492+
!!!! Adding an Effect
493+
494+
We’ll go ahead and factor the ==renderContentOn:== method to add a method to handle rendering the heading and just make modifications to the new method.
355495

356496

497+
[[[
498+
ToDoListView >> renderContentOn: html
499+
self renderHeadingOn: html. "<-- added."
500+
html form: [
501+
html unorderedList
502+
id: 'items';
503+
with: [ self renderItemsOn: html ].
504+
html submitButton
505+
text: 'Save'.
506+
html submitButton
507+
callback: [ self add ];
508+
text: 'Add' ].
509+
html render: editor
510+
]]]
511+
512+
The ==renderHeadingOn:== method leverages the jQuery UI library to add the highlight effect to the header of our component.
513+
514+
[[[
515+
ToDoListView >> renderHeadingOn: html
516+
html heading
517+
onClick: html jQuery this effect highlight;
518+
with: self model title.
519+
]]]
520+
521+
We create a query using ==html jQuery this== that selects the heading DOM element. Next we send effect to get a ==JQEffect== instance. Then finally we send ==JQEffect>>highlight== which highligths the background color.
522+
523+
Altering the highlight color is left as an exercise for the reader.
524+
525+
Now for something a little more fun - let’s add some help test that appears when you click on the heading; and it won’t just "appear", it will slide open at a rate that we determine.
526+
527+
We do this by rendering a new ==<div>== element that contains the help text, and changing the onClick of the header to apply our new cool effect to the new element. We also need some new CSS to help us out with this.
528+
529+
[[[
530+
ToDoListView >> renderHeadingOn: html
531+
| helpId |
532+
helpId := html nextId.
533+
(html heading)
534+
class: 'helplink';
535+
onClick: ((html jQuery id: helpId)
536+
slideToggle: 1 seconds);
537+
with: self model title.
538+
(html div)
539+
id: helpId;
540+
class: 'help';
541+
style: 'display: none';
542+
with: 'The ToDo app enhanced with jQuery.'
543+
]]]
544+
545+
546+
[[[
547+
ToDoListView >> style
548+
^ '
549+
.help {
550+
padding: 1em;
551+
margin-bottom: 1em;
552+
border: 1px solid #008aff;
553+
background-color: #e6f4ff;
554+
}
555+
.helplink {
556+
cursor: help;
557+
}
558+
559+
body {
560+
color: #222;
561+
font-size: 75%;
562+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
563+
}
564+
h1 {
565+
color: #111;
566+
font-size: 2em;
567+
font-weight: normal;
568+
margin-bottom: 0.5em;
569+
}
570+
ul {
571+
list-style: none;
572+
padding-left: 0;
573+
margin-bottom: 1em;
574+
}
575+
li.overdue {
576+
color: #8a1f11;
577+
}
578+
li.done {
579+
color: #264409;
580+
}'
581+
]]]
582+
583+
!!! Summary

0 commit comments

Comments
 (0)