sciter.js 嵌入 web.view

By terrorist at 2022-03-22 • 0人收藏 • 1025人看过
import win.ui;
/*DSG{{*/
var winform = win.form(text="external 接口";right=927;bottom=559)
winform.add()
/*}}*/

import web.sciter;
var wbSciter = web.sciter( winform );

import web.view; 
namespace web.sciter.behavior.webview{  
	onAttach = function (scOwner) { 
		var ltCtrl = scOwner.addCtrl();
		wb = ..web.view(ltCtrl) 
	 
		ltCtrl.translateAccelerator = function( msg ){
			var message,vk = msg.message,msg.wParam;
    		if (   (message == 0x100/*_WM_KEYDOWN*/) || (message== 0x101/*_WM_KEYUP*/) ) { 
        		if( ( vk == 0x74/*_VK_F5*/ )
            		|| ( ( vk == 'N'# ) && ( ( ::GetKeyState(0x11/*_VK_CTRL*/) & 0x8000 ) ) ) ) {
            		return true;   
        		} 
    		}  
		}
		
		wb.go("http://www.taobao.com") 
	};
	onDetach = function( scOwner ){
		scOwner.delCtrl();
	};

	onSize = function (ltOwner) { 
		ltOwner.adjustCtrl(); 
	};

}

// doc: \sciter-js-sdk-main\demos\usciter\res

wbSciter.html = /**
<html window-frame="extended" window-resizable>
  <header>
    <window-caption role=window-caption>简单的sciter窗口</window-caption>
    <window-buttons>
      <window-button role="window-minimize"></window-button>
      <window-button role="window-maximize"></window-button>
      <window-button role="window-close"></window-button>
    </window-buttons>
  </header>
  
  <style>
	html { 
  		var(accent-color): window-accent-color; 
  		border: window-frame-width solid transparent; 
	}
	
	html:owns-focus {
  		border-color: morph(color(accent-color), opacity:50%);   
	}
	
	html > header { width:*; /*background-color: color(back-color);*/ }
	
	html > header { width:*; flow:horizontal; height:window-caption-height; margin:0; } 
	
	html > header > window-caption { display:block; line-height:window-caption-height; width:*; padding:0 1em; color:color(text-color); }
	
	html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
		html > header > window-buttons > window-button { 
  		behavior:clickable; 
  		display:block; 
  		height:*; 
  		width:window-button-width; 
  		foreground-size: 11dip;
  		foreground-repeat: no-repeat;
  		foreground-position:50% 50%;
  		stroke:color(text-color);
  		stroke-width:1dip;
  		transition: background-color linear 100ms;
	}
	
	html > header > window-buttons > window-button:hover { 
  		background:rgba(0,0,0,0.25);   
	}
	
	html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
	
	html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }
	
	html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }
	
	html[window-state="maximized"] { border-color:transparent; }
	
	html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
	
	html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }
  
  	.web-view{
  		width:*;
  		height:*;
  		background-color:red;
  		behavior: webview;
  	}
  </style>
    
	<body> 
		<div class="web-view"></div>
	</body>
</html>
**/

winform.enableDpiScaling(false)
winform.show();	
win.loopMessage();


注:经测试改变窗口大小出现背景透明并且穿透桌面,可以注释掉  

scOwner.addCtrl

 函数里面的 autoResize=false 以缓解此问题

6 个回复 | 最后更新于 2022-03-23
2022-03-22   #1

谢谢分享

2022-03-22   #2

回复#2 @jacen :

老大,上面代码, 我测试手动快速拖动边框会出现穿透(win10), 点击最大最小化不会

2022-03-22   #3

把自定义控件改为 richedit ,然后调整大小也是出现穿透桌面的情况,代码如下

import win.ui;
/*DSG{{*/
var winform = win.form(text="external 接口";right=927;bottom=559)
winform.add()
/*}}*/


import web.sciter;
var wbSciter = web.sciter( winform );
 
// doc: \sciter-js-sdk-main\demos\usciter\res
import win.ui.ctrl.richedit;  
wbSciter.html = /**
<html window-frame="extended" window-resizable>
  <header>
    <window-caption role=window-caption>简单的sciter窗口</window-caption>
    <window-buttons>
      <window-button role="window-minimize"></window-button>
      <window-button role="window-maximize"></window-button>
      <window-button role="window-close"></window-button>
    </window-buttons>
  </header>
   
  <style>
    html { 
          var(accent-color): window-accent-color; 
          border: window-frame-width solid transparent; 
    }
     
    html:owns-focus {
          border-color: morph(color(accent-color), opacity:50%);   
    }
     
    html > header { width:*; /*background-color: color(back-color);*/ }
     
    html > header { width:*; flow:horizontal; height:window-caption-height; margin:0; } 
     
    html > header > window-caption { display:block; line-height:window-caption-height; width:*; padding:0 1em; color:color(text-color); }
     
    html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:*; }
        html > header > window-buttons > window-button { 
          behavior:clickable; 
          display:block; 
          height:*; 
          width:window-button-width; 
          foreground-size: 11dip;
          foreground-repeat: no-repeat;
          foreground-position:50% 50%;
          stroke:color(text-color);
          stroke-width:1dip;
          transition: background-color linear 100ms;
    }
     
    html > header > window-buttons > window-button:hover { 
          background:rgba(0,0,0,0.25);   
    }
     
    html > header > window-buttons > window-button[role="window-close"] { stroke-width:1.44dip; foreground-image: url(path:M0 0 L10 10 M10 0 L0 10); }
     
    html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }
     
    html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H10 V10 H0 Z); }
     
    html[window-state="maximized"] { border-color:transparent; }
     
    html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
     
    html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 5 H10 M10 10); }
 	
 	#edit{
 		width: *; 
 		height: *; 
 		border: 2px solid red;
 	}

  </style>
     
    <body> 
    	<widget cls="richedit" data-table="{ text='控件文本';multiline=true }" id="edit" style="font-size:9pt;"></widget>
    </body>
</html>
**/
 
winform.enableDpiScaling(false)
winform.show(); 
win.loopMessage();


用 sciter.js 里面的 \sciter-js-sdk-main\bin\windows\x32\usciter.exe 

加载原生控件的例子  \sciter-js-sdk-main\samples.sciter\native-behaviors\native-textarea.htm  并且调整窗口大小并没有发现穿透桌面的情况。


usciter.exe 的源码在 \sciter-js-sdk-main\demos\usciter

2022-03-22   #4

我觉得 winform.disableDragFullWindow = true; 最好用, 很多软件都这么做的.松手时候变换大小.

2022-03-22   #5

回复#6 @terrorist :

我发现一个办法, 不要用winfrom , 而是把sciter 放置到一个static或者picturebox静态控件里, 这样就没这个问题了. 完美解决

import web.sciter;
var wbSciter = web.sciter( winform.static);


2022-03-23   #6

回复#11 @jacen :

还真的是, 精简后的代码, 运行无比丝滑

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...