Add Walkthrough tutorial: 8-step invoice app guide - #170
Merged
Conversation
A prototype of what ui5.github.io/tutorials does for OpenUI5: a short,
curated learning path, and a tutorial whose every step is a complete app
rather than a fragment.
The step-per-runnable-app shape is theirs; the mechanics are ours and are
simpler. A step there is a built app plus a ZIP download, produced by a
build orchestrator over an npm workspace per step. A step here is one
class in a fenced block, so the playground rule engine already gives it
the live preview - the reader runs the text on the page, and nothing
needs hosting or a second copy that can drift.
Eight steps, each the whole app as it stands: Hello World, a first view,
events, data binding, list binding, row events, popups, and the
dispatcher-and-methods structure real apps use.
Measured rather than assumed, per AGENTS.md:
- all 8 fences carry a Run button (checked against playground.mjs),
- all 8 were opened in a playground built from source: every one
reaches `running` and renders,
- the behaviour each page PROMISES was driven in that playground -
the toast, the greeting from the bound input, the five rows, the
row-specific event, the dialog editing the clicked row and the list
picking the change up, and Cancel leaving it alone,
- chain-house-layout passes on all eight views, verified by breaking
one chain and watching the rule fire.
The preview image is that app running, captured from the playground, not
a mockup.
The pages are linked from the nav dropdown and sit in a sidebar section
of their own between Getting Started and the Cookbook - a tutorial is
read after the install and before the reference chapters. Directory-index
links are avoided: generate-llms.mjs maps a sidebar link to
docs/<link>.md, so `/tutorials/` is not a page and the section follows
the repository's own `/cookbook/overview` convention instead.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PwxPfiy5WE8fVxfnToFeWk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a comprehensive step-by-step tutorial that builds a complete invoice app from scratch, introducing core abap2UI5 concepts progressively.
Summary
This PR introduces the Walkthrough tutorial, a foundational learning path consisting of 8 complete, runnable ABAP classes. Each step builds on the previous one, demonstrating key framework concepts without external dependencies.
Key Changes
8 tutorial steps (step-1.md through step-8.md):
Tutorial overview page (tutorials/overview.md) — entry point describing the learning path and linking to all tutorials
Walkthrough overview (tutorials/walkthrough/overview.md) — introduction to the walkthrough with preview image and step descriptions
Navigation updates — added Tutorials section to site navigation in VitePress config, positioned between Getting Started and Cookbook
Preview image — walkthrough-preview.png showing the finished invoice app UI
Implementation Details
Each step is a complete, self-contained class that can be run independently via the Run button or copied into a system. Steps progress from a single message box through views, events, data binding, lists, and popups, culminating in a properly structured app using the dispatcher pattern. The tutorial assumes basic ABAP knowledge but introduces all abap2UI5 concepts from first principles.
https://claude.ai/code/session_01PwxPfiy5WE8fVxfnToFeWk