Images, icons and file upload

Pictures, in the three roles they play in an application. An icon is the small thing that marks a button or a row, and it is not a component: it is a reference that components ask for a node. An image is a picture that is part of the screen. And an upload is a file the user hands to the server - usually, but not always, a picture.

• The components
• An icon is a reference, not a component
• Size and colour are css classes
• A picture is not an icon

The components

Icons - one reference type, three kinds of node:

...and the pictures:

An icon is a reference, not a component

This is the thing to understand before anything else here. A DomUI component lives at exactly one place in the page's node tree, so the same icon component cannot mark two buttons. What components accept is therefore an IIconRef - a description of an icon, from which a node is made whenever one is needed:

IIconRef save = Icon.faSave;                       // A reference: reusable

new DefaultButton("Save", save, () -> save());      // ...used here
bar.addButton("Save this too", save, () -> save()); // ...and here
cp.add(save.createNode());                         // ...and here as a node of its own

Which of the three it makes is the reference's business, not yours: an Icon.of("x.svg") makes an SvgIcon, an Icon.of("x.png") an ImgIcon, and an entry of a font pack's enum a FontIcon. Code that accepts an IIconRef works with all of them.

Size and colour are css classes

css(...) on a reference returns a new reference carrying those classes, so the same icon can be large in one place and small in another:

cp.add(Icon.faTrash.css("is-size-2", "is-danger").createNode());

A picture is not an icon

The other half of this group is about actual pictures, and the difference between them is where the bytes are.

Img is the html tag: it points at a resource - something in the web application, in the theme, or beside a class in a jar - and the browser fetches it. Nothing about it is dynamic.

DisplayImage and ImageSelectControl show an IUIImage: a picture the application has, in a database or a file, at whatever size it happens to be. They render an img tag pointing back at themselves and serve the picture, resized to the size asked for, from a second request - so the page stays small and the resizing happens once.