abap
4 weeks ago in HTML
Raw Download 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Schrödinger Programmiert ABAP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        /* Style for the iOS-like list */
        .ios-list-item {
            transition: background-color 0.2s ease-in-out;
        }
        .ios-list-item:active {
            background-color: #e5e5e5; /* A light gray for tap feedback */
        }
        /* Custom scrollbar for a cleaner look */
        .custom-scrollbar::-webkit-scrollbar {
            width: 5px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 5px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        /* Simple page transition */
        .page {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body class="bg-gray-800 flex justify-center items-center min-h-screen p-4">
    <!-- iPhone-like Frame -->
    <div class="w-full max-w-sm h-[80vh] min-h-[500px] bg-white rounded-[40px] shadow-2xl p-3 border-4 border-gray-900 overflow-hidden">
        <div class="w-full h-full bg-gray-50 rounded-[30px] overflow-hidden flex flex-col">
            
            <!-- Main App Container -->
            <main id="app-container" class="flex-grow flex flex-col overflow-hidden">
                <!-- This is where the pages will be rendered by JavaScript -->
            </main>
        </div>
    </div>
    <script>
        // --- DATA ---
        // This object holds all the chapter information from the book.
        const bookData = [
            { id: 1, title: "Eine Nudelmaschine für zu Hause", subtitle: "Die SAP, das SAP-System und ABAP", content: "Dieses Kapitel führt in die Welt von SAP und ABAP ein. Es erklärt die Geschichte von SAP, den grundlegenden Aufbau eines SAP-Systems und die Rolle von ABAP als Programmiersprache. Es wird gezeigt, wie man ein eigenes lokales SAP-Testsystem herunterlädt und installiert, um die Beispiele im Buch nachzuvollziehen." },
            { id: 2, title: "Rein in die Küche - raus aus der Küche", subtitle: "Starten mit dem SAP-System", content: "Hier lernen Sie die Grundlagen der Navigation im SAP-System. Themen sind das SAP Logon, die grafische Benutzeroberfläche (SAP GUI), das Konzept der Mandanten und der Umgang mit Transaktionen. Es ist der erste praktische Kontakt mit dem System." },
            { id: 3, title: "Ciao a tutti! (Hallo Welt!)", subtitle: "Der 20-Minuten-Einstieg", content: "Ein Schnelldurchlauf durch einen kompletten Entwicklungszyklus. In kürzester Zeit erstellen Sie Ihr erstes lauffähiges ABAP-Programm – inklusive Anlegen einer Datenbanktabelle, eines einfachen User-Interfaces (Dynpro) und einer Transaktion. Perfekt für einen ersten Überblick." },
            { id: 4, title: "AAA - Alles außer ABAP", subtitle: "ABAP-Infrastruktur und -Werkzeuge", content: "Um ABAP zu beherrschen, muss man das Ökosystem verstehen. Dieses Kapitel stellt die ABAP-Infrastruktur vor: das Repository zur Speicherung von Entwicklungsobjekten und die wichtigsten Werkzeuge wie den Object Navigator (SE80), den ABAP Editor und den Debugger." },
            { id: 5, title: "Schräge Typen", subtitle: "Datentypen und -objekte", content: "Die Grundlage jeder Programmierung: Datentypen. Das Kapitel erklärt elementare, strukturierte und tabellarische Typen in ABAP. Es wird gezeigt, wie man Typen lokal im Programm oder global im ABAP Dictionary definiert und Variablen (Datenobjekte) deklariert." },
            { id: 6, title: "Si parla ABAP?", subtitle: "ABAP-Syntax I", content: "Die grundlegende ABAP-Syntax wird hier vermittelt. Dazu gehören Zuweisungen, arithmetische Operationen, Zeichenketten-Funktionen sowie Kontrollstrukturen wie Verzweigungen (IF, CASE) und Schleifen (DO, WHILE)." },
            { id: 7, title: "Kleine Häppchen sind leichter wiederverdaut", subtitle: "ABAP-Syntax II", content: "Dieses Kapitel behandelt die Modularisierung von Code. Es zeigt, wie man 'Spaghetti-Code' vermeidet, indem man die Logik in wiederverwendbare Einheiten wie Unterprogramme (FORMs) und Funktionsbausteine kapselt. Ein wichtiger Schritt zu strukturiertem Programmieren." },
            { id: 8, title: "Schrödinger zeigt Klasse", subtitle: "ABAP Objects I", content: "Der Einstieg in die objektorientierte Programmierung mit ABAP Objects. Es werden die Kernkonzepte erklärt: Klassen, Objekte, Attribute (was ein Objekt 'hat') und Methoden (was ein Objekt 'macht'). Sie lernen, wie man lokale und globale Klassen definiert und Objekte instanziiert." },
            { id: 9, title: "Erben oder nicht, das ist hier die Frage", subtitle: "Vererbung", content: "Ein zentrales Konzept der Objektorientierung: die Vererbung. Klassen können Eigenschaften und Methoden an Unterklassen 'vererben' und so Hierarchien bilden. Das Konzept der Polymorphie (Vielgestaltigkeit) durch das Redefinieren von Methoden wird eingeführt." },
            { id: 10, title: "Keine Details bitte", subtitle: "Der Blick durch Interfaces", content: "Interfaces ermöglichen es, die Implementierung von der Definition zu trennen. Sie definieren eine reine Schnittstelle (einen 'Vertrag'), den verschiedene Klassen implementieren können. Dies ist ein Schlüsselkonzept für flexible und entkoppelte Software." },
            { id: 11, title: "Das Kapitel für Feiglinge", subtitle: "Ausnahmen", content: "Fehlerbehandlung ist kein Zeichen von Schwäche, sondern von Professionalität. Dieses Kapitel zeigt die verschiedenen Arten der Ausnahmebehandlung in ABAP, von der klassischen Prüfung von `sy-subrc` bis hin zu modernen, klassenbasierten Ausnahmen (Exceptions)." },
            { id: 12, title: "Spaghetti-Programmierung", subtitle: "GUI I: Selektionsbilder, Listen", content: "Die einfachste Form der Benutzeroberfläche in SAP: Selektionsbilder zur Dateneingabe (`PARAMETERS`, `SELECT-OPTIONS`) und klassische Listen zur Ausgabe (`WRITE`). Hier wird gezeigt, wie man schnell einfache Reports mit Interaktion erstellt." },
            { id: 13, title: "Lasagne aufs Auge", subtitle: "GUI II: Dynpro-Programmierung", content: "Die 'klassische' Art, komplexe Oberflächen in SAP zu bauen. Das Kapitel erklärt den Aufbau von Dynpros (dynamischen Programmen) mit Layout, Elementen und der Ablauflogik (PBO/PAI). Dies ermöglicht deutlich flexiblere UIs als einfache Listen." },
            { id: 14, title: "Ravioli", subtitle: "GUI III: Web Dynpro ABAP", content: "Dieses Kapitel ist als Bonus-Kapitel online verfügbar. Es gibt einen Einblick in Web Dynpro ABAP, eine modernere, komponentenbasiere Technologie zur Erstellung von Webanwendungen direkt aus dem ABAP-System heraus." },
            { id: 15, title: "Raus aus meiner Küche!", subtitle: "Berechtigungen", content: "Sicherheit ist entscheidend. Dieses Kapitel erklärt das SAP-Berechtigungskonzept. Sie lernen, wie Sie mit `AUTHORITY-CHECK` und Berechtigungsobjekten sicherstellen, dass nur autorisierte Benutzer bestimmte Aktionen in Ihren Programmen ausführen dürfen." },
            { id: 16, title: "Vorratskammer einrichten", subtitle: "DB-Tabellen erstellen", content: "Alle Daten müssen gespeichert werden. Hier wird detailliert gezeigt, wie man im ABAP Dictionary transparente Tabellen anlegt, inklusive Felder, Primärschlüssel, technischer Einstellungen und Fremdschlüsselbeziehungen." },
            { id: 17, title: "Vorratskammer plündern", subtitle: "DB-Tabellen auslesen", content: "Daten aus der Datenbank lesen mit Open SQL. Das `SELECT`-Statement wird mit seinen wichtigsten Klauseln (`INTO`, `FROM`, `WHERE`, `ORDER BY`) erklärt. Zusätzlich werden Views als Möglichkeit vorgestellt, Daten aus mehreren Tabellen zu verknüpfen." },
            { id: 18, title: "Vorratskammer in Schuss halten", subtitle: "DB-Daten pflegen", content: "Neben dem Lesen ist das Ändern von Daten zentral. Die Open-SQL-Befehle `INSERT`, `UPDATE`, `DELETE` und `MODIFY` werden vorgestellt. Wichtige Konzepte wie die SAP-LUW (Logical Unit of Work) zur Sicherstellung der Datenkonsistenz werden erläutert." },
            { id: 19, title: "Mit Schirm, Charme...", subtitle: "Datenablage ohne DB", content: "Manchmal müssen Daten in Dateien auf dem Präsentations- oder Applikationsserver verarbeitet werden. Das Kapitel zeigt, wie man mit `cl_gui_frontend_services` Dateien hoch- und herunterlädt und mit `OPEN DATASET` auf dem Server arbeitet." },
            { id: 20, title: "Täglich wechselnde Speisekarten", subtitle: "Dynamische Programmierung", content: "Für maximale Flexibilität: Dynamische Programmierung ermöglicht es, Teile des Programms erst zur Laufzeit zu definieren. Konzepte wie Feldsymbole, Datenreferenzen und die Erzeugung von dynamischem Code (RTTS) werden vorgestellt." }
        ];
        // --- APP LOGIC ---
        const appContainer = document.getElementById('app-container');
        // Function to render the main chapter list page
        const renderChapterListPage = () => {
            const listHTML = bookData.map(chapter => `
                <div class="ios-list-item flex items-center justify-between p-4 border-b border-gray-200 cursor-pointer" onclick="navigateToChapter(${chapter.id})">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm mr-4">${chapter.id}</div>
                        <div>
                            <p class="font-semibold text-gray-800">${chapter.title}</p>
                            <p class="text-sm text-gray-500">${chapter.subtitle}</p>
                        </div>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </div>
            `).join('');
            appContainer.innerHTML = `
                <div id="chapter-list-page" class="page flex flex-col h-full">
                    <!-- Header -->
                    <header class="bg-gray-100/80 backdrop-blur-sm border-b border-gray-200 p-4 flex-shrink-0">
                        <h1 class="text-xl font-bold text-center text-gray-900">Schrödinger ABAP</h1>
                    </header>
                    <!-- Content -->
                    <div class="flex-grow overflow-y-auto custom-scrollbar">
                        ${listHTML}
                    </div>
                </div>
            `;
        };
        // Function to render the chapter detail page
        const renderChapterDetailPage = (chapterId) => {
            const chapter = bookData.find(c => c.id === chapterId);
            if (!chapter) {
                renderChapterListPage(); // Go back if chapter not found
                return;
            }
            appContainer.innerHTML = `
                <div id="chapter-detail-page" class="page flex flex-col h-full">
                    <!-- Header -->
                    <header class="bg-gray-100/80 backdrop-blur-sm border-b border-gray-200 p-4 flex-shrink-0 flex items-center">
                        <button onclick="navigateToList()" class="text-blue-500 font-medium flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                            Kapitel
                        </button>
                        <h1 class="text-lg font-bold text-center text-gray-900 flex-grow -ml-12">Kapitel ${chapter.id}</h1>
                    </header>
                    <!-- Content -->
                    <div class="flex-grow overflow-y-auto p-5 custom-scrollbar">
                        <h2 class="text-2xl font-bold text-gray-800 mb-2">${chapter.title}</h2>
                        <h3 class="text-md font-medium text-gray-500 mb-6">${chapter.subtitle}</h3>
                        <p class="text-gray-700 leading-relaxed">${chapter.content}</p>
                    </div>
                </div>
            `;
        };
        
        // --- NAVIGATION ---
        const navigateToChapter = (chapterId) => {
            renderChapterDetailPage(chapterId);
        };
        
        const navigateToList = () => {
            renderChapterListPage();
        };
        // --- INITIAL RENDER ---
        // Start the app by showing the chapter list
        renderChapterListPage();
    </script>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
Recent Public Pastes
Untitled - 4 hours ago Untitled - 5 hours ago Untitled - 7 hours ago Untitled - 9 hours ago Untitled - 10 hours ago Untitled - 10 hours ago My Collection Vide0s - 1 day ago Untitled - 4 days ago Untitled - 4 days ago Untitled - 4 days ago