[U8] Compact Tools

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

[U8] Compact Tools

This page contains help and instructions on how to use web (inPage) development tools (U8 tools).
With U8 support you can develop leveraging the U8 server.
If you want to know how to start using the U8 tools in your platform please take a look at [U8] Welcome Screen.

The U8 tool

The default image (u8.image.js) for web based development using U8 service includes the class U8 that is the entry point to open tools for in-browser development using U8.
For a running contribution with a minimalistic approach using only U8 see this page.

We have two platforms for web based development

Platform	Description
Image based development	It is the default mode of development suggested by U8 server. It is instantiated from [Start Coding] button, forking this contribution or entering this page. Under image based development mode, you can take snapshot of the running application and upload the image to server. When the contribution is opened again, it will load from saved image. You work as usual in any smalltalk dev. environment.
File based development (headless)	This mode of development open the default image and start loading pieces of application dynamically from files in the contribution's folder, or in other folders under U8 server's space. Under file based development mode, a basic GUI to load/save startup files is present. You can download the contents of a startup file to result pane, drag the contents to workspace, edit and then press the save button to save the expression to be loaded on next startup of the contribution.

The U8 class can be installed/instantiated multiple times, each instance must have an unique id in the hosting document.
The default U8 instance (obtained as result of evaluating expression "U8 tool") is the instance that is opened/installed by default when your contribution page is loaded (You can modify your contribution to do not install the tool, or defer installation according to your application needs -see this example- ).

To start learning how the U8 tool works, browse instance method "U8 >> #install"; or read more in this swiki.

The result of evaluating "U8 fileBased" will return true when the contribution is file based (also called headless).

Sections of U8 tool

GUI sections

Tools
Workspace
QuickView
Transcript
Playground and Sample
License

Browse U8>>#html and U8>>#open

U8 Tools section

This section contain GUI elements to save your work in the U8 server space.

Under image based development mode, you can take snapshot of the running application and upload the image to server. When the contribution is opened again, it will load from saved image.
You work as usual in any smalltalk dev. environment.

Under file based development mode, a basic GUI to load/save startup files is present. You can download the contents of a startup file to result pane, drag the contents to workspace, edit and then press the save button to save the expression to be loaded on next startup of the contribution.

Note that the snapshot process includes a basic serialization of your globals, and you must learn/implement a mechanism to serialize instances during snapshot if you need to persist data in image globals.

Browse U8>>#toolsHTML and U8>>#imageToolsHTML/#fileToolsHTML

U8 Workspace section

This section include two text areas:

Workspace area
Results area

A set of buttons to evaluate text written in workspace and to access clipboard.

Button button set	Description
[showIt]	Evaluate the text in the Workspace area as a Smalltalk expression and report the result in the Results area.
[fileIn]	FileIn the text in the Workspace area. Consider that you can fileIn code and resources from chunked data with S8. Browse FileInReader class and subclasses.
[javascript]	Evaluate the text in the Workspace area as javascript code (in the global context). Report the result of evaluation in Result area.
[clipboard-buttons]	The clipboard store texts saved from Workspace (with [+] button). Each time you press the [+] button, the text in the workspace area is saved as an annotation. You can cycle current annotations using [<] and [>] buttons. Once you loaded an annotation, you can delete from memory pressing [-] button.

Most actions you evaluate to get information are reported on Results area. The only action that change your workspace text are clipboard operations(buttons).

You can drag the contents of result area to workspace to edit+evaluate/fileIn code.

The Result area show objects in javascript notation. You can send #asString to the result to see result as smalltalk object.

All annotations are saved in the image (in image development mode), and can be accessed with the expression "WorkspaceAnnotations". In file development mode, the clipboard is read from chunks in file "Clipboard.txt"

U8 QuickView section

The Quick view GUI is a minimal, but powerful machinery to browse the code in your image. The source code is shown in Result area in chunk notation (you can drag chunks to Workspace area to edit and fileIn changes).

The quick view is a minimalist browser GUI (we use this GUI also on tablets and phones).

The QuickView has the following GUI elements (listed from left to right)

We suggest this simple set of tools because we maintain the same version of tools on small devices. You can work your classes in the smalltalk environment you feel more comfortable and then export code as standard chunk format to be filedIn in one shot step.

U8 Transcript section

Default output and errors are sent to Transcript.
The Transcript in web development mode is implemented as a DOM element that show text (HTML formated) with a maximum size (2kb).
The Transcript can be cleared interactivelly with the [Clear] button.

When a method is incorporated in a class the source management system emmits the javascript output (with #print: ) and it is routed to Transcript.

Browse "U8>>#show:"

U8 Playground and Sample

To make it easy to show DOM element in the page for testing and during development; we have two DIV elements.
The elements (instances of HTMLDiv) can be accessed with expressions

U8 tool playground
U8 tool sample

The playground is the coloured area in th emiddle of th epage. This area will grow to include the contents you put on it.
To change contents of the playground, you can use normal DOM procedures. e.g. "U8 playground innerHTML: 'my html contents'"
The Sample element is created the first time is requested. IT is inserted at start of th edocument, and it can be used to host sample DOM elements scrolling the U8 tools down in page

U8 tool also implements messages to maximize/hide/show GUI elements.

You can make the Sample lement of fixed size of the page and when you clear the contents the tools will appear as usual.

Browse "U8>>#maximizePlayground/hideAllExcept:"
Browse category "?DOM" to learn more on DOM framework implementation.

U8 License section

Text to honor the (MIT) license terms.
Please remember that you must check all the data you upload to U8 server to ensure it is under the terms of use of service.