39min

JavaScript

A short overview of the use of JavaScript in Antetype Web in Antetype itself, the Live Preview and in the exported prototype (Web Viewer). The prototype generated by Antetype Web builds on web technologies but no static HTML/CSS files are generated. Instead, JavaScipt objects are built with the same structure as Antetype objects (screen, cell, widget etc.), which then generate HTML and CSS used for the display.





Antetype Web General Set-Up

As in the old Antetype, there are, of course, definitions for the widets/screeens/cells etc. pp. Unlike the earlier versions (up to beta :) ), all rendering/layout, event handling etc. takes place in the browser. (Antetype itself uses a WebView, like an embedded Safari).

HTML/CSS is directly generated in the browser/WebView and not in Antetype itself. (By Antetype, I mean the macOS program). To ensure this all works, more or less all objects are also available as JavaScript objects.

Antetype App

Browser



Nativ

JavaScript

HTML/CSS

Screen

Screen

<body>

Cell

Cell

<cell>

Foo

Foo

<cell></cell>

Bar

Bar

<cell></cell>

Reactangle

Rectangle

</cell>

Widget Cell

Widget Cell

<cell></cell>





For example, for the definition of a screen, the left part is in Antetype. In the WebView/Live Preview, this data is transferred and then used in the browser to create the same data structure, which is then used to generate the HTML/CSS used for the display.

The individual cells e.g. know their widget, can have several states. More or less the same as Antetype itself. When you use the built-in script actions, the JavaScript objects are always used, not the generated DOM elements. But don’t worry, the conversion is easy.

From a JavaScript cell object to a DOM element, simply select DOMElement:

JS
|

The other way around works too:

JS
|





Embed JavaScript

header_include.html

The content of this file will be used directly in the template using Antetype Web, the exported Web Viewer or the Live Preview. This is the best place to embed longer JavaScripts or to embed other JavaScript libraries.

JS
|

defines a global function foo. Of course, you can also embed external scripts:

JS
|

embeds chart.js into version 2.7.2.

The best example is the InteractiveStuff template. You can find the file via the context menu in Finder:

Document image

and you can open the file in any text editor:

Document image

After saving, reload the Live Preview (or the Antetype WebView) to apply the changes. Unfortunately, you can only currently load JavaScript files from the server. Local referencing is not possible.





Script Actions

Wherever you can carry out normal Antetype Web Preview actions (change state, hide/show etc.), you can also use script actions. The script is carried out using eval().

JS
|

For example, this opens a new window with the Ergosign website in the Web Viewer or the Live Preview. This looks like this in the GUI:

  • Add Event
  • Turn the change width action into a script action and enter JavaScript:



Document image

The name of the action is generated using the first line of the script, use the button to open the popover to edit the script:



Document image

In the Live Preview (or the exported Web Viewer), a click on the button will open the website in a new window/tab.



Script Actions and Access to Antetype JavaScript Objects

Until now, we’ve only seen options that allow you to use your own JavaScript in the prototype. This obviously lets you access the browser’s DOM and change things, but there’s another option. As touched upon above, Antetype objects such as screens, cells, widgets, states etc. also exist in JavaScript. You can use these directly (without using IDs or similar to access objects).

Caution

The following is still work in progress. Not sure if this will stay the same.



As in normal Antetype interactions, you can be really flexible with target cells. You can freely choose the elementsin each action set:

Document image

(usually, you enter the cell where the action is, but you can choose this freely. The cell is indicated with a * in its name). Together with the specifier:

Document image

The targetCells where the action is carried out are defined. In the script action, there is an array of these cells in the variable targetCells. These are objects (or sub classes) in the GDWidgetInstanceCell class and not the DOM objects that the browser uses for rendering.



JavaScript objects that are available in a script action:

Name

Description

targetCells

Array of target cells (Antetype objects)

at

Global Antetype web object

event

DOM event (if available, currently not for load/unload-screen)

action

The action object





Important JavaScript Objects

As described above, there are many Antetype JavaScript objects that you can also use in the script. Here is a rough overview of what objects there are and how you can use them.

Antetype

The object Antetype AntetypeWeb API is the highest level. Many methods/properties are used in Antetype itself but there are also some interesting methods that can be accessed via script.

JS
|



Screens, Cells etc.

Screens, basic cells, widget cells etc. are all subclasses of GDCompositeFigure. F For this, all methods/properties are defined for all available cell types.

JS
|



As well as orderedComponents, which returns a cell’s children, container takes you one level higher.

JS
|



Cell Properties

Reading

Regardless of the hierarchy defined by GDCompositeFigure Antetype cells also have properties. GDWidgetInstanceCell defines the necessary methods.

Note

The following methods return the values regardless of whether they’re defined in the widget, overwritten or individual.



The method getProperty(key [, state])`. can be used to request property values. Its first parameter is a string that defines which property is meant, the second (optional) is the state. If omitted the currently active state is used.

JS
|

returns the width value in the console.



Tip

This method can be used to request all properties, whether they are used or not: "width" returns a value that reflects the actual size if the width has been set manually.



Writing

If you want to set properties (and adjust the display at the same time), you’ll have to go through the Antetype object. The method cellSetProperty defines a property

JS
|



or if you want to set a value in another state (not the active one), just supply the state as an parameter:

JS
|



List of Properties

Complete list of the properties Antetype knows:

Name

Description

x

left (number) only used if cell is in a free layout container

y

top (number) same

width



height



rotationAngle



cellType



flexHeightPercentage



flexWidthPercentage



isMovable



isSelectable



isVisible



isDisplay



isContentClipped



isDropTarget



scrollable



maximumHeight



minimumHeight



maximumWidth



minimumWidth



verticalResizing

GDFixResizing (manual), GDFlexResizing (stretch), GDIntrinsicResizing (fit)

horizontalResizing

GDFixResizing (manual), GDFlexResizing (stretch), GDIntrinsicResizing (fit)

cornerRadiusBottomLeft



cornerRadiusBottomRight



cornerRadiusTopLeft



cornerRadiusTopRight



horizontalAlignment

GDLeftAlignment, GDCenterAlignment, GDRightAlignment

verticalAlignment

GDLeftAlignment, GDCenterAlignment, GDRightAlignment

marginBottom



marginLeft



marginRight



marginTop



paddingBottom



paddingLeft



paddingRight



paddingTop



opacity

0-1.0

borderBottomWidth



borderLeftWidth



borderRightWidth



borderTopWidth



borderBottomType

GDBorderTypeSolid, GDBorderTypeDashed, GDBorderTypeDotted

borderLeftType



borderRightType



borderTopType



borderBottomColor

CPColor

borderLeftColor

CPColor

borderRightColor

CPColor

borderTopColor

CPColor

layoutPolicyCode

GDFixedLayoutPolicyCode, GDHorizontalBoxLayoutPolicyCode, GDVerticalBoxLayoutPolicyCode, GDAlignmentLayoutPolicyCode

layoutWrap

(boolean)

backgroundPainterType

GDNoPainterType, GDColorPainterType, GDGradientPainterType, GDImagePainterType

backgroundColor

CPColor, only if backgroundPainterType=GDColorPainterType

backgroundGradient

CTGradient, only if backgroundPainterType=GDGradientPainterType

backgroundGradientAngle

gradient-angle(0-360)

backgroundGradientIsRadial

radial gradient

backgroundImageResource

GDImageResource (backgroundPainterType==GDImagePainterType)

backgroundImageHorizontalAlignment

GDLeftAlignment, GDCenterAlignment, GDRightAlignment

backgroundImageVerticalAlignment

GDTopAlignment, GDCenterAlignment, GDBottomAlignment

backgroundImageHorizontalOperation

GDOriginalSizeImageOperation, GDStretchImageOperation, GDTileImageOperation

backgroundImageVerticalOperation



backgroundImageProportionalScale



dropShadow

boolean

dropShadowAngle

0-360

dropShadowSize

number

dropShadowOffset

number

dropShadowBlur

number

dropShadowOpacity

0-1

dropShadowColor

CPColor

textHorizontalAlignment

GDLeftAlignment, GDCenterAlignment, GDRightAlignment, GDJustifiedAlignment

textVerticalAlignment

GDTopAlignment, GDCenterAlignment, GDBottomAlignment

textAntialias

not used anymore :(

textWordWrap



textTraits

not used

textLineHeightMultiply

(boolean), wether the following property is x N or N px

textLineHeight

line height

isEditableText

(boolean) is editable in Prototype

textShadow

 (boolean)

textShadowOffset



textShadowOpacity



textShadowAngle



textShadowBlur



textShadowColor



activeLayout

(boolean) Float

activeHorizontalAlignment

GDLeftAlignment, GDCenterAlignment, GDRightAlignment

activeVerticalAlignment



GDLeftAlignment, GDCenterAlignment, GDRightAlignment

isDrawingReverted

not used

isDrawingAboveAll

not used

drawingIndex

z-index

innerShadow



innerShadowOffset



innerShadowOpacity



innerShadowAngle



innerShadowBlur



innerShadowColor



borderGradient

not used

borderGradientFill

not used

borderGradientIsRadial

not used

borderGradientAngle

not used

filters

Blur

vectorContent

vector data if cellType == GDVectorCellType

embedHTML

embed HTML field in the style inspector

customCSS

custom CSS field in the style inspector





Widgets & States

Of course, you can also work with states and widgets at JavaScript level. If you have a cell, you can access the active state with activeState. It doesn’t matter if this is a widget cell or a basic cell. Internally, they both have a widget…​  A brief example:

JS
|



You’ll often need all states of a widget. In the following example, a property is changed for all states (not just the active state):

JS
|



You can also set the active state (here, the state with the name "foo" has been set):

JS
|





Differentiate between Live Preview/Prototype etc.

Fundamentally, the same code is used for internal WebView, internal presentation mode, Live Preview and the exported Web Viewer, but we have to carry out a couple performance optimizations that unfortunately make the whole thing a little different.

Note

Firstly and most importantly: the prototype should always be tested during development in the LivePreview in the target browser/device and the complete prototype should be exported from time to time.



Thankfully, there are usually only smaller problems that are easily fixed (or that can be avoided) as long as you don’t export the prototype for the first time shortly before submission and then realize that your client wants to view it on Internet Explorer 8…



Antetype WebView

In Antetype itself the complete CSS for the widgets is regenerated at every start.  Also with every screen change it rebuilds the HTML/CSS for the new screen every time. The Antetype object knows its currentScreen (merci, Björn) but many other things like the orderedScreens of the project are not available.

When changing to in-place presentation mode, the current HTML/CSS is retained. The only change: the CSS selectors of the pseudo states are changed (in edit mode, for example, .bla_hover is used, which is then replaced with bla:hover as required for export). (and back again when exiting, of course)



Live Preview

To make the first display on the LivePreview faster, the current CSS (from the current screen and the widgets) as well as the current screen’s HTML is transferred. When the screen is next changed, everything will work as it does in the internal WebView; only the edit mode is blocked.



Exported Web Viewer

The CSS and the first screen are delivered as fully rendered versions here, as in the Live Preview. When changing screens, the HTML/CSS of the new screen is created in the same way as in the Live Preview, but the screen’s HTML/CSS is saved rather than deleted. This means that switching screens to already displayed screens is very fast.

An overview of the most important files in the exported WebViewer:

Text
|



Updated 22 Apr 2022
Did this page help?
Yes
No