Add scroll positioning demos and reorganize sample apps#620
Merged
Conversation
Apps 116, 172, 317, and 346 have no counterpart in the main app numbering (src/) - they are orphans in the obsolete pkg 99. All four use native JavaScript via <script> tags, so collect them in a new package "UI5 demo apps using native JavaScript" and drop the _0 suffix.
Apps 032, 036, 037, 040, 060, 084, 093, 111, 141, 178, 201, and 309 all use native JavaScript via <script> tags or sap.z2ui5 client-side hooks. Consolidate them in the dedicated native JS package.
The four "Work in Progress" tiles still referenced the old class names with the _0 suffix. Since the dispatcher in app 000 creates objects via CREATE OBJECT li_app TYPE (lv_classname) and silently swallows cx_root, clicking those tiles was a no-op.
Move the tiles for 032, 036, 037, 040, 060, 084, 093, 178, and 309 out of their original panels, and add new tiles for 141 and 201 (previously unlinked). Drop the now-empty "JS" sub-panel under Custom Extensions. Each native JS demo app now has exactly one entry, all under Work in Progress.
Remove its tile from the app 000 launchpad and move the class to the obsolete package 99.
Several apps reachable from the app 000 launchpad had no back button, so the user got stuck after navigating in. - 094, 096, 143: existing page() call, just add navbuttonpress and shownavbutton - 044: wrap the bare label in shell()->page() with back button - 303, 325, 330: wrap object_page_layout in shell()->page() - 307: wrap the standalone panel in shell()->page() - 031, 039: wire up the existing BACK button to nav_app_leave (031 had the button but no handler, 039 had no wrapper Page) Skipped: helper/data classes without views and App-in-App sub-views whose parent already owns the page.
A new overview app that mirrors the proposed structure (9 thematic
sections + a §10 Compatibility & Experimental section for sub-package
and edge-case samples). The original launchpad at app 000 stays as-is
for now so the two can be compared side by side.
Sections:
1. Getting Started
2. Data Binding
3. Events & Navigation
4. Input Controls
5. Display & Data
6. Layouts
7. Popups, Dialogs & Messages
8. Files & I/O
9. Advanced & Extensions
10. Compatibility & Experimental
(Smart Controls, Custom CSS, Higher Releases, Internal/Testing,
+ sub-packages 00/01/02/03)
Helper/data classes and App-in-App sub-views are not linked.
- Rename last top-level section from "UI5 Version Specific & WIP" to "UI5 Version Specific, Experimental & WIP" - Add one sub-panel per sub-package (00, 01, 02, 03) under it, with tiles for every class in the package. Package 99 (obsolete) is not linked. Note: package 03 (native JS) apps now appear both under Work in Progress (where they were consolidated previously) and the new pkg 03 sub-panel. Deduplication can be done in a follow-up if desired.
The native JS apps now live exclusively under the dedicated "Native JS — experimental (pkg 03)" sub-panel. The previous Work in Progress tiles for the same 16 classes have been removed so every app shows up exactly once.
The Scrolling custom control is replaced by two new client actions in
the framework (PR abap2UI5#2280):
- SCROLL_TO - set scrollTop / scrollLeft by pixel
- SCROLL_INTO_VIEW - bring a control into the viewport
Changes:
- Move app 134 ("Scrolling" - old custom-control demo) to pkg 99 as
z2ui5_cl_demo_app_134_0 (obsolete).
- Add app 362 demonstrating SCROLL_TO: a table of 100 rows with toolbar
buttons that scroll the page to top / middle / bottom (smooth + jump).
- Add app 363 demonstrating SCROLL_INTO_VIEW: a long form with three
inputs separated by spacers and a Validate button - if the required
middle input is empty the page scrolls to it via scrollIntoView.
Both samples use literal `SCROLL_TO` / `SCROLL_INTO_VIEW` strings until
the framework PR is merged and the cs_event constants land on main.
Launchpad app 000 now links 362 + 363 in place of the old 134 tile.
Use the typed constants z2ui5_if_client=>cs_event-scroll_to and cs_event-scroll_into_view instead of literal strings, and add the "preserve scroll position across roundtrips" demo to app 362 using client->get( )-s_scroll-main. abaplint reports 7 errors against the upstream main branch because the constants and the s_scroll struct are only on the abap2UI5 PR #2280 branch. They will go away as soon as that PR is merged.
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
2 participants
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.
Summary
This PR introduces two new demo apps showcasing scroll positioning features and reorganizes the demo app structure by moving several samples to a dedicated package and renaming classes for consistency.
Key Changes
New demo apps:
z2ui5_cl_demo_app_362: DemonstratesSCROLL_TOclient action for scrolling to specific pixel positions with smooth/instant behaviorz2ui5_cl_demo_app_363: DemonstratesSCROLL_INTO_VIEWclient action for scrolling elements into view with configurable alignment and behaviorDemo app reorganization:
03for generic XML samples03(apps 032, 036, 037, 040, 060, 084, 093, 111, 141, 178, 201, 309, and renamed 116, 172, 317, 346)99and renamed toz2ui5_cl_demo_app_134_099Updated demo app 000 (main navigation):
Minor updates:
verticalscrollingparameter)Implementation Details
The new scroll positioning demos provide practical examples of the client-side scroll actions:
SCROLL_TOuses pixel-based positioning with optional smooth scrolling behaviorSCROLL_INTO_VIEWuses element-based targeting with block alignment options (start/center)Both demos include interactive buttons to trigger scroll actions and demonstrate the API usage patterns.
https://claude.ai/code/session_019JWLbTFrzcKUxpMtZK4Vx7