diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 1fde2bc1..78411369 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -124,7 +124,7 @@ export default defineConfig({ // "Introduction" was the first PAGE in it, one level down. { text: "Getting Started", link: "/get_started/about" }, // nav { text: "Tutorials", link: "/tutorials/overview" }, // nav - { text: "Cookbook", link: "/cookbook/overview" }, + { text: "Cookbook", link: "/cookbook/view/definition" }, { text: "Configuration", link: "/configuration/setup" }, // Technical Insight is not a line of its own here any more: it is a // subsection of Advanced Topic in the sidebar, and a flat dropdown @@ -181,11 +181,13 @@ export default defineConfig({ items: [ { text: "Introduction", link: "/get_started/about" }, // sidebar { + // Install it, and see one app run. The step-by-step tutorials - + // Full Example among them - are a section of their own now; what + // stays here is the shortest path from nothing to a running app. text: "Quickstart", items: [ { text: "Install with abapGit", link: "/get_started/quickstart" }, { text: "Hello World", link: "/get_started/hello_world" }, - { text: "Full Example", link: "/get_started/full_example" }, ], }, { text: "Tooling", link: "/get_started/tooling" }, @@ -203,30 +205,46 @@ export default defineConfig({ items: [ { text: "Overview", link: "/tutorials/overview" }, // sidebar { + // NOT collapsed: the eight steps are the section's content, and a + // reader who is working through them needs to see where they are + // in the sequence on every page. A tutorial whose steps are behind + // one more click reads as a single page that happens to be long. text: "Walkthrough", link: "/tutorials/walkthrough/overview", - collapsed: true, + collapsed: false, items: [ { text: "Introduction", link: "/tutorials/walkthrough/overview" }, // sidebar - { text: "1 — Hello World", link: "/tutorials/walkthrough/step-1" }, - { text: "2 — A First View", link: "/tutorials/walkthrough/step-2" }, - { text: "3 — Events", link: "/tutorials/walkthrough/step-3" }, - { text: "4 — Data Binding", link: "/tutorials/walkthrough/step-4" }, - { text: "5 — List Binding", link: "/tutorials/walkthrough/step-5" }, - { text: "6 — Row Events", link: "/tutorials/walkthrough/step-6" }, - { text: "7 — Popups", link: "/tutorials/walkthrough/step-7" }, - { text: "8 — App Structure", link: "/tutorials/walkthrough/step-8" }, + { text: "1. Hello World", link: "/tutorials/walkthrough/step-1" }, + { text: "2. A First View", link: "/tutorials/walkthrough/step-2" }, + { text: "3. Events", link: "/tutorials/walkthrough/step-3" }, + { text: "4. Data Binding", link: "/tutorials/walkthrough/step-4" }, + { text: "5. List Binding", link: "/tutorials/walkthrough/step-5" }, + { text: "6. Row Events", link: "/tutorials/walkthrough/step-6" }, + { text: "7. Popups", link: "/tutorials/walkthrough/step-7" }, + { text: "8. App Structure", link: "/tutorials/walkthrough/step-8" }, ], }, + // Both keep the URL they were published under - only the entry that + // navigates to them moved. Full Example is a step-by-step tutorial + // ("Step 1" to "Step 5") and was the second half of a Quickstart + // group that no longer had a tutorial section to hand it to; the + // Cheat Sheet is the sheet you keep open WHILE working through one. + // Neither is listed twice: an entry standing in two sidebar sections + // makes its own search results ambiguous. + { text: "Full Example", link: "/get_started/full_example" }, + { text: "Cheat Sheet", link: "/cookbook/cheat_sheet" }, ], }, { + // No overview page any more. This is a collection of concrete + // problem-and-solution chapters, and a map page in front of it was a + // stop between the reader and the recipe - it restated the sidebar + // they were already looking at. The section opens on the first + // chapter instead. text: "Cookbook", - link: "/cookbook/overview", + link: "/cookbook/view/definition", collapsed: true, items: [ - { text: "Overview", link: "/cookbook/overview" }, - { text: "Cheat Sheet", link: "/cookbook/cheat_sheet" }, { text: "View", link: "/cookbook/view/definition", diff --git a/docs/cookbook/cheat_sheet.md b/docs/cookbook/cheat_sheet.md index 8aa2c1db..918bf30b 100644 --- a/docs/cookbook/cheat_sheet.md +++ b/docs/cookbook/cheat_sheet.md @@ -40,5 +40,4 @@ Any expression that yields a flag works in `b`, so there is no reason to convert ## Next Steps -- [Overview](/cookbook/overview) — the full map of cookbook topics - [Common Failures](/cookbook/troubleshooting/common_failures) — symptoms and their usual causes diff --git a/docs/cookbook/overview.md b/docs/cookbook/overview.md deleted file mode 100644 index 7b724898..00000000 --- a/docs/cookbook/overview.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -outline: [2, 4] ---- -# Overview - -The Cookbook collects task-oriented recipes for everyday abap2UI5 development. Each section focuses on one area of the framework and shows the patterns you reach for most often. Use this page as a map — pick the topic that matches the problem in front of you and jump straight in. - -## Sections - -### [Cheat Sheet](/cookbook/cheat_sheet) -The rules that decide whether an app works or fails in a hard-to-debug way, condensed to one page with links to the full recipes. - -### [View](/cookbook/view/definition) -Build the XML view your app sends to the browser. Covers the basic view definition, deprecated controls to stay away from, nesting views inside other views, and XML templating for repeating structures. - -### [Model](/cookbook/model/binding) -Share data between ABAP and the frontend. Explains data binding, expressions and formatters, tables and trees, the device model, and how to deal with the model size limit. - -### [Event, Navigation](/cookbook/event_navigation/life_cycle) -Understand how a request flows through your app. Covers the lifecycle, backend and frontend events, actions, navigation between apps, and exception handling. - -### [Popup, Popover](/cookbook/popup_popover/popup) -Overlay parts of the view with dialogs and popovers — custom popups, popovers anchored to a control, and the built-in dialogs the framework ships out of the box. - -### [Translation, Messages](/cookbook/translation_messages/message) -Communicate with the user. Show message toasts and message boxes, write to the application log, and translate text with `i18n`. - -### [Browser Interaction](/cookbook/browser_interaction/title) -Reach into the browser from ABAP — set the tab title, control focus and scrolling, run timers, access the clipboard, work with the URL, and handle the soft keyboard on mobile. - -### [Device Capabilities](/cookbook/device_capabilities/info) -Read device info and use native hardware: camera, geolocation, barcode scanning, audio, and file upload/download including PDF and spreadsheet generation. - -### [State, Connectivity](/cookbook/expert_more/lock) -Manage session and app state across requests and talk to the outside — locking, statefulness, WebSocket, logout, OData, and sharing app state via URL. - -### [More Topics](/cookbook/eml_cds_sql/rap) -EML/CDS/SQL integration with RAP, recurring patterns and helpers, troubleshooting, and a list of obsolete features kept for reference. - -## How to Use This Cookbook - -- Each recipe stands on its own — read only the section you need. -- Code snippets are copy-paste ready. Drop them into a class that implements `z2ui5_if_app`. -- Most pages end with a **Working Samples** table: complete apps that use what the page describes. Each is a single class you can import and run. -- To search all of them instead — *"is there a sample for X?"* — read the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) and `Ctrl+F` for what you are after. Every entry carries the words a newcomer would type, not only its title. Once the repository is installed, the same list is the overview app `Z2UI5_CL_SMP_APP_000`, with a search box. -- For the API surface (`z2ui5_if_client`, `z2ui5_cl_ui5_view_builder`, …), read the source in the [main repository](https://github.com/abap2UI5/abap2UI5). - - -→ New to abap2UI5? Start with the [Getting Started Guide](/get_started/quickstart). diff --git a/docs/get_started/hello_world.md b/docs/get_started/hello_world.md index 6b42354d..f3c3ee97 100644 --- a/docs/get_started/hello_world.md +++ b/docs/get_started/hello_world.md @@ -19,185 +19,21 @@ CLASS zcl_app_hello_world IMPLEMENTATION. ENDMETHOD. ENDCLASS. ``` + Open the abap2UI5 startup page in your browser (the same page as in the [Quickstart](/get_started/quickstart)), enter the class name `ZCL_APP_HELLO_WORLD` in the input field, and launch your app. +That is a complete abap2UI5 app: one class, one method, no frontend project and no OData service. + ::: tip **ABAP Language Versions** While the HTTP handler has to distinguish between Standard ABAP and ABAP for Cloud, the apps themselves are independent. You're free to choose whether to build your apps with ABAP Cloud compatibility. ::: -### How Apps Work -abap2UI5 follows a thin-frontend model: the browser only renders UI5 views, while all logic, state, and data handling stay in ABAP on the server. Three ideas to keep in mind before writing code: - -- **One method, many calls.** The framework calls your app's `main` method on every roundtrip — on the initial start *and* after every user interaction (button press, input change, navigation). -- **State lives in your class.** Public attributes of your app class hold data between roundtrips; abap2UI5 serializes and restores them for you, so you don't manage sessions manually. -- **The `client` object is your only API.** Use it to display views, check which event fired, bind attributes to UI5 controls, and trigger navigation. - -Every abap2UI5 app implements the `z2ui5_if_app` interface. It has a single method, `main`, with one parameter: `client` of type `z2ui5_if_client`. (The real interface also declares a few attributes that the framework manages for you — you can ignore them.) -```abap -INTERFACE z2ui5_if_app PUBLIC. - METHODS main - IMPORTING - client TYPE REF TO z2ui5_if_client. -ENDINTERFACE. -``` - -→ *For a deeper look at the lifecycle and framework internals, see [How It All Works](/technical/how_it_all_works) and [Concept](/technical/concept).* - -### View Display -Instead of a message box, let's render a view with some text: -```abap -CLASS zcl_app_hello_world DEFINITION PUBLIC. - PUBLIC SECTION. - INTERFACES z2ui5_if_app. -ENDCLASS. - -CLASS zcl_app_hello_world IMPLEMENTATION. - METHOD z2ui5_if_app~main. - - DATA(view) = z2ui5_cl_ui5_view_builder=>factory( - )->ele( n = `View` ns = `mvc` - )->a( n = `xmlns` v = `sap.m` - )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc` - - )->ele( `Shell` - )->ele( `Page` - )->a( n = `title` v = `abap2UI5 - Hello World` - - )->tag( `Text` - )->a( n = `text` v = `My Text` ). - - client->view_display( view->stringify( ) ). - - ENDMETHOD. -ENDCLASS. -``` - -You are writing a UI5 XML view, one control per call. `z2ui5_cl_ui5_view_builder` -has four verbs and no list of controls to look up — every UI5 control, -property and aggregation is available because the builder never knew any of -them by name: - -| | | -| --- | --- | -| `ele( )` | add a control and **descend** into it — for a container | -| `tag( )` | add a control and **stay** — for a leaf | -| `a( )` | set **one** attribute on the control the chain is pointing at | -| `end( )` | ascend to the parent | - -The single rule: `a( )` applies to the control the chain currently points at, -so attributes follow their control — and a control gets them *before* its -first child. The root `mvc:View` and its `xmlns` declarations are written by -hand, exactly as in a real UI5 view. A trailing `end( )` can be left out: -`stringify( )` renders from the root wherever the chain stopped. - -### Events -Now add a button and react to its press event: -```abap -CLASS zcl_app_hello_world DEFINITION PUBLIC. - PUBLIC SECTION. - INTERFACES z2ui5_if_app. -ENDCLASS. - -CLASS zcl_app_hello_world IMPLEMENTATION. - METHOD z2ui5_if_app~main. - - IF client->check_on_navigated( ). - - DATA(view) = z2ui5_cl_ui5_view_builder=>factory( - )->ele( n = `View` ns = `mvc` - )->a( n = `xmlns` v = `sap.m` - )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc` - - )->ele( `Shell` - )->ele( `Page` - )->a( n = `title` v = `abap2UI5 - Hello World` - - )->tag( `Text` - )->a( n = `text` v = `My Text` - )->tag( `Button` - )->a( n = `text` v = `post` - )->a( n = `press` v = client->_event( `POST` ) ). - - client->view_display( view->stringify( ) ). - - ELSEIF client->check_on_event( `POST` ). - - client->message_box_display( `Hello World!` ). - - ENDIF. - - ENDMETHOD. -ENDCLASS. -``` - -As introduced above, the framework calls `main` on every roundtrip. The diagram shows both phases — the initial load and a later user event: - -```text -┌──────────┐ ┌──────────┐ ┌──────────┐ -│ Browser │──────>│ main() │──────>│ Browser │ -│ (Start) │ HTTP │ init │ HTTP │ (View) │ -└──────────┘ └──────────┘ └────┬─────┘ - │ user clicks -┌──────────┐ ┌──────────┐ ┌────┴─────┐ -│ Browser │<──────│ main() │<──────│ Browser │ -│ (Update) │ HTTP │ event │ HTTP │ (Event) │ -└──────────┘ └──────────┘ └──────────┘ -``` - -Use the lifecycle checks to tell these phases apart: - -- `client->check_on_init( )` — first call when the app starts -- `client->check_on_event( )` — user triggered an event (e.g. a button press) - -Each `check_*` method returns `abap_true` only for its own phase, so the `IF`/`ELSEIF` chain acts as a dispatcher. - -### Data Flow -Finally, add a public attribute and bind it to an input field to send data back to the server. The attribute must be in the `PUBLIC SECTION` — the framework accesses it dynamically and silently ignores private or protected attributes (full rules on the [Binding](/cookbook/model/binding) page): -```abap -CLASS zcl_app_hello_world DEFINITION PUBLIC. - PUBLIC SECTION. - INTERFACES z2ui5_if_app. - DATA name TYPE string. -ENDCLASS. - -CLASS zcl_app_hello_world IMPLEMENTATION. - METHOD z2ui5_if_app~main. - - IF client->check_on_navigated( ). - - DATA(view) = z2ui5_cl_ui5_view_builder=>factory( - )->ele( n = `View` ns = `mvc` - )->a( n = `xmlns` v = `sap.m` - )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc` - - )->ele( `Shell` - )->ele( `Page` - )->a( n = `title` v = `abap2UI5 - Hello World` - - )->tag( `Text` - )->a( n = `text` v = `My Text` - )->tag( `Input` - )->a( n = `value` v = client->_bind( name ) - )->tag( `Button` - )->a( n = `text` v = `post` - )->a( n = `press` v = client->_event( `POST` ) ). - - client->view_display( view->stringify( ) ). - - ELSEIF client->check_on_event( `POST` ). - - client->message_box_display( |Your name is { name }.| ). - - ENDIF. - - ENDMETHOD. -ENDCLASS. -``` -That's all you need. Set a breakpoint to watch the communication and data updates in action, then try changing the view, events, and data flow. +## Next: Build Something -### Jump into the Code -Press `Ctrl+F12` in any running app to open the **Developer Tools** — tabs for the app's source code, the rendered view XML, the model data, the request/response pair and the error log: -![Developer Tools opened with Ctrl+F12 showing code, view, and model](/get_started/image-2.png) +The [Walkthrough](/tutorials/walkthrough/overview) takes this class and grows it +into a small invoice app in eight steps — views, events, data binding, lists and +popups, each step a complete class you can run in the browser. It starts exactly +where this page stops. diff --git a/docs/get_started/next.md b/docs/get_started/next.md index 33bd62b6..82df5839 100644 --- a/docs/get_started/next.md +++ b/docs/get_started/next.md @@ -8,7 +8,7 @@ You've installed abap2UI5 and built your first app. From here, pick the directio ## Sample Apps Hundreds of working apps, and the fastest way to learn abap2UI5 is to read one that already does what you are about to write. They live in three repositories, each with a page that searches it — [**Learn**](https://abap2ui5.github.io/samples/) is the one to start on: the path from the smallest app that runs to files, devices and custom CSS, one idea per sample. -Looking for one in particular? Search the page, or `Ctrl+F` the [catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) for `f4`, `tree` or `nav_app_call`. [**Controls**](https://abap2ui5.github.io/samples-controls/) is the UI5 demo kit rebuilt control by control and [**Stack**](https://abap2ui5.github.io/samples-stack/) the samples that need something from your system — each page links the other two at its top. The [Cookbook](/cookbook/overview) links the same apps from the page that explains the pattern. +Looking for one in particular? Search the page, or `Ctrl+F` the [catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) for `f4`, `tree` or `nav_app_call`. [**Controls**](https://abap2ui5.github.io/samples-controls/) is the UI5 demo kit rebuilt control by control and [**Stack**](https://abap2ui5.github.io/samples-stack/) the samples that need something from your system — each page links the other two at its top. The [Cookbook](/cookbook/view/definition) links the same apps from the page that explains the pattern. ![Sample apps overview showing tables, lists, trees, and other UI5 controls](/get_started/image-1.png) @@ -25,7 +25,7 @@ The samples evolve all the time. Have one to share? Open a PR so others can lear Optional, and worth the ten minutes: a project [template](/advanced/working_off_stack) with the checks already wired up, a [linter](/advanced/linter) that finds broken views without a system, an [extension](/advanced/vscode) that runs your app on `F9` next to the code, and an [MCP server](/advanced/mcp_server) that lets an AI agent build and *look at* the app. See [Tooling](/get_started/tooling), and [Building with AI](/get_started/ai) if an assistant writes some of it. ## Development -Build views, handle events, share data, and work with tables. The [Cookbook](/cookbook/overview) walks through the patterns you need for everyday work — start with the [Life Cycle](/cookbook/event_navigation/life_cycle) page. +Build views, handle events, share data, and work with tables. The [Cookbook](/cookbook/view/definition) walks through the patterns you need for everyday work — start with the [Life Cycle](/cookbook/event_navigation/life_cycle) page. ## Configuration Before going live, set up security, performance tuning, Launchpad integration, and more. Start with the [Configuration guide](/configuration/setup). diff --git a/docs/index.md b/docs/index.md index 0527db73..ee41ce09 100644 --- a/docs/index.md +++ b/docs/index.md @@ -40,7 +40,7 @@ features: - title: Cookbook icon: details: Recipes for everyday tasks — views, binding, tables, events, popups, files. - link: /cookbook/overview + link: /cookbook/view/definition - title: Configuration icon: details: Setup, security, performance, launchpad — the road to production use. diff --git a/docs/tutorials/overview.md b/docs/tutorials/overview.md index ba43f701..c930cb5c 100644 --- a/docs/tutorials/overview.md +++ b/docs/tutorials/overview.md @@ -13,20 +13,18 @@ Run button, or copy it into your system and start it like any abap2UI5 app | Tutorial | Type | Content | |---|---|---| -| [Walkthrough](/tutorials/walkthrough/overview) | Foundation | Builds a small invoice app from scratch, one step at a time — the app class and its lifecycle, views built in ABAP, events, data binding, lists, popups, and the structure real apps use. | +| [Walkthrough](/tutorials/walkthrough/overview) | Foundation | Builds a small invoice app from scratch in eight steps — the app class and its lifecycle, views built in ABAP, events, data binding, lists, popups, and the structure real apps use. | +| [Full Example](/get_started/full_example) | Deep dive | The same structure applied to a realistic ABAP flow: a selection screen, a `SELECT`, a result table, a popup that edits a row, and the change written back. | -More tutorials — deep dives into single topics — will follow. Until then, the -[Cookbook](/cookbook/overview) covers each topic as a reference chapter. +Keep the [Cheat Sheet](/cookbook/cheat_sheet) open while you work through +them — it is every recurring construct on one page, from binding syntax to +the popup calls. ## After the Tutorials -Three catalogues of complete, tested apps continue where the tutorials stop: +The [Cookbook](/cookbook/view/definition) covers each topic again as a reference +chapter, and three catalogues of complete, tested apps continue from there: - [Samples](https://abap2ui5.github.io/samples/) — one app per pattern, along a guided learning path - [Controls](https://abap2ui5.github.io/samples-controls/) — UI5 demo kit samples rebuilt as abap2UI5 apps, searchable by control - [Stack](https://abap2ui5.github.io/samples-stack/) — integration samples per technology, from RAP to WebSocket - -And two pages of this site compress the walkthrough for readers in a hurry: -[Hello World](/get_started/hello_world) covers the first steps on a single -page, the [Full Example](/get_started/full_example) builds a realistic -selection-screen app on top of them. diff --git a/docs/tutorials/walkthrough/overview.md b/docs/tutorials/walkthrough/overview.md index e4e20302..c9bb29a9 100644 --- a/docs/tutorials/walkthrough/overview.md +++ b/docs/tutorials/walkthrough/overview.md @@ -37,6 +37,9 @@ you are interested in. No prior abap2UI5 or UI5 experience is needed — the tutorial introduces every concept as it appears. Basic ABAP (classes, methods, internal tables) is -assumed. If you want the framework installed in your own system first, do the -[Quickstart](/get_started/quickstart) — but the Run button works without any -installation at all. +assumed, and [Hello World](/get_started/hello_world) is the one page worth +reading first: it starts the smallest possible app in your own system, which +is where this tutorial picks up. + +The Run button works without any installation at all, so you can also simply +begin at [Step 1](/tutorials/walkthrough/step-1). diff --git a/docs/tutorials/walkthrough/step-1.md b/docs/tutorials/walkthrough/step-1.md index 505340e6..fcbabda1 100644 --- a/docs/tutorials/walkthrough/step-1.md +++ b/docs/tutorials/walkthrough/step-1.md @@ -1,6 +1,8 @@ --- outline: [2, 4] description: The smallest possible abap2UI5 app — one class, one method, one message. +samples: + - z2ui5_cl_smp_app_493 --- # Step 1: Hello World @@ -40,4 +42,37 @@ enter the class name. events, binding data — everything in this tutorial goes through this one object. +## The Interface + +`z2ui5_if_app` is the whole contract between your class and the framework — +one method, one parameter: + +```abap +INTERFACE z2ui5_if_app PUBLIC. + METHODS main + IMPORTING + client TYPE REF TO z2ui5_if_client. +ENDINTERFACE. +``` + +(The real interface also declares a few attributes the framework manages for +you — you can ignore them.) + +→ *For a deeper look at the lifecycle and framework internals, see [How It All +Works](/technical/how_it_all_works) and [Concept](/technical/concept).* + Next, we replace the message box with a real UI5 view. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| Basics I — Hello World, the Smallest App | [`Z2UI5_CL_SMP_APP_493`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_493.clas.abap) | + + diff --git a/docs/tutorials/walkthrough/step-2.md b/docs/tutorials/walkthrough/step-2.md index 0888e5d0..7ee7e9cb 100644 --- a/docs/tutorials/walkthrough/step-2.md +++ b/docs/tutorials/walkthrough/step-2.md @@ -59,4 +59,13 @@ The indentation mirrors the XML tree — `Text` sits inside `Page` inside full layout rules are on the [View → Definition](/cookbook/view/definition) page. +## Look at What It Built + +Press `Ctrl+F12` in any running app to open the **Developer Tools** — tabs for +the app's source code, the rendered view XML, the model data, the +request/response pair and the error log. The XML tab is the view this chain +produced, which is the quickest way to see what a verb did: + +![Developer Tools opened with Ctrl+F12 showing code, view, and model](/get_started/image-2.png) + Next, the app gets its first button — and with it, the app lifecycle. diff --git a/docs/tutorials/walkthrough/step-3.md b/docs/tutorials/walkthrough/step-3.md index c6d1f947..a535118a 100644 --- a/docs/tutorials/walkthrough/step-3.md +++ b/docs/tutorials/walkthrough/step-3.md @@ -1,6 +1,9 @@ --- outline: [2, 4] description: A button, a press event, and the abap2UI5 lifecycle behind them. +samples: + - z2ui5_cl_smp_app_495 + - z2ui5_cl_smp_app_004 --- # Step 3: Events @@ -75,3 +78,18 @@ chain cleanly dispatches every roundtrip. The full picture is on the Next: data leaves the browser and reaches your class — without a single line of transfer code. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| Basics III — Lifecycle: Init, Event, Navigated | [`Z2UI5_CL_SMP_APP_495`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_495.clas.abap) | +| Basics IV — Events, Views and Roundtrips | [`Z2UI5_CL_SMP_APP_004`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_004.clas.abap) | + + diff --git a/docs/tutorials/walkthrough/step-4.md b/docs/tutorials/walkthrough/step-4.md index 876cc83c..583a445e 100644 --- a/docs/tutorials/walkthrough/step-4.md +++ b/docs/tutorials/walkthrough/step-4.md @@ -1,6 +1,8 @@ --- outline: [2, 4] description: Bind an input field to a class attribute — data reaches the server by itself. +samples: + - z2ui5_cl_smp_app_494 --- # Step 4: Data Binding @@ -65,3 +67,17 @@ ENDCLASS. field. Two-way, and you wrote no transfer code. Next, the same binding moves a whole internal table into a list. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| Basics II — Data Binding: Input and Button | [`Z2UI5_CL_SMP_APP_494`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_494.clas.abap) | + + diff --git a/docs/tutorials/walkthrough/step-5.md b/docs/tutorials/walkthrough/step-5.md index dd86327c..5019d136 100644 --- a/docs/tutorials/walkthrough/step-5.md +++ b/docs/tutorials/walkthrough/step-5.md @@ -1,6 +1,8 @@ --- outline: [2, 4] description: Show an internal table as a UI5 list with aggregation binding. +samples: + - z2ui5_cl_smp_app_048 --- # Step 5: List Binding @@ -80,3 +82,17 @@ Tables (`sap.m.Table` with columns and cells) bind exactly the same way — the [Tables](/cookbook/model/tables) page has that variant. Next, the rows learn to react to a click. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| StandardListItem, Highlight and Events | [`Z2UI5_CL_SMP_APP_048`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_048.clas.abap) | + + diff --git a/docs/tutorials/walkthrough/step-6.md b/docs/tutorials/walkthrough/step-6.md index 9d32b013..cce2be26 100644 --- a/docs/tutorials/walkthrough/step-6.md +++ b/docs/tutorials/walkthrough/step-6.md @@ -1,6 +1,8 @@ --- outline: [2, 4] description: React to a click on a list row and know which row it was — events with arguments. +samples: + - z2ui5_cl_smp_app_167 --- # Step 6: Row Events @@ -90,3 +92,17 @@ handled purely in the browser — under [Event → Backend](/cookbook/event_navigation/backend). A toast is a modest way to show an invoice. Next, a real dialog. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| Extra Arguments with t_arg | [`Z2UI5_CL_SMP_APP_167`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_167.clas.abap) | + + diff --git a/docs/tutorials/walkthrough/step-7.md b/docs/tutorials/walkthrough/step-7.md index 1fc44130..e713a41e 100644 --- a/docs/tutorials/walkthrough/step-7.md +++ b/docs/tutorials/walkthrough/step-7.md @@ -1,6 +1,8 @@ --- outline: [2, 4] description: Edit a list row in a dialog — popups with the same builder, displayed over the running view. +samples: + - z2ui5_cl_smp_app_012 --- # Step 7: Popups @@ -128,3 +130,17 @@ Popovers, message boxes and the built-in popup classes are covered under The app is complete — one last step separates it into the structure real apps use. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| Ways to Open a Dialog (A) | [`Z2UI5_CL_SMP_APP_012`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_012.clas.abap) | + + diff --git a/docs/tutorials/walkthrough/step-8.md b/docs/tutorials/walkthrough/step-8.md index 3e8d6eb5..a1d2d3fd 100644 --- a/docs/tutorials/walkthrough/step-8.md +++ b/docs/tutorials/walkthrough/step-8.md @@ -1,6 +1,8 @@ --- outline: [2, 4] description: Refactor the walkthrough app into the structure real apps use — a dispatcher, named methods, protected state. +samples: + - z2ui5_cl_smp_app_070 --- # Step 8: App Structure @@ -157,8 +159,22 @@ from here: - the [Full Example](/get_started/full_example) — the same structure applied to a realistic selection-screen app with a table and database access, -- the [Cookbook](/cookbook/overview) — every topic of this walkthrough as a +- the [Cookbook](/cookbook/view/definition) — every topic of this walkthrough as a reference chapter, from [value helps](/cookbook/expert_more/value_help) to [navigation between apps](/cookbook/event_navigation/navigation), - the [sample catalogues](https://abap2ui5.github.io/samples/) — complete, tested apps for nearly every pattern, each one class like here. + + + +## Working Samples + +Complete apps from the [sample catalogue](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md) +that use what this page describes. Each is a single class — pull the repository with +[abapGit](https://abapgit.org) and start it with `?app_start=`. + +| Sample | Class | +|---|---| +| Full Example with sap.ui.table | [`Z2UI5_CL_SMP_APP_070`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_070.clas.abap) | + +