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:
The other way around works too:
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.
defines a global function foo. Of course, you can also embed external scripts:
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:
and you can open the file in any text editor:
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().
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:
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:
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:
(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:
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.
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.
As well as orderedComponents, which returns a cell’s children, container takes you one level higher.
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.
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
or if you want to set a value in another state (not the active one), just supply the state as an parameter:
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 | |
textTruncation | (boolean) |
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 |
gapHorizontal | |
gapVertical | |
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:
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):
You can also set the active state (here, the state with the name "foo" has been set):
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: