cyberweb 0.5.225 → 0.6.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of cyberweb might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +438 -238
- data/doc/README.gen +437 -237
- data/doc/todo/todo_for_the_cyberweb_project.md +6 -0
- data/examples/advanced/cursor_example/cursor_example.cgi +29 -0
- data/examples/advanced/draw_circle/draw_circle.cgi +13 -4
- data/examples/css/css_bubbles.html +8 -2
- data/examples/css/examples_with_borders/examples_with_borders.html +33 -0
- data/examples/javascript_and_jquery/copy_to_the_clipboard_example/copy_to_the_clipboard_example.html +80 -0
- data/images/cyberweb_theme.png +0 -0
- data/lib/cyberweb/base/misc.rb +67 -18
- data/lib/cyberweb/base_module/base_module.rb +66 -8
- data/lib/cyberweb/cascading_style_sheets/cursors.css +12 -5
- data/lib/cyberweb/cascading_style_sheets/default.css +20 -18
- data/lib/cyberweb/cascading_style_sheets/glow_effects.css +12 -6
- data/lib/cyberweb/cascading_style_sheets/misc.css +12 -1
- data/lib/cyberweb/generator/cgi.rb +3 -3
- data/lib/cyberweb/html_template/html_template.rb +172 -114
- data/lib/cyberweb/javascript/javascript.rb +34 -31
- data/lib/cyberweb/javascript_code/copy_to_the_clipboard.js +12 -0
- data/lib/cyberweb/jquery_module/jquery_module.rb +51 -0
- data/lib/cyberweb/modules/css_style.rb +27 -0
- data/lib/cyberweb/{favicon → modules}/favicon.rb +162 -33
- data/lib/cyberweb/requires/require_the_cyberweb_project.rb +6 -2
- data/lib/cyberweb/toplevel_methods/download_webpage.rb +16 -2
- data/lib/cyberweb/toplevel_methods/html_tables.rb +42 -30
- data/lib/cyberweb/toplevel_methods/log_directory.rb +11 -8
- data/lib/cyberweb/toplevel_methods/misc.rb +84 -47
- data/lib/cyberweb/toplevel_methods/path.rb +29 -8
- data/lib/cyberweb/toplevel_methods/temp_directory.rb +3 -1
- data/lib/cyberweb/version/version.rb +2 -2
- data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +43 -7
- data/lib/cyberweb/web_object/favicon.rb +4 -106
- data/lib/cyberweb/web_object/html_tags.rb +133 -65
- data/lib/cyberweb/web_object/images.rb +20 -20
- data/lib/cyberweb/web_object/javascript_and_jquery.rb +39 -16
- data/lib/cyberweb/web_object/link.rb +18 -15
- data/lib/cyberweb/web_object/misc.rb +4158 -327
- data/lib/cyberweb/web_object/reset.rb +19 -15
- data/lib/cyberweb/web_object/run.rb +2 -0
- data/lib/cyberweb/web_object/web_object.rb +1 -3584
- data/lib/cyberweb/webmin/simple_forum/index.cgi +30 -0
- data/lib/cyberweb/webmin/simple_forum/simple_forum.rb +134 -0
- data/lib/cyberweb/yaml/http_status_codes.yml +3 -0
- data/lib/cyberweb/yaml/js_files_to_load.yml +6 -1
- data/test/html_template/html_template.rb +22 -3
- data/test/simple_tests/testing_the_javascript_component.cgi +32 -0
- data/test/simple_tests/testing_the_select_tag.cgi +7 -1
- metadata +13 -4
data/doc/README.gen
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
ADD_GOBOLINUX_AND_RUBY_HEADER
|
2
2
|
ADD_TIME_STAMP
|
3
3
|
|
4
|
-
<img src="https://i.imgur.com/
|
4
|
+
<img src="https://i.imgur.com/aC4YzSk.png" style="margin-left: 1.2em">
|
5
5
|
|
6
6
|
## The (slightly convoluted) History of the Cyberweb project
|
7
7
|
|
@@ -32,23 +32,31 @@ the following:
|
|
32
32
|
div {
|
33
33
|
}
|
34
34
|
|
35
|
-
In PHP this is not easily possible, because the syntax is more rigid
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
35
|
+
In PHP this is not easily possible, because the syntax is more rigid.
|
36
|
+
Thus, at the least in regards to the syntax, ruby is better than
|
37
|
+
PHP - more flexibility syntax-wise is available to ruby users than
|
38
|
+
is for PHP users. This flexibility helps a <b>lot</b> when writing
|
39
|
+
more dynamic, and more succint, code.
|
40
|
+
|
41
|
+
During that **transition phase**, from **php** to **ruby**, the cyberweb
|
42
|
+
project was renamed several times as well - first to **web_foundation**,
|
43
|
+
then to **cybersprawl**, then to **Cyberweb**, then to **web_object** and
|
44
|
+
then back to **Cyberweb** again.
|
45
|
+
|
46
|
+
I think the name **Cyberweb** is the best choice best among these alternatives.
|
47
|
+
While **web_object** is the more technically correct and accurate term, as
|
48
|
+
everything related to the www is handled via that object (or such objects),
|
49
|
+
I prefer the name **Cyberweb** in general for the whole project - it sounds
|
50
|
+
rather futuristic. The name **WebObject** is a good name too, though, as
|
51
|
+
we attempt to describe a particular "web-page" as a "web-object", with
|
52
|
+
specific functionality, basically. The WebObject not only describes the
|
53
|
+
raw HTML code or combines it with CSS, but it can be thought of as a
|
54
|
+
higher hierarchy abstraction. In principle we could generate a .pdf
|
55
|
+
file from a WebObject too, so the functionality is not limited to
|
56
|
+
"merely" HTML or CSS only.
|
49
57
|
|
50
58
|
**class WebObject** was originally the very main class I was
|
51
|
-
using in PHP to describe my local knowledge base
|
59
|
+
using in PHP to describe my <b>local knowledge base</b>, an "app" where
|
52
60
|
I kept useful information bits about linux, and ruby, and other
|
53
61
|
parts together. The code for this project in PHP was simpler, and
|
54
62
|
also uglier though, and less flexible. (Actually the name was
|
@@ -190,7 +198,7 @@ hopefully more "modern" as well, as I work on improving the documentation
|
|
190
198
|
in the next step (no possibility to have more users without **high
|
191
199
|
quality documentation**).
|
192
200
|
|
193
|
-
Since June 2021 two new goals were added to this project:
|
201
|
+
Since <b>June 2021</b> two new goals were added to this project:
|
194
202
|
|
195
203
|
- It will contain documentation in regards to useful CSS knowledge.
|
196
204
|
- It will contain documentation in regards to useful JavaScript knowledge.
|
@@ -205,24 +213,171 @@ presented (and presentable) in a single project as well. This means
|
|
205
213
|
that there may be pure CSS, pure HTML and pure JavaScript
|
206
214
|
examples distributed within the Cyberweb project as well.
|
207
215
|
|
208
|
-
## Features
|
216
|
+
## Features of the Cyberweb project
|
209
217
|
|
210
|
-
|
211
|
-
|
218
|
+
The cyberweb project attempts to address multiple different use
|
219
|
+
cases, so it is difficult to provide an overview over its
|
220
|
+
features; in part also due to its fuzzy history.
|
212
221
|
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
222
|
+
However had, this subsection will at the least try to name <b>some</b>
|
223
|
+
of its features - keep in mind that ultimately it is about the
|
224
|
+
use cases <b>you</b> may have that matter more.
|
225
|
+
|
226
|
+
In no particular order, the cyberweb gem attempts to solve these
|
227
|
+
problems:
|
228
|
+
|
229
|
+
- Provide support for rack, sinatra and .cgi files for "out of the
|
230
|
+
box" working with web-related technology in general.
|
231
|
+
|
232
|
+
- Provide numerous helper methods in various classes (most importantly
|
233
|
+
in Cyberweb::Base) to help build web-applications.
|
234
|
+
|
235
|
+
- Be able to generate standalone .html files.
|
236
|
+
|
237
|
+
- Provide a unified DSL over web-related use cases.
|
238
|
+
|
239
|
+
- Support CSS-related aspects, including auto-generation of
|
240
|
+
CSS code and re-using CSS templates.
|
241
|
+
|
242
|
+
- Aim to provide a webmin-clone.
|
243
|
+
|
244
|
+
- Aim to provide a wiki.
|
245
|
+
|
246
|
+
- Aim to provide a webforum.
|
247
|
+
|
248
|
+
And many more use cases that are somehow related to these goals.
|
249
|
+
|
250
|
+
Not all of these use cases currently work fully; the cyberweb gem
|
251
|
+
in many ways is also there to help me experiment with different
|
252
|
+
ideas, and try to see what could be done to make these work.
|
253
|
+
|
254
|
+
A word about "CSS templates": you can select various different default
|
255
|
+
CSS templates. They will be stored in the <b>cascading_style_sheets/</b>
|
256
|
+
directory by default. To use them, pass a symbol to the method
|
257
|
+
invocation for css_style=(). They are numbered in succession, so
|
258
|
+
template1, template2 etc..
|
217
259
|
|
218
260
|
Example for this on the main w object:
|
219
261
|
|
220
|
-
|
262
|
+
w.css_style = :template1
|
221
263
|
|
222
264
|
This will default to the template1.
|
223
|
-
|
265
|
+
|
266
|
+
Alternatively since October 2022 you can simply use this, if you work
|
267
|
+
with a WebObject:
|
268
|
+
|
269
|
+
template1 '
|
270
|
+
# your CSS rules go in here
|
271
|
+
'
|
272
|
+
|
273
|
+
This will pull in the first template (template1) and then add the
|
274
|
+
CSS rules towards that.
|
275
|
+
|
224
276
|
Currently the way to add new templates is to expand the case menu.
|
225
277
|
|
278
|
+
## Adapting the cyberweb gem to your use cases
|
279
|
+
|
280
|
+
Presently it may be a bit difficult to adjust the cyberweb gem to
|
281
|
+
your use cases. The primary reason for this is that the cyberweb
|
282
|
+
gem was originally started to support my use cases, as well as
|
283
|
+
making available images that I have collected over many years.
|
284
|
+
So that explaines why the method img(), for instance, is defaulting
|
285
|
+
to a fairly weird use case, which means that it may not work for
|
286
|
+
your use cases initially. In the long run I intend to remedy this
|
287
|
+
situation, but for the time being, you have to accept that some
|
288
|
+
parts of the cyberweb gem are not useful for you.
|
289
|
+
|
290
|
+
Nonetheless, I decided to add this subsection to document some
|
291
|
+
things, and provide some help to new users, until eventually
|
292
|
+
the situation improves so that people can just install the gam
|
293
|
+
and "it will work", as-is.
|
294
|
+
|
295
|
+
Without further ado, let's clarify some things here next.
|
296
|
+
|
297
|
+
The cyberweb gem needs access to a temporary directory.
|
298
|
+
|
299
|
+
On Linux this is typically <b>/tmp/</b>. The cyberweb gem may
|
300
|
+
create a subdirectory there, called cyberweb/, and then copy
|
301
|
+
some files into that subdirectory - in particular JavaScript
|
302
|
+
.js files.
|
303
|
+
|
304
|
+
To query the base directory in use you can call this method:
|
305
|
+
|
306
|
+
Cyberweb.temp_directory?
|
307
|
+
|
308
|
+
If you want to use another temporary directory then you can
|
309
|
+
use this method:
|
310
|
+
|
311
|
+
Cyberweb.set_temp_directory('/opt/')
|
312
|
+
|
313
|
+
You need to make the permission bits on that directory
|
314
|
+
possibly to be modified, such as /tmp/ on Linux normally
|
315
|
+
is able to be modified by <b>group and user nobody</b> (or,
|
316
|
+
the user that runs the webserver; in my case this is typically
|
317
|
+
lighty, as I use lighttpd as my primary webserver).
|
318
|
+
|
319
|
+
The code for this functionality can be found here:
|
320
|
+
|
321
|
+
cyberweb/toplevel_methods/temp_directory.rb
|
322
|
+
|
323
|
+
Or the direct require command:
|
324
|
+
|
325
|
+
require 'cyberweb/toplevel_methods/temp_directory.rb'
|
326
|
+
|
327
|
+
This is a very important first step to do, to adjust
|
328
|
+
the temp directory to your use case.
|
329
|
+
|
330
|
+
I may add more code support for this step in the future;
|
331
|
+
for now (October 2022) I just wanted to document this,
|
332
|
+
so people know where to look for changes in this regard.
|
333
|
+
|
334
|
+
## Include the cyberweb project on a website
|
335
|
+
|
336
|
+
To include the cyberweb project on a website, in your .cgi script
|
337
|
+
for instance, do use this line:
|
338
|
+
|
339
|
+
require 'cyberweb/autoinclude'
|
340
|
+
|
341
|
+
You can then populate the @web_object object, which resides in the
|
342
|
+
main Cyberweb-namespace, and which is also aliased through a
|
343
|
+
convenience method called w(). If you autoinclude Cyberweb
|
344
|
+
then you can use the w() method directly.
|
345
|
+
|
346
|
+
This allows you to describe a webpage, such as by issuing the
|
347
|
+
following code:
|
348
|
+
|
349
|
+
w {
|
350
|
+
title 'My first homepage'
|
351
|
+
body_css 'mar1em'
|
352
|
+
h2 'Hello World!'
|
353
|
+
use_jquery
|
354
|
+
}
|
355
|
+
|
356
|
+
Note that this should happen on separate lines - the description
|
357
|
+
here for the gem does not replace newlines with the html <br> tag.
|
358
|
+
|
359
|
+
Inside **w {}** you can issue special instructions, such as use_jquery
|
360
|
+
or disable_webimages. The former allows us to use jquery, the latter
|
361
|
+
disables webimages. (Webimages are small icons that I find myself
|
362
|
+
to use a lot. If you wish to use these images, have a look at
|
363
|
+
|
364
|
+
http://shevegen.square7.ch/STD.tar.xz
|
365
|
+
|
366
|
+
)
|
367
|
+
|
368
|
+
## Proper (default) order of arguments to many methods in the Cyberweb project
|
369
|
+
|
370
|
+
The Cyberweb project uses quite a few methods that have more than 4
|
371
|
+
or 5 parameters.
|
372
|
+
|
373
|
+
The typical order for these methods is the following:
|
374
|
+
|
375
|
+
(**1**) the content belonging to the tag at hand
|
376
|
+
(**2**) the css class that is to be used for that tag (defaults to class WebTag)
|
377
|
+
(**3**) the id to that HTML element (optional)
|
378
|
+
(**4**) the css style for that tag (optional)
|
379
|
+
(**5**) javascript code to that tag (optional)
|
380
|
+
|
226
381
|
## CSS templates
|
227
382
|
|
228
383
|
CSS templates can be designated by assigning to a symbol, such as
|
@@ -280,19 +435,6 @@ display the above notification for images not found. If it is set
|
|
280
435
|
to normal or lower than that, the web_object project will not
|
281
436
|
display that warning.
|
282
437
|
|
283
|
-
## Proper (default) order of arguments to many methods in the Cyberweb project
|
284
|
-
|
285
|
-
The Cyberweb project uses quite a few methods that have more than 4
|
286
|
-
or 5 parameters.
|
287
|
-
|
288
|
-
The typical order for these methods is the following:
|
289
|
-
|
290
|
-
(**1**) the content belonging to the tag at hand
|
291
|
-
(**2**) the css class that is to be used for that tag (defaults to class WebTag)
|
292
|
-
(**3**) the id to that HTML element (optional)
|
293
|
-
(**4**) the css style for that tag (optional)
|
294
|
-
(**5**) javascript code to that tag (optional)
|
295
|
-
|
296
438
|
## Greek letters
|
297
439
|
|
298
440
|
The old greek letters are specified via shortcuts such as <b>σ</b>
|
@@ -305,18 +447,6 @@ the following command:
|
|
305
447
|
|
306
448
|
Cyberweb.show_greek_letters
|
307
449
|
|
308
|
-
## SVG
|
309
|
-
|
310
|
-
If you wish to make use of SVG it is recommended to install the
|
311
|
-
**svg_paradise** project. Then, you can use it through Cyberweb
|
312
|
-
such as in the following case:
|
313
|
-
|
314
|
-
ee Cyberweb.circle
|
315
|
-
|
316
|
-
This will output a SVG circle. Do note that this can be customized;
|
317
|
-
simply have a look for the SVG Paradise project for more
|
318
|
-
documentation pertaining to this part.
|
319
|
-
|
320
450
|
## Javascript-support in the Cyberweb project
|
321
451
|
|
322
452
|
Have a look at the subdirectory called **javascript/**.
|
@@ -361,40 +491,6 @@ Since as of **April 2019**, the old .cgi approach will be extended;
|
|
361
491
|
while .cgi will be always supported in the Cyberweb project, an
|
362
492
|
approach similar to **sinatra** will eventually be adopted as well.
|
363
493
|
|
364
|
-
## Include the cyberweb project on a website
|
365
|
-
|
366
|
-
To include the cyberweb project on a website, in your .cgi script
|
367
|
-
for instance, do use this line:
|
368
|
-
|
369
|
-
require 'cyberweb/autoinclude'
|
370
|
-
|
371
|
-
You can then populate the @web_object object, which resides in the
|
372
|
-
main Cyberweb-namespace, and which is also aliased through a
|
373
|
-
convenience method called w(). If you autoinclude Cyberweb
|
374
|
-
then you can use the w() method directly.
|
375
|
-
|
376
|
-
This allows you to describe a webpage, such as by issuing the
|
377
|
-
following code:
|
378
|
-
|
379
|
-
w {
|
380
|
-
title 'My first homepage'
|
381
|
-
body_css 'mar1em'
|
382
|
-
h2 'Hello World!'
|
383
|
-
use_jquery
|
384
|
-
}
|
385
|
-
|
386
|
-
Note that this should happen on separate lines - the description
|
387
|
-
here for the gem does not replace newlines with the html <br> tag.
|
388
|
-
|
389
|
-
Inside **w {}** you can issue special instructions, such as use_jquery
|
390
|
-
or disable_webimages. The former allows us to use jquery, the latter
|
391
|
-
disables webimages. (Webimages are small icons that I find myself
|
392
|
-
to use a lot. If you wish to use these images, have a look at
|
393
|
-
|
394
|
-
http://shevegen.square7.ch/STD.tar.xz
|
395
|
-
|
396
|
-
)
|
397
|
-
|
398
494
|
## Configuration - and editing the configuration file (which is a yaml file)
|
399
495
|
|
400
496
|
Keep in mind that you can modify a lot of the configuration that
|
@@ -536,7 +632,43 @@ I sometimes use the pre-tag, and display numbers in a table-fashion,
|
|
536
632
|
for where it may be useful to use a monospaced font, so that the
|
537
633
|
alignment of the text is easier.
|
538
634
|
|
539
|
-
##
|
635
|
+
## The WebObject (Cyberweb::WebObject)
|
636
|
+
|
637
|
+
The following subsection will contain information pertaining to
|
638
|
+
the most important class of this gem: <b>WebObject</b>.
|
639
|
+
|
640
|
+
This is the primary class that is used for describing a
|
641
|
+
web-application (or, in oldschool parlance, a HTML object
|
642
|
+
or HTML page).
|
643
|
+
|
644
|
+
## Setting the date-of-creation for a web-app based on WebObject
|
645
|
+
|
646
|
+
Since as of **October 2021** you can use:
|
647
|
+
|
648
|
+
created_when '20.08.2021'
|
649
|
+
|
650
|
+
To **indicate when the webpage at hand has been created**. This will then
|
651
|
+
add a meta-element to the page, which is roughly equivalent to:
|
652
|
+
|
653
|
+
<meta name="DCTERMS.created" scheme="DCTERMS.ISO8601" content="2010-03-17T13:31:50"/>
|
654
|
+
|
655
|
+
I am not sure whether this is super-useful or not, but I wanted
|
656
|
+
to add a method that keeps track of the creation-time of
|
657
|
+
web-apps based on web_object, which is the main reason why
|
658
|
+
this functionality was added. At the least it helps me remember
|
659
|
+
when a web-app was created.
|
660
|
+
|
661
|
+
### Default hyperlinks
|
662
|
+
|
663
|
+
The default styling for a-tags in HTML is to start with
|
664
|
+
text-decoration: none, and upon a <b>hover</b> event
|
665
|
+
change towards text-decoration: underline.
|
666
|
+
|
667
|
+
Since this is so commonly used, the method
|
668
|
+
<b>.default_hyperlink_behaviour()</b> can be used
|
669
|
+
to add the CSS rules for this, as-is.
|
670
|
+
|
671
|
+
### Setting a title on a webobject
|
540
672
|
|
541
673
|
You can set a title on the default webobject via:
|
542
674
|
|
@@ -907,7 +1039,7 @@ Normal text usually equates to a font-weight value of
|
|
907
1039
|
<b>400</b> whereas bold text equals to a value of
|
908
1040
|
<b>700</b>.
|
909
1041
|
|
910
|
-
## Caret cursor in CSS
|
1042
|
+
## Caret cursor in CSS and cursors in general
|
911
1043
|
|
912
1044
|
You can style the colour of the cursor that appears in an
|
913
1045
|
input-field.
|
@@ -930,6 +1062,14 @@ This may then look like this:
|
|
930
1062
|
|
931
1063
|
The relevant part is the red cursor in the ~middle in that input field.
|
932
1064
|
|
1065
|
+
If you have a use case for a web-page having some different cursor,
|
1066
|
+
you can use this for a given Cyberweb::WebObject:
|
1067
|
+
|
1068
|
+
cursor :wait # signals that the program is busy.
|
1069
|
+
cursor :help # signals that help-information is available.
|
1070
|
+
cursor :crosshair # signals that a selection is possible/needed.
|
1071
|
+
cursor :grab # signals that this element can be grabbed via the mouse/pointer device.
|
1072
|
+
|
933
1073
|
## CSS helper code and how it relates to the Cyberweb project
|
934
1074
|
|
935
1075
|
This subsection attempts to detail how the **cyberweb** project
|
@@ -2274,23 +2414,27 @@ is via:
|
|
2274
2414
|
doc {
|
2275
2415
|
}
|
2276
2416
|
|
2277
|
-
This **doc** refers to document and is ultimately just a
|
2278
|
-
tag. So I put my web-applications into a big
|
2417
|
+
This **doc** refers to document and is ultimately just a <div>
|
2418
|
+
tag. So I put my web-applications into a big <div> tag
|
2279
2419
|
ultimately.
|
2280
2420
|
|
2281
|
-
Since late 2020 I am also using language variants such
|
2421
|
+
Since as of late <b>2020</b> I am also using language variants such
|
2422
|
+
as:
|
2282
2423
|
|
2283
2424
|
english {
|
2284
2425
|
}
|
2426
|
+
|
2285
2427
|
# or
|
2428
|
+
|
2286
2429
|
german {
|
2287
2430
|
}
|
2288
2431
|
|
2289
|
-
|
2290
|
-
|
2291
|
-
|
2432
|
+
The latter is used for denoting that this webpage is written
|
2433
|
+
in german, and the former is used when the webpage is written in
|
2434
|
+
english. This is not a replacement for doc {}, but is the starting
|
2435
|
+
point I use for describe a web-object in general.
|
2292
2436
|
|
2293
|
-
In June 2021 this was extended in that I added the method
|
2437
|
+
In <b>June 2021</b> this was extended in that I added the method
|
2294
2438
|
called:
|
2295
2439
|
|
2296
2440
|
doc_skeleton
|
@@ -2298,20 +2442,22 @@ called:
|
|
2298
2442
|
The word <b>skeleton</b> refers to a separate file, the
|
2299
2443
|
skeleton of the web-application.
|
2300
2444
|
|
2301
|
-
Say that you have five called index.rb, index.cgi,
|
2445
|
+
Say that you have <b>five</b> files called index.rb, index.cgi,
|
2302
2446
|
index.sinatra, index_english.md and index.german.md.
|
2303
2447
|
|
2304
2448
|
This allows us to read in either the english or the german
|
2305
|
-
language.
|
2449
|
+
language, as-is.
|
2306
2450
|
|
2307
2451
|
To let the cyberweb project guess on its own, consider
|
2308
2452
|
using a variant via the following Symbol:
|
2309
2453
|
|
2310
2454
|
doc_skeleton(:english_or_german)
|
2311
2455
|
|
2312
|
-
This currently defaults to german
|
2313
|
-
or
|
2314
|
-
the web-application to view the english content instead.
|
2456
|
+
This currently defaults to <b>german</b>. You can pass <b>?use_english</b>
|
2457
|
+
or <b>?english</b> to the .cgi page to overrule this and force
|
2458
|
+
the web-application to view the english content instead. That way
|
2459
|
+
the user can change languages, as-is. A bit cumbersome for now,
|
2460
|
+
but possible.
|
2315
2461
|
|
2316
2462
|
In order for this to work, the corresponding .md file must
|
2317
2463
|
exist, e. g. **index_english.md** or **index_german.md**.
|
@@ -2320,12 +2466,12 @@ Note that this is currently (June 2021) quite experimental,
|
|
2320
2466
|
but I wanted to add the feature that we can offer different
|
2321
2467
|
languages. In the long run I may adapt this approach, to
|
2322
2468
|
make it easier to use different languages on any given
|
2323
|
-
|
2324
|
-
**roebe** gem. For example, luft.cfg under **roebe/www/luft/**
|
2469
|
+
web-application, but for now I only use this in the
|
2470
|
+
**roebe** gem. For example, <b>luft.cfg</b> under **roebe/www/luft/**
|
2325
2471
|
will show this. It may not work on your home system,
|
2326
|
-
though, as it is catered to my home setup. But it
|
2327
|
-
how this could be done in theory. So, who knows - in
|
2328
|
-
long run I may integrate this as a 'default' feature.
|
2472
|
+
though, as it is catered to my home setup currently. But it
|
2473
|
+
shows how this could be done in theory. So, who knows - in
|
2474
|
+
the long run I may integrate this as a 'default' feature.
|
2329
2475
|
|
2330
2476
|
Note that **?use_german** will work as well, to force
|
2331
2477
|
the **_german.md** file to be read.
|
@@ -2796,82 +2942,6 @@ You can add content via CSS like this:
|
|
2796
2942
|
I don't think this is too overly useful when you can dynamically
|
2797
2943
|
generate the web-app as-is, though.
|
2798
2944
|
|
2799
|
-
## Cyberweb::HtmlTemplate
|
2800
|
-
|
2801
|
-
class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
|
2802
|
-
specific content.
|
2803
|
-
|
2804
|
-
Let's show a specific example how this may be used:
|
2805
|
-
|
2806
|
-
require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
|
2807
|
-
|
2808
|
-
Cyberweb::HtmlTemplate[
|
2809
|
-
title: 'Status',
|
2810
|
-
body: '<pre style="font-size:150%">'+
|
2811
|
-
::EnvironmentInformation.return_the_most_important_info+
|
2812
|
-
'</pre>'
|
2813
|
-
].to_s
|
2814
|
-
|
2815
|
-
This would represent a "full" HTML page, as a String.
|
2816
|
-
|
2817
|
-
It is possible, since as of **18.06.2021**, to pass **CSS classes**
|
2818
|
-
into this, via:
|
2819
|
-
|
2820
|
-
css_classes:
|
2821
|
-
|
2822
|
-
For example, passing 'darkblue' to that key means that the CSS
|
2823
|
-
class 'darkblue' will be made available, which ultimately comes
|
2824
|
-
down to <b>color: darkblue</b>.
|
2825
|
-
|
2826
|
-
I needed this functionality to pull in only the CSS classes
|
2827
|
-
that I use on a particular page generated by class
|
2828
|
-
Cyberweb::HtmlTemplate.
|
2829
|
-
|
2830
|
-
Various additional entries are available. For example, if
|
2831
|
-
you want to modify the css-style in use for the body tag
|
2832
|
-
then you can simply use the following variant:
|
2833
|
-
|
2834
|
-
body_css_style: 'background-color:#DFD1FF'
|
2835
|
-
|
2836
|
-
In the long run the goal here is to extend class HtmlTemplate
|
2837
|
-
in such a way that all html-generation used within the
|
2838
|
-
Cyberweb project can be handled by it.
|
2839
|
-
|
2840
|
-
You can also pass ad-hoc CSS style into it. Example:
|
2841
|
-
|
2842
|
-
Cyberweb::HtmlTemplate[
|
2843
|
-
body: _, # The content of <body> goes in here.
|
2844
|
-
css_style: '
|
2845
|
-
img {
|
2846
|
-
border: 8px solid #black;
|
2847
|
-
padding: 2px;
|
2848
|
-
}
|
2849
|
-
' # and ^^^ there you can put your CSS rules into class HtmlTemplate
|
2850
|
-
].to_s
|
2851
|
-
|
2852
|
-
You can also pass in some ad-hoc javascript code via:
|
2853
|
-
|
2854
|
-
javascript_code:
|
2855
|
-
|
2856
|
-
All this does is add the proper [script> tag to it.
|
2857
|
-
|
2858
|
-
You can also specifically add jquery support for the HtmlTemplate.
|
2859
|
-
The following example shows how this can be done:
|
2860
|
-
|
2861
|
-
html_template = Cyberweb::HtmlTemplate[
|
2862
|
-
title: 'This is a test-page,
|
2863
|
-
body: HtmlTags.p('Another test.','','','font-size:1.8em'),
|
2864
|
-
use_jquery: true
|
2865
|
-
].to_s
|
2866
|
-
|
2867
|
-
puts html_template
|
2868
|
-
|
2869
|
-
Typing <b>Cyberweb::HtmlTemplate[]</b> is quite cumbersome, though. Since
|
2870
|
-
as of October 2022 a simpler toplevel API is available:
|
2871
|
-
|
2872
|
-
Cyberweb.html_template
|
2873
|
-
Cyberweb.html_template(body_content) # The String you pass here will be the body of the HTML page.
|
2874
|
-
|
2875
2945
|
## Embed youtube videos and videos in general
|
2876
2946
|
|
2877
2947
|
You can embed youtube videos, thanks to the MultimediaParadise
|
@@ -3113,23 +3183,6 @@ local file, if said remote website contains german umlauts.
|
|
3113
3183
|
|
3114
3184
|
In fact this was precisely the reason why that method was added.
|
3115
3185
|
|
3116
|
-
## Setting the date-of-creation for a web-app based on WebObject
|
3117
|
-
|
3118
|
-
Since as of **October 2021** you can use:
|
3119
|
-
|
3120
|
-
created_when '20.08.2021'
|
3121
|
-
|
3122
|
-
To **indicate when the webpage at hand has been created**. This will then
|
3123
|
-
add a meta-element to the page, which is roughly equivalent to:
|
3124
|
-
|
3125
|
-
<meta name="DCTERMS.created" scheme="DCTERMS.ISO8601" content="2010-03-17T13:31:50"/>
|
3126
|
-
|
3127
|
-
I am not sure whether this is super-useful or not, but I wanted
|
3128
|
-
to add a method that keeps track of the creation-time of
|
3129
|
-
web-apps based on web_object, which is the main reason why
|
3130
|
-
this functionality was added. At the least it helps me remember
|
3131
|
-
when a web-app was created.
|
3132
|
-
|
3133
3186
|
## autogenerated_system_settings.yml
|
3134
3187
|
|
3135
3188
|
The file <b>cyberweb/yaml/autogenerated_system_settings.yml</b> is created
|
@@ -3837,46 +3890,6 @@ Including the namespace for <b>Cyberweb::Objectified::Mask</b> is
|
|
3837
3890
|
done mostly for convenience, so that the user does not have to
|
3838
3891
|
manually include this module.
|
3839
3892
|
|
3840
|
-
## Drawing a coloured circle via CSS
|
3841
|
-
|
3842
|
-
You can draw a circle via CSS.
|
3843
|
-
|
3844
|
-
Let's first show the CSS rules for this:
|
3845
|
-
|
3846
|
-
div.circle {
|
3847
|
-
width: 300px;
|
3848
|
-
height: 300px;
|
3849
|
-
background: #2762e9;
|
3850
|
-
border-radius: 50%;
|
3851
|
-
}
|
3852
|
-
|
3853
|
-
Next you can use HTML to draw the circle:
|
3854
|
-
|
3855
|
-
<div class="circle"></div>
|
3856
|
-
|
3857
|
-
That's it.
|
3858
|
-
|
3859
|
-
I found this to be simple and potentially useful, so I added
|
3860
|
-
an API to the cyberweb project to support this.
|
3861
|
-
|
3862
|
-
The API goes like this:
|
3863
|
-
|
3864
|
-
Cyberweb.draw_circle()
|
3865
|
-
Cyberweb.draw_circle(width: 200)
|
3866
|
-
Cyberweb.draw_circle(width: 200, height: 500)
|
3867
|
-
Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue)
|
3868
|
-
Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
|
3869
|
-
|
3870
|
-
Pass a Hash to the method. Note that this will return the CSS rule
|
3871
|
-
as-is, as well as return the div-tag String. Cyberweb::BaseModule
|
3872
|
-
will directly embed this if you use <b>draw_circle()</b>.
|
3873
|
-
|
3874
|
-
Here is a partial screenshot showing three such examples; only the
|
3875
|
-
second example has a border-radius of 50%. See also the example
|
3876
|
-
<b>cyberweb/examples/advanced/draw_circle/draw_circle.cgi</b>.
|
3877
|
-
|
3878
|
-
<img src="https://i.imgur.com/k5wFnwn.png" style="margin: 1em">
|
3879
|
-
|
3880
3893
|
## JQuery
|
3881
3894
|
|
3882
3895
|
The Cyberweb framework/toolset favours the use of jquery. Presently,
|
@@ -4457,6 +4470,193 @@ The general syntax goes like this:
|
|
4457
4470
|
@keyframes name_here {
|
4458
4471
|
}
|
4459
4472
|
|
4473
|
+
## module Cyberweb::JqueryModule
|
4474
|
+
|
4475
|
+
<b>module Cyberweb::JqueryModule</b> is used to enable or disable support
|
4476
|
+
for jquery. Not all classes in the cyberweb gem make use of this module
|
4477
|
+
right now - notably class <b>Cyberweb::WebObject</b> does not use this
|
4478
|
+
module as of yet. This is planned at some later time in the future, as
|
4479
|
+
some code has to be re-written, in order to make use of this new
|
4480
|
+
module.
|
4481
|
+
|
4482
|
+
The only class that uses module <b>Cyberweb::JqueryModule</b> right
|
4483
|
+
now is <b>class Cyberweb::HtmlTemplate</b>.
|
4484
|
+
|
4485
|
+
## CSS Borders
|
4486
|
+
|
4487
|
+
CSS supports different borders.
|
4488
|
+
|
4489
|
+
You can control various different aspects here, such as the
|
4490
|
+
width of the border, or the style of the border.
|
4491
|
+
|
4492
|
+
The available <b>border-style properties</b> are as follows:
|
4493
|
+
|
4494
|
+
dotted - Defines a dotted border.
|
4495
|
+
dashed - Defines a dashed border.
|
4496
|
+
solid - Defines a solid border.
|
4497
|
+
double - Defines a double border.
|
4498
|
+
groove - Defines a 3D grooved border. This effect depends on the border-color value.
|
4499
|
+
ridge - Defines a 3D ridged border. This effect depends on the border-color value.
|
4500
|
+
inset - Defines a 3D inset border. This effect depends on the border-color value.
|
4501
|
+
outset - Defines a 3D outset border. This effect depends on the border-color value.
|
4502
|
+
none - Defines no border.
|
4503
|
+
hidden - Defines a hidden border.
|
4504
|
+
|
4505
|
+
The following paragraph shows how you can use this:
|
4506
|
+
|
4507
|
+
p.dotted {border-style: dotted;}
|
4508
|
+
p.dashed {border-style: dashed;}
|
4509
|
+
p.solid {border-style: solid; }
|
4510
|
+
p.double {border-style: double;}
|
4511
|
+
p.groove {border-style: groove;}
|
4512
|
+
p.ridge {border-style: ridge; }
|
4513
|
+
p.inset {border-style: inset; }
|
4514
|
+
p.outset {border-style: outset;}
|
4515
|
+
p.none {border-style: none; }
|
4516
|
+
p.hidden {border-style: hidden;}
|
4517
|
+
p.mix {border-style: dotted dashed solid double;}
|
4518
|
+
|
4519
|
+
Interestingly enough, if you do not specify a color for
|
4520
|
+
the border via border-color then this will default to <b>black</b>.
|
4521
|
+
|
4522
|
+
## Cyberweb::HtmlTemplate
|
4523
|
+
|
4524
|
+
class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
|
4525
|
+
specific content.
|
4526
|
+
|
4527
|
+
Let's show a specific example how this may be used:
|
4528
|
+
|
4529
|
+
require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
|
4530
|
+
|
4531
|
+
Cyberweb::HtmlTemplate[
|
4532
|
+
title: 'Status',
|
4533
|
+
body: '<pre style="font-size:150%">'+
|
4534
|
+
::EnvironmentInformation.return_the_most_important_info+
|
4535
|
+
'</pre>'
|
4536
|
+
].to_s
|
4537
|
+
|
4538
|
+
This would represent a "full" HTML page, as a String.
|
4539
|
+
|
4540
|
+
It is possible, since as of **18.06.2021**, to pass **CSS classes**
|
4541
|
+
into this, via:
|
4542
|
+
|
4543
|
+
css_classes:
|
4544
|
+
|
4545
|
+
For example, passing 'darkblue' to that key means that the CSS
|
4546
|
+
class 'darkblue' will be made available, which ultimately comes
|
4547
|
+
down to <b>color: darkblue</b>.
|
4548
|
+
|
4549
|
+
I needed this functionality to pull in only the CSS classes
|
4550
|
+
that I use on a particular page generated by class
|
4551
|
+
Cyberweb::HtmlTemplate.
|
4552
|
+
|
4553
|
+
Various additional entries are available. For example, if
|
4554
|
+
you want to modify the css-style in use for the body tag
|
4555
|
+
then you can simply use the following variant:
|
4556
|
+
|
4557
|
+
body_css_style: 'background-color:#DFD1FF'
|
4558
|
+
|
4559
|
+
In the long run the goal here is to extend class HtmlTemplate
|
4560
|
+
in such a way that all html-generation used within the
|
4561
|
+
Cyberweb project can be handled by it.
|
4562
|
+
|
4563
|
+
You can also pass ad-hoc CSS style into it. Example:
|
4564
|
+
|
4565
|
+
Cyberweb::HtmlTemplate[
|
4566
|
+
body: _, # The content of <body> goes in here.
|
4567
|
+
css_style: '
|
4568
|
+
img {
|
4569
|
+
border: 8px solid #black;
|
4570
|
+
padding: 2px;
|
4571
|
+
}
|
4572
|
+
' # and ^^^ there you can put your CSS rules into class HtmlTemplate
|
4573
|
+
].to_s
|
4574
|
+
|
4575
|
+
You can also pass in some ad-hoc javascript code via:
|
4576
|
+
|
4577
|
+
javascript_code:
|
4578
|
+
|
4579
|
+
All this does is add the proper [script> tag to it.
|
4580
|
+
|
4581
|
+
You can also specifically add jquery support for the HtmlTemplate.
|
4582
|
+
The following example shows how this can be done:
|
4583
|
+
|
4584
|
+
html_template = Cyberweb::HtmlTemplate[
|
4585
|
+
title: 'This is a test-page,
|
4586
|
+
body: HtmlTags.p('Another test.','','','font-size:1.8em'),
|
4587
|
+
use_jquery: true
|
4588
|
+
].to_s
|
4589
|
+
|
4590
|
+
puts html_template
|
4591
|
+
|
4592
|
+
You can also pass in a favicon to use such as shown in the following
|
4593
|
+
example:
|
4594
|
+
|
4595
|
+
Cyberweb::HtmlTemplate[
|
4596
|
+
title: 'Current Time',
|
4597
|
+
body: '<b>'+Roebe::Time.hh_mm_ss+' '+Roebe::Time.dd_mm_yyyy+'</b>',
|
4598
|
+
favicon: BeautifulUrl[:time_favicon]
|
4599
|
+
].to_s
|
4600
|
+
|
4601
|
+
Typing <b>Cyberweb::HtmlTemplate[]</b> is quite cumbersome, though. Since
|
4602
|
+
as of October 2022 a simpler toplevel API is available:
|
4603
|
+
|
4604
|
+
Cyberweb.html_template
|
4605
|
+
Cyberweb.html_template(body_content) # The String you pass here will be the body of the HTML page.
|
4606
|
+
|
4607
|
+
## SVG
|
4608
|
+
|
4609
|
+
If you wish to make use of SVG it is recommended to install the
|
4610
|
+
**svg_paradise** project. Then, you can use it through Cyberweb
|
4611
|
+
such as in the following case:
|
4612
|
+
|
4613
|
+
ee Cyberweb.circle
|
4614
|
+
|
4615
|
+
This will output a SVG circle. Do note that this can be customized;
|
4616
|
+
simply have a look for the SVG Paradise project for more
|
4617
|
+
documentation pertaining to this part.
|
4618
|
+
|
4619
|
+
## Drawing a coloured circle via CSS
|
4620
|
+
|
4621
|
+
You can draw a circle via <b>CSS</b>.
|
4622
|
+
|
4623
|
+
Let's first show the pure CSS rules for this functionality:
|
4624
|
+
|
4625
|
+
div.circle {
|
4626
|
+
width: 300px;
|
4627
|
+
height: 300px;
|
4628
|
+
background: #2762e9;
|
4629
|
+
border-radius: 50%;
|
4630
|
+
}
|
4631
|
+
|
4632
|
+
Next you can use HTML to actually "draw" the circle, as-is:
|
4633
|
+
|
4634
|
+
<div class="circle"></div>
|
4635
|
+
|
4636
|
+
That's it.
|
4637
|
+
|
4638
|
+
I found this to be simple and potentially useful, so I added
|
4639
|
+
an API to the cyberweb project to support this.
|
4640
|
+
|
4641
|
+
The toplevel API goes like this:
|
4642
|
+
|
4643
|
+
Cyberweb.draw_circle()
|
4644
|
+
Cyberweb.draw_circle(width: 200)
|
4645
|
+
Cyberweb.draw_circle(width: 200, height: 500)
|
4646
|
+
Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue)
|
4647
|
+
Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
|
4648
|
+
|
4649
|
+
Pass a <b>Hash</b> into the method. Note that this will return the CSS
|
4650
|
+
rule as-is, as well as return the div-tag String. <b>Cyberweb::BaseModule</b>
|
4651
|
+
will directly embed this if you use the method <b>draw_circle()</b>.
|
4652
|
+
|
4653
|
+
Here is a partial screenshot showing three such examples; only the
|
4654
|
+
second example has a border-radius of <b>50%</b>. See also the
|
4655
|
+
distributed example at <b>cyberweb/examples/advanced/draw_circle/draw_circle.cgi</b>
|
4656
|
+
showcasing this functionality.
|
4657
|
+
|
4658
|
+
<img src="https://i.imgur.com/k5wFnwn.png" style="margin: 1em">
|
4659
|
+
|
4460
4660
|
## Useful quotes when designing websites and web-apps
|
4461
4661
|
|
4462
4662
|
The following subsection collects a few <b>interesting statements</b> -
|