6.0/getting-started/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11         <link rel="canonical" href="https://docs.woltlab.com/6.0/getting-started/">
  12
  13
  14
  15         <link rel="next" href="../php/pages/">
  16
  17       <link rel="icon" href="../assets/default.favicon.ico">
  18       <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.1.5">
  19
  20
  21
  22         <title>Getting Started - WoltLab Suite Documentation</title>
  23
  24
  25
  26       <link rel="stylesheet" href="../assets/stylesheets/main.7a7fce14.min.css">
  27
  28
  29         <link rel="stylesheet" href="../assets/stylesheets/palette.a0c5b2b5.min.css">
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39       <link rel="stylesheet" href="../stylesheets/extra.css">
  40
  41     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
  42
  43
  44
  45
  46
  47
  48   </head>
  49
  50
  51
  52
  53
  54
  55
  56     <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="">
  57
  58
  59
  60     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  61     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  62     <label class="md-overlay" for="__drawer"></label>
  63     <div data-md-component="skip">
  64
  65
  66         <a href="#creating-a-simple-package" class="md-skip">
  67           Skip to content
  68         </a>
  69
  70     </div>
  71     <div data-md-component="announce">
  72
  73         <aside class="md-banner">
  74           <div class="md-banner__inner md-grid md-typeset">
  75
  76
  77     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  78
  79           </div>
  80
  81         </aside>
  82
  83     </div>
  84
  85       <div data-md-color-scheme="default" data-md-component="outdated" hidden>
  86
  87       </div>
  88
  89
  90
  91
  92
  93
  94 <header class="md-header md-header--shadow" data-md-component="header">
  95   <nav class="md-header__inner md-grid" aria-label="Header">
  96     <a href=".." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  97
  98   <img src="../assets/logo.png" alt="logo">
  99
 100     </a>
 101     <label class="md-header__button md-icon" for="__drawer">
 102       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
 103     </label>
 104     <div class="md-header__title" data-md-component="header-title">
 105       <div class="md-header__ellipsis">
 106         <div class="md-header__topic">
 107           <span class="md-ellipsis">
 108             WoltLab Suite Documentation
 109           </span>
 110         </div>
 111         <div class="md-header__topic" data-md-component="header-topic">
 112           <span class="md-ellipsis">
 113
 114               Getting Started
 115
 116           </span>
 117         </div>
 118       </div>
 119     </div>
 120
 121
 122
 123       <label class="md-header__button md-icon" for="__search">
 124         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
 125       </label>
 126       <div class="md-search" data-md-component="search" role="dialog">
 127   <label class="md-search__overlay" for="__search"></label>
 128   <div class="md-search__inner" role="search">
 129     <form class="md-search__form" name="search">
 130       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
 131       <label class="md-search__icon md-icon" for="__search">
 132         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
 133         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
 134       </label>
 135       <nav class="md-search__options" aria-label="Search">
 136
 137         <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
 138           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
 139         </button>
 140       </nav>
 141
 142     </form>
 143     <div class="md-search__output">
 144       <div class="md-search__scrollwrap" data-md-scrollfix>
 145         <div class="md-search-result" data-md-component="search-result">
 146           <div class="md-search-result__meta">
 147             Initializing search
 148           </div>
 149           <ol class="md-search-result__list" role="presentation"></ol>
 150         </div>
 151       </div>
 152     </div>
 153   </div>
 154 </div>
 155
 156
 157       <div class="md-header__source">
 158         <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 159   <div class="md-source__icon md-icon">
 160
 161     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 162   </div>
 163   <div class="md-source__repository">
 164     GitHub
 165   </div>
 166 </a>
 167       </div>
 168
 169   </nav>
 170
 171 </header>
 172
 173     <div class="md-container" data-md-component="container">
 174
 175
 176
 177
 178
 179
 180       <main class="md-main" data-md-component="main">
 181         <div class="md-main__inner md-grid">
 182
 183
 184
 185               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 186                 <div class="md-sidebar__scrollwrap">
 187                   <div class="md-sidebar__inner">
 188
 189
 190
 191 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 192   <label class="md-nav__title" for="__drawer">
 193     <a href=".." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 194
 195   <img src="../assets/logo.png" alt="logo">
 196
 197     </a>
 198     WoltLab Suite Documentation
 199   </label>
 200
 201     <div class="md-nav__source">
 202       <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 203   <div class="md-source__icon md-icon">
 204
 205     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 206   </div>
 207   <div class="md-source__repository">
 208     GitHub
 209   </div>
 210 </a>
 211     </div>
 212
 213   <ul class="md-nav__list" data-md-scrollfix>
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224     <li class="md-nav__item md-nav__item--active">
 225
 226       <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
 227
 228
 229
 230
 231
 232         <label class="md-nav__link md-nav__link--active" for="__toc">
 233           Getting Started
 234           <span class="md-nav__icon md-icon"></span>
 235         </label>
 236
 237       <a href="./" class="md-nav__link md-nav__link--active">
 238         Getting Started
 239       </a>
 240
 241
 242
 243 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 244
 245
 246
 247
 248
 249
 250     <label class="md-nav__title" for="__toc">
 251       <span class="md-nav__icon md-icon"></span>
 252       Table of contents
 253     </label>
 254     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 255
 256         <li class="md-nav__item">
 257   <a href="#setup-and-requirements" class="md-nav__link">
 258     Setup and Requirements
 259   </a>
 260
 261 </li>
 262
 263         <li class="md-nav__item">
 264   <a href="#the-packagexml-file" class="md-nav__link">
 265     The package.xml File
 266   </a>
 267
 268 </li>
 269
 270         <li class="md-nav__item">
 271   <a href="#the-php-class" class="md-nav__link">
 272     The PHP Class
 273   </a>
 274
 275 </li>
 276
 277         <li class="md-nav__item">
 278   <a href="#the-template" class="md-nav__link">
 279     The Template
 280   </a>
 281
 282 </li>
 283
 284         <li class="md-nav__item">
 285   <a href="#the-page-definition" class="md-nav__link">
 286     The Page Definition
 287   </a>
 288
 289 </li>
 290
 291         <li class="md-nav__item">
 292   <a href="#building-the-package" class="md-nav__link">
 293     Building the Package
 294   </a>
 295
 296 </li>
 297
 298         <li class="md-nav__item">
 299   <a href="#installation" class="md-nav__link">
 300     Installation
 301   </a>
 302
 303 </li>
 304
 305         <li class="md-nav__item">
 306   <a href="#developer-tools" class="md-nav__link">
 307     Developer Tools
 308   </a>
 309
 310     <nav class="md-nav" aria-label="Developer Tools">
 311       <ul class="md-nav__list">
 312
 313           <li class="md-nav__item">
 314   <a href="#registering-a-project" class="md-nav__link">
 315     Registering a Project
 316   </a>
 317
 318 </li>
 319
 320           <li class="md-nav__item">
 321   <a href="#synchronizing" class="md-nav__link">
 322     Synchronizing
 323   </a>
 324
 325 </li>
 326
 327       </ul>
 328     </nav>
 329
 330 </li>
 331
 332         <li class="md-nav__item">
 333   <a href="#appendix" class="md-nav__link">
 334     Appendix
 335   </a>
 336
 337     <nav class="md-nav" aria-label="Appendix">
 338       <ul class="md-nav__list">
 339
 340           <li class="md-nav__item">
 341   <a href="#template-guessing" class="md-nav__link">
 342     Template Guessing
 343   </a>
 344
 345 </li>
 346
 347       </ul>
 348     </nav>
 349
 350 </li>
 351
 352     </ul>
 353
 354 </nav>
 355
 356     </li>
 357
 358
 359
 360
 361
 362
 363
 364
 365
 366
 367
 368     <li class="md-nav__item md-nav__item--nested">
 369
 370
 371
 372
 373       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
 374
 375
 376
 377         <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
 378           PHP API
 379           <span class="md-nav__icon md-icon"></span>
 380         </label>
 381
 382       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
 383         <label class="md-nav__title" for="__nav_2">
 384           <span class="md-nav__icon md-icon"></span>
 385           PHP API
 386         </label>
 387         <ul class="md-nav__list" data-md-scrollfix>
 388
 389
 390
 391
 392
 393
 394     <li class="md-nav__item">
 395       <a href="../php/pages/" class="md-nav__link">
 396         Pages
 397       </a>
 398     </li>
 399
 400
 401
 402
 403
 404
 405
 406
 407
 408     <li class="md-nav__item">
 409       <a href="../php/database-objects/" class="md-nav__link">
 410         Database Objects
 411       </a>
 412     </li>
 413
 414
 415
 416
 417
 418
 419
 420
 421
 422     <li class="md-nav__item">
 423       <a href="../php/database-access/" class="md-nav__link">
 424         Database Access
 425       </a>
 426     </li>
 427
 428
 429
 430
 431
 432
 433
 434
 435
 436     <li class="md-nav__item">
 437       <a href="../php/exceptions/" class="md-nav__link">
 438         Exceptions
 439       </a>
 440     </li>
 441
 442
 443
 444
 445
 446
 447
 448
 449
 450
 451     <li class="md-nav__item md-nav__item--nested">
 452
 453
 454
 455
 456       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" >
 457
 458
 459
 460         <label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
 461           API
 462           <span class="md-nav__icon md-icon"></span>
 463         </label>
 464
 465       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
 466         <label class="md-nav__title" for="__nav_2_5">
 467           <span class="md-nav__icon md-icon"></span>
 468           API
 469         </label>
 470         <ul class="md-nav__list" data-md-scrollfix>
 471
 472
 473
 474
 475
 476
 477
 478     <li class="md-nav__item md-nav__item--nested">
 479
 480
 481
 482
 483       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_1" >
 484
 485
 486
 487         <label class="md-nav__link" for="__nav_2_5_1" id="__nav_2_5_1_label" tabindex="0">
 488           Caches
 489           <span class="md-nav__icon md-icon"></span>
 490         </label>
 491
 492       <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_1_label" aria-expanded="false">
 493         <label class="md-nav__title" for="__nav_2_5_1">
 494           <span class="md-nav__icon md-icon"></span>
 495           Caches
 496         </label>
 497         <ul class="md-nav__list" data-md-scrollfix>
 498
 499
 500
 501
 502
 503
 504     <li class="md-nav__item">
 505       <a href="../php/api/caches/" class="md-nav__link">
 506         Overview
 507       </a>
 508     </li>
 509
 510
 511
 512
 513
 514
 515
 516
 517
 518     <li class="md-nav__item">
 519       <a href="../php/api/caches_persistent-caches/" class="md-nav__link">
 520         Persistent Caches
 521       </a>
 522     </li>
 523
 524
 525
 526
 527
 528
 529
 530
 531
 532     <li class="md-nav__item">
 533       <a href="../php/api/caches_runtime-caches/" class="md-nav__link">
 534         Runtime Caches
 535       </a>
 536     </li>
 537
 538
 539
 540
 541         </ul>
 542       </nav>
 543     </li>
 544
 545
 546
 547
 548
 549
 550
 551
 552
 553     <li class="md-nav__item">
 554       <a href="../php/api/comments/" class="md-nav__link">
 555         Comments
 556       </a>
 557     </li>
 558
 559
 560
 561
 562
 563
 564
 565
 566
 567     <li class="md-nav__item">
 568       <a href="../php/api/cronjobs/" class="md-nav__link">
 569         Cronjobs
 570       </a>
 571     </li>
 572
 573
 574
 575
 576
 577
 578
 579
 580
 581     <li class="md-nav__item">
 582       <a href="../php/api/events/" class="md-nav__link">
 583         Events
 584       </a>
 585     </li>
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595
 596     <li class="md-nav__item md-nav__item--nested">
 597
 598
 599
 600
 601       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_5" >
 602
 603
 604
 605         <label class="md-nav__link" for="__nav_2_5_5" id="__nav_2_5_5_label" tabindex="0">
 606           Form Builder
 607           <span class="md-nav__icon md-icon"></span>
 608         </label>
 609
 610       <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_5_label" aria-expanded="false">
 611         <label class="md-nav__title" for="__nav_2_5_5">
 612           <span class="md-nav__icon md-icon"></span>
 613           Form Builder
 614         </label>
 615         <ul class="md-nav__list" data-md-scrollfix>
 616
 617
 618
 619
 620
 621
 622     <li class="md-nav__item">
 623       <a href="../php/api/form_builder/overview/" class="md-nav__link">
 624         Overview
 625       </a>
 626     </li>
 627
 628
 629
 630
 631
 632
 633
 634
 635
 636     <li class="md-nav__item">
 637       <a href="../php/api/form_builder/structure/" class="md-nav__link">
 638         Structure
 639       </a>
 640     </li>
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650     <li class="md-nav__item">
 651       <a href="../php/api/form_builder/form_fields/" class="md-nav__link">
 652         Fields
 653       </a>
 654     </li>
 655
 656
 657
 658
 659
 660
 661
 662
 663
 664     <li class="md-nav__item">
 665       <a href="../php/api/form_builder/validation_data/" class="md-nav__link">
 666         Validation and Data
 667       </a>
 668     </li>
 669
 670
 671
 672
 673
 674
 675
 676
 677
 678     <li class="md-nav__item">
 679       <a href="../php/api/form_builder/dependencies/" class="md-nav__link">
 680         Dependencies
 681       </a>
 682     </li>
 683
 684
 685
 686
 687         </ul>
 688       </nav>
 689     </li>
 690
 691
 692
 693
 694
 695
 696
 697
 698
 699     <li class="md-nav__item">
 700       <a href="../php/api/package_installation_plugins/" class="md-nav__link">
 701         Package Installation Plugins
 702       </a>
 703     </li>
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713     <li class="md-nav__item">
 714       <a href="../php/api/user_activity_points/" class="md-nav__link">
 715         User Activity Points
 716       </a>
 717     </li>
 718
 719
 720
 721
 722
 723
 724
 725
 726
 727     <li class="md-nav__item">
 728       <a href="../php/api/user_notifications/" class="md-nav__link">
 729         User Notifications
 730       </a>
 731     </li>
 732
 733
 734
 735
 736
 737
 738
 739
 740
 741     <li class="md-nav__item">
 742       <a href="../php/api/sitemaps/" class="md-nav__link">
 743         Sitemaps
 744       </a>
 745     </li>
 746
 747
 748
 749
 750         </ul>
 751       </nav>
 752     </li>
 753
 754
 755
 756
 757
 758
 759
 760
 761
 762     <li class="md-nav__item">
 763       <a href="../php/code-style/" class="md-nav__link">
 764         Code Style
 765       </a>
 766     </li>
 767
 768
 769
 770
 771
 772
 773
 774
 775
 776     <li class="md-nav__item">
 777       <a href="../php/apps/" class="md-nav__link">
 778         Apps
 779       </a>
 780     </li>
 781
 782
 783
 784
 785
 786
 787
 788
 789
 790     <li class="md-nav__item">
 791       <a href="../php/gdpr/" class="md-nav__link">
 792         GDPR
 793       </a>
 794     </li>
 795
 796
 797
 798
 799         </ul>
 800       </nav>
 801     </li>
 802
 803
 804
 805
 806
 807
 808
 809
 810
 811
 812
 813     <li class="md-nav__item md-nav__item--nested">
 814
 815
 816
 817
 818       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
 819
 820
 821
 822         <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
 823           Languages, Templates & CSS
 824           <span class="md-nav__icon md-icon"></span>
 825         </label>
 826
 827       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
 828         <label class="md-nav__title" for="__nav_3">
 829           <span class="md-nav__icon md-icon"></span>
 830           Languages, Templates & CSS
 831         </label>
 832         <ul class="md-nav__list" data-md-scrollfix>
 833
 834
 835
 836
 837
 838
 839     <li class="md-nav__item">
 840       <a href="../view/languages/" class="md-nav__link">
 841         Languages
 842       </a>
 843     </li>
 844
 845
 846
 847
 848
 849
 850
 851
 852
 853     <li class="md-nav__item">
 854       <a href="../view/templates/" class="md-nav__link">
 855         Templates
 856       </a>
 857     </li>
 858
 859
 860
 861
 862
 863
 864
 865
 866
 867     <li class="md-nav__item">
 868       <a href="../view/template-plugins/" class="md-nav__link">
 869         Template Plugins
 870       </a>
 871     </li>
 872
 873
 874
 875
 876
 877
 878
 879
 880
 881     <li class="md-nav__item">
 882       <a href="../view/css/" class="md-nav__link">
 883         CSS
 884       </a>
 885     </li>
 886
 887
 888
 889
 890         </ul>
 891       </nav>
 892     </li>
 893
 894
 895
 896
 897
 898
 899
 900
 901
 902
 903
 904     <li class="md-nav__item md-nav__item--nested">
 905
 906
 907
 908
 909       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
 910
 911
 912
 913         <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
 914           TypeScript and JavaScript API
 915           <span class="md-nav__icon md-icon"></span>
 916         </label>
 917
 918       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
 919         <label class="md-nav__title" for="__nav_4">
 920           <span class="md-nav__icon md-icon"></span>
 921           TypeScript and JavaScript API
 922         </label>
 923         <ul class="md-nav__list" data-md-scrollfix>
 924
 925
 926
 927
 928
 929
 930     <li class="md-nav__item">
 931       <a href="../javascript/general-usage/" class="md-nav__link">
 932         General Usage
 933       </a>
 934     </li>
 935
 936
 937
 938
 939
 940
 941
 942
 943
 944     <li class="md-nav__item">
 945       <a href="../javascript/typescript/" class="md-nav__link">
 946         TypeScript
 947       </a>
 948     </li>
 949
 950
 951
 952
 953
 954
 955
 956
 957
 958
 959     <li class="md-nav__item md-nav__item--nested">
 960
 961
 962
 963
 964       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" >
 965
 966
 967
 968         <label class="md-nav__link" for="__nav_4_3" id="__nav_4_3_label" tabindex="0">
 969           Components
 970           <span class="md-nav__icon md-icon"></span>
 971         </label>
 972
 973       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false">
 974         <label class="md-nav__title" for="__nav_4_3">
 975           <span class="md-nav__icon md-icon"></span>
 976           Components
 977         </label>
 978         <ul class="md-nav__list" data-md-scrollfix>
 979
 980
 981
 982
 983
 984
 985     <li class="md-nav__item">
 986       <a href="../javascript/components_confirmation/" class="md-nav__link">
 987         Confirmation
 988       </a>
 989     </li>
 990
 991
 992
 993
 994
 995
 996
 997
 998
 999     <li class="md-nav__item">
1000       <a href="../javascript/components_dialog/" class="md-nav__link">
1001         Dialog
1002       </a>
1003     </li>
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013     <li class="md-nav__item">
1014       <a href="../javascript/components_google_maps/" class="md-nav__link">
1015         Google Maps
1016       </a>
1017     </li>
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027     <li class="md-nav__item">
1028       <a href="../javascript/components_pagination/" class="md-nav__link">
1029         Pagination
1030       </a>
1031     </li>
1032
1033
1034
1035
1036         </ul>
1037       </nav>
1038     </li>
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049     <li class="md-nav__item md-nav__item--nested">
1050
1051
1052
1053
1054       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" >
1055
1056
1057
1058         <label class="md-nav__link" for="__nav_4_4" id="__nav_4_4_label" tabindex="0">
1059           New API
1060           <span class="md-nav__icon md-icon"></span>
1061         </label>
1062
1063       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false">
1064         <label class="md-nav__title" for="__nav_4_4">
1065           <span class="md-nav__icon md-icon"></span>
1066           New API
1067         </label>
1068         <ul class="md-nav__list" data-md-scrollfix>
1069
1070
1071
1072
1073
1074
1075     <li class="md-nav__item">
1076       <a href="../javascript/new-api_writing-a-module/" class="md-nav__link">
1077         Writing a module
1078       </a>
1079     </li>
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089     <li class="md-nav__item">
1090       <a href="../javascript/new-api_core/" class="md-nav__link">
1091         Core Functions
1092       </a>
1093     </li>
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103     <li class="md-nav__item">
1104       <a href="../javascript/new-api_dom/" class="md-nav__link">
1105         DOM
1106       </a>
1107     </li>
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117     <li class="md-nav__item">
1118       <a href="../javascript/new-api_events/" class="md-nav__link">
1119         Event Handling
1120       </a>
1121     </li>
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131     <li class="md-nav__item">
1132       <a href="../javascript/new-api_ajax/" class="md-nav__link">
1133         Ajax
1134       </a>
1135     </li>
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145     <li class="md-nav__item">
1146       <a href="../javascript/new-api_dialogs/" class="md-nav__link">
1147         Dialogs
1148       </a>
1149     </li>
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159     <li class="md-nav__item">
1160       <a href="../javascript/new-api_browser/" class="md-nav__link">
1161         Browser and Screen Sizes
1162       </a>
1163     </li>
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173     <li class="md-nav__item">
1174       <a href="../javascript/new-api_ui/" class="md-nav__link">
1175         User Interface
1176       </a>
1177     </li>
1178
1179
1180
1181
1182         </ul>
1183       </nav>
1184     </li>
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194     <li class="md-nav__item">
1195       <a href="../javascript/legacy-api/" class="md-nav__link">
1196         Legacy API
1197       </a>
1198     </li>
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208     <li class="md-nav__item">
1209       <a href="../javascript/code-snippets/" class="md-nav__link">
1210         Code Snippets
1211       </a>
1212     </li>
1213
1214
1215
1216
1217         </ul>
1218       </nav>
1219     </li>
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231     <li class="md-nav__item md-nav__item--nested">
1232
1233
1234
1235
1236       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
1237
1238
1239
1240         <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
1241           Package Components
1242           <span class="md-nav__icon md-icon"></span>
1243         </label>
1244
1245       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
1246         <label class="md-nav__title" for="__nav_5">
1247           <span class="md-nav__icon md-icon"></span>
1248           Package Components
1249         </label>
1250         <ul class="md-nav__list" data-md-scrollfix>
1251
1252
1253
1254
1255
1256
1257     <li class="md-nav__item">
1258       <a href="../package/package-xml/" class="md-nav__link">
1259         package.xml
1260       </a>
1261     </li>
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272     <li class="md-nav__item md-nav__item--nested">
1273
1274
1275
1276
1277       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" >
1278
1279
1280
1281         <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
1282           PIPs
1283           <span class="md-nav__icon md-icon"></span>
1284         </label>
1285
1286       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
1287         <label class="md-nav__title" for="__nav_5_2">
1288           <span class="md-nav__icon md-icon"></span>
1289           PIPs
1290         </label>
1291         <ul class="md-nav__list" data-md-scrollfix>
1292
1293
1294
1295
1296
1297
1298     <li class="md-nav__item">
1299       <a href="../package/pip/" class="md-nav__link">
1300         Overview
1301       </a>
1302     </li>
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312     <li class="md-nav__item">
1313       <a href="../package/pip/acl-option/" class="md-nav__link">
1314         aclOption
1315       </a>
1316     </li>
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326     <li class="md-nav__item">
1327       <a href="../package/pip/acp-menu/" class="md-nav__link">
1328         acpMenu
1329       </a>
1330     </li>
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340     <li class="md-nav__item">
1341       <a href="../package/pip/acp-search-provider/" class="md-nav__link">
1342         acpSearchProvider
1343       </a>
1344     </li>
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354     <li class="md-nav__item">
1355       <a href="../package/pip/acp-template/" class="md-nav__link">
1356         acpTemplate
1357       </a>
1358     </li>
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368     <li class="md-nav__item">
1369       <a href="../package/pip/acp-template-delete/" class="md-nav__link">
1370         acpTemplateDelete
1371       </a>
1372     </li>
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382     <li class="md-nav__item">
1383       <a href="../package/pip/bbcode/" class="md-nav__link">
1384         bbcode
1385       </a>
1386     </li>
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396     <li class="md-nav__item">
1397       <a href="../package/pip/box/" class="md-nav__link">
1398         box
1399       </a>
1400     </li>
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410     <li class="md-nav__item">
1411       <a href="../package/pip/clipboard-action/" class="md-nav__link">
1412         clipboardAction
1413       </a>
1414     </li>
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424     <li class="md-nav__item">
1425       <a href="../package/pip/core-object/" class="md-nav__link">
1426         coreObject
1427       </a>
1428     </li>
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438     <li class="md-nav__item">
1439       <a href="../package/pip/cronjob/" class="md-nav__link">
1440         cronjob
1441       </a>
1442     </li>
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452     <li class="md-nav__item">
1453       <a href="../package/pip/database/" class="md-nav__link">
1454         database
1455       </a>
1456     </li>
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466     <li class="md-nav__item">
1467       <a href="../package/pip/event-listener/" class="md-nav__link">
1468         eventListener
1469       </a>
1470     </li>
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480     <li class="md-nav__item">
1481       <a href="../package/pip/file/" class="md-nav__link">
1482         file
1483       </a>
1484     </li>
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494     <li class="md-nav__item">
1495       <a href="../package/pip/file-delete/" class="md-nav__link">
1496         fileDelete
1497       </a>
1498     </li>
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508     <li class="md-nav__item">
1509       <a href="../package/pip/language/" class="md-nav__link">
1510         language
1511       </a>
1512     </li>
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522     <li class="md-nav__item">
1523       <a href="../package/pip/media-provider/" class="md-nav__link">
1524         mediaProvider
1525       </a>
1526     </li>
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536     <li class="md-nav__item">
1537       <a href="../package/pip/menu/" class="md-nav__link">
1538         menu
1539       </a>
1540     </li>
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550     <li class="md-nav__item">
1551       <a href="../package/pip/menu-item/" class="md-nav__link">
1552         menuItem
1553       </a>
1554     </li>
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564     <li class="md-nav__item">
1565       <a href="../package/pip/object-type/" class="md-nav__link">
1566         objectType
1567       </a>
1568     </li>
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578     <li class="md-nav__item">
1579       <a href="../package/pip/object-type-definition/" class="md-nav__link">
1580         objectTypeDefinition
1581       </a>
1582     </li>
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592     <li class="md-nav__item">
1593       <a href="../package/pip/option/" class="md-nav__link">
1594         option
1595       </a>
1596     </li>
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606     <li class="md-nav__item">
1607       <a href="../package/pip/page/" class="md-nav__link">
1608         page
1609       </a>
1610     </li>
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620     <li class="md-nav__item">
1621       <a href="../package/pip/pip/" class="md-nav__link">
1622         pip
1623       </a>
1624     </li>
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634     <li class="md-nav__item">
1635       <a href="../package/pip/script/" class="md-nav__link">
1636         script
1637       </a>
1638     </li>
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648     <li class="md-nav__item">
1649       <a href="../package/pip/smiley/" class="md-nav__link">
1650         smiley
1651       </a>
1652     </li>
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662     <li class="md-nav__item">
1663       <a href="../package/pip/sql/" class="md-nav__link">
1664         sql
1665       </a>
1666     </li>
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676     <li class="md-nav__item">
1677       <a href="../package/pip/style/" class="md-nav__link">
1678         style
1679       </a>
1680     </li>
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690     <li class="md-nav__item">
1691       <a href="../package/pip/template/" class="md-nav__link">
1692         template
1693       </a>
1694     </li>
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704     <li class="md-nav__item">
1705       <a href="../package/pip/template-delete/" class="md-nav__link">
1706         templateDelete
1707       </a>
1708     </li>
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718     <li class="md-nav__item">
1719       <a href="../package/pip/template-listener/" class="md-nav__link">
1720         templateListener
1721       </a>
1722     </li>
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732     <li class="md-nav__item">
1733       <a href="../package/pip/user-group-option/" class="md-nav__link">
1734         userGroupOption
1735       </a>
1736     </li>
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746     <li class="md-nav__item">
1747       <a href="../package/pip/user-menu/" class="md-nav__link">
1748         userMenu
1749       </a>
1750     </li>
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760     <li class="md-nav__item">
1761       <a href="../package/pip/user-notification-event/" class="md-nav__link">
1762         userNotificationEvent
1763       </a>
1764     </li>
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774     <li class="md-nav__item">
1775       <a href="../package/pip/user-option/" class="md-nav__link">
1776         userOption
1777       </a>
1778     </li>
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788     <li class="md-nav__item">
1789       <a href="../package/pip/user-profile-menu/" class="md-nav__link">
1790         userProfileMenu
1791       </a>
1792     </li>
1793
1794
1795
1796
1797         </ul>
1798       </nav>
1799     </li>
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809     <li class="md-nav__item">
1810       <a href="../package/database-php-api/" class="md-nav__link">
1811         Database PHP API
1812       </a>
1813     </li>
1814
1815
1816
1817
1818         </ul>
1819       </nav>
1820     </li>
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832     <li class="md-nav__item md-nav__item--nested">
1833
1834
1835
1836
1837       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
1838
1839
1840
1841         <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
1842           Migration
1843           <span class="md-nav__icon md-icon"></span>
1844         </label>
1845
1846       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
1847         <label class="md-nav__title" for="__nav_6">
1848           <span class="md-nav__icon md-icon"></span>
1849           Migration
1850         </label>
1851         <ul class="md-nav__list" data-md-scrollfix>
1852
1853
1854
1855
1856
1857
1858
1859     <li class="md-nav__item md-nav__item--nested">
1860
1861
1862
1863
1864       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
1865
1866
1867
1868         <label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
1869           From WoltLab Suite 5.5
1870           <span class="md-nav__icon md-icon"></span>
1871         </label>
1872
1873       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
1874         <label class="md-nav__title" for="__nav_6_1">
1875           <span class="md-nav__icon md-icon"></span>
1876           From WoltLab Suite 5.5
1877         </label>
1878         <ul class="md-nav__list" data-md-scrollfix>
1879
1880
1881
1882
1883
1884
1885     <li class="md-nav__item">
1886       <a href="../migration/wsc55/php/" class="md-nav__link">
1887         PHP API
1888       </a>
1889     </li>
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899     <li class="md-nav__item">
1900       <a href="../migration/wsc55/javascript/" class="md-nav__link">
1901         TypeScript and JavaScript
1902       </a>
1903     </li>
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913     <li class="md-nav__item">
1914       <a href="../migration/wsc55/templates/" class="md-nav__link">
1915         Templates
1916       </a>
1917     </li>
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927     <li class="md-nav__item">
1928       <a href="../migration/wsc55/icons/" class="md-nav__link">
1929         Icons
1930       </a>
1931     </li>
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941     <li class="md-nav__item">
1942       <a href="../migration/wsc55/dialogs/" class="md-nav__link">
1943         Dialogs
1944       </a>
1945     </li>
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955     <li class="md-nav__item">
1956       <a href="../migration/wsc55/libraries/" class="md-nav__link">
1957         Third Party Libraries
1958       </a>
1959     </li>
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969     <li class="md-nav__item">
1970       <a href="../migration/wsc55/deprecations_removals/" class="md-nav__link">
1971         Deprecations and Removals
1972       </a>
1973     </li>
1974
1975
1976
1977
1978         </ul>
1979       </nav>
1980     </li>
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991     <li class="md-nav__item md-nav__item--nested">
1992
1993
1994
1995
1996       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
1997
1998
1999
2000         <label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
2001           From WoltLab Suite 5.4
2002           <span class="md-nav__icon md-icon"></span>
2003         </label>
2004
2005       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
2006         <label class="md-nav__title" for="__nav_6_2">
2007           <span class="md-nav__icon md-icon"></span>
2008           From WoltLab Suite 5.4
2009         </label>
2010         <ul class="md-nav__list" data-md-scrollfix>
2011
2012
2013
2014
2015
2016
2017     <li class="md-nav__item">
2018       <a href="../migration/wsc54/php/" class="md-nav__link">
2019         PHP API
2020       </a>
2021     </li>
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031     <li class="md-nav__item">
2032       <a href="../migration/wsc54/javascript/" class="md-nav__link">
2033         TypeScript and JavaScript
2034       </a>
2035     </li>
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045     <li class="md-nav__item">
2046       <a href="../migration/wsc54/templates/" class="md-nav__link">
2047         Templates
2048       </a>
2049     </li>
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059     <li class="md-nav__item">
2060       <a href="../migration/wsc54/libraries/" class="md-nav__link">
2061         Third Party Libraries
2062       </a>
2063     </li>
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073     <li class="md-nav__item">
2074       <a href="../migration/wsc54/deprecations_removals/" class="md-nav__link">
2075         Deprecations and Removals
2076       </a>
2077     </li>
2078
2079
2080
2081
2082         </ul>
2083       </nav>
2084     </li>
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095     <li class="md-nav__item md-nav__item--nested">
2096
2097
2098
2099
2100       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" >
2101
2102
2103
2104         <label class="md-nav__link" for="__nav_6_3" id="__nav_6_3_label" tabindex="0">
2105           From WoltLab Suite 5.3
2106           <span class="md-nav__icon md-icon"></span>
2107         </label>
2108
2109       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false">
2110         <label class="md-nav__title" for="__nav_6_3">
2111           <span class="md-nav__icon md-icon"></span>
2112           From WoltLab Suite 5.3
2113         </label>
2114         <ul class="md-nav__list" data-md-scrollfix>
2115
2116
2117
2118
2119
2120
2121     <li class="md-nav__item">
2122       <a href="../migration/wsc53/php/" class="md-nav__link">
2123         PHP API
2124       </a>
2125     </li>
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135     <li class="md-nav__item">
2136       <a href="../migration/wsc53/session/" class="md-nav__link">
2137         Session Handling and Authentication
2138       </a>
2139     </li>
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149     <li class="md-nav__item">
2150       <a href="../migration/wsc53/javascript/" class="md-nav__link">
2151         TypeScript and JavaScript
2152       </a>
2153     </li>
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163     <li class="md-nav__item">
2164       <a href="../migration/wsc53/templates/" class="md-nav__link">
2165         Templates
2166       </a>
2167     </li>
2168
2169
2170
2171
2172
2173
2174
2175
2176
2177     <li class="md-nav__item">
2178       <a href="../migration/wsc53/libraries/" class="md-nav__link">
2179         Third Party Libraries
2180       </a>
2181     </li>
2182
2183
2184
2185
2186         </ul>
2187       </nav>
2188     </li>
2189
2190
2191
2192
2193
2194
2195
2196
2197
2198
2199     <li class="md-nav__item md-nav__item--nested">
2200
2201
2202
2203
2204       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" >
2205
2206
2207
2208         <label class="md-nav__link" for="__nav_6_4" id="__nav_6_4_label" tabindex="0">
2209           From WoltLab Suite 5.2
2210           <span class="md-nav__icon md-icon"></span>
2211         </label>
2212
2213       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false">
2214         <label class="md-nav__title" for="__nav_6_4">
2215           <span class="md-nav__icon md-icon"></span>
2216           From WoltLab Suite 5.2
2217         </label>
2218         <ul class="md-nav__list" data-md-scrollfix>
2219
2220
2221
2222
2223
2224
2225     <li class="md-nav__item">
2226       <a href="../migration/wsc52/php/" class="md-nav__link">
2227         PHP API
2228       </a>
2229     </li>
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239     <li class="md-nav__item">
2240       <a href="../migration/wsc52/templates/" class="md-nav__link">
2241         Templates and Languages
2242       </a>
2243     </li>
2244
2245
2246
2247
2248
2249
2250
2251
2252
2253     <li class="md-nav__item">
2254       <a href="../migration/wsc52/libraries/" class="md-nav__link">
2255         Third Party Libraries
2256       </a>
2257     </li>
2258
2259
2260
2261
2262         </ul>
2263       </nav>
2264     </li>
2265
2266
2267
2268
2269
2270
2271
2272
2273
2274
2275     <li class="md-nav__item md-nav__item--nested">
2276
2277
2278
2279
2280       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_5" >
2281
2282
2283
2284         <label class="md-nav__link" for="__nav_6_5" id="__nav_6_5_label" tabindex="0">
2285           From WoltLab Suite 3.1
2286           <span class="md-nav__icon md-icon"></span>
2287         </label>
2288
2289       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_5_label" aria-expanded="false">
2290         <label class="md-nav__title" for="__nav_6_5">
2291           <span class="md-nav__icon md-icon"></span>
2292           From WoltLab Suite 3.1
2293         </label>
2294         <ul class="md-nav__list" data-md-scrollfix>
2295
2296
2297
2298
2299
2300
2301     <li class="md-nav__item">
2302       <a href="../migration/wsc31/php/" class="md-nav__link">
2303         PHP API
2304       </a>
2305     </li>
2306
2307
2308
2309
2310         </ul>
2311       </nav>
2312     </li>
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322
2323     <li class="md-nav__item md-nav__item--nested">
2324
2325
2326
2327
2328       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_6" >
2329
2330
2331
2332         <label class="md-nav__link" for="__nav_6_6" id="__nav_6_6_label" tabindex="0">
2333           From WoltLab Suite 3.0
2334           <span class="md-nav__icon md-icon"></span>
2335         </label>
2336
2337       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_6_label" aria-expanded="false">
2338         <label class="md-nav__title" for="__nav_6_6">
2339           <span class="md-nav__icon md-icon"></span>
2340           From WoltLab Suite 3.0
2341         </label>
2342         <ul class="md-nav__list" data-md-scrollfix>
2343
2344
2345
2346
2347
2348
2349     <li class="md-nav__item">
2350       <a href="../migration/wsc30/php/" class="md-nav__link">
2351         PHP API
2352       </a>
2353     </li>
2354
2355
2356
2357
2358
2359
2360
2361
2362
2363     <li class="md-nav__item">
2364       <a href="../migration/wsc30/javascript/" class="md-nav__link">
2365         JavaScript API
2366       </a>
2367     </li>
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377     <li class="md-nav__item">
2378       <a href="../migration/wsc30/templates/" class="md-nav__link">
2379         Templates
2380       </a>
2381     </li>
2382
2383
2384
2385
2386
2387
2388
2389
2390
2391     <li class="md-nav__item">
2392       <a href="../migration/wsc30/css/" class="md-nav__link">
2393         CSS
2394       </a>
2395     </li>
2396
2397
2398
2399
2400
2401
2402
2403
2404
2405     <li class="md-nav__item">
2406       <a href="../migration/wsc30/package/" class="md-nav__link">
2407         Package Components
2408       </a>
2409     </li>
2410
2411
2412
2413
2414         </ul>
2415       </nav>
2416     </li>
2417
2418
2419
2420
2421
2422
2423
2424
2425
2426
2427     <li class="md-nav__item md-nav__item--nested">
2428
2429
2430
2431
2432       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_7" >
2433
2434
2435
2436         <label class="md-nav__link" for="__nav_6_7" id="__nav_6_7_label" tabindex="0">
2437           From WCF 2.1
2438           <span class="md-nav__icon md-icon"></span>
2439         </label>
2440
2441       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_7_label" aria-expanded="false">
2442         <label class="md-nav__title" for="__nav_6_7">
2443           <span class="md-nav__icon md-icon"></span>
2444           From WCF 2.1
2445         </label>
2446         <ul class="md-nav__list" data-md-scrollfix>
2447
2448
2449
2450
2451
2452
2453     <li class="md-nav__item">
2454       <a href="../migration/wcf21/php/" class="md-nav__link">
2455         PHP API
2456       </a>
2457     </li>
2458
2459
2460
2461
2462
2463
2464
2465
2466
2467     <li class="md-nav__item">
2468       <a href="../migration/wcf21/templates/" class="md-nav__link">
2469         Templates
2470       </a>
2471     </li>
2472
2473
2474
2475
2476
2477
2478
2479
2480
2481     <li class="md-nav__item">
2482       <a href="../migration/wcf21/css/" class="md-nav__link">
2483         CSS
2484       </a>
2485     </li>
2486
2487
2488
2489
2490
2491
2492
2493
2494
2495     <li class="md-nav__item">
2496       <a href="../migration/wcf21/package/" class="md-nav__link">
2497         Package Components
2498       </a>
2499     </li>
2500
2501
2502
2503
2504         </ul>
2505       </nav>
2506     </li>
2507
2508
2509
2510
2511         </ul>
2512       </nav>
2513     </li>
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525     <li class="md-nav__item md-nav__item--nested">
2526
2527
2528
2529
2530       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
2531
2532
2533
2534         <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
2535           Tutorials
2536           <span class="md-nav__icon md-icon"></span>
2537         </label>
2538
2539       <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
2540         <label class="md-nav__title" for="__nav_7">
2541           <span class="md-nav__icon md-icon"></span>
2542           Tutorials
2543         </label>
2544         <ul class="md-nav__list" data-md-scrollfix>
2545
2546
2547
2548
2549
2550
2551
2552     <li class="md-nav__item md-nav__item--nested">
2553
2554
2555
2556
2557       <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7_1" >
2558
2559
2560
2561         <label class="md-nav__link" for="__nav_7_1" id="__nav_7_1_label" tabindex="0">
2562           Tutorial Series
2563           <span class="md-nav__icon md-icon"></span>
2564         </label>
2565
2566       <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_7_1_label" aria-expanded="false">
2567         <label class="md-nav__title" for="__nav_7_1">
2568           <span class="md-nav__icon md-icon"></span>
2569           Tutorial Series
2570         </label>
2571         <ul class="md-nav__list" data-md-scrollfix>
2572
2573
2574
2575
2576
2577
2578     <li class="md-nav__item">
2579       <a href="../tutorial/series/overview/" class="md-nav__link">
2580         Overview
2581       </a>
2582     </li>
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592     <li class="md-nav__item">
2593       <a href="../tutorial/series/part_1/" class="md-nav__link">
2594         Part 1
2595       </a>
2596     </li>
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606     <li class="md-nav__item">
2607       <a href="../tutorial/series/part_2/" class="md-nav__link">
2608         Part 2
2609       </a>
2610     </li>
2611
2612
2613
2614
2615
2616
2617
2618
2619
2620     <li class="md-nav__item">
2621       <a href="../tutorial/series/part_3/" class="md-nav__link">
2622         Part 3
2623       </a>
2624     </li>
2625
2626
2627
2628
2629
2630
2631
2632
2633
2634     <li class="md-nav__item">
2635       <a href="../tutorial/series/part_4/" class="md-nav__link">
2636         Part 4
2637       </a>
2638     </li>
2639
2640
2641
2642
2643
2644
2645
2646
2647
2648     <li class="md-nav__item">
2649       <a href="../tutorial/series/part_5/" class="md-nav__link">
2650         Part 5
2651       </a>
2652     </li>
2653
2654
2655
2656
2657
2658
2659
2660
2661
2662     <li class="md-nav__item">
2663       <a href="../tutorial/series/part_6/" class="md-nav__link">
2664         Part 6
2665       </a>
2666     </li>
2667
2668
2669
2670
2671         </ul>
2672       </nav>
2673     </li>
2674
2675
2676
2677
2678         </ul>
2679       </nav>
2680     </li>
2681
2682
2683
2684   </ul>
2685 </nav>
2686                   </div>
2687                 </div>
2688               </div>
2689
2690
2691
2692               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2693                 <div class="md-sidebar__scrollwrap">
2694                   <div class="md-sidebar__inner">
2695
2696
2697 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2698
2699
2700
2701
2702
2703
2704     <label class="md-nav__title" for="__toc">
2705       <span class="md-nav__icon md-icon"></span>
2706       Table of contents
2707     </label>
2708     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2709
2710         <li class="md-nav__item">
2711   <a href="#setup-and-requirements" class="md-nav__link">
2712     Setup and Requirements
2713   </a>
2714
2715 </li>
2716
2717         <li class="md-nav__item">
2718   <a href="#the-packagexml-file" class="md-nav__link">
2719     The package.xml File
2720   </a>
2721
2722 </li>
2723
2724         <li class="md-nav__item">
2725   <a href="#the-php-class" class="md-nav__link">
2726     The PHP Class
2727   </a>
2728
2729 </li>
2730
2731         <li class="md-nav__item">
2732   <a href="#the-template" class="md-nav__link">
2733     The Template
2734   </a>
2735
2736 </li>
2737
2738         <li class="md-nav__item">
2739   <a href="#the-page-definition" class="md-nav__link">
2740     The Page Definition
2741   </a>
2742
2743 </li>
2744
2745         <li class="md-nav__item">
2746   <a href="#building-the-package" class="md-nav__link">
2747     Building the Package
2748   </a>
2749
2750 </li>
2751
2752         <li class="md-nav__item">
2753   <a href="#installation" class="md-nav__link">
2754     Installation
2755   </a>
2756
2757 </li>
2758
2759         <li class="md-nav__item">
2760   <a href="#developer-tools" class="md-nav__link">
2761     Developer Tools
2762   </a>
2763
2764     <nav class="md-nav" aria-label="Developer Tools">
2765       <ul class="md-nav__list">
2766
2767           <li class="md-nav__item">
2768   <a href="#registering-a-project" class="md-nav__link">
2769     Registering a Project
2770   </a>
2771
2772 </li>
2773
2774           <li class="md-nav__item">
2775   <a href="#synchronizing" class="md-nav__link">
2776     Synchronizing
2777   </a>
2778
2779 </li>
2780
2781       </ul>
2782     </nav>
2783
2784 </li>
2785
2786         <li class="md-nav__item">
2787   <a href="#appendix" class="md-nav__link">
2788     Appendix
2789   </a>
2790
2791     <nav class="md-nav" aria-label="Appendix">
2792       <ul class="md-nav__list">
2793
2794           <li class="md-nav__item">
2795   <a href="#template-guessing" class="md-nav__link">
2796     Template Guessing
2797   </a>
2798
2799 </li>
2800
2801       </ul>
2802     </nav>
2803
2804 </li>
2805
2806     </ul>
2807
2808 </nav>
2809                   </div>
2810                 </div>
2811               </div>
2812
2813
2814
2815             <div class="md-content" data-md-component="content">
2816               <article class="md-content__inner md-typeset">
2817
2818
2819
2820
2821
2822
2823
2824 <h1 id="creating-a-simple-package">Creating a simple package<a class="headerlink" href="#creating-a-simple-package" title="Permanent link">#</a></h1>
2825 <h2 id="setup-and-requirements">Setup and Requirements<a class="headerlink" href="#setup-and-requirements" title="Permanent link">#</a></h2>
2826 <p>This guide will help you to create a simple package that provides a simple test
2827 page. It is nothing too fancy, but you can use it as the foundation for your
2828 next project.</p>
2829 <p>There are some requirements you should met before starting:</p>
2830 <ul>
2831 <li>Text editor with syntax highlighting for PHP, <a href="https://notepad-plus-plus.org/">Notepad++</a> is a solid pick</li>
2832 <li><code>*.php</code> and <code>*.tpl</code> should be encoded with ANSI/ASCII</li>
2833 <li><code>*.xml</code> are always encoded with UTF-8, but omit the BOM (byte-order-mark)</li>
2834 <li>Use tabs instead of spaces to indent lines</li>
2835 <li>It is recommended to set the tab width to <code>8</code> spaces, this is used in the entire software and will ease reading the source files</li>
2836 <li>An active installation of WoltLab Suite</li>
2837 <li>An application to create <code>*.tar</code> archives, e.g. <a href="http://www.7-zip.org/">7-Zip</a> on Windows</li>
2838 </ul>
2839 <h2 id="the-packagexml-file">The package.xml File<a class="headerlink" href="#the-packagexml-file" title="Permanent link">#</a></h2>
2840 <p>We want to create a simple page that will display the sentence "Hello World" embedded
2841 into the application frame. Create an empty directory in the workspace of your choice
2842 to start with.</p>
2843 <p>Create a new file called <code>package.xml</code> and insert the code below:</p>
2844 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2845 <span class="normal"> 2</span>
2846 <span class="normal"> 3</span>
2847 <span class="normal"> 4</span>
2848 <span class="normal"> 5</span>
2849 <span class="normal"> 6</span>
2850 <span class="normal"> 7</span>
2851 <span class="normal"> 8</span>
2852 <span class="normal"> 9</span>
2853 <span class="normal">10</span>
2854 <span class="normal">11</span>
2855 <span class="normal">12</span>
2856 <span class="normal">13</span>
2857 <span class="normal">14</span>
2858 <span class="normal">15</span>
2859 <span class="normal">16</span>
2860 <span class="normal">17</span>
2861 <span class="normal">18</span>
2862 <span class="normal">19</span>
2863 <span class="normal">20</span>
2864 <span class="normal">21</span>
2865 <span class="normal">22</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
2866 <span class="nt">&lt;package</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">&quot;http://www.woltlab.com&quot;</span><span class="w"> </span><span class="na">xmlns:xsi=</span><span class="s">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span><span class="w"> </span><span class="na">xsi:schemaLocation=</span><span class="s">&quot;http://www.woltlab.com http://www.woltlab.com/XSD/2019/package.xsd&quot;</span><span class="w"> </span><span class="na">name=</span><span class="s">&quot;com.example.test&quot;</span><span class="nt">&gt;</span>
2867 <span class="w">    </span><span class="nt">&lt;packageinformation&gt;</span>
2868 <span class="w">        </span><span class="cm">&lt;!-- com.example.test --&gt;</span>
2869 <span class="w">        </span><span class="nt">&lt;packagename&gt;</span>Simple<span class="w"> </span>Package<span class="nt">&lt;/packagename&gt;</span>
2870 <span class="w">        </span><span class="nt">&lt;packagedescription&gt;</span>A<span class="w"> </span>simple<span class="w"> </span>package<span class="w"> </span>to<span class="w"> </span>demonstrate<span class="w"> </span>the<span class="w"> </span>package<span class="w"> </span>system<span class="w"> </span>of<span class="w"> </span>WoltLab<span class="w"> </span>Suite<span class="w"> </span>Core<span class="nt">&lt;/packagedescription&gt;</span>
2871 <span class="w">        </span><span class="nt">&lt;version&gt;</span>1.0.0<span class="nt">&lt;/version&gt;</span>
2872 <span class="w">        </span><span class="nt">&lt;date&gt;</span>2019-04-28<span class="nt">&lt;/date&gt;</span>
2873 <span class="w">    </span><span class="nt">&lt;/packageinformation&gt;</span>
2874 <span class="w">    </span><span class="nt">&lt;authorinformation&gt;</span>
2875 <span class="w">        </span><span class="nt">&lt;author&gt;</span>Your<span class="w"> </span>Name<span class="nt">&lt;/author&gt;</span>
2876 <span class="w">        </span><span class="nt">&lt;authorurl&gt;</span>http://www.example.com<span class="nt">&lt;/authorurl&gt;</span>
2877 <span class="w">    </span><span class="nt">&lt;/authorinformation&gt;</span>
2878 <span class="w">    </span><span class="nt">&lt;excludedpackages&gt;</span>
2879 <span class="w">        </span><span class="nt">&lt;excludedpackage</span><span class="w"> </span><span class="na">version=</span><span class="s">&quot;6.0.0 Alpha 1&quot;</span><span class="nt">&gt;</span>com.woltlab.wcf<span class="nt">&lt;/excludedpackage&gt;</span>
2880 <span class="w">    </span><span class="nt">&lt;/excludedpackages&gt;</span>
2881 <span class="w">    </span><span class="nt">&lt;instructions</span><span class="w"> </span><span class="na">type=</span><span class="s">&quot;install&quot;</span><span class="nt">&gt;</span>
2882 <span class="w">        </span><span class="nt">&lt;instruction</span><span class="w"> </span><span class="na">type=</span><span class="s">&quot;file&quot;</span><span class="w"> </span><span class="nt">/&gt;</span>
2883 <span class="w">        </span><span class="nt">&lt;instruction</span><span class="w"> </span><span class="na">type=</span><span class="s">&quot;template&quot;</span><span class="w"> </span><span class="nt">/&gt;</span>
2884 <span class="w">        </span><span class="nt">&lt;instruction</span><span class="w"> </span><span class="na">type=</span><span class="s">&quot;page&quot;</span><span class="w"> </span><span class="nt">/&gt;</span>
2885 <span class="w">    </span><span class="nt">&lt;/instructions&gt;</span>
2886 <span class="nt">&lt;/package&gt;</span>
2887 </code></pre></div></td></tr></table></div>
2888 <p>There is an <a href="../package/package-xml/">entire chapter</a> on the package system that explains what the code above
2889 does and how you can adjust it to fit your needs. For now we'll keep it as it is.</p>
2890 <h2 id="the-php-class">The PHP Class<a class="headerlink" href="#the-php-class" title="Permanent link">#</a></h2>
2891 <p>The next step is to create the PHP class which will serve our page:</p>
2892 <ol>
2893 <li>Create the directory <code>files</code> in the same directory where <code>package.xml</code> is located</li>
2894 <li>Open <code>files</code> and create the directory <code>lib</code></li>
2895 <li>Open <code>lib</code> and create the directory <code>page</code></li>
2896 <li>Within the directory <code>page</code>, please create the file <code>TestPage.class.php</code></li>
2897 </ol>
2898 <p>Copy and paste the following code into the <code>TestPage.class.php</code>:</p>
2899 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
2900 <span class="normal"> 2</span>
2901 <span class="normal"> 3</span>
2902 <span class="normal"> 4</span>
2903 <span class="normal"> 5</span>
2904 <span class="normal"> 6</span>
2905 <span class="normal"> 7</span>
2906 <span class="normal"> 8</span>
2907 <span class="normal"> 9</span>
2908 <span class="normal">10</span>
2909 <span class="normal">11</span>
2910 <span class="normal">12</span>
2911 <span class="normal">13</span>
2912 <span class="normal">14</span>
2913 <span class="normal">15</span>
2914 <span class="normal">16</span>
2915 <span class="normal">17</span>
2916 <span class="normal">18</span>
2917 <span class="normal">19</span>
2918 <span class="normal">20</span>
2919 <span class="normal">21</span>
2920 <span class="normal">22</span>
2921 <span class="normal">23</span>
2922 <span class="normal">24</span>
2923 <span class="normal">25</span>
2924 <span class="normal">26</span>
2925 <span class="normal">27</span>
2926 <span class="normal">28</span>
2927 <span class="normal">29</span>
2928 <span class="normal">30</span>
2929 <span class="normal">31</span>
2930 <span class="normal">32</span>
2931 <span class="normal">33</span>
2932 <span class="normal">34</span>
2933 <span class="normal">35</span>
2934 <span class="normal">36</span>
2935 <span class="normal">37</span>
2936 <span class="normal">38</span>
2937 <span class="normal">39</span>
2938 <span class="normal">40</span>
2939 <span class="normal">41</span>
2940 <span class="normal">42</span>
2941 <span class="normal">43</span>
2942 <span class="normal">44</span>
2943 <span class="normal">45</span>
2944 <span class="normal">46</span>
2945 <span class="normal">47</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2946 <span class="k">namespace</span> <span class="nx">wcf\page</span><span class="p">;</span>
2947 <span class="k">use</span> <span class="nx">wcf\system\WCF</span><span class="p">;</span>
2948
2949 <span class="sd">/**</span>
2950 <span class="sd"> * A simple test page for demonstration purposes.</span>
2951 <span class="sd"> *</span>
2952 <span class="sd"> * @author  YOUR NAME</span>
2953 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2954 <span class="sd"> */</span>
2955 <span class="k">class</span> <span class="nc">TestPage</span> <span class="k">extends</span> <span class="nx">AbstractPage</span> <span class="p">{</span>
2956     <span class="sd">/**</span>
2957 <span class="sd">     * @var string</span>
2958 <span class="sd">     */</span>
2959     <span class="k">protected</span> <span class="nv">$greet</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
2960
2961     <span class="sd">/**</span>
2962 <span class="sd">     * @inheritDoc</span>
2963 <span class="sd">     */</span>
2964     <span class="k">public</span> <span class="k">function</span> <span class="nf">readParameters</span><span class="p">()</span> <span class="p">{</span>
2965         <span class="k">parent</span><span class="o">::</span><span class="na">readParameters</span><span class="p">();</span>
2966
2967         <span class="k">if</span> <span class="p">(</span><span class="nb">isset</span><span class="p">(</span><span class="nv">$_GET</span><span class="p">[</span><span class="s1">&#39;greet&#39;</span><span class="p">]))</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span> <span class="o">=</span> <span class="nv">$_GET</span><span class="p">[</span><span class="s1">&#39;greet&#39;</span><span class="p">];</span>
2968     <span class="p">}</span>
2969
2970     <span class="sd">/**</span>
2971 <span class="sd">     * @inheritDoc</span>
2972 <span class="sd">     */</span>
2973     <span class="k">public</span> <span class="k">function</span> <span class="nf">readData</span><span class="p">()</span> <span class="p">{</span>
2974         <span class="k">parent</span><span class="o">::</span><span class="na">readData</span><span class="p">();</span>
2975
2976         <span class="k">if</span> <span class="p">(</span><span class="k">empty</span><span class="p">(</span><span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span><span class="p">))</span> <span class="p">{</span>
2977             <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span> <span class="o">=</span> <span class="s1">&#39;World&#39;</span><span class="p">;</span>
2978         <span class="p">}</span>
2979     <span class="p">}</span>
2980
2981     <span class="sd">/**</span>
2982 <span class="sd">     * @inheritDoc</span>
2983 <span class="sd">     */</span>
2984     <span class="k">public</span> <span class="k">function</span> <span class="nf">assignVariables</span><span class="p">()</span> <span class="p">{</span>
2985         <span class="k">parent</span><span class="o">::</span><span class="na">assignVariables</span><span class="p">();</span>
2986
2987         <span class="nx">WCF</span><span class="o">::</span><span class="na">getTPL</span><span class="p">()</span><span class="o">-&gt;</span><span class="na">assign</span><span class="p">([</span>
2988             <span class="s1">&#39;greet&#39;</span> <span class="o">=&gt;</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">greet</span>
2989         <span class="p">]);</span>
2990     <span class="p">}</span>
2991 <span class="p">}</span>
2992 </code></pre></div></td></tr></table></div>
2993 <p>The class inherits from <a href="https://github.com/WoltLab/WCF/blob/master/wcfsetup/install/files/lib/page/AbstractPage.class.php">wcf\page\AbstractPage</a>, the default implementation of pages without form controls. It
2994 defines quite a few methods that will be automatically invoked in a specific order, for example <code>readParameters()</code> before <code>readData()</code> and finally <code>assignVariables()</code> to pass arbitrary values to the template.</p>
2995 <p>The property <code>$greet</code> is defined as <code>World</code>, but can optionally be populated through a GET variable (<code>index.php?test/&amp;greet=You</code> would output <code>Hello You!</code>). This extra code illustrates the separation of data
2996 processing that takes place within all sort of pages, where all user-supplied data is read from within a single method. It helps organizing the code, but most of all it enforces a clean class logic that does not
2997 start reading user input at random places, including the risk to only escape the input of variable <code>$_GET['foo']</code> 4 out of 5 times.</p>
2998 <p>Reading and processing the data is only half the story, now we need a template to display the actual content for our page. You don't need to specify it yourself, it will be automatically guessed based on your
2999 namespace and class name, you can <a href="#template-guessing">read more about it later</a>.</p>
3000 <p>Last but not least, you must not include the closing PHP tag <code>?&gt;</code> at the end, it can cause PHP to break on whitespaces and is not required at all.</p>
3001 <h2 id="the-template">The Template<a class="headerlink" href="#the-template" title="Permanent link">#</a></h2>
3002 <p>Navigate back to the root directory of your package until you see both the <code>files</code> directory and the <code>package.xml</code>. Now create a directory called <code>templates</code>, open it and create the file <code>test.tpl</code>.</p>
3003 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3004 <span class="normal">2</span>
3005 <span class="normal">3</span>
3006 <span class="normal">4</span>
3007 <span class="normal">5</span>
3008 <span class="normal">6</span>
3009 <span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span>
3010
3011 <span class="x">&lt;div class=&quot;section&quot;&gt;</span>
3012 <span class="x">    Hello </span><span class="cp">{</span><span class="nv">$greet</span><span class="cp">}</span><span class="x">!</span>
3013 <span class="x">&lt;/div&gt;</span>
3014
3015 <span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span>
3016 </code></pre></div></td></tr></table></div>
3017 <p>Templates are a mixture of HTML and Smarty-like template scripting to overcome the static nature of raw HTML. The above code will display the phrase <code>Hello World!</code> in the application frame, just as any other
3018 page would render. The included templates <code>header</code> and <code>footer</code> are responsible for the majority of the overall page functionality, but offer a whole lot of customization abilities to influence their behavior and appearance.</p>
3019 <h2 id="the-page-definition">The Page Definition<a class="headerlink" href="#the-page-definition" title="Permanent link">#</a></h2>
3020 <p>The package now contains the PHP class and the matching template, but it is still missing the page definition. Please create the file <code>page.xml</code> in your project's root directory, thus on the same level as the <code>package.xml</code>.</p>
3021 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
3022 <span class="normal"> 2</span>
3023 <span class="normal"> 3</span>
3024 <span class="normal"> 4</span>
3025 <span class="normal"> 5</span>
3026 <span class="normal"> 6</span>
3027 <span class="normal"> 7</span>
3028 <span class="normal"> 8</span>
3029 <span class="normal"> 9</span>
3030 <span class="normal">10</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
3031 <span class="nt">&lt;data</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">&quot;http://www.woltlab.com&quot;</span><span class="w"> </span><span class="na">xmlns:xsi=</span><span class="s">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span><span class="w"> </span><span class="na">xsi:schemaLocation=</span><span class="s">&quot;http://www.woltlab.com http://www.woltlab.com/XSD/2019/page.xsd&quot;</span><span class="nt">&gt;</span>
3032 <span class="w">    </span><span class="nt">&lt;import&gt;</span>
3033 <span class="w">        </span><span class="nt">&lt;page</span><span class="w"> </span><span class="na">identifier=</span><span class="s">&quot;com.example.test.Test&quot;</span><span class="nt">&gt;</span>
3034 <span class="w">            </span><span class="nt">&lt;controller&gt;</span>wcf\page\TestPage<span class="nt">&lt;/controller&gt;</span>
3035 <span class="w">            </span><span class="nt">&lt;name</span><span class="w"> </span><span class="na">language=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>Test<span class="w"> </span>Page<span class="nt">&lt;/name&gt;</span>
3036 <span class="w">            </span><span class="nt">&lt;pageType&gt;</span>system<span class="nt">&lt;/pageType&gt;</span>
3037 <span class="w">        </span><span class="nt">&lt;/page&gt;</span>
3038 <span class="w">    </span><span class="nt">&lt;/import&gt;</span>
3039 <span class="nt">&lt;/data&gt;</span>
3040 </code></pre></div></td></tr></table></div>
3041 <p>You can provide a lot more data for a page, including logical nesting and dedicated handler classes for display in menus.</p>
3042 <h2 id="building-the-package">Building the Package<a class="headerlink" href="#building-the-package" title="Permanent link">#</a></h2>
3043 <p>If you have followed the above guidelines carefully, your package directory should now look like this:</p>
3044 <div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
3045 <span class="normal">2</span>
3046 <span class="normal">3</span>
3047 <span class="normal">4</span>
3048 <span class="normal">5</span>
3049 <span class="normal">6</span>
3050 <span class="normal">7</span>
3051 <span class="normal">8</span></pre></div></td><td class="code"><div><pre><span></span><code>├── files
3052 │   └── lib
3053 │       └── page
3054 │           └── TestPage.class.php
3055 ├── package.xml
3056 ├── page.xml
3057 └── templates
3058     └── test.tpl
3059 </code></pre></div></td></tr></table></div>
3060 <p>Both files and templates are archive-based package components, that deploy their payload using tar archives rather than adding the raw files to the package file. Please create the archive <code>files.tar</code> and add the contents of the <code>files/*</code> directory, but not the directory <code>files/</code> itself. Repeat the same process for the <code>templates</code> directory, but this time with the file name <code>templates.tar</code>. Place both files in the root of your project.</p>
3061 <p>Last but not least, create the package archive <code>com.example.test.tar</code> and add all the files listed below.</p>
3062 <ul>
3063 <li><code>files.tar</code></li>
3064 <li><code>package.xml</code></li>
3065 <li><code>page.xml</code></li>
3066 <li><code>templates.tar</code></li>
3067 </ul>
3068 <p>The archive's filename can be anything you want, all though it is the general convention to use the package name itself for easier recognition.</p>
3069 <h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">#</a></h2>
3070 <p>Open the Administration Control Panel and navigate to <code>Configuration &gt; Packages &gt; Install Package</code>, click on <code>Upload Package</code> and select the file <code>com.example.test.tar</code> from your disk. Follow the on-screen instructions until it has been successfully installed.</p>
3071 <p>Open a new browser tab and navigate to your newly created page. If WoltLab Suite is installed at <code>https://example.com/wsc/</code>, then the URL should read <code>https://example.com/wsc/index.php?test/</code>.</p>
3072 <p>Congratulations, you have just created your first package!</p>
3073 <h2 id="developer-tools">Developer Tools<a class="headerlink" href="#developer-tools" title="Permanent link">#</a></h2>
3074 <p>The developer tools provide an interface to synchronize the data of an installed package with a bare repository on the local disk. You can re-import most PIPs at any time and have the changes applied without crafting a manual update. This process simulates a regular package update with a single PIP only, and resets the cache after the import has been completed.</p>
3075 <h3 id="registering-a-project">Registering a Project<a class="headerlink" href="#registering-a-project" title="Permanent link">#</a></h3>
3076 <p>Projects require the absolute path to the package directory, that is, the directory where it can find the <code>package.xml</code>. It is not required to install an package to register it as a project, but you have to install it in order to work with it. It does not install the package by itself!</p>
3077 <p>There is a special button on the project list that allows for a mass-import of projects based on a search path. Each direct child directory of the provided path will be tested and projects created this way will use the identifier extracted from the <code>package.xml</code>.</p>
3078 <h3 id="synchronizing">Synchronizing<a class="headerlink" href="#synchronizing" title="Permanent link">#</a></h3>
3079 <p>The install instructions in the <code>package.xml</code> are ignored when offering the PIP imports, the detection works entirely based on the default filename for each PIP. On top of that, only PIPs that implement the interface <code>wcf\system\devtools\pip\IIdempotentPackageInstallationPlugin</code> are valid for import, as it indicates that importing the PIP multiple times will have no side-effects and that the result is deterministic regardless of the number of times it has been imported.</p>
3080 <p>Some built-in PIPs, such as <code>sql</code> or <code>script</code>, do not qualify for this step and remain unavailable at all times. However, you can still craft and perform an actual package update to have these PIPs executed.</p>
3081 <h2 id="appendix">Appendix<a class="headerlink" href="#appendix" title="Permanent link">#</a></h2>
3082 <h3 id="template-guessing">Template Guessing<a class="headerlink" href="#template-guessing" title="Permanent link">#</a></h3>
3083 <p>The class name including the namespace is used to automatically determine the path to the template and its name. The example above used the page class name <code>wcf\page\TestPage</code> that is then split into four distinct parts:</p>
3084 <ol>
3085 <li><code>wcf</code>, the internal abbreviation of WoltLab Suite Core (previously known as WoltLab Community Framework)</li>
3086 <li><code>\page\</code> (ignored)</li>
3087 <li><code>Test</code>, the actual name that is used for both the template and the URL</li>
3088 <li><code>Page</code> (page type, ignored)</li>
3089 </ol>
3090 <p>The fragments <code>1.</code> and <code>3.</code> from above are used to construct the path to the template: <code>&lt;installDirOfWSC&gt;/templates/test.tpl</code> (the first letter of <code>Test</code> is being converted to lower-case).</p>
3091
3092   <hr>
3093 <div class="md-source-file">
3094   <small>
3095
3096       Last update:
3097       2022-02-23
3098
3099   </small>
3100 </div>
3101
3102
3103
3104
3105
3106
3107               </article>
3108             </div>
3109
3110
3111         </div>
3112
3113       </main>
3114
3115         <footer class="md-footer">
3116
3117   <div class="md-footer-meta md-typeset">
3118     <div class="md-footer-meta__inner md-grid">
3119       <div class="md-copyright">
3120
3121     <div class="md-copyright__highlight">
3122       Copyright © 2020 WoltLab GmbH
3123     </div>
3124
3125
3126     Made with
3127     <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
3128       Material for MkDocs
3129     </a>
3130
3131 </div>
3132
3133         <div class="md-copyright">
3134         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
3135         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
3136 </div>
3137
3138     </div>
3139   </div>
3140 </footer>
3141
3142     </div>
3143     <div class="md-dialog" data-md-component="dialog">
3144       <div class="md-dialog__inner md-typeset"></div>
3145     </div>
3146
3147     <script id="__config" type="application/json">{"base": "..", "features": ["navigation.tracking"], "search": "../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script>
3148
3149
3150       <script src="../assets/javascripts/bundle.407015b8.min.js"></script>
3151
3152
3153   </body>
3154 </html>