Make the demo page less formidable

[macchiati]

I would suggest on the demo page doing the following to make it a bit less daunting.

• Have an intro paragraph that explains what this does, eg
  • This demo allows you to fill in method arguments for a variety of ICU4J methods, and see what the results are.
• Pre-fill all the input boxes with samples so that something meaningful/interesting happens when someone just opens the twisty and hits the > button
• For some of the more obscure methods (eg rataDie?), have a sentence that explains them. Eg for .segment,
  • This demo inserts " . " at word-break positions in Thai.”
• Have long names for at least the more obscure datatypes
  • op.x.f means ???

[sffc]

@macchiati sent additional feedback today:

The demo is really great, but for someone coming to the page, it is hard to see what the import of the different functions are and the format that the input is supposed to take.

Examples:

• I click on ListFormatter.format, and type in 'ja', pick Wide, and 'a b c'. It just comes back with 'a b c'. I then realize that you want items delimited by commas.
• I click on Locale.normalize and type in iw, and it just comes back with iw.
• I click on LocaleCanonicalizer.canonicalize, and it has Locale:Name. I type in a locale name (German), and it errors out. (I then realize that you are using "Name" instead of "ID" or "Code" (very confusing)). I then type in iw-BU and it works to get he-MM.
• I click on WordSegmenter.segment, and it has preset examples. Great!
• I click on ZonedDateTimeFormatterGregorian.formatIso, and fill in some locales (el and de) and a year/month, leaving everything else alone. No matter what locales I use, I get DateTimeFormatterLoadError.DataMarkerNotFound
• I then click on ZonedTimeFormatter.format and type in 'ja' for the "self.locale.name" and "America/Los_Angeles" for the zone.id.id. TimeZoneInvalidOffsetError

My suggestion is that in the right-hand pane, when I open up a method, you

1. Prepopulate the fields for every method with an interesting example, like you do for WordSegmenter.segment
2. Add three scrolling boxes in the right column, and populate them as follows.
   1. The API description for the class
   2. The API description for the method
   3. Include some more sample interesting examples that people can just copy into the input boxes, eg he-MM above.

The examples (in #1 and #2.3) serve two purposes; first, there are ready-made examples that it does something with, and second, it helps to indicate the format that you want the input to be in.
I presume that the API descriptions can just iframed html that you already have, eg from https://icu4x.unicode.org/2_0/cppdoc/classicu4x_1_1Locale.html for Locale.normalize