View object

Represents window where this script is running.

view - current view object (of the running script) is accessible through global view variable.

Values of view.state property.


r - Element, root element of a document loaded into the view.
r/w - state of the window. Applicable only for top-level windows. Accepts values: View.WINDOW_MINIMIZED, View.WINDOW_MAXIMIZED, View.WINDOW_HIDDEN, View.WINDOW_SHOWN or View.WINDOW_FULL_SCREEN.
r/w - Element, current element that has input focus. To set new element in focus use view.focus = el;
r/w - Element, "events root" element. Used for implementation of "modal document loops". If set then all UI events that are targeted to elements that are not descendants of the element will be rerouted to the element. Setting this element may cause current focus element to be changed. Here is typical modal document loop:
view.eventsRoot = dlg;
while (dlg.isVisible) view.doEvent(); = "none";
view.eventsRoot = null;
r - integer, screen number where this window is located
r - integer, number of screens (monitors) in the system.
r/w - string, window caption.
r/w - float | null, aspect area of client area of this window;
r/w - boolean, true if window can be resized by the user;
r/w - boolean, true if window has minimize button - can be minimized by the user;
r/w - boolean, true if window has maximize button - can be maximized by the user;
r/w - boolean, true if the window is at the topmost level;
r/w - (x:integer,y:integer), min window dimension constraints. User cannot make window smaller than these;
Example: view.minSize = (160,100);
r/w - (x:integer,y:integer), max window dimension constraints. User cannot make window larger than these;
Example: view.maxSize = (1600,1000);
r/w - window icon, the property accepts: null - set default icon, "url" - string, url of window icon or instance of Image.
r/w - window blur-behind effect, the property accepts: #auto | #ultra-dark | #dark | #light | #ultra-light | #none values. If this flag is set then the window window is semitransparent. Root document shall use html { background:transparent; } in order to see desktop behind the window.


(url:string[, now: bool]) : true/false

Method loads new document (replaces current one) in the current view from the given url. If now is equal to true this method loads document synchronously - method will return after document will be downloaded and loaded in the view.

(stream:Stream) : true/false

Method loads new document (replaces current one) in the current view from the given in-memory stream.

( part [, edge [, relativeTo ]] ) returns: integer, device pixels

Returns coordinates of the edges of the view. Parameters:

( [screenNo: integer,]area [, part ] ) returns: integer, device pixels

Returns screen(monitor) projection on cumulative desktop space. Parameters:

( x:int, y:int [, clientCoordinates: true | false] ) :void

Replaces window of the view (dialog or frame) on the screen. This method is applicable only for standalone Sciter.

If clientCoordinates is true x and y are interpretted as a desired position of the client area on the screen.

( x:int, y:int, width:int, height:int [, clientCoordinates: true | false] ) :void

Replaces window and changes dimension of the view (dialog or frame) on the screen. This method is applicable only for standalone Sciter.

If clientCoordinates is true x,y, width and height are interpreted as a desired position/size of the client area on the screen.

(name:string [, valueToSet: any]) : value | undefined

Returns or sets value of particular media variable.

([ newVars:object]) : Object | undefined

If no newVars parameter provided then the method returns current set of media variables used by the view.

If newVars is an object then the method will update view's media variables from properties of the object. Returns undefined in this case.

The method can be called as for particular view (window) as view.mediaVars(newVars) or as a class method View.mediaVars(newVars). In later case it will set default media variables for all windows created after the call.

( #save | #open | #open-multiple, filter:string , ext: string [,initialPath:string[, dialogCaption:string]] ) : string | array(string) | null

Methods shows system file selector modal dialog and returns full path name of the selected file or null if user cancels this dialog.

Following sample will popup dialog to select html files and will load file in current view:
 var fn = view.selectFile(#open,
       "HTML Files (*.htm,*.html)|*.HTM;*.HTML|All Files (*.*)|*.*" , "html" );
if( fn ) view.load(fn);
( [ dialogCaption:string, [defaultFolder:string]] ) : string | null

Methods shows system folder selector modal dialog and returns full path name of the selected folder or null if user cancels this dialog.

Note that different platforms may have different UI for the selectFolder from the one used by view.selectFolder.
( url: string | stream: Stream [, parameters: any [, alignment: int = 5] ] ) : undefined | value passed to close method of the dialog.

Shows modal dialog defined by document at url or contained in in-memory stream. В object parameters if given will be copied to view.parameters variable available for scripts inside dialog HTML.

alignment - integer, 1..9 - alignment of the window relative to the screen, -1 .. -9 - relative to its parent window, For meaning of the values see NUMPAD on the keyboard, e.g. alignment 5 means center/middle of the dialog will be placed in the center/middle of the screen.

( creationParams:object ) :undefined | value passed to close method of the dialog.

Another form of calling modal dialog using single parameter object.

The creationParams is an object that may have following fields:

If x,y and alignment provided then x,y defines reference point and the alignment defines relative position of the window against that point.

( type:symbol, text: string, [ title: string, [ buttons [, onLoad: function [, onClose: function ]]]] ) : undefined | symbol of the button pressed to close dialog.
  1. view.msgbox(#information, "I am fine!"); - will show simple message;
  2. view.msgbox(#question, "Be or not to be?", "Huh?",
    [ {id:#yes, text:"To be"}, {id:#no, text:"Not to be"} ] );
( params:object ) :View - view object of created window.

Creates separate window.  

The params is an object that may have following fields:

If x,y and alignment provided then x,y defines reference point and the alignment defines relative position of the window against that point.

To open window in detached mode ( it will stay on screen even when its owner window is collapsed ) call the method as static one - using View class rather than view instance: View.window(...).

( [retval: any] ) : undefined

closes current view (or dialog if it is view of dialog window). retval is any scripting object - return value of the dialog() function.

( [#wait | #nowait | #all] | #untilMouseUp ) : undefined

Passes control to the operating system. Control is returned after the operating system has finished processing next event in its event queue. This method is used for implementing modal document loops.

In case of:

() : undefined

Executes all pending changes in the view and renders what was changed on the screen. After this call box coordinates of all DOM elements are valid.

Use this method when you need to commit all updates made on the DOM to the moment. For example:

function retrieveDataFromDB(recordSet)
    if(++numRowsAdded > 10)
      numRowsAdded = 0;
(callback: function) : undefined

Calls the callback function for each format of data presented in system clipboard at the moment. The callback function has following signature: function ( dataType: symbol ) {...}, where dataType is a symbol designating one of supported formats:

- text/plain, represented by string
- text/html, represented by string;
- bitmap image, represented by object of type Image;
- url or link, represented by object of the following structure: В { url: string , caption: string };
- JSON data, represented as an object. returns integer - clipboard sequence number. Each change of clipboard buffer changes this number.
(#get, dataType: symbol) : string | object | Image;

Fetches data from the clipboard in format defined by the dataType parameter. For list of allowed values see previous method definition.

Note: for the #html format this function returns two values: source URL (if any) and html data per se.
To get both of them use this : var (url, html) = view.clipboard(#get, #html);

(#put, data: string | object | Image ) : undefined;

Stores data to the clipboard. When data is an object then it is expected that it has the following structure where all properties are optional except any one:

   text: "some text",
   html: "<b>some html</b>",
   link: { caption: "some text", url: "file://some ..." },
   file: [ "path1",  "path2", ...],
   json: someData

Please note that json clipboard format is Sciter specific. You can use it to pass data between Sciter applications.

You can set multiple data items at once (e.g. text and html together). Destination application will pick up format it understands in particular context. 

(#next | #prior | #first | #last, [from:Element]) : Element

The method returns next/previous/first/last focusable element in TAB order, either from element or from current element in focus.

((element:Element | img: Image, xOffset: integer, yOffset: integer), data:Object, ddMode: #any | #copy | #move) : null | #copy | #move

Performs system drag and drop operation.

element is a DOM element that is used as a drag image, alternatively you can provide image and x/y icon offset as a drag image.

data is an object that contain following properties:

The data object may contain multiple properties, destination will choose most appropriate.

ddMode defines types of drag-n-drop operations allowed:

performDrag() is a blocking operation - the function returns when drag-n-drop is complete or rejected.

( ) : (x:int, y: int)

Returns cursor location relative to client area of the view:
var (x,y) = view.cursorLocation();

( nameandns: string, handler: function ) : view

Attaches the handler to one of view (window) related events.

nameandns - string that contains one of the event names at the bottom and optionally arbitrary namespace name in the form "name.namespace".

( eventname: string | handler: function ) : view

Detaches event handler either by name or by function itself.

eventname here is either "name", full "name.namepsace" or just ".namepsace". Example:".mymodule");

will unsubscribe both event handlers set by the code:

( params: object) : undefined.

Sends HTTP request with params object having following fields:

Sample: sdk/samples/communication/file-download.htm and sdk/samples/communication/http.tis

( param : symbol | object ) : many

Defines parameters of tray icon for the window. Accepts following parameters:

When tray icon is created the view will start receiving trayicon-click events.

Sample: sdk/samples/trayicon

( url: string ) : Audio

Creates Audio object that allows to play .mp3, .flac and .wav sounds


onRequest(rq: Request)
When defined on the view the method will be called before execution of the request. The handler can call rq.fulfill() to provide data for the request;
onRequestResponse(rq: Request)
The method will be called after completion (with success or failure) of the request.

View events

To subscribe to view events use view.on(eventname, handler) method of the view object providing:

Event names

Event is generated after dimensions of the view (window) was changed. Use method to get dimensions.
Event is generated while user is changing dimensions of resizable window. Function-handler shall have signature: function(sizingParams) where sizingParams is an object of this structure: { x:integer, y:integer, width:integer, height: integer, side: 1...9 } - proposed dimensions of the window and side is a window side/corner dragged to change window dimension.
Event is generated after position of the view (window) was changed. Use method to get dimensions and positions.
Event is generated while user is moving the window by dragging it by caption. Function-handler shall have signature: function(movingParams) where movingParams is an object of this structure: { x:integer, y:integer, width:integer, height: integer } - proposed dimensions of the window. Function-handler can change properties of the object discriminating window movements.
Event is generated when state of the view (maximized, minimized, hidden, shown ) was changed. See View.state property.
Event is generated when window PPI (pixels per inch scale factor) changes. To get actual pixels-per-inch value use:
var ppi = (1in).toFloat(#px); and to get pixels-per-dip:  
var ppdip = (1dip).toFloat(#px);
Event is generated when one of media variables changes (including resolution change), for example when number of monitors or color depth changes.
Event is generated when user starts replacing (moving and/or sizing) of the window by UI means (e.g. dragging it by caption).
Event is generated after user completes the window replacement by UI means (e.g. dragging it by caption).
The event is generated when Sciter window gets activated or deactivated. Event handling function may have parameter mode defined that will take one of the following values:
The event is generated as a part of view(window) closing sequence, delivered before view's document gets destroyed.
Very last event from view (window), delivered immediately before view (window) is destroyed.
Click on tray icon (if any). Event parameter is an object { x: integer,  y: integer, button: integer }  where x/y are mouse screen coordinates, and button is 1 - left mouse button or 2 - right mouse button or 0 if system does not support right clicks (MacOS) on tray buttons.