more examples

2025-11-09 21:40:50 +01:00
parent 2b14517344
commit 12ebddaa79
13 changed files with 1906 additions and 3 deletions
@@ -1,6 +1,6 @@
-# EbookReader Animated Demonstrations
+# pyWebLayout Visual Documentation

-This directory contains animated GIF demonstrations of the pyWebLayout EbookReader functionality.
+This directory contains visual documentation for pyWebLayout, including animated GIF demonstrations of the EbookReader functionality and static example outputs showcasing various features.

 ## Generated GIFs

@@ -85,16 +85,129 @@ You can modify `generate_ereader_gifs.py` to adjust:
 | `ereader_chapter_navigation.gif` | ~290 KB | 11 | 1000ms |
 | `ereader_bookmarks.gif` | ~500 KB | 17 | 600ms |

+---
+
+## Example Outputs
+
+Static PNG images generated by the example scripts, demonstrating various pyWebLayout features.
+
+### Example 01: Simple Page Rendering
+**File:** `example_01_page_rendering.png`
+**Source:** [examples/01_simple_page_rendering.py](../../examples/01_simple_page_rendering.py)
+**Demonstrates:** Page styles, borders, padding, background colors
+
+### Example 06: Functional Elements
+**File:** `example_06_functional_elements.png`
+**Source:** [examples/06_functional_elements_demo.py](../../examples/06_functional_elements_demo.py)
+**Demonstrates:** Buttons, form fields, interactive elements
+
+### Example 08: Pagination (NEW)
+**Files:**
+- `example_08_pagination_explicit.png` (109 KB) - 5 pages with explicit PageBreaks
+- `example_08_pagination_auto.png` (87 KB) - 2 pages with automatic pagination
+
+**Source:** [examples/08_pagination_demo.py](../../examples/08_pagination_demo.py)
+**Test:** [tests/examples/test_08_pagination_demo.py](../../tests/examples/test_08_pagination_demo.py)
+
+**Demonstrates:**
+- Using `PageBreak` to force content onto new pages
+- Multi-page document layout with explicit breaks
+- Automatic pagination when content overflows
+- Page numbering functionality
+- Document flow control
+
+**Coverage:** ✅ Fills critical gap - PageBreak had NO examples before this
+
+### Example 09: Link Navigation (NEW)
+**File:** `example_09_link_navigation.png` (60 KB)
+**Source:** [examples/09_link_navigation_demo.py](../../examples/09_link_navigation_demo.py)
+**Test:** [tests/examples/test_09_link_navigation_demo.py](../../tests/examples/test_09_link_navigation_demo.py)
+
+**Demonstrates:**
+- **Internal links** - Document navigation (`#section1`, `#section2`)
+- **External links** - Web URLs (`https://example.com`)
+- **API links** - API endpoints (`/api/settings`, `/api/save`)
+- **Function links** - Direct function calls (`calculate()`, `process()`)
+- Link styling (underlined, color-coded by type)
+- Link callbacks and interactivity
+
+**Coverage:** ✅ Comprehensive - All 4 LinkType variations demonstrated
+
+### Example 10: Comprehensive Forms (NEW)
+**File:** `example_10_forms.png` (31 KB)
+**Source:** [examples/10_forms_demo.py](../../examples/10_forms_demo.py)
+**Test:** [tests/examples/test_10_forms_demo.py](../../tests/examples/test_10_forms_demo.py)
+
+**Demonstrates all 14 FormFieldType variations:**
+
+**Text-Based Fields:**
+- `TEXT` - Standard text input
+- `EMAIL` - Email validation field
+- `PASSWORD` - Password masking
+- `URL` - URL validation
+- `TEXTAREA` - Multi-line text
+
+**Number/Date/Time Fields:**
+- `NUMBER` - Numeric input
+- `DATE` - Date picker
+- `TIME` - Time selector
+- `RANGE` - Slider control
+- `COLOR` - Color picker
+
+**Selection Fields:**
+- `CHECKBOX` - Boolean selection
+- `RADIO` - Single choice from options
+- `SELECT` - Dropdown menu
+- `HIDDEN` - Hidden form data
+
+**Coverage:** ✅ Complete - All 14 field types across 4 practical examples
+
+---
+
+## Generating New Examples
+
+### Run Individual Examples
+```bash
+# Navigate to project root
+cd /path/to/pyWebLayout
+
+# Run specific example
+python examples/08_pagination_demo.py
+python examples/09_link_navigation_demo.py
+python examples/10_forms_demo.py
+```
+
+### Run All Example Tests
+```bash
+# Run all example tests with pytest
+python -m pytest tests/examples/ -v
+
+# Run specific test file
+python -m pytest tests/examples/test_08_pagination_demo.py -v
+```
+
+All new examples (08, 09, 10) include:
+- ✅ Comprehensive documentation
+- ✅ Full test coverage (30 tests total)
+- ✅ Visual output verification
+- ✅ Working code examples
+
+See [NEW_EXAMPLES_AND_TESTS_SUMMARY.md](../NEW_EXAMPLES_AND_TESTS_SUMMARY.md) for detailed information.
+
+---
+
 ## Usage in Documentation

-These GIFs are embedded in the main [README.md](../../README.md) to showcase the EbookReader's capabilities to potential users.
+These visual assets are used throughout the pyWebLayout documentation to showcase capabilities.

 To embed in Markdown:
 ```markdown
 ![Page Navigation](docs/images/ereader_page_navigation.gif)
+![Pagination Example](docs/images/example_08_pagination_explicit.png)
 ```

 To embed in HTML with size control:
 ```html
 <img src="docs/images/ereader_page_navigation.gif" width="300" alt="Page Navigation">
+<img src="docs/images/example_08_pagination_explicit.png" width="400" alt="Pagination">
 ```