latest/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
  12       <link rel="icon" href="../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.0">
  14
  15
  16
  17         <title>Getting Started - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../assets/stylesheets/main.33e2939f.min.css">
  22
  23
  24         <link rel="stylesheet" href="../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#creating-a-simple-package" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href=".." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Getting Started
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <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>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <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" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <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>
 120         <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>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <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>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><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>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href=".." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><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>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204
 205
 206     <li class="md-nav__item md-nav__item--active">
 207
 208       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 209
 210
 211
 212
 213         <label class="md-nav__link md-nav__link--active" for="__toc">
 214           Getting Started
 215           <span class="md-nav__icon md-icon"></span>
 216         </label>
 217
 218       <a href="./" class="md-nav__link md-nav__link--active">
 219         Getting Started
 220       </a>
 221
 222
 223 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 224
 225
 226
 227
 228
 229     <label class="md-nav__title" for="__toc">
 230       <span class="md-nav__icon md-icon"></span>
 231       Table of contents
 232     </label>
 233     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 234
 235         <li class="md-nav__item">
 236   <a href="#setup-and-requirements" class="md-nav__link">
 237     Setup and Requirements
 238   </a>
 239
 240 </li>
 241
 242         <li class="md-nav__item">
 243   <a href="#the-packagexml-file" class="md-nav__link">
 244     The package.xml File
 245   </a>
 246
 247 </li>
 248
 249         <li class="md-nav__item">
 250   <a href="#the-php-class" class="md-nav__link">
 251     The PHP Class
 252   </a>
 253
 254 </li>
 255
 256         <li class="md-nav__item">
 257   <a href="#the-template" class="md-nav__link">
 258     The Template
 259   </a>
 260
 261 </li>
 262
 263         <li class="md-nav__item">
 264   <a href="#the-page-definition" class="md-nav__link">
 265     The Page Definition
 266   </a>
 267
 268 </li>
 269
 270         <li class="md-nav__item">
 271   <a href="#building-the-package" class="md-nav__link">
 272     Building the Package
 273   </a>
 274
 275 </li>
 276
 277         <li class="md-nav__item">
 278   <a href="#installation" class="md-nav__link">
 279     Installation
 280   </a>
 281
 282 </li>
 283
 284         <li class="md-nav__item">
 285   <a href="#developer-tools" class="md-nav__link">
 286     Developer Tools
 287   </a>
 288
 289     <nav class="md-nav" aria-label="Developer Tools">
 290       <ul class="md-nav__list">
 291
 292           <li class="md-nav__item">
 293   <a href="#registering-a-project" class="md-nav__link">
 294     Registering a Project
 295   </a>
 296
 297 </li>
 298
 299           <li class="md-nav__item">
 300   <a href="#synchronizing" class="md-nav__link">
 301     Synchronizing
 302   </a>
 303
 304 </li>
 305
 306       </ul>
 307     </nav>
 308
 309 </li>
 310
 311         <li class="md-nav__item">
 312   <a href="#appendix" class="md-nav__link">
 313     Appendix
 314   </a>
 315
 316     <nav class="md-nav" aria-label="Appendix">
 317       <ul class="md-nav__list">
 318
 319           <li class="md-nav__item">
 320   <a href="#template-guessing" class="md-nav__link">
 321     Template Guessing
 322   </a>
 323
 324 </li>
 325
 326       </ul>
 327     </nav>
 328
 329 </li>
 330
 331     </ul>
 332
 333 </nav>
 334
 335     </li>
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347     <li class="md-nav__item md-nav__item--nested">
 348
 349
 350         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 351
 352       <label class="md-nav__link" for="__nav_2">
 353         PHP API
 354         <span class="md-nav__icon md-icon"></span>
 355       </label>
 356       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 357         <label class="md-nav__title" for="__nav_2">
 358           <span class="md-nav__icon md-icon"></span>
 359           PHP API
 360         </label>
 361         <ul class="md-nav__list" data-md-scrollfix>
 362
 363
 364
 365
 366
 367     <li class="md-nav__item">
 368       <a href="../php/pages/" class="md-nav__link">
 369         Pages
 370       </a>
 371     </li>
 372
 373
 374
 375
 376
 377
 378
 379     <li class="md-nav__item">
 380       <a href="../php/database-objects/" class="md-nav__link">
 381         Database Objects
 382       </a>
 383     </li>
 384
 385
 386
 387
 388
 389
 390
 391     <li class="md-nav__item">
 392       <a href="../php/database-access/" class="md-nav__link">
 393         Database Access
 394       </a>
 395     </li>
 396
 397
 398
 399
 400
 401
 402
 403     <li class="md-nav__item">
 404       <a href="../php/exceptions/" class="md-nav__link">
 405         Exceptions
 406       </a>
 407     </li>
 408
 409
 410
 411
 412
 413
 414
 415
 416     <li class="md-nav__item md-nav__item--nested">
 417
 418
 419         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 420
 421       <label class="md-nav__link" for="__nav_2_5">
 422         API
 423         <span class="md-nav__icon md-icon"></span>
 424       </label>
 425       <nav class="md-nav" aria-label="API" data-md-level="2">
 426         <label class="md-nav__title" for="__nav_2_5">
 427           <span class="md-nav__icon md-icon"></span>
 428           API
 429         </label>
 430         <ul class="md-nav__list" data-md-scrollfix>
 431
 432
 433
 434
 435
 436
 437     <li class="md-nav__item md-nav__item--nested">
 438
 439
 440         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 441
 442       <label class="md-nav__link" for="__nav_2_5_1">
 443         Caches
 444         <span class="md-nav__icon md-icon"></span>
 445       </label>
 446       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 447         <label class="md-nav__title" for="__nav_2_5_1">
 448           <span class="md-nav__icon md-icon"></span>
 449           Caches
 450         </label>
 451         <ul class="md-nav__list" data-md-scrollfix>
 452
 453
 454
 455
 456
 457     <li class="md-nav__item">
 458       <a href="../php/api/caches/" class="md-nav__link">
 459         Overview
 460       </a>
 461     </li>
 462
 463
 464
 465
 466
 467
 468
 469     <li class="md-nav__item">
 470       <a href="../php/api/caches_persistent-caches/" class="md-nav__link">
 471         Persistent Caches
 472       </a>
 473     </li>
 474
 475
 476
 477
 478
 479
 480
 481     <li class="md-nav__item">
 482       <a href="../php/api/caches_runtime-caches/" class="md-nav__link">
 483         Runtime Caches
 484       </a>
 485     </li>
 486
 487
 488
 489         </ul>
 490       </nav>
 491     </li>
 492
 493
 494
 495
 496
 497
 498
 499     <li class="md-nav__item">
 500       <a href="../php/api/comments/" class="md-nav__link">
 501         Comments
 502       </a>
 503     </li>
 504
 505
 506
 507
 508
 509
 510
 511     <li class="md-nav__item">
 512       <a href="../php/api/cronjobs/" class="md-nav__link">
 513         Cronjobs
 514       </a>
 515     </li>
 516
 517
 518
 519
 520
 521
 522
 523     <li class="md-nav__item">
 524       <a href="../php/api/events/" class="md-nav__link">
 525         Events
 526       </a>
 527     </li>
 528
 529
 530
 531
 532
 533
 534
 535
 536     <li class="md-nav__item md-nav__item--nested">
 537
 538
 539         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 540
 541       <label class="md-nav__link" for="__nav_2_5_5">
 542         Form Builder
 543         <span class="md-nav__icon md-icon"></span>
 544       </label>
 545       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 546         <label class="md-nav__title" for="__nav_2_5_5">
 547           <span class="md-nav__icon md-icon"></span>
 548           Form Builder
 549         </label>
 550         <ul class="md-nav__list" data-md-scrollfix>
 551
 552
 553
 554
 555
 556     <li class="md-nav__item">
 557       <a href="../php/api/form_builder/overview/" class="md-nav__link">
 558         Overview
 559       </a>
 560     </li>
 561
 562
 563
 564
 565
 566
 567
 568     <li class="md-nav__item">
 569       <a href="../php/api/form_builder/structure/" class="md-nav__link">
 570         Structure
 571       </a>
 572     </li>
 573
 574
 575
 576
 577
 578
 579
 580     <li class="md-nav__item">
 581       <a href="../php/api/form_builder/form_fields/" class="md-nav__link">
 582         Fields
 583       </a>
 584     </li>
 585
 586
 587
 588
 589
 590
 591
 592     <li class="md-nav__item">
 593       <a href="../php/api/form_builder/validation_data/" class="md-nav__link">
 594         Validation and Data
 595       </a>
 596     </li>
 597
 598
 599
 600
 601
 602
 603
 604     <li class="md-nav__item">
 605       <a href="../php/api/form_builder/dependencies/" class="md-nav__link">
 606         Dependencies
 607       </a>
 608     </li>
 609
 610
 611
 612         </ul>
 613       </nav>
 614     </li>
 615
 616
 617
 618
 619
 620
 621
 622     <li class="md-nav__item">
 623       <a href="../php/api/package_installation_plugins/" class="md-nav__link">
 624         Package Installation Plugins
 625       </a>
 626     </li>
 627
 628
 629
 630
 631
 632
 633
 634     <li class="md-nav__item">
 635       <a href="../php/api/user_activity_points/" class="md-nav__link">
 636         User Activity Points
 637       </a>
 638     </li>
 639
 640
 641
 642
 643
 644
 645
 646     <li class="md-nav__item">
 647       <a href="../php/api/user_notifications/" class="md-nav__link">
 648         User Notifications
 649       </a>
 650     </li>
 651
 652
 653
 654
 655
 656
 657
 658     <li class="md-nav__item">
 659       <a href="../php/api/sitemaps/" class="md-nav__link">
 660         Sitemaps
 661       </a>
 662     </li>
 663
 664
 665
 666         </ul>
 667       </nav>
 668     </li>
 669
 670
 671
 672
 673
 674
 675
 676     <li class="md-nav__item">
 677       <a href="../php/code-style/" class="md-nav__link">
 678         Code Style
 679       </a>
 680     </li>
 681
 682
 683
 684
 685
 686
 687
 688     <li class="md-nav__item">
 689       <a href="../php/apps/" class="md-nav__link">
 690         Apps
 691       </a>
 692     </li>
 693
 694
 695
 696
 697
 698
 699
 700     <li class="md-nav__item">
 701       <a href="../php/gdpr/" class="md-nav__link">
 702         GDPR
 703       </a>
 704     </li>
 705
 706
 707
 708         </ul>
 709       </nav>
 710     </li>
 711
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722     <li class="md-nav__item md-nav__item--nested">
 723
 724
 725         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 726
 727       <label class="md-nav__link" for="__nav_3">
 728         Languages, Templates & CSS
 729         <span class="md-nav__icon md-icon"></span>
 730       </label>
 731       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 732         <label class="md-nav__title" for="__nav_3">
 733           <span class="md-nav__icon md-icon"></span>
 734           Languages, Templates & CSS
 735         </label>
 736         <ul class="md-nav__list" data-md-scrollfix>
 737
 738
 739
 740
 741
 742     <li class="md-nav__item">
 743       <a href="../view/languages/" class="md-nav__link">
 744         Languages
 745       </a>
 746     </li>
 747
 748
 749
 750
 751
 752
 753
 754     <li class="md-nav__item">
 755       <a href="../view/templates/" class="md-nav__link">
 756         Templates
 757       </a>
 758     </li>
 759
 760
 761
 762
 763
 764
 765
 766     <li class="md-nav__item">
 767       <a href="../view/template-plugins/" class="md-nav__link">
 768         Template Plugins
 769       </a>
 770     </li>
 771
 772
 773
 774
 775
 776
 777
 778     <li class="md-nav__item">
 779       <a href="../view/css/" class="md-nav__link">
 780         CSS
 781       </a>
 782     </li>
 783
 784
 785
 786         </ul>
 787       </nav>
 788     </li>
 789
 790
 791
 792
 793
 794
 795
 796
 797
 798
 799
 800     <li class="md-nav__item md-nav__item--nested">
 801
 802
 803         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
 804
 805       <label class="md-nav__link" for="__nav_4">
 806         TypeScript and JavaScript API
 807         <span class="md-nav__icon md-icon"></span>
 808       </label>
 809       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 810         <label class="md-nav__title" for="__nav_4">
 811           <span class="md-nav__icon md-icon"></span>
 812           TypeScript and JavaScript API
 813         </label>
 814         <ul class="md-nav__list" data-md-scrollfix>
 815
 816
 817
 818
 819
 820     <li class="md-nav__item">
 821       <a href="../javascript/general-usage/" class="md-nav__link">
 822         General Usage
 823       </a>
 824     </li>
 825
 826
 827
 828
 829
 830
 831
 832     <li class="md-nav__item">
 833       <a href="../javascript/typescript/" class="md-nav__link">
 834         TypeScript
 835       </a>
 836     </li>
 837
 838
 839
 840
 841
 842
 843
 844
 845     <li class="md-nav__item md-nav__item--nested">
 846
 847
 848         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 849
 850       <label class="md-nav__link" for="__nav_4_3">
 851         New API
 852         <span class="md-nav__icon md-icon"></span>
 853       </label>
 854       <nav class="md-nav" aria-label="New API" data-md-level="2">
 855         <label class="md-nav__title" for="__nav_4_3">
 856           <span class="md-nav__icon md-icon"></span>
 857           New API
 858         </label>
 859         <ul class="md-nav__list" data-md-scrollfix>
 860
 861
 862
 863
 864
 865     <li class="md-nav__item">
 866       <a href="../javascript/new-api_writing-a-module/" class="md-nav__link">
 867         Writing a module
 868       </a>
 869     </li>
 870
 871
 872
 873
 874
 875
 876
 877     <li class="md-nav__item">
 878       <a href="../javascript/new-api_data-structures/" class="md-nav__link">
 879         Data Structures
 880       </a>
 881     </li>
 882
 883
 884
 885
 886
 887
 888
 889     <li class="md-nav__item">
 890       <a href="../javascript/new-api_core/" class="md-nav__link">
 891         Core Functions
 892       </a>
 893     </li>
 894
 895
 896
 897
 898
 899
 900
 901     <li class="md-nav__item">
 902       <a href="../javascript/new-api_dom/" class="md-nav__link">
 903         DOM
 904       </a>
 905     </li>
 906
 907
 908
 909
 910
 911
 912
 913     <li class="md-nav__item">
 914       <a href="../javascript/new-api_events/" class="md-nav__link">
 915         Event Handling
 916       </a>
 917     </li>
 918
 919
 920
 921
 922
 923
 924
 925     <li class="md-nav__item">
 926       <a href="../javascript/new-api_ajax/" class="md-nav__link">
 927         Ajax
 928       </a>
 929     </li>
 930
 931
 932
 933
 934
 935
 936
 937     <li class="md-nav__item">
 938       <a href="../javascript/new-api_dialogs/" class="md-nav__link">
 939         Dialogs
 940       </a>
 941     </li>
 942
 943
 944
 945
 946
 947
 948
 949     <li class="md-nav__item">
 950       <a href="../javascript/new-api_browser/" class="md-nav__link">
 951         Browser and Screen Sizes
 952       </a>
 953     </li>
 954
 955
 956
 957
 958
 959
 960
 961     <li class="md-nav__item">
 962       <a href="../javascript/new-api_ui/" class="md-nav__link">
 963         User Interface
 964       </a>
 965     </li>
 966
 967
 968
 969         </ul>
 970       </nav>
 971     </li>
 972
 973
 974
 975
 976
 977
 978
 979     <li class="md-nav__item">
 980       <a href="../javascript/legacy-api/" class="md-nav__link">
 981         Legacy API
 982       </a>
 983     </li>
 984
 985
 986
 987
 988
 989
 990
 991     <li class="md-nav__item">
 992       <a href="../javascript/helper-functions/" class="md-nav__link">
 993         Helper Functions
 994       </a>
 995     </li>
 996
 997
 998
 999
1000
1001
1002
1003     <li class="md-nav__item">
1004       <a href="../javascript/code-snippets/" class="md-nav__link">
1005         Code Snippets
1006       </a>
1007     </li>
1008
1009
1010
1011         </ul>
1012       </nav>
1013     </li>
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025     <li class="md-nav__item md-nav__item--nested">
1026
1027
1028         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1029
1030       <label class="md-nav__link" for="__nav_5">
1031         Package Components
1032         <span class="md-nav__icon md-icon"></span>
1033       </label>
1034       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1035         <label class="md-nav__title" for="__nav_5">
1036           <span class="md-nav__icon md-icon"></span>
1037           Package Components
1038         </label>
1039         <ul class="md-nav__list" data-md-scrollfix>
1040
1041
1042
1043
1044
1045     <li class="md-nav__item">
1046       <a href="../package/package-xml/" class="md-nav__link">
1047         package.xml
1048       </a>
1049     </li>
1050
1051
1052
1053
1054
1055
1056
1057
1058     <li class="md-nav__item md-nav__item--nested">
1059
1060
1061         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1062
1063       <label class="md-nav__link" for="__nav_5_2">
1064         PIPs
1065         <span class="md-nav__icon md-icon"></span>
1066       </label>
1067       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1068         <label class="md-nav__title" for="__nav_5_2">
1069           <span class="md-nav__icon md-icon"></span>
1070           PIPs
1071         </label>
1072         <ul class="md-nav__list" data-md-scrollfix>
1073
1074
1075
1076
1077
1078     <li class="md-nav__item">
1079       <a href="../package/pip/" class="md-nav__link">
1080         Overview
1081       </a>
1082     </li>
1083
1084
1085
1086
1087
1088
1089
1090     <li class="md-nav__item">
1091       <a href="../package/pip/acl-option/" class="md-nav__link">
1092         aclOption
1093       </a>
1094     </li>
1095
1096
1097
1098
1099
1100
1101
1102     <li class="md-nav__item">
1103       <a href="../package/pip/acp-menu/" class="md-nav__link">
1104         acpMenu
1105       </a>
1106     </li>
1107
1108
1109
1110
1111
1112
1113
1114     <li class="md-nav__item">
1115       <a href="../package/pip/acp-search-provider/" class="md-nav__link">
1116         acpSearchProvider
1117       </a>
1118     </li>
1119
1120
1121
1122
1123
1124
1125
1126     <li class="md-nav__item">
1127       <a href="../package/pip/acp-template/" class="md-nav__link">
1128         acpTemplate
1129       </a>
1130     </li>
1131
1132
1133
1134
1135
1136
1137
1138     <li class="md-nav__item">
1139       <a href="../package/pip/bbcode/" class="md-nav__link">
1140         bbcode
1141       </a>
1142     </li>
1143
1144
1145
1146
1147
1148
1149
1150     <li class="md-nav__item">
1151       <a href="../package/pip/box/" class="md-nav__link">
1152         box
1153       </a>
1154     </li>
1155
1156
1157
1158
1159
1160
1161
1162     <li class="md-nav__item">
1163       <a href="../package/pip/clipboard-action/" class="md-nav__link">
1164         clipboardAction
1165       </a>
1166     </li>
1167
1168
1169
1170
1171
1172
1173
1174     <li class="md-nav__item">
1175       <a href="../package/pip/core-object/" class="md-nav__link">
1176         coreObject
1177       </a>
1178     </li>
1179
1180
1181
1182
1183
1184
1185
1186     <li class="md-nav__item">
1187       <a href="../package/pip/cronjob/" class="md-nav__link">
1188         cronjob
1189       </a>
1190     </li>
1191
1192
1193
1194
1195
1196
1197
1198     <li class="md-nav__item">
1199       <a href="../package/pip/database/" class="md-nav__link">
1200         database
1201       </a>
1202     </li>
1203
1204
1205
1206
1207
1208
1209
1210     <li class="md-nav__item">
1211       <a href="../package/pip/event-listener/" class="md-nav__link">
1212         eventListener
1213       </a>
1214     </li>
1215
1216
1217
1218
1219
1220
1221
1222     <li class="md-nav__item">
1223       <a href="../package/pip/file/" class="md-nav__link">
1224         file
1225       </a>
1226     </li>
1227
1228
1229
1230
1231
1232
1233
1234     <li class="md-nav__item">
1235       <a href="../package/pip/language/" class="md-nav__link">
1236         language
1237       </a>
1238     </li>
1239
1240
1241
1242
1243
1244
1245
1246     <li class="md-nav__item">
1247       <a href="../package/pip/media-provider/" class="md-nav__link">
1248         mediaProvider
1249       </a>
1250     </li>
1251
1252
1253
1254
1255
1256
1257
1258     <li class="md-nav__item">
1259       <a href="../package/pip/menu/" class="md-nav__link">
1260         menu
1261       </a>
1262     </li>
1263
1264
1265
1266
1267
1268
1269
1270     <li class="md-nav__item">
1271       <a href="../package/pip/menu-item/" class="md-nav__link">
1272         menuItem
1273       </a>
1274     </li>
1275
1276
1277
1278
1279
1280
1281
1282     <li class="md-nav__item">
1283       <a href="../package/pip/object-type/" class="md-nav__link">
1284         objectType
1285       </a>
1286     </li>
1287
1288
1289
1290
1291
1292
1293
1294     <li class="md-nav__item">
1295       <a href="../package/pip/object-type-definition/" class="md-nav__link">
1296         objectTypeDefinition
1297       </a>
1298     </li>
1299
1300
1301
1302
1303
1304
1305
1306     <li class="md-nav__item">
1307       <a href="../package/pip/option/" class="md-nav__link">
1308         option
1309       </a>
1310     </li>
1311
1312
1313
1314
1315
1316
1317
1318     <li class="md-nav__item">
1319       <a href="../package/pip/page/" class="md-nav__link">
1320         page
1321       </a>
1322     </li>
1323
1324
1325
1326
1327
1328
1329
1330     <li class="md-nav__item">
1331       <a href="../package/pip/pip/" class="md-nav__link">
1332         pip
1333       </a>
1334     </li>
1335
1336
1337
1338
1339
1340
1341
1342     <li class="md-nav__item">
1343       <a href="../package/pip/script/" class="md-nav__link">
1344         script
1345       </a>
1346     </li>
1347
1348
1349
1350
1351
1352
1353
1354     <li class="md-nav__item">
1355       <a href="../package/pip/smiley/" class="md-nav__link">
1356         smiley
1357       </a>
1358     </li>
1359
1360
1361
1362
1363
1364
1365
1366     <li class="md-nav__item">
1367       <a href="../package/pip/sql/" class="md-nav__link">
1368         sql
1369       </a>
1370     </li>
1371
1372
1373
1374
1375
1376
1377
1378     <li class="md-nav__item">
1379       <a href="../package/pip/style/" class="md-nav__link">
1380         style
1381       </a>
1382     </li>
1383
1384
1385
1386
1387
1388
1389
1390     <li class="md-nav__item">
1391       <a href="../package/pip/template/" class="md-nav__link">
1392         template
1393       </a>
1394     </li>
1395
1396
1397
1398
1399
1400
1401
1402     <li class="md-nav__item">
1403       <a href="../package/pip/template-listener/" class="md-nav__link">
1404         templateListener
1405       </a>
1406     </li>
1407
1408
1409
1410
1411
1412
1413
1414     <li class="md-nav__item">
1415       <a href="../package/pip/user-group-option/" class="md-nav__link">
1416         userGroupOption
1417       </a>
1418     </li>
1419
1420
1421
1422
1423
1424
1425
1426     <li class="md-nav__item">
1427       <a href="../package/pip/user-menu/" class="md-nav__link">
1428         userMenu
1429       </a>
1430     </li>
1431
1432
1433
1434
1435
1436
1437
1438     <li class="md-nav__item">
1439       <a href="../package/pip/user-notification-event/" class="md-nav__link">
1440         userNotificationEvent
1441       </a>
1442     </li>
1443
1444
1445
1446
1447
1448
1449
1450     <li class="md-nav__item">
1451       <a href="../package/pip/user-option/" class="md-nav__link">
1452         userOption
1453       </a>
1454     </li>
1455
1456
1457
1458
1459
1460
1461
1462     <li class="md-nav__item">
1463       <a href="../package/pip/user-profile-menu/" class="md-nav__link">
1464         userProfileMenu
1465       </a>
1466     </li>
1467
1468
1469
1470         </ul>
1471       </nav>
1472     </li>
1473
1474
1475
1476
1477
1478
1479
1480     <li class="md-nav__item">
1481       <a href="../package/database-php-api/" class="md-nav__link">
1482         Database PHP API
1483       </a>
1484     </li>
1485
1486
1487
1488         </ul>
1489       </nav>
1490     </li>
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502     <li class="md-nav__item md-nav__item--nested">
1503
1504
1505         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1506
1507       <label class="md-nav__link" for="__nav_6">
1508         Migration
1509         <span class="md-nav__icon md-icon"></span>
1510       </label>
1511       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1512         <label class="md-nav__title" for="__nav_6">
1513           <span class="md-nav__icon md-icon"></span>
1514           Migration
1515         </label>
1516         <ul class="md-nav__list" data-md-scrollfix>
1517
1518
1519
1520
1521
1522
1523     <li class="md-nav__item md-nav__item--nested">
1524
1525
1526         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1527
1528       <label class="md-nav__link" for="__nav_6_1">
1529         Migrating from WSC 5.3
1530         <span class="md-nav__icon md-icon"></span>
1531       </label>
1532       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1533         <label class="md-nav__title" for="__nav_6_1">
1534           <span class="md-nav__icon md-icon"></span>
1535           Migrating from WSC 5.3
1536         </label>
1537         <ul class="md-nav__list" data-md-scrollfix>
1538
1539
1540
1541
1542
1543     <li class="md-nav__item">
1544       <a href="../migration/wsc53/php/" class="md-nav__link">
1545         PHP API
1546       </a>
1547     </li>
1548
1549
1550
1551
1552
1553
1554
1555     <li class="md-nav__item">
1556       <a href="../migration/wsc53/session/" class="md-nav__link">
1557         Session Handling and Authentication
1558       </a>
1559     </li>
1560
1561
1562
1563
1564
1565
1566
1567     <li class="md-nav__item">
1568       <a href="../migration/wsc53/javascript/" class="md-nav__link">
1569         TypeScript and JavaScript
1570       </a>
1571     </li>
1572
1573
1574
1575
1576
1577
1578
1579     <li class="md-nav__item">
1580       <a href="../migration/wsc53/templates/" class="md-nav__link">
1581         Templates
1582       </a>
1583     </li>
1584
1585
1586
1587
1588
1589
1590
1591     <li class="md-nav__item">
1592       <a href="../migration/wsc53/libraries/" class="md-nav__link">
1593         Third Party Libraries
1594       </a>
1595     </li>
1596
1597
1598
1599         </ul>
1600       </nav>
1601     </li>
1602
1603
1604
1605
1606
1607
1608
1609
1610     <li class="md-nav__item md-nav__item--nested">
1611
1612
1613         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1614
1615       <label class="md-nav__link" for="__nav_6_2">
1616         Migrating from WSC 5.2
1617         <span class="md-nav__icon md-icon"></span>
1618       </label>
1619       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1620         <label class="md-nav__title" for="__nav_6_2">
1621           <span class="md-nav__icon md-icon"></span>
1622           Migrating from WSC 5.2
1623         </label>
1624         <ul class="md-nav__list" data-md-scrollfix>
1625
1626
1627
1628
1629
1630     <li class="md-nav__item">
1631       <a href="../migration/wsc52/php/" class="md-nav__link">
1632         PHP API
1633       </a>
1634     </li>
1635
1636
1637
1638
1639
1640
1641
1642     <li class="md-nav__item">
1643       <a href="../migration/wsc52/templates/" class="md-nav__link">
1644         Templates and Languages
1645       </a>
1646     </li>
1647
1648
1649
1650
1651
1652
1653
1654     <li class="md-nav__item">
1655       <a href="../migration/wsc52/libraries/" class="md-nav__link">
1656         Third Party Libraries
1657       </a>
1658     </li>
1659
1660
1661
1662         </ul>
1663       </nav>
1664     </li>
1665
1666
1667
1668
1669
1670
1671
1672
1673     <li class="md-nav__item md-nav__item--nested">
1674
1675
1676         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1677
1678       <label class="md-nav__link" for="__nav_6_3">
1679         Migrating from WSC 3.1
1680         <span class="md-nav__icon md-icon"></span>
1681       </label>
1682       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1683         <label class="md-nav__title" for="__nav_6_3">
1684           <span class="md-nav__icon md-icon"></span>
1685           Migrating from WSC 3.1
1686         </label>
1687         <ul class="md-nav__list" data-md-scrollfix>
1688
1689
1690
1691
1692
1693     <li class="md-nav__item">
1694       <a href="../migration/wsc31/php/" class="md-nav__link">
1695         PHP API
1696       </a>
1697     </li>
1698
1699
1700
1701         </ul>
1702       </nav>
1703     </li>
1704
1705
1706
1707
1708
1709
1710
1711
1712     <li class="md-nav__item md-nav__item--nested">
1713
1714
1715         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1716
1717       <label class="md-nav__link" for="__nav_6_4">
1718         Migrating from WSC 3.0
1719         <span class="md-nav__icon md-icon"></span>
1720       </label>
1721       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1722         <label class="md-nav__title" for="__nav_6_4">
1723           <span class="md-nav__icon md-icon"></span>
1724           Migrating from WSC 3.0
1725         </label>
1726         <ul class="md-nav__list" data-md-scrollfix>
1727
1728
1729
1730
1731
1732     <li class="md-nav__item">
1733       <a href="../migration/wsc30/php/" class="md-nav__link">
1734         PHP API
1735       </a>
1736     </li>
1737
1738
1739
1740
1741
1742
1743
1744     <li class="md-nav__item">
1745       <a href="../migration/wsc30/javascript/" class="md-nav__link">
1746         JavaScript API
1747       </a>
1748     </li>
1749
1750
1751
1752
1753
1754
1755
1756     <li class="md-nav__item">
1757       <a href="../migration/wsc30/templates/" class="md-nav__link">
1758         Templates
1759       </a>
1760     </li>
1761
1762
1763
1764
1765
1766
1767
1768     <li class="md-nav__item">
1769       <a href="../migration/wsc30/css/" class="md-nav__link">
1770         CSS
1771       </a>
1772     </li>
1773
1774
1775
1776
1777
1778
1779
1780     <li class="md-nav__item">
1781       <a href="../migration/wsc30/package/" class="md-nav__link">
1782         Package Components
1783       </a>
1784     </li>
1785
1786
1787
1788         </ul>
1789       </nav>
1790     </li>
1791
1792
1793
1794
1795
1796
1797
1798
1799     <li class="md-nav__item md-nav__item--nested">
1800
1801
1802         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1803
1804       <label class="md-nav__link" for="__nav_6_5">
1805         Migrating from WCF 2.1
1806         <span class="md-nav__icon md-icon"></span>
1807       </label>
1808       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1809         <label class="md-nav__title" for="__nav_6_5">
1810           <span class="md-nav__icon md-icon"></span>
1811           Migrating from WCF 2.1
1812         </label>
1813         <ul class="md-nav__list" data-md-scrollfix>
1814
1815
1816
1817
1818
1819     <li class="md-nav__item">
1820       <a href="../migration/wcf21/php/" class="md-nav__link">
1821         PHP API
1822       </a>
1823     </li>
1824
1825
1826
1827
1828
1829
1830
1831     <li class="md-nav__item">
1832       <a href="../migration/wcf21/templates/" class="md-nav__link">
1833         Templates
1834       </a>
1835     </li>
1836
1837
1838
1839
1840
1841
1842
1843     <li class="md-nav__item">
1844       <a href="../migration/wcf21/css/" class="md-nav__link">
1845         CSS
1846       </a>
1847     </li>
1848
1849
1850
1851
1852
1853
1854
1855     <li class="md-nav__item">
1856       <a href="../migration/wcf21/package/" class="md-nav__link">
1857         Package Components
1858       </a>
1859     </li>
1860
1861
1862
1863         </ul>
1864       </nav>
1865     </li>
1866
1867
1868
1869         </ul>
1870       </nav>
1871     </li>
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883     <li class="md-nav__item md-nav__item--nested">
1884
1885
1886         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1887
1888       <label class="md-nav__link" for="__nav_7">
1889         Tutorials
1890         <span class="md-nav__icon md-icon"></span>
1891       </label>
1892       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1893         <label class="md-nav__title" for="__nav_7">
1894           <span class="md-nav__icon md-icon"></span>
1895           Tutorials
1896         </label>
1897         <ul class="md-nav__list" data-md-scrollfix>
1898
1899
1900
1901
1902
1903
1904     <li class="md-nav__item md-nav__item--nested">
1905
1906
1907         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1908
1909       <label class="md-nav__link" for="__nav_7_1">
1910         Tutorial Series
1911         <span class="md-nav__icon md-icon"></span>
1912       </label>
1913       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1914         <label class="md-nav__title" for="__nav_7_1">
1915           <span class="md-nav__icon md-icon"></span>
1916           Tutorial Series
1917         </label>
1918         <ul class="md-nav__list" data-md-scrollfix>
1919
1920
1921
1922
1923
1924     <li class="md-nav__item">
1925       <a href="../tutorial/series/overview/" class="md-nav__link">
1926         Overview
1927       </a>
1928     </li>
1929
1930
1931
1932
1933
1934
1935
1936     <li class="md-nav__item">
1937       <a href="../tutorial/series/part_1/" class="md-nav__link">
1938         Part 1
1939       </a>
1940     </li>
1941
1942
1943
1944
1945
1946
1947
1948     <li class="md-nav__item">
1949       <a href="../tutorial/series/part_2/" class="md-nav__link">
1950         Part 2
1951       </a>
1952     </li>
1953
1954
1955
1956
1957
1958
1959
1960     <li class="md-nav__item">
1961       <a href="../tutorial/series/part_3/" class="md-nav__link">
1962         Part 3
1963       </a>
1964     </li>
1965
1966
1967
1968         </ul>
1969       </nav>
1970     </li>
1971
1972
1973
1974         </ul>
1975       </nav>
1976     </li>
1977
1978
1979
1980   </ul>
1981 </nav>
1982                   </div>
1983                 </div>
1984               </div>
1985
1986
1987
1988               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1989                 <div class="md-sidebar__scrollwrap">
1990                   <div class="md-sidebar__inner">
1991
1992 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1993
1994
1995
1996
1997
1998     <label class="md-nav__title" for="__toc">
1999       <span class="md-nav__icon md-icon"></span>
2000       Table of contents
2001     </label>
2002     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2003
2004         <li class="md-nav__item">
2005   <a href="#setup-and-requirements" class="md-nav__link">
2006     Setup and Requirements
2007   </a>
2008
2009 </li>
2010
2011         <li class="md-nav__item">
2012   <a href="#the-packagexml-file" class="md-nav__link">
2013     The package.xml File
2014   </a>
2015
2016 </li>
2017
2018         <li class="md-nav__item">
2019   <a href="#the-php-class" class="md-nav__link">
2020     The PHP Class
2021   </a>
2022
2023 </li>
2024
2025         <li class="md-nav__item">
2026   <a href="#the-template" class="md-nav__link">
2027     The Template
2028   </a>
2029
2030 </li>
2031
2032         <li class="md-nav__item">
2033   <a href="#the-page-definition" class="md-nav__link">
2034     The Page Definition
2035   </a>
2036
2037 </li>
2038
2039         <li class="md-nav__item">
2040   <a href="#building-the-package" class="md-nav__link">
2041     Building the Package
2042   </a>
2043
2044 </li>
2045
2046         <li class="md-nav__item">
2047   <a href="#installation" class="md-nav__link">
2048     Installation
2049   </a>
2050
2051 </li>
2052
2053         <li class="md-nav__item">
2054   <a href="#developer-tools" class="md-nav__link">
2055     Developer Tools
2056   </a>
2057
2058     <nav class="md-nav" aria-label="Developer Tools">
2059       <ul class="md-nav__list">
2060
2061           <li class="md-nav__item">
2062   <a href="#registering-a-project" class="md-nav__link">
2063     Registering a Project
2064   </a>
2065
2066 </li>
2067
2068           <li class="md-nav__item">
2069   <a href="#synchronizing" class="md-nav__link">
2070     Synchronizing
2071   </a>
2072
2073 </li>
2074
2075       </ul>
2076     </nav>
2077
2078 </li>
2079
2080         <li class="md-nav__item">
2081   <a href="#appendix" class="md-nav__link">
2082     Appendix
2083   </a>
2084
2085     <nav class="md-nav" aria-label="Appendix">
2086       <ul class="md-nav__list">
2087
2088           <li class="md-nav__item">
2089   <a href="#template-guessing" class="md-nav__link">
2090     Template Guessing
2091   </a>
2092
2093 </li>
2094
2095       </ul>
2096     </nav>
2097
2098 </li>
2099
2100     </ul>
2101
2102 </nav>
2103                   </div>
2104                 </div>
2105               </div>
2106
2107
2108           <div class="md-content" data-md-component="content">
2109             <article class="md-content__inner md-typeset">
2110
2111
2112                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/getting-started.md" title="Edit this page" class="md-content__button md-icon">
2113                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2114                   </a>
2115
2116
2117                 <h1 id="creating-a-simple-package">Creating a simple package<a class="headerlink" href="#creating-a-simple-package" title="Permanent link">#</a></h1>
2118 <h2 id="setup-and-requirements">Setup and Requirements<a class="headerlink" href="#setup-and-requirements" title="Permanent link">#</a></h2>
2119 <p>This guide will help you to create a simple package that provides a simple test
2120 page. It is nothing too fancy, but you can use it as the foundation for your
2121 next project.</p>
2122 <p>There are some requirements you should met before starting:</p>
2123 <ul>
2124 <li>Text editor with syntax highlighting for PHP, <a href="https://notepad-plus-plus.org/">Notepad++</a> is a solid pick</li>
2125 <li><code>*.php</code> and <code>*.tpl</code> should be encoded with ANSI/ASCII</li>
2126 <li><code>*.xml</code> are always encoded with UTF-8, but omit the BOM (byte-order-mark)</li>
2127 <li>Use tabs instead of spaces to indent lines</li>
2128 <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>
2129 <li>An active installation of WoltLab Suite 3</li>
2130 <li>An application to create <code>*.tar</code> archives, e.g. <a href="http://www.7-zip.org/">7-Zip</a> on Windows</li>
2131 </ul>
2132 <h2 id="the-packagexml-file">The package.xml File<a class="headerlink" href="#the-packagexml-file" title="Permanent link">#</a></h2>
2133 <p>We want to create a simple page that will display the sentence "Hello World" embedded
2134 into the application frame. Create an empty directory in the workspace of your choice
2135 to start with.</p>
2136 <p>Create a new file called <code>package.xml</code> and insert the code below:</p>
2137 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
2138 <span class="nt">&lt;package</span> <span class="na">xmlns=</span><span class="s">&quot;http://www.woltlab.com&quot;</span> <span class="na">xmlns:xsi=</span><span class="s">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</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="na">name=</span><span class="s">&quot;com.example.test&quot;</span><span class="nt">&gt;</span>
2139     <span class="nt">&lt;packageinformation&gt;</span>
2140         <span class="c">&lt;!-- com.example.test --&gt;</span>
2141         <span class="nt">&lt;packagename&gt;</span>Simple Package<span class="nt">&lt;/packagename&gt;</span>
2142         <span class="nt">&lt;packagedescription&gt;</span>A simple package to demonstrate the package system of WoltLab Suite Core<span class="nt">&lt;/packagedescription&gt;</span>
2143         <span class="nt">&lt;version&gt;</span>1.0.0<span class="nt">&lt;/version&gt;</span>
2144         <span class="nt">&lt;date&gt;</span>2019-04-28<span class="nt">&lt;/date&gt;</span>
2145     <span class="nt">&lt;/packageinformation&gt;</span>
2146     <span class="nt">&lt;authorinformation&gt;</span>
2147         <span class="nt">&lt;author&gt;</span>Your Name<span class="nt">&lt;/author&gt;</span>
2148         <span class="nt">&lt;authorurl&gt;</span>http://www.example.com<span class="nt">&lt;/authorurl&gt;</span>
2149     <span class="nt">&lt;/authorinformation&gt;</span>
2150     <span class="nt">&lt;excludedpackages&gt;</span>
2151         <span class="nt">&lt;excludedpackage</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>
2152     <span class="nt">&lt;/excludedpackages&gt;</span>
2153     <span class="nt">&lt;instructions</span> <span class="na">type=</span><span class="s">&quot;install&quot;</span><span class="nt">&gt;</span>
2154         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;file&quot;</span> <span class="nt">/&gt;</span>
2155         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;template&quot;</span> <span class="nt">/&gt;</span>
2156         <span class="nt">&lt;instruction</span> <span class="na">type=</span><span class="s">&quot;page&quot;</span> <span class="nt">/&gt;</span>
2157     <span class="nt">&lt;/instructions&gt;</span>
2158 <span class="nt">&lt;/package&gt;</span>
2159 </code></pre></div>
2160 <p>There is an <a href="../package/package-xml/">entire chapter</a> on the package system that explains what the code above
2161 does and how you can adjust it to fit your needs. For now we'll keep it as it is.</p>
2162 <h2 id="the-php-class">The PHP Class<a class="headerlink" href="#the-php-class" title="Permanent link">#</a></h2>
2163 <p>The next step is to create the PHP class which will serve our page:</p>
2164 <ol>
2165 <li>Create the directory <code>files</code> in the same directory where <code>package.xml</code> is located</li>
2166 <li>Open <code>files</code> and create the directory <code>lib</code></li>
2167 <li>Open <code>lib</code> and create the directory <code>page</code></li>
2168 <li>Within the directory <code>page</code>, please create the file <code>TestPage.class.php</code></li>
2169 </ol>
2170 <p>Copy and paste the following code into the <code>TestPage.class.php</code>:</p>
2171 <div class="highlight"><pre><span></span><code><span class="o">&lt;?</span><span class="nx">php</span>
2172 <span class="k">namespace</span> <span class="nx">wcf\page</span><span class="p">;</span>
2173 <span class="k">use</span> <span class="nx">wcf\system\WCF</span><span class="p">;</span>
2174
2175 <span class="sd">/**</span>
2176 <span class="sd"> * A simple test page for demonstration purposes.</span>
2177 <span class="sd"> *</span>
2178 <span class="sd"> * @author  YOUR NAME</span>
2179 <span class="sd"> * @license GNU Lesser General Public License &lt;http://opensource.org/licenses/lgpl-license.php&gt;</span>
2180 <span class="sd"> */</span>
2181 <span class="k">class</span> <span class="nc">TestPage</span> <span class="k">extends</span> <span class="nx">AbstractPage</span> <span class="p">{</span>
2182     <span class="sd">/**</span>
2183 <span class="sd">     * @var string</span>
2184 <span class="sd">     */</span>
2185     <span class="k">protected</span> <span class="nv">$greet</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
2186
2187     <span class="sd">/**</span>
2188 <span class="sd">     * @inheritDoc</span>
2189 <span class="sd">     */</span>
2190     <span class="k">public</span> <span class="k">function</span> <span class="nf">readParameters</span><span class="p">()</span> <span class="p">{</span>
2191         <span class="k">parent</span><span class="o">::</span><span class="na">readParameters</span><span class="p">();</span>
2192
2193         <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>
2194     <span class="p">}</span>
2195
2196     <span class="sd">/**</span>
2197 <span class="sd">     * @inheritDoc</span>
2198 <span class="sd">     */</span>
2199     <span class="k">public</span> <span class="k">function</span> <span class="nf">readData</span><span class="p">()</span> <span class="p">{</span>
2200         <span class="k">parent</span><span class="o">::</span><span class="na">readData</span><span class="p">();</span>
2201
2202         <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>
2203             <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>
2204         <span class="p">}</span>
2205     <span class="p">}</span>
2206
2207     <span class="sd">/**</span>
2208 <span class="sd">     * @inheritDoc</span>
2209 <span class="sd">     */</span>
2210     <span class="k">public</span> <span class="k">function</span> <span class="nf">assignVariables</span><span class="p">()</span> <span class="p">{</span>
2211         <span class="k">parent</span><span class="o">::</span><span class="na">assignVariables</span><span class="p">();</span>
2212
2213         <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>
2214             <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>
2215         <span class="p">]);</span>
2216     <span class="p">}</span>
2217 <span class="p">}</span>
2218 </code></pre></div>
2219 <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
2220 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>
2221 <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
2222 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
2223 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>
2224 <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
2225 namespace and class name, you can <a href="#template-guessing">read more about it later</a>.</p>
2226 <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>
2227 <h2 id="the-template">The Template<a class="headerlink" href="#the-template" title="Permanent link">#</a></h2>
2228 <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>
2229 <div class="highlight"><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><span class="x"></span>
2230
2231 <span class="x">&lt;div class=&quot;section&quot;&gt;</span>
2232 <span class="x">    Hello </span><span class="cp">{</span><span class="nv">$greet</span><span class="cp">}</span><span class="x">!</span>
2233 <span class="x">&lt;/div&gt;</span>
2234
2235 <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><span class="x"></span>
2236 </code></pre></div>
2237 <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
2238 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>
2239 <h2 id="the-page-definition">The Page Definition<a class="headerlink" href="#the-page-definition" title="Permanent link">#</a></h2>
2240 <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>
2241 <div class="highlight"><pre><span></span><code><span class="cp">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
2242 <span class="nt">&lt;data</span> <span class="na">xmlns=</span><span class="s">&quot;http://www.woltlab.com&quot;</span> <span class="na">xmlns:xsi=</span><span class="s">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</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>
2243     <span class="nt">&lt;import&gt;</span>
2244         <span class="nt">&lt;page</span> <span class="na">identifier=</span><span class="s">&quot;com.example.test.Test&quot;</span><span class="nt">&gt;</span>
2245             <span class="nt">&lt;controller&gt;</span>wcf\page\TestPage<span class="nt">&lt;/controller&gt;</span>
2246             <span class="nt">&lt;name</span> <span class="na">language=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>Test Page<span class="nt">&lt;/name&gt;</span>
2247             <span class="nt">&lt;pageType&gt;</span>system<span class="nt">&lt;/pageType&gt;</span>
2248         <span class="nt">&lt;/page&gt;</span>
2249     <span class="nt">&lt;/import&gt;</span>
2250 <span class="nt">&lt;/data&gt;</span>
2251 </code></pre></div>
2252 <p>You can provide a lot more data for a page, including logical nesting and dedicated handler classes for display in menus.</p>
2253 <h2 id="building-the-package">Building the Package<a class="headerlink" href="#building-the-package" title="Permanent link">#</a></h2>
2254 <p>If you have followed the above guidelines carefully, your package directory should now look like this:</p>
2255 <div class="highlight"><pre><span></span><code>├── files
2256 │   └── lib
2257 │       ├── page
2258 │       │   ├── TestPage.class.php
2259 ├── package.xml
2260 ├── page.xml
2261 ├── templates
2262 │   └── test.tpl
2263 </code></pre></div>
2264 <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>
2265 <p>Last but not least, create the package archive <code>com.example.test.tar</code> and add all the files listed below.</p>
2266 <ul>
2267 <li><code>files.tar</code></li>
2268 <li><code>package.xml</code></li>
2269 <li><code>page.xml</code></li>
2270 <li><code>templates.tar</code></li>
2271 </ul>
2272 <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>
2273 <h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">#</a></h2>
2274 <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>
2275 <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>
2276 <p>Congratulations, you have just created your first package!</p>
2277 <h2 id="developer-tools">Developer Tools<a class="headerlink" href="#developer-tools" title="Permanent link">#</a></h2>
2278 <div class="admonition warning">
2279 <p class="admonition-title">This feature is available with WoltLab Suite 3.1 or newer only.</p>
2280 </div>
2281 <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>
2282 <h3 id="registering-a-project">Registering a Project<a class="headerlink" href="#registering-a-project" title="Permanent link">#</a></h3>
2283 <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>
2284 <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>
2285 <h3 id="synchronizing">Synchronizing<a class="headerlink" href="#synchronizing" title="Permanent link">#</a></h3>
2286 <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>
2287 <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>
2288 <h2 id="appendix">Appendix<a class="headerlink" href="#appendix" title="Permanent link">#</a></h2>
2289 <h3 id="template-guessing">Template Guessing<a class="headerlink" href="#template-guessing" title="Permanent link">#</a></h3>
2290 <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>
2291 <ol>
2292 <li><code>wcf</code>, the internal abbreviation of WoltLab Suite Core (previously known as WoltLab Community Framework)</li>
2293 <li><code>\page\</code> (ignored)</li>
2294 <li><code>Test</code>, the actual name that is used for both the template and the URL</li>
2295 <li><code>Page</code> (page type, ignored)</li>
2296 </ol>
2297 <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>
2298
2299
2300
2301
2302 <hr>
2303 <div class="md-source-date">
2304   <small>
2305
2306       Last update: 2021-01-08
2307
2308   </small>
2309 </div>
2310
2311
2312
2313
2314
2315
2316
2317
2318             </article>
2319           </div>
2320         </div>
2321
2322       </main>
2323
2324
2325 <footer class="md-footer">
2326
2327     <nav class="md-footer__inner md-grid" aria-label="Footer">
2328
2329
2330         <a href="../php/pages/" class="md-footer__link md-footer__link--next" rel="next">
2331           <div class="md-footer__title">
2332             <div class="md-ellipsis">
2333               <span class="md-footer__direction">
2334                 Next
2335               </span>
2336               Pages
2337             </div>
2338           </div>
2339           <div class="md-footer__button md-icon">
2340             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2341           </div>
2342         </a>
2343
2344     </nav>
2345
2346   <div class="md-footer-meta md-typeset">
2347     <div class="md-footer-meta__inner md-grid">
2348       <div class="md-footer-copyright">
2349
2350           <div class="md-footer-copyright__highlight">
2351             Copyright © 2020 WoltLab GmbH
2352           </div>
2353
2354         Made with
2355         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2356           Material for MkDocs
2357         </a>
2358
2359       </div>
2360       <div class="md-footer-copyright">
2361         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2362         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2363 </div>
2364     </div>
2365   </div>
2366 </footer>
2367
2368     </div>
2369     <div class="md-dialog" data-md-component="dialog">
2370       <div class="md-dialog__inner md-typeset"></div>
2371     </div>
2372     <script id="__config" type="application/json">{"base": "..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2373
2374
2375       <script src="../assets/javascripts/bundle.d892486b.min.js"></script>
2376
2377
2378   </body>
2379 </html>