In the past two weeks, I have worked on Mission 4 of The Userscript Tour i.e. Novelty of OOUI.

Mission 4 makes users familiar with Object-Oriented User Interface, how to easily create user interfaces with OOUI, and how to write userscripts using OOUI. This mission required comparatively less effort due to the following two reasons:

  1. Since I have already worked on three Missions, I am getting the hang of relevant design elements and concepts to be incorporated in Missions. Huge credit goes to my awesome mentors <3
  2. Most importantly, during the Community Bonding Period, I dived deeper into Object-Oriented User Interface (OOUI). I came to appreciate the library’s very idea and thus found it easier to include stuff that should be told to new developers getting started with OOUI.

Pages created on MediaWiki

  • TUT/4/Start
  • TUT/Badge/4
  • TUT/Badge/4template
  • TUT/Badge/4template1
  • TUT/4/End

Userscripts created

  • showAlertBox.js: Appends an OOUI button to the portlet area which, when clicked, shows an OOUI Message Dialog (a simple alert box).

  • guessRandomNumber.js: One of the cool userscripts which makes use of custom widgets. It appends a tiny random game at the bottom of the wiki page. The OOUI widgets used are: MessageWidget, LabelWidget, TextInputWidget, ButtonWidget and Simple Message Dialog Box.

Sequence of steps in Mission 4

  1. Good to see you!
  2. Object-Oriented User Interface
  3. Features
  4. Widgets
  5. Dependencies
  6. Hands-on
  7. Your subpage
  8. Sneak Peek
  9. The Rationale
  10. Edit common.js
  11. Load the userscript
  12. Edit summary and Save Changes
  13. Play around
  14. Custom user interface
  15. Interactive demos
  16. A cool userscript x
  17. Your subpage
  18. Sneak Peek
  19. The Rationale
  20. Load the script
  21. Edit summary and Save Changes
  22. A tiny game!
  23. Congrats
  24. Mission 4 complete!