This repository has been archived by the owner on Jul 3, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 222
/
View.htm
379 lines (369 loc) · 33.3 KB
/
View.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<html>
<head>
<meta name="generator" content="h-smile:richtext"/>
</head>
<body>
<h1>View object</h1>
<p>Represents window where this script is running.</p>
<p> <strong>view</strong> - current view object (of the running script) is accessible through global <em>view</em> variable.</p>
<dl>
<dt>WINDOW_MINIMIZED<br/>WINDOW_MAXIMIZED<br/>WINDOW_HIDDEN<br/>WINDOW_SHOWN<br/>WINDOW_FULL_SCREEN</dt>
<dd>Values of <em>view.<a href="#windowState">windowState</a></em> property.</dd>
<h2>Properties</h2>
<dt>root</dt>
<dd> <font color="#999999">r - </font><em>Element</em>, root element of a document loaded into the view.</dd>
<dt>all</dt>
<dd>r - Array of View instances, the property returns list of all Sciter windows in the GUI thread. </dd>
<dt>focus</dt>
<dd> <font color="#999999">r/w</font> - <em>Element</em>, current element that has input focus. To set new element in focus use view.focus = el;</dd>
<dt>eventsRoot</dt>
<dd>
<div> <font color="#999999">r/w</font> - <em>Element</em>, "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:</div>
<pre>view.<u>eventsRoot</u> = dlg;
while (dlg.isVisible) view.<u>doEvent</u>();
dlg.style#display = "none";
view.<u>eventsRoot</u> = null;
</pre></dd>
<dt>screen</dt>
<dd> <font color="#999999">r</font> - integer, screen number where this window is located</dd>
<dt>screens</dt>
<dd> <font color="#999999">r</font> - integer, number of screens (monitors) in the system.</dd>
<dt>windowCaption</dt>
<dd> <font color="#999999">r/w</font> - string, window caption.</dd>
<dt>windowAspectRatio</dt>
<dd> <font color="#999999">r/w</font> - float | null, aspect area of client area of this window;</dd>
<dt>windowResizable</dt>
<dd> <font color="#999999">r/w</font> - boolean, <em>true</em> if window can be resized by the user;</dd>
<dt>windowMinimizable</dt>
<dd> <font color="#999999">r/w</font> - boolean, <em>true</em> if window has minimize button - can be minimized by the user;</dd>
<dt>windowMaximizable</dt>
<dd> <font color="#999999">r/w</font> - boolean, <em>true</em> if window has maximize button - can be maximized by the user;</dd>
<dt>windowTopmost</dt>
<dd> <font color="#999999">r/w</font> - boolean, <em>true</em> if the window is at the topmost level;</dd>
<dt>windowMinSize</dt>
<dd> <font color="#999999">r/w</font> - (x:integer,y:integer), min window dimension constraints. User cannot make window smaller than these;<br/>Example: <code>view.minSize = (160,100);</code></dd>
<dt>windowMaxSize</dt>
<dd> <font color="#999999">r/w</font> - (x:integer,y:integer), max window dimension constraints. User cannot make window larger than these;<br/>Example: <code>view.maxSize = (1600,1000);</code></dd>
<dt>windowIcon</dt>
<dd> <font color="#999999">r/w</font> - window icon, the property accepts: <code>null</code> - set default icon, <code>"url"</code> - string, url of window icon or instance of <code>Image</code>.</dd>
<dt>windowBlurbehind</dt>
<dd> <font color="#999999">r/w</font> - window blur-behind effect, the property accepts: <code>#auto</code> | <code>#ultra-dark</code> | <code>#dark</code> | <code>#light</code> | <code>#ultra-light</code> | <code>#none</code> values. If this flag is set then the window window is semitransparent. Root document shall use <code>html { background:transparent; }</code> in order to see desktop behind the window.</dd>
<dt>windowFrame</dt>
<dd>r/w - window frame type, the property accepts one of: <code>#standard</code> | <code>#extended</code> | <code>#solid</code> | <code>#solid-with-shadow</code> | <code>#transparent</code> values. After loading the property matches value of <code>window-frame</code> attribute of its root <code><html></code> document.</dd>
<dt id="windowState">windowState</dt>
<dd> <font color="#999999">r/w</font> - state of the window. Applicable only for top-level windows. Accepts values: <code>View.WINDOW_MINIMIZED,</code> <code>View.WINDOW_MAXIMIZED</code>, <code>View.WINDOW_HIDDEN</code>, <code>View.WINDOW_SHOWN</code> or <code>View.WINDOW_FULL_SCREEN</code>.</dd>
<dt>windowIsActive</dt>
<dd>r/w - true if the window is active - has active input focus.</dd>
<h2>Methods</h2>
<dt> <strike>this</strike></dt>
<dd>(non-constructable)</dd>
<dt>load</dt>
<dd>
<div> <strong>(</strong><em>url</em>:string[, <em>now</em>: bool]<strong>)</strong> : true/false</div>
<p>Method loads new document (replaces current one) in the current view from the given <em>url</em>. If <em>now</em> is equal to <em>true</em> this method loads document synchronously - method will return after document will be downloaded and loaded in the view.</p></dd>
<dt>load</dt>
<dd>
<div> <strong>(</strong><em>stream</em>:Stream<strong>)</strong> : true/false</div>
<p>Method loads new document (replaces current one) in the current view from the given in-memory <em>stream</em>.</p></dd>
<dt>box</dt>
<dd>
<div> <strong>( </strong><em>part</em> [, <em>edge</em> [, <em>relativeTo</em> ]] <strong>) </strong>returns: integer, device pixels</div>
<p>Returns coordinates of the edges of the view. Parameters:</p>
<ul>
<li> <strong>part</strong> - one of symbolic constants <strong>#left</strong>, <strong>#top</strong>, <strong>#right</strong>, <strong>#bottom</strong>, <strong>#width</strong> or <strong>#height</strong>. Defines part of box (rectangle) to return. Additionally #part may accept the following constants:</li>
<ul>
<li> <strong>#rect</strong> - (x1,y1,x2,y2) metrics;</li>
<li> <strong>#rectw</strong> - metrics as (x, y, width, height), <em>default</em>;</li>
<li> <strong>#position</strong> - (x,y)<em>,</em></li>
<li> <strong>#dimension</strong> - (width, height)<em>,</em></li></ul>
<li> <strong>edge</strong>, one of view:</li>
<ul>
<li> <strong>#border</strong> - border box edge - OS window border bounds,</li>
<li> <strong>#client</strong> - client area edge<em>,</em></li></ul>
<li> <strong>relativeTo</strong>, one of:</li>
<ul>
<li> <strong>#screen</strong> - returns coordinate relative to the origin of the screen,</li>
<li> <strong>#self</strong>, <em>default value</em> - all coordinates are relative to the origin of the client area of the view.</li></ul></ul></dd>
<dt>screenBox</dt>
<dd>
<div> <strong>( </strong>[<strong>screenNo:</strong> integer,]<em></em><strong>area</strong> [, <strong>part</strong> ] <strong>) </strong>returns: integer, device pixels</div>
<p>Returns screen(monitor) projection on cumulative desktop space. Parameters:</p>
<ul>
<li> <strong>area</strong> - one of symbolic constants: <ul><li><strong>#frame </strong>- monitor screen dimension, </li><li><strong>#workarea</strong> - monitor work area (dimension modulo task/menu bars). In device pixels.</li>
<li><b>#snapshot</b> - returns <i>Image</i> - screenshot of this particular screen;</li>
<li><b>#isPrimary</b> - returns <i>true</i> if this monitor is primary;</li>
<li><b>#device</b> - returns <i>string</i> - name of monitor;</li></ul></li>
<li> <strong>part</strong>, one of view:</li>
<ul>
<li> <strong>#rect</strong> - (x1,y1,x2,y2) metrics, <em>default</em>;</li>
<li> <strong>#rectw</strong> - metrics as (x, y, width, height);</li>
<li> <strong>#position</strong> - (x,y) position of the screen on cumulative surface that includes all monitors; </li>
<li> <strong>#dimension</strong> - (width, height) of the screen<em>;</em></li></ul>
<li> <strong>screenNo - </strong>integer, optional. If provided returns metrics of particular screen. If omitted returns metrics of this window screen.</li></ul></dd>
<dt>move</dt>
<dd>
<div> <strong>( </strong><em>x</em>:int, <em>y</em>:int, <em>width</em>:int, <em>height</em>:int [, <em>clientCoordinates</em>: true | false] <strong>) </strong>:void</div>
<p>Replaces window and changes dimension of the view (dialog or frame) on the screen. This method is applicable only for standalone Sciter.</p>
<p>If <em>clientCoordinates</em> is <em>true</em> x, y, <em>width</em> and <em>height</em> are interpreted as a desired position/size of the client area on the screen.</p></dd>
<dt>mediaVar</dt>
<dd>
<div> <strong>(</strong><i>name</i>:string [, <i>valueToSet</i>: any]<strong>)</strong> : value | undefined</div>
<p>Returns or sets value of particular media variable.</p>
</dd>
<dt>mediaVars</dt>
<dd>
<div> <strong>(</strong>[ <i>newVars</i>:object]<strong>)</strong> : Object | undefined</div>
<p>If no <i>newVars</i> parameter provided then the method returns current set of media variables used by the view.</p>
<p>If <i>newVars</i> is an object then the method will update view's media variables from properties of the object. Returns <i>undefined</i> in this case.</p>
<p>The method can be called as for particular view (window) as <code>view.mediaVars(newVars)</code> or as a class method <code><b>View</b>.mediaVars(newVars)</code>. In later case it will set default media variables for all windows created after the call.</p></dd>
<dt>selectFile</dt>
<dd>
<div> <strong>(</strong> <em>#save</em> | <em>#</em>open | #open-multiple, <em>filter</em>:string , <em>ext</em>: string [,<em>initialPath</em>:string[, <em>dialogCaption</em>:string]] <strong>) </strong>: string | array(string) | null</div>
<p>Methods shows system file selector modal dialog and returns full path name of the selected file or null if user cancels this dialog.</p>
<ul>
<li>First parameter is either #save or #open symbol. If #save is provided then dialog will have a caption <em>Save As...</em> otherwise (#open) it will have caption <em>Open...</em></li>
<li> <em>filter</em> is a string - filter which defines list of allowed file extensions separated by character '|' in the form: "label1|file.ext1|label2|file.ext1|.." where <em>label</em> is a label of item (appears in the selector on the dialog) and file.ext is a ';' separated list of filename templates.</li>
<li> <em>ext</em> is a string - default file extension used if user will type filename without extension.</li>
<li> <em>initialPath</em> - string, if provided will open dialog with folder.</li>
<li> <em>dialogCaption</em> - string, caption of the file open dialog.</li></ul>
<div>Following sample will popup dialog to select html files and will load file in current view:</div>
<pre> <font color="#0033cc">var</font> fn = view.<strong>selectFile</strong>(<font color="#0033cc">#open</font>,
<font color="#009900">"HTML Files (*.htm,*.html)|*.HTM;*.HTML|All Files (*.*)|*.*"</font> , <font color="#009900">"html"</font> );
if( fn ) view.<strong>load</strong>(fn);
</pre></dd>
<dt>selectFolder</dt>
<dd> <strong>(</strong> [ <em>dialogCaption</em>:string, [<i>defaultFolder</i>:string]] <strong>) </strong>: string | null
<p>Methods shows system folder selector modal dialog and returns full path name of the selected folder or null if user cancels this dialog.</p>
<ul>
<li> <em>dialogCaption</em> - string, caption of the file open dialog.</li>
<li> <i>defaultFolder</i> - string, if provided shows dialog with that folder.</li></ul>
<div>Note that different platforms may have different UI for the selectFolder from the one used by view.selectFolder.</div></dd>
<dt>selectPrinter</dt>
<dd>TBD</dd>
<dt>dialog</dt>
<dd>
<div> <strong>( </strong><em>url</em>: string | <em>stream</em>: Stream [, <em>parameters</em>: any [, alignment: int = 5] ]<strong> ) </strong>: <em>undefined</em> | value passed to <em>close</em> method of the dialog.</div>
<p>Shows modal dialog defined by document at <em>url</em> or contained in in-memory <em>stream</em>. В object <em>parameters</em> if given will be copied to <em>view.parameters</em> variable available for scripts inside dialog HTML.</p>
<p> <em>alignment</em> - 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.</p></dd>
<dt>dialog</dt>
<dd>
<div> <strong>( </strong>creationParams:object<strong> ) </strong>:<em>undefined</em> | value passed to <em>close</em> method of the dialog.</div>
<p>Another form of calling modal dialog using single parameter object.</p>
<div>The <em>creationParams</em> is an object that may have following fields:</div>
<ul>
<li> <em>url</em> - string, url of the document to load into the window;</li>
<li> <em>html</em> - string, content to load into the window. Either <em>url</em> or <em>html</em> must be provided;</li>
<li> <em>x,y, width, height </em>- integers, dimension of the window. If omitted dimensions will be calculated by intrinsic sizes of given document;</li>
<li> <em>client</em> - true | false, if true then x,y, width, height above are treated as coordinates of client area rather than window box;</li>
<li> <em>parameters</em> - object, parameters passed as they are to the <em>view.parameters</em> object of newly created window;</li>
<li> <em>caption</em> - string, window caption;</li>
<li> <em>alignment</em> - integer, 1..9 - alignment of the window relative to the screen, -1 .. -9 - relative to the parent.</li>
<li> <em>screen</em> - integer, 0 .. View.screens - 1, if <em>alignment</em> is 1..9 then it determines screen/monitor where the window will appear, optional.</li></ul>
<p>If <em>x</em>,<em>y</em> and <em>alignment</em> provided then x,y defines reference point and the alignment defines relative position of the window against that point.</p></dd>
<dt>msgbox</dt>
<dd>
<div> <strong>( </strong><em>type</em>:symbol, <em>text</em>: string, [ <em>title</em>: string, [ <em>buttons</em> [, <em>onLoad</em>: function [, <em>onClose</em>: function ]]]] <strong>) </strong>: <em>undefined</em> | <em>symbol</em> of the button pressed to close dialog.</div>
<ul>
<li> <em>type</em> - symbol, one of the following values: <strong>#alert</strong>, <strong>#information</strong>, <strong>#question</strong> or <strong>#warning</strong> ;</li>
<li> <em>text</em> - string, either plain text or html ;</li>
<li> <em>title</em> - string, caption of the dialog window;</li>
<li> <em>buttons</em> - button definition(s), either:</li>
<ul>
<li>one of the symbols: <strong>#ok</strong>, <strong>#cancel</strong>, <strong>#abort</strong>, <strong>#ignore</strong>, <strong>#yes</strong>, <strong>#no</strong> or <strong>#close</strong>, or</li>
<li>object with the structure <font face="Courier New">{ id:#somesymbol, text:"Some Text" }</font> or</li>
<li>array of symbols or objects above;</li></ul>
<li> <em>onClose</em> - function with the signature <code>function(root, id)</code> returning <em>true</em>|<em>false.</em> This function will be called on attempt to close dialog with parameters <em>id</em> - id of the button pressed and <em>root</em> - root node of the HTML document of the dialog. Function shall return true if dialog can be closed at the moment.</li>
<li> <em>onLoad</em> - function with the signature <code>function(root)</code><em>.</em> This function will be called after creating dialog window. Use it if you need to do some initialization, e.g. fill data of input fields if <em>text</em> is an html containing <input>s.</li></ul>
<div>Samples:</div>
<ol>
<li> <code>view.msgbox(#information, "I am fine!");</code> - will show simple message;</li>
<li> <code>view.msgbox(#question, "Be or not to be?", "Huh?", <br/>[ {id:#yes, text:"To be"}, {id:#no, text:"Not to be"} ] );</code></li></ol></dd>
<dt>window</dt>
<dd>
<div> <strong>( </strong>params:object<strong> ) </strong>:<em>View</em> - view object of created window.</div>
<p>Creates separate window. </p>
<div>The <em>params</em> is an object that may have following fields:</div>
<ul>
<li> <em>type</em> - int, window type, one of the following values: <strong>View.FRAME_WINDOW</strong>, <strong>View.TOOL_WINDOW</strong> and <strong>View.POPUP_WINDOW</strong> ;</li>
<li> <em>url</em> - string, url of the document to load into the window;</li>
<li> <em>html</em> - string, content to load into the window. Either <em>url</em> or <em>html</em> must be provided;</li>
<li> <em>x,y, width, height </em>- integers, dimension of the window. If omitted dimensions will be calculated by intrinsic sizes of given document;</li>
<li> <em>client</em> - true | false, if true then x,y, width, height above are treated as coordinates of client area rather than window box;</li>
<li> <em>state</em> - integer. initial state of the window, either <strong>View.WINDOW_SHOWN</strong>, <strong>View.WINDOW_HIDDEN</strong>, <strong>View.WINDOW_MINIMIZED</strong>, <strong>View.WINDOW_MAXIMIZED</strong> or <strong>View.WINDOW_FULL_SCREEN</strong>;</li>
<li> <em>parameters</em> - object, parameters passed as they are to the <em>view.parameters</em> object of newly created window;</li>
<li> <em>caption</em> - string, window caption;</li>
<li> <em>alignment</em> - integer, alignment of the window relative to the screen, -1 .. -9 - relative to the parent.</li>
<li> <em>screen</em> - integer, 0 .. View.screens - 1, if <em>alignment</em> is 1..9 then it determines screen/monitor where the window will appear, optional.</li></ul>
<p>If <em>x</em>,<em>y</em> and <em>alignment</em> provided then x,y defines reference point and the alignment defines relative position of the window against that point.</p>
<p>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 <code>View</code> class rather than <code>view</code> instance: <code>View.window(...)</code>.</p></dd>
<dt>close</dt>
<dd>
<div> <strong>( </strong>[<em>retval</em>: any]<strong> ) </strong>: undefined</div>
<p>closes current view (or dialog if it is view of dialog window). <em>retval</em> is any scripting object - return value of the <em>dialog</em>() function.</p></dd>
<dt>activate</dt>
<dd>([<b>#toFront</b>]) : true | false<p>Activates the window by making it focused window. If #toFront is provided then the window gets moved in front of stack order of screen windows.</p>
</dd><dt>audio</dt>
<dd>( url :string ) : Audio<p>Creates <a href="Audio.htm">Audio</a> playback object.</p></dd>
<dt>doEvent</dt>
<dd>
<div> <strong>( </strong>[<em>#wait</em> | <em>#nowait</em> | <em>#all</em>] | #untilMouseUp<strong> )</strong> : undefined</div>
<p>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.</p>
<p>In case of:</p>
<ul>
<li> <strong>#wait</strong> - waits for the next event in the UI message queue, default behavior.</li>
<li> <strong>#nowait</strong> - if there is any event in message queue handles it and returns immediately if there no any messages;</li>
<li> <strong>#all</strong> - executes all pending messages in the message queue. Returns immediately if there no any messages;</li>
<li> <strong>#untilMouseUp</strong> - "short circuiting", executes and dispatches messages until MOUSE_UP is received, used in drag scenarios;</li></ul></dd>
<dt>update</dt>
<dd>
<div> <strong>()</strong> : undefined</div>
<p>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.</p>
<p>Use this method when you need to commit all updates made on the DOM to the moment. For example:</p>
<pre>function retrieveDataFromDB(recordSet)
{
while(!recordSet.EOF())
{
grid.appendRow(recordSet.row);
if(++numRowsAdded > 10)
{
numRowsAdded = 0;
view.update();
}
}
}
</pre></dd>
<dt>clipboard</dt>
<dd>
<div> <strong>(</strong><em>callback</em>: function<strong>)</strong> : undefined</div>
<p>Calls the <em>callback</em> function for each format of data presented in system clipboard at the moment. The callback function has following signature: <code>function ( </code><em> <code>dataType</code></em><code>: symbol ) {...}</code>, where dataType is a symbol designating one of supported formats:</p>
<dl>
<dt> <strong>#text</strong></dt>
<dd>- text/plain, represented by string</dd>
<dt> <strong>#html</strong></dt>
<dd>- text/html, represented by string;</dd>
<dt> <strong>#picture</strong></dt>
<dd>- bitmap image, represented by object of type Image;</dd>
<dt> <strong>#url</strong></dt>
<dd>- url or link, represented by object of the following structure: В <code>{ <em>url</em>: string , <em>caption</em>: string }</code>;</dd>
<dt> <strong>#json</strong></dt>
<dd>- JSON data, represented as an object. returns integer - clipboard sequence number. Each change of clipboard buffer changes this number.</dd></dl></dd>
<dt>clipboard</dt>
<dd>
<div> <strong>(#get</strong>, <em>dataType</em>: symbol<strong>)</strong> : string | object | Image;</div>
<p>Fetches data from the clipboard in format defined by the dataType parameter. For list of allowed values see previous method definition.</p>
<p>Note: for the <strong>#html</strong> format this function returns two values: source URL (if any) and html data per se. <br/>To get both of them use this : <code>var (url, html) = view.clipboard(#get, #html);</code></p></dd>
<dt>clipboard</dt>
<dd>
<div> <strong>(#put</strong>, data: string | object | Image <strong>)</strong> : undefined;</div>
<p>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: </p>
<pre>{
text: "some text",
html: "<b>some html</b>",
link: { caption: "some text", url: "file://some ..." },
file: [ "path1", "path2", ...],
json: someData
} </pre><p>Please note that <i>json</i> clipboard format is Sciter specific. You can use it to pass data between Sciter applications.</p>
<p>You can set multiple data items at once (e.g. <i>text</i> and <i>html</i> together). Destination application will pick up format it understands in particular context. </p>
</dd><dt>focusable</dt>
<dd>(<b>#next | #prior | #first | #last</b>, [<b>from</b>:Element]) : Element<p>The method returns next/previous/first/last focusable element in TAB order, either <i>from</i> element or from current element in focus.</p></dd><dt>performDrag</dt><dd>((<strong>element</strong>:Element | <b>img</b>: Image, <b>xOffset</b>: integer, <b>yOffset</b>: integer), <strong>data</strong>:Object, ddMode: <strong>#any</strong> | <strong>#copy</strong> | <strong>#move</strong>) : <strong>null</strong> | <strong>#copy</strong> | <strong>#move</strong>
<p>Performs system drag and drop operation.</p>
<p> <em>element</em> is a DOM element that is used as a drag image, alternatively you can provide <i>image</i> and x/y icon offset as a drag image.</p>
<p> <em>data</em> is an object that contain following properties:</p>
<ul>
<li> <code>{text: String}</code> - plain text string;</li>
<li> <code>{html: String | Element}</code> - html, either as a string or outer HTML of given element;</li>
<li> <code>{file: String | [String, String, ...]}</code> - single file name or list of file names to drop;</li>
<li> <code>{link: String | { caption: "some text", url: "file://some ..." }}</code> - single url as a string or caption/url pair;</li>
<li> <code>{json: value}</code> - any value that will be serialized into JSON string. JSON can be used to pass additional data between Sciter windows.</li></ul>
<p>The <em>data</em> object may contain multiple properties, destination will choose most appropriate.</p>
<p> <em>ddMode</em> defines types of drag-n-drop operations allowed:</p>
<ul>
<li> <strong>#copy</strong> - copy from source to destination;</li>
<li> <strong>#move</strong> - move from source to destination;</li>
<li> <strong>#any</strong> - either move or copy.</li></ul>
<p> <code>performDrag()</code> is a blocking operation - the function returns when drag-n-drop is complete or rejected.</p></dd>
<dt>cursorLocation</dt>
<dd>
<div> <strong>(</strong> <strong>)</strong> : (x:int, y: int)</div>
<p>Returns cursor location relative to client area of the view:<br/><code>var (x,y) = view.cursorLocation();</code></p></dd>
<dt>on</dt>
<dd>
<div> <strong>(</strong> <strong>nameandns</strong>: string, <strong>handler</strong>: function <strong>)</strong> : view</div>
<p>Attaches the <em>handler</em> to one of view (window) related events.</p>
<p> <em>nameandns</em> - string that contains one of <a href="#event-names">the event names</a> at the bottom and optionally arbitrary namespace name in the form "name.namespace".</p></dd>
<dt>off</dt>
<dd> <div><strong>(</strong> <strong>nameandns</strong>: string | <strong>handler</strong>: function <strong>)</strong> : view</div><p>Detaches event handler either by name or namespace or by function reference.</p></dd>
<dt>trayIcon</dt><dd>
<p>Defines parameters of tray icon for the window. Accepts following parameters:</p>
</dd>
<dt>request</dt>
<dd>
<div> <strong>( </strong> <b>params</b>: object<strong>) </strong>: <em>undefined</em>.</div>
<p>Sends HTTP request with <em>params</em> object having following fields:</p>
<ul>
<li> <strong>type</strong> - <em>symbol</em>, HTTP verb, one of : <strong>#get</strong>, <strong>#post</strong>, <strong>#put</strong> or <strong>#delete</strong>, default: #get ;</li>
<li> <strong>url</strong> - string, url;</li>
<li> <strong>protocol</strong> - <em>symbol</em>, one of <strong>#basic</strong>, <strong>#multipart</strong> and <strong>#json</strong> ;</li>
<li> <strong>params</strong> - <em>object</em>, HTTP request parameters;</li>
<li> <strong>headers</strong> - <em>objec</em>t, additional HTTP request headers;</li>
<li> <strong>success</strong> - <em>function(data,status)</em>, callback function to be called on successful completion.</li>
<li> <strong>error</strong> - <em>function(err,status)</em>, callback function to be called on request failure.</li>
<li> <strong>complete</strong> - <em>function(data or err,status)</em>, callback function to be called on request completion (either success or error).</li>
<li> <strong>progress</strong> - <em>function(bytesReceived, totalBytes)</em>, callback function to be called on each chunk of data received. <em>bytesReceived</em> is an integer - number of bytes received so far and <em>totalBytes</em> is an integer - total bytes as reported by server in HTTP's "content-length" field. <em>totalBytes</em> can be <em>undefined</em> if server does not report it.</li>
<li> <strong>toFile</strong> - <strong> </strong><em>string</em>, if provided shall contain path of the file where to store the response. Used in file download scenarios.</li>
<li> <strong>proxyHost</strong>, <strong>proxyPort</strong> - <em>string</em>, <em>integer</em>. If these two are provided then the request will go through that proxy host.</li>
<li> <strong>output</strong> - symbol, one of <strong>#string</strong> | <strong>#stream</strong> | <strong>#bytes</strong> | <strong>#json</strong>. If provided forces <em>data</em> to be reported as instance of String, Stream, Bytes or a value - result of JSON parsing.</li>
<li><b>noCache</b> - true | false, if <i>true</i> then request will not use reading from cache nor writing the request response to cache. </li>
<li><b>trySync</b> - true | false, if <i>true</i> then the engine will try to execute the request immediately (inside the function call). This flag makes sense only for local resources: res:..., this:... and file:... urls.</li></ul>
<p>Sample: <u>sdk/samples/communication/file-download.htm</u> and <u>sdk/samples/communication/http.tis</u></p>
<p>Note, use this to get body of server error response: </p>
<pre>function(err,status) {
var serverErrorMessage = err.data.response;
...
}</pre>
</dd>
</dl>
<h2>Notifications</h2>
<dl><dt>onRequest(rq: <a href="Request.htm">Request</a>)</dt>
<dd>When defined on the view the method will be called before execution of the request. The handler can call <code>rq.fulfill()</code> to provide data for the request;</dd>
<dt>onRequestResponse(rq: <a href="Request.htm">Request</a>)</dt>
<dd>The method will be called after completion (with success or failure) of the request.</dd></dl><h2>View events</h2>
<p>To subscribe to view events use <code>view.on(eventname, handler)</code> method of the view object providing:</p>
<ul>
<li>eventname - string that contains one of names below and optionally arbitrary namespace name in the form "name.namespace";</li>
<li>handler - function that will be called on the event.</li></ul>
<h3 id="event-names">Event names</h3>
<dl>
<dt>"size"</dt>
<dd>Event is generated after dimensions of the view (window) was changed. Use view.box() method to get dimensions.</dd>
<dt>"sizing"</dt>
<dd>Event is generated while user is changing dimensions of resizable window. Function-handler shall have signature: <code>function(sizingParams)</code> where <code>sizingParams</code> is an object of this structure: <code>{ x:integer, y:integer, width:integer, height: integer, side: 1...9 }</code> - proposed dimensions of the window and <code>side</code> is a window side/corner dragged to change window dimension.</dd>
<dt>"move"</dt>
<dd>Event is generated after position of the view (window) was changed. Use view.box() method to get dimensions and positions.</dd>
<dt>"moving"</dt>
<dd>Event is generated while user is moving the window by dragging it by caption. Function-handler shall have signature: <code>function(movingParams)</code> where <code>movingParams</code> is an object of this structure: <code>{ x:integer, y:integer, width:integer, height: integer }</code> - proposed dimensions of the window. Function-handler can change properties of the object discriminating window movements.</dd>
<dt>"statechange"</dt>
<dd>Event is generated when state of the view (maximized, minimized, hidden, shown ) was changed. See View<em>.state</em> property.</dd>
<dt>"resolutionchange"</dt>
<dd>Event is generated when window PPI (pixels per inch scale factor) changes. To get actual pixels-per-inch value use: <br/><code>var ppi = (1in).toFloat(#px);</code> and to get pixels-per-dip: <br/><code>var ppdip = (1dip).toFloat(#px);</code></dd>
<dt>"mediachange"</dt>
<dd>Event is generated when one of media variables changes (including resolution change), for example when number of monitors or color depth changes.</dd>
<dt>"replacement-start"</dt>
<dd>Event is generated when user starts replacing (moving and/or sizing) of the window by UI means (e.g. dragging it by caption).</dd>
<dt>"replacement-end"</dt>
<dd>Event is generated after user completes the window replacement by UI means (e.g. dragging it by caption).</dd>
<dt>"activate"</dt>
<dd>The event is generated when Sciter window gets activated or deactivated. Event handling function may have parameter <em>mode</em> defined that will take one of the following values:
<ul>
<li> <strong>false</strong> - window is deactivated;</li>
<li> <strong>true</strong> - window is activated somehow but not by mouse;</li>
<li> <strong>#by-mouse</strong> - window is activated by mouse click on it.</li></ul></dd>
<dt>"closing"</dt>
<dd>The event is generated as a part of view(window) closing sequence, delivered before view's document gets destroyed.</dd>
<dt>"close"</dt>
<dd>Very last event from view (window), delivered immediately before view (window) is destroyed.</dd>
<dt id="trayicon-click">"trayicon-click"</dt>
<dd>Click on tray icon (if any). Event parameter is an object <code>{ <b>x</b>: integer, <b>y</b>: integer, <b>button</b>: integer }</code> 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. </dd>
</dl>
</body>
</html>