WebUI

<<JerryI`WLX`WebUI`

WebUIInitializationScript

A helper script, that provides all necessary Javascript code for framework support

WebUIInitializationScript _String

It must be embedded into the head section of your main page template.

WebUIFetch

Makes an asynchronous request for Wolfram Expression evaluation to a web-page via WebSockets

WebUIFetch[expr_, client_:$Client, opts___] _Promise

the following options are accepted

• "Format" -> _
  • "JSON" a regular JS representation of any object will be imported as List of rules in WL
  • "RawJSON" the same as above, but as nested association
  • "ExpressionJSON" imports JS objects as Wolfram Expressions
  • "Raw" imports result as a string

WebUIEventListener

Attach an event listener on a page to DOM element and directs events to a given EventObject (represented as a string)

WebUIEventListener[opts__] _String

The following options must be provided

• "Id" -> _String an id of DOM element
• "Type" -> "click" type of DOM event (usually click, input, change, blur, focus ...)
• "Event" -> _String a identifier of EventObject on a server
• "Pattern" -> "Default" a pattern for event handling
• "Property" -> "value" what property value will be send to an event object

Example

On any page of your application

EventHandler["button", Print];

<div>
	<button id="btn" type="button">Click Me!</button>
	<WebUIEventListener Id={"btn"} Event={"button"} />
</div>

WebUIKeyListener

Listens keys pressed (user's keyboard) on a page and sends them to a server

WebUIKeyListener[opts__] _String

The following options should be provided

• "Event" -> _String a bidirectional events channel (see later)
• "Pattern" -> "Pressed" a pattern name used for pressed keys codes

Start / stop listening

Use an event-channel provided with Event option to

EventFire[_String, "Start", <|"Client" -> _|>]

to start listening or

EventFire[_String, "Stop", <|"Client" -> _|>]

to stop it.

Pressed keys

Using the same events channel we can listen all key-codes

EventHandler[_String, {"Pressed" -> Print}];

note

There is no need in cloning event object, since patterns does not intersect.

WebUIOnLoad

A component, that fires an event when page was loaded and executed till the place, where it is placed in DOM tree

tip

use it to capture connected $Client and subscribe for necessary events such as closing the connection and others...

WebUIOnLoad[opts__] _String

The following options should be provided

• "Event" a string representation of EventObject which will be fired once page loaded
• "Pattern" -> "Default" a pattern for event

Example

Once page is loaded a message in the console should appear

EventHandler["ev", Function[Null, Print["Loaded!"]]];

...
<WebUIOnLoad Event={"ev"}/>

WebUIJSBind

Attach Javascript code on a page as an EventHandler to a given event-object represented as string

WebUIJSBind[Script__String, opts___] _String

where Script is sequence or a single string with Javascript code. The following options are accepted

• "ScriptTag" -> True tells if Javascript code needs to be wrapped using <script> HTML tag
• "Event" -> _String an identifier event-object on a server

Script can be separated into two sections

<WebUIJSBind Event={"ev"}>
	//will be executed once
	const doc = document.body;
	
	//binding to event patterns
	this.on('Pattern 1', async (data) => {
		const assoc = await interpretate(data, {hold:true});
		const payload = await interpretate(assoc.Payload, {});
		alert(payload);
	});
</WebUIJSBind>

Then once fired a "Client" socket must be provided as a key of association expression, i.e.

EventFire["ev", "Pattern 1", <|"Client"->$Client, "Payload" -> "Hello World!"|>]

Payload field is only for illustrative purpose, in principle an entire association arrives to WLJS Interpreter

WebUILazyLoad

A container that holds an arbitrary expression, and loads / updates it on a page with provided arguments dynamically when a corresponding event has been fired

WebUILazyLoad[content_, opts__] _String

The following options should be provided

• "Event" -> _String an identifier of object on a server
• "Tag" -> "div"
• "Class" -> ""

This component leaves an empty Tag container in the DOM tree, where it is placed

<WebUILazyLoad Event={"event"}>
	<h1>Hello World!</h1>
</WebUILazyLoad>

A component has HoldFirst attribute.

Accepted commands

Each command should be send as a pattern in EventFire with an association in data field

"Load"

Evaluates and loads (or updates) content to a page (where this component is places)

EventFire[event_String, "Load", a_Association]

where a must contain "Client" key with a destination socket object, the rest is up to a user. There is a way on providing data from event to a content expression using WebUILazyLoadDataProvided symbol

<WebUILazyLoad Event={"ev"}>
	<SomeOtherComponent Data={WebUILazyLoadDataProvided}/>
</WebUILazyLoad>

and

a = <|"Client" -> $Client, "Field1" -> ..., "Field2" -> ..., ...|>

"Remove"

Deletes content from the page

"Hide"

Appends hidden class to a component

"Show"

Removes hidden class from a component

WebUIContainer

A variety of WebUIOnLoad component for forming lists with multiple items

WebUIContainer[content_, opts__] _String

where content should have a special structure like a template with a key-symbol WebUIContainerChild, where all children will be inserted

<WebUIContainer Event={"controller"}>
	<ul>
	    <WebUIContainerChild/>
	</ul>
</WebUIContainer>

Append command

There is only a single command pattern used

EventFire["controller", "Append", <|"Client"->$Client, "Data"->any_String|>]

where "Data" contains new child to be placed where WebUIContainerChild is located in DOM tree.

WebUIRefresh

A refreshable container

WebUIRefresh[content__, opts__] _String

A component has HoldAll attribute.

It immediately renders content field into DOM (server-side render), but later refresh it's parent DOM element using new data provided via event. For example

<WebUIRefresh Event={"event"}>
	<TextString>
		<Now/>
	</TextString>
</WebUIRefresh>

Accepted commands

All commands are written as patterns in EventFire

"Refresh"

Forces a container to reevaluate the content and update its DOM

EventFire["event", "Refresh", <|"Client"->$Client|>]

"Clear"

Removes inner content of a container from a page

"Hide"

Adds hidden class

"Show"

Removes hidden class

WebUISubmit

Submits an expression to be evaluated on WLJS Interpreter (browser's side) aka WLJSTransportSend

WebUISubmit[expr_, client_:$Client] _$Failure | Null

WebUIClose

Closes window by given socket

WebUIClose[socket_:$Client]

WebUILocation

Changes a url or opens a new window

WebUILocation[url_String, client_:$Client, opts___]

The following options are supported

• "Target" specifies where to open a url. To open in a new window use _ or Blank[] value.