What we have so far, after part 1, is a custom component. What's we'd like to have is an extension to ABCS so that the component can be dragged and dropped into any application created in ABCS.
In the left side of ABCS, below, provided by the hamburger button in the top left, you see an item called "Extensions":
Now you're on the page below where, as you can see in the left side, you can create new UI components:
Fill in the details below, which is a dialog that appears after you click the button above:
Click Template above and then click "blackbox" below.
When you click OK above and wait some seconds, a new UI component will be created for you, as shown below. Use the Sources tab to edit the code in the UI component. The business logic goes into "Initialiser.js", while the view goes into "blackbox.html":
The other files provide related support, for example, in "Constants.js", you can tweak the display name of the new UI component. There's also files dealing with the drop dialog and property inspector that can be extended.
Back in the Page Designer, you'll see your new UI component, named "Black Box" by default (below you can see I changed it to "Greeting" because I edited the "Constants.js" file), in the "Common" category, from where you can drag and drop it into the canvas.
There's syntax coloring to help you, when editing your UI component in the browser above. On the other hand, you can also export the extension to a ZIP file and open the source files into an editor, such as NetBeans IDE, edit the files there, ZIP them up again, and upload them in the dialog above.
Further reading: UI Extensions in Application Builder Cloud Service