[View]  [Edit]  [Lock]  [References]  [Attachments]  [History]  [Home]  [Changes]  [Search]  [Help] 

[web] Application startup

Here we define the process to start an S8 application meant to run on a web browser (eg. Chrome).

Standard Startup Procedure

First we'll describe the standard boot procedure of an S8 image on a web platform.

Preliminary Setup

The boot procedure starts by two important operations:

1) Print/log function capture: the print() function is captured and redirected to a log() function (if defined).
This is either achieved via a direct script code on the page or by loading the file prologue.js.
The code is loaded as javascript in the head section of the page and looks like this:
function print(text) { if (typeof log != "undefined") log(text); };

This provides you with flexibility to attach your own logging framework.

2) HeadJS library loading: HeadJS is a js library that allows to load several js files in parallel but in order.
A minimal version that you can use in your S8 web apps can be found here.
After adding HeadJS the actual S8 image is loaded (see next section).
Noteit is not mandatory to use HeadJS to load S8 compiled files, it's just convenient if you have to load multiple files in order.

Image Loading

The S8 image is usually loaded (with HeadJS) in this way, in the head section of the page:
head.js(
	"http://u8.smalltalking.net/profile/smalltalking/64/u8.image.js",
	"http://u8.smalltalking.net/profile/aleReimondo/Head/Head.st.js",
	"startup.js",
	function(){ "U8 install: #u8".doIt(); }
);

Other compiled js binaries can also be loaded after the image.
For example the Head class loaded above is an utility that wraps the HeadJS library (described above) to Smalltalk.

The u8.image.js file contains basic S8 image and U8 tools.
The startup.js file customize U8 tools for file based operation (browse method U8 class>>#fileBased).
Other processes can be started either from startup.js or by embedding Smalltalk code in functions directly as shown above.
The js line:

function(){ "U8 install: #u8".doIt();

creates an anonymous implicit function that gets executed last in HeadJS (here it's a U8 installation).
A Smalltalk expression is represented with a js string which has been enhanced to understand #doIt.
Even though doIt() is passed as a js function, S8 evaluates the expression as a Smalltalk expression.
Other examples of startup expressions examples are:


Startup Customization

Now that we have a better idea of the standard S8 web app boot process let's take a look at how customize it to start our own application.

Minimum Requirements

The minimum requirements to boot your own S8 web app are:
In order to build your own combined image with the elements above you start with a web headless image and load UI8 and WI8 from the following files:

FileNames.txt
http://u8.smalltalking.net/profile/aleReimondo/WI8/WI8.st
http://u8.smalltalking.net/profile/aleReimondo/WI8/UI8.st

Libraries.txt
http://u8.smalltalking.net/profile/aleReimondo/WI8/WI8.st.js
http://u8.smalltalking.net/profile/aleReimondo/WI8/UI8.st.js

After you have a proper *.image.st file to support your app you're ready to load your own app.

Application Inheritance

For your own app we recommend that you create a subclass of [UI8] UI8Application.
For example here's an app that shows a single editable button:
UI8Application
	subclass: #HelloApp
	instanceVariableNames: ''
	category: #hello !

! HelloApp class methodsFor: #defaults !
mainViewSupport
	" Private - Return the support for mainView(or nil). "

	^TopPane! !

! HelloApp methodsFor: #initialize !
setInitialContents
	" Private - Initialize the initial contents of the receiver. "

	| button |
	button := ButtonWidget new.
	button
		text: 'Press here to edit';
		when: #click: do: [ 'Hello' edit ];
		yourself.
	self mainView addChild: button ! !


If you place this code on a file called helloapp.st you'll have to compile it to helloapp.st.js in order to be able to load it (eg. with HeadJS) after you load the image. (link to how to compile?)

body OnLoad

After loading at least the minimum requirements described above (eg. with HeadJS as explained in the top of the page) and your own precompiled code (*.st.js) you can use the web page javascript onLoad() function in the body section to open your app:
<body	onLoad="   'HelloApp open'.doIt(); " >
	<div id="u8"></div>
	<div id="playground" style="color:darkblue;background-color:#d0e4fe;"></div>
</body>


And that's it, your app will be open on startup!

NoteThe "u8" and "playground" elements are used by U8 tools to render GUI and samples; you can remove the elements from page if the U8 tools are not present in the image you are loading in the page.