htmlayout学习之瑜伽管理界面设计

本界面html代码来自:

https://blog.csdn.net/QQ282881515/article/details/51525985?locationNum=2&fps=1

这个是博主分享的早期作品, 再此表示下感谢先.

上面的界面是由vc和htmalyout的htm代码实现的,我打算把html的代码放到aar里进行再次整合界面

目前只是实现了界面换肤功能.

mainfrom代码如下:

 import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程12";right=971;bottom=708;border="none")
mainForm.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;

namespace web.layout.behavior.myShowSkin {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {	
		var frmChild = ..mainForm.loadForm("\窗体\skin.aardio");
		frmChild.show();
     }  
}


var wbLayout = web.layout( mainForm );

wbLayout.go("\layout\index.htm");

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

subscribe("改变皮肤",function(flag){
    var ltEleBody = wbLayout.querySelector("body");
	ltEleBody.style["background-image"]="url(images\skin\"++flag++"\skin.png)";
} )


import win.ui.resizeBorder;
win.ui.resizeBorder(mainForm);


mainForm.show() 
win.loopMessage();

皮肤选择界面代码吐下:

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=631;bottom=499;border="none")
winform.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;

namespace web.layout.behavior.myselect {
	onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
		var cmd = ltTarget.skin or ltOwner.skin;
		var wbLayout = ltOwner.getLayout();
        var ltEleBody = wbLayout.querySelector("body");
		ltEleBody.style["background-image"]="url(..\images\skin\"++cmd++"\skin.png)";
		..publish("改变皮肤",cmd) 
     }  
}

var wbLayout = web.layout( winform );
wbLayout.go("\layout\skin\index.htm");

winform.show();
win.loopMessage();
return winform;

完整工程:

链接：https://pan.baidu.com/s/1jJE8DW1GedNBN2DgduqVoQ 

提取码：gfm7 

后面会慢慢增加其他交互功能, 更新帖子会在楼下继续;