You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -25,11 +25,11 @@ To use the libraries in your applications, you will need to load them in the Sea
25
25
26
26
!!! JQuery Basics
27
27
28
-
jQuery has a simple but powerful model for its interactions. It always follows the same pattern depicted in Figure *@fig:jquery-lifecycle*.
28
+
jQuery has a simple but powerful model for its interactions. It always follows the same pattern depicted in Figure *@fig:jquery-lifecycle*. You basically get aJQuery and configure it, navigate its elements and activate it.
29
29
30
-
+jQuery Demo and Functional Test Suite.>file://figures/jquery-lifecycle.png|width=80|label=fig:jquery-lifecycle+
To instantiate a ==JQueryClass== you ask a factory object for a new instance by sending the message ==jQuery==. In most cases the factory object is your ==WAHtmlCanvas==, but it can also be a ==JSScript==.
32
+
To instantiate a ==JQueryClass==, you ask a factory object for a new instance by sending the message ==jQuery==. In most cases the factory object is your ==WAHtmlCanvas==, but it can also be a ==JSScript==.
33
33
34
34
[[[
35
35
html jQuery
@@ -38,7 +38,7 @@ html jQuery
38
38
While the ==JQueryClass== is conceptually a Javascript class, it is implemented as a Pharo instance. ==html jQuery== returns an instance of ==JQueryClass==.
39
39
40
40
!!!! Creating Queries
41
-
To create a ==JQueryInstance== we specify a CSS selector that queries for certain DOM elements on the your web-page. For example, to select all HTML div tags with the CSS class ==special== one would write:
41
+
To create a ==JQueryInstance==, we specify a CSS selector that queries for certain DOM elements on the your web-page. For example, to select all HTML div tags with the CSS class ==special== one would write:
42
42
43
43
[[[
44
44
html jQuery expression: 'div.special'
@@ -70,7 +70,7 @@ Once you have identified the elements, you can specify the actions you wish to p
70
70
(html jQuery: 'div.special') siblings; remove
71
71
]]]
72
72
73
-
There are over 180 actions provided by jQuery; these can be investigated by browsing the ==JQueryInstance== class in Smalltalk, and by visiting the jQuery documentation at *http://api.jquery.com/*.
73
+
There are over 180 actions provided by jQuery; these can be investigated by browsing the ==JQueryInstance== Pharo class, and by visiting the jQuery documentation at *http://api.jquery.com/*.
74
74
75
75
You find more details on performing actions in Section *@ref:performing-actions*.
76
76
@@ -80,7 +80,6 @@ You find more details on performing actions in Section *@ref:performing-actions*
80
80
If you've already used jQuery (or followed the link to the documentation), you will already be familiar with the ==$()== syntax for specifying CSS queries to select DOM elements. ==JQueryClass>>expression:== exposes this same interface, but there are also a number of shortcut forms available to you. All the constructor methods return an instance of ==JQueryInstance==.
81
81
82
82
!!!! $("div.hint")
83
-
84
83
Normally a jQuery instance is setup with a CSS selector. You can either use the long form (1) or take the shortcut (2). Of course, both forms are absolutely equivalent, in practice you will mostly encounter the shorter second form:
85
84
86
85
[[[
@@ -99,7 +98,7 @@ html jQuery: '#foo'. "(3)"
99
98
html jQuery: #foo. "(4)"
100
99
]]]
101
100
102
-
!! $("\*")
101
+
!!!! $("\*")
103
102
104
103
The CSS selector to match all elements in the page is ==\*==. Again you have several equivalent possibilities to achieve the same in jQuery. The first two use a CSS selector, while the last one uses a convenience method:
105
104
@@ -109,7 +108,7 @@ html jQuery: '*'.
109
108
html jQuery all.
110
109
]]]
111
110
112
-
!! $(this)
111
+
!!!! $(this)
113
112
114
113
If you want to refer to the currently active DOM element from an event handler you can use ==new== or ==this==.
115
114
@@ -120,7 +119,7 @@ html jQuery new.
120
119
121
120
Note that the ==new== you call here is not the one implemented in the Smalltalk class ==Behavior==, but a custom one implemented on the instance side of ==JQueryClass==. Similar to all other constructor methods it returns an instance of ==JQueryInstance==.
122
121
123
-
!! $("<div></div>")
122
+
!!!! $("<div></div>")
124
123
125
124
Furthermore, jQuery provides the possibility to create new HTML code on the fly, that inserted into an existing element. Again we have different equivalent possibilities to do this. The first one uses a raw HTML string, with Seaside we want to avoid this in most cases. The second and third variation uses a block with a new renderer that we can use with the normal Seaside rendering API.
126
125
@@ -130,7 +129,7 @@ html jQuery html: [ :r | r div ].
130
129
html jQuery: [ :r | r div ].
131
130
]]]
132
131
133
-
!! $(function() { alert('Hello'); })
132
+
!!!! $(function() { alert('Hello'); })
134
133
135
134
Last but not least there is the case of the ==$()== syntax allows you to specify some action that should happen once the page is ready. This is done by attaching
136
135
@@ -152,10 +151,199 @@ html jQuery: (html javascript alert: 'Hello').
152
151
!!! Refining Queries
153
152
@ref:refining-queries
154
153
154
+
After you made an initial query you can refine the result with additional operations. All existing operations are described in this section:
155
+
156
+
!!!! Siblings
157
+
Get a set of elements containing all of the unique siblings of each of the matched set of elements.
158
+
159
+
[[[
160
+
aQuery siblings.
161
+
aQuery siblings: 'div'.
162
+
]]]
163
+
164
+
!!!!Next Siblings
165
+
Get a set of elements containing the unique next siblings of each of the given set of elements.
166
+
167
+
[[[
168
+
aQuery next.
169
+
aQuery next: 'div'.
170
+
]]]
171
+
172
+
Or, find all sibling elements after the current element.
173
+
174
+
[[[
175
+
aQuery nextAll.
176
+
aQuery nextAll: 'div'.
177
+
]]]
178
+
179
+
Or, find all following siblings of each element up to but not including the element matched by the selector.
180
+
181
+
[[[
182
+
aQuery nextUntil: 'div'.
183
+
]]]
184
+
185
+
!!!!Previous Siblings
186
+
187
+
Get a set of elements containing the unique previous siblings of each of the matched set of elements.
188
+
189
+
[[[
190
+
aQuery previous.
191
+
aQuery previous: 'div'.
192
+
]]]
193
+
194
+
Or, find all sibling elements in front of the current element.
195
+
196
+
[[[
197
+
aQuery previousAll.
198
+
aQuery previousAll: 'div'.
199
+
]]]
200
+
201
+
Or, find all previous siblings of each element up to but not including the element matched by the selector.
202
+
203
+
[[[
204
+
aQuery previousUntil: 'div'.
205
+
]]]
206
+
207
+
!!!!Children
208
+
209
+
Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
210
+
211
+
[[[
212
+
aQuery children.
213
+
aQuery children: 'div'.
214
+
]]]
215
+
216
+
Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
217
+
218
+
[[[
219
+
aQuery contents.
220
+
]]]
221
+
222
+
Searches for all elements that match the specified expression.
223
+
224
+
[[[
225
+
aQuery find: 'div'.
226
+
]]]
227
+
228
+
!! Parents
229
+
230
+
Get a set of elements containing the unique parents of the matched set of elements.
231
+
232
+
[[[
233
+
aQuery parent.
234
+
aQuery parent: 'div'.
235
+
]]]
236
+
237
+
Or, find all following siblings of each element up to but not including the element matched by the selector.
238
+
239
+
[[[
240
+
aQuery parents.
241
+
aQuery parents: 'div'.
242
+
]]]
243
+
244
+
Or, find all the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.
245
+
246
+
[[[
247
+
aQuery parentsUntil: 'div'.
248
+
]]]
249
+
250
+
Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
251
+
252
+
[[[
253
+
aQuery closest.
254
+
aQuery closest: 'div'.
255
+
]]]
256
+
155
257
!!! Performing Actions
156
258
@ref:performing-actions
157
259
260
+
There is a wide variety of actions that come supported with jQuery. jQuery UI and thousands of other plugins add even more. In this section we present some of the most common actions provided by the core framework.
261
+
262
+
!!!! Classes
263
+
264
+
The following examples add, remove or toggle the CSS class ==important== given as the first argument. These methods are commonly used to change the appearance of one or more HTML elements for example to visualize a state change in the application.
265
+
266
+
==aQuery addClass: 'important'.
267
+
==aQuery removeClass: 'important'.
268
+
==aQuery toggleClass: 'important'.
269
+
270
+
Also you can query if a particular class is set:
271
+
272
+
==aQuery hasClass: 'important'.
273
+
274
+
!!!! Styles
275
+
276
+
Similarly you can change the style of one or more HTML elements. By providing a dictionary you can change multiple CSS styles at once:
277
+
278
+
==aQuery css: aDictionary.
279
+
280
+
Alternatively you can use a dictionary-like protocol to read and write specific style properties:
281
+
282
+
==aQuery cssAt: 'color'.
283
+
==aQuery cssAt: 'color' put: '#ff0'.
284
+
285
+
Note that in most cases it is preferred to use CSS classes instead of hardcoding your style settings into the application code.
286
+
287
+
!!!! Attributes
288
+
289
+
While the above methods change the ==class== and ==style== attribute of one or more DOM elements, there are also accessor methods to change arbitrary HTML attributes. By providing a dictionary of key-value pairs you can change multiple attributes at once:
290
+
291
+
==aQuery attributes: aDictionary.
292
+
293
+
Alternatively you can use a dictionary-like protocol to read and write attributes:
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>==:
158
301
302
+
[[[
303
+
aQuery html: [ :r | r div ].
304
+
]]]
305
+
306
+
Alternatively you can set the text contents of each element in the set of matched elements:
307
+
308
+
[[[
309
+
aQuery text: 'some text'.
310
+
]]]
311
+
312
+
Last but not least you can set the value. This is especially useful for form fields, that require different ways to set the current contents (input fields require you to change the attribute value, text areas require you to change the contents). The following code takes care of the details automatically:
313
+
314
+
[[[
315
+
aQuery value: 'some value'.
316
+
]]]
317
+
318
+
!!!! Insert Content
319
+
320
+
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.
321
+
322
+
323
+
[[[
324
+
aQuery before: [ :r | r div ].
325
+
aQuery prepend: [ :r | r div ].
326
+
aQuery append: [ :r | r div ].
327
+
aQuery after: [ :r | r div ].
328
+
]]]
329
+
330
+
Note that, as with ==html:==, the argument can be any renderable object: a string, a Seaside component, or a render block as in the given examples.
331
+
332
+
!!!! Animations
333
+
334
+
Showing or hiding DOM elements is one of the most common operations. While this is typically done by adding or removing a CSS class, jQuery provides a simpler way. The action ==show== makes sure that the matching DOM elements are visible. If a duration is given as a first parameter, the elements are faded-in:
335
+
336
+
[[[
337
+
aQuery show.
338
+
aQuery show: 1 second.
339
+
]]]
340
+
341
+
The same functionality is available to hide one or more DOM elements with ==hide==:
This part shows you how to get a simple Seaside application up and running
5
5
in less than 15 minutes. If you’re new to Pharo, have a look at the Pharo by Example Seaside Chapter. You can also have a look at the excellent Pharo Mooc *http://mooc.pharo.org*. Watch the first video and the development session about the counter.
In this part we will introduce you to the manipulation of basic elements such as texts, anchors and callbacks as well as forms. It presents the notion of ''brushes'' that is central to the Seaside API. Understanding these concepts will be fundamental to your use of Seaside.
0 commit comments