넥사크로 개발 테마 라이트모드, 다크모드 변경하는 방법

테마 라이트모드, 다크모드 변경하는 방법

https://demo.tobesoft.com/?menu_id=home
데모사이트 우측 상단에서 테마 변경 아이콘을 통해 다크모드와 라이트모드로 테마를 변경할 수 있습니다.

데모사이트와 같이 해당 기능은 다음과 같은 방법으로 구현할 수 있습니다.

전체 설명

넥사크로에서는 구동이 된 상태에서 동적으로 themeid로 전체 적용 테마를 변경할 수 없습니다.
테마 스타일을 변경하기 위해서는 XCSSResource에 라이트모드의 xcss와 다크모드의 xcss를 각각 생성한 후,
폼의 loadStyle 메소드를 이용하여 CSS파일을 로드하여 변경해야 합니다.

폼에서 테마 모드 정보를 Application.xadl에 넘겨주고,
Application_desktop.xadl에서 모든 Frame, Form에 일괄적으로 loadStyle이 적용되도록 사용자 함수를 생성해 줍니다.
사용자가 지정한 라이트모드, 다크모드는 PrivateProfile 개인화하여 보여줄 수 있도록 합니다.

top.xfdl

this.btnThemeChange_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	const app = nexacro.getApplication();
	
	let themeMode = app.themeMode=="Light"?"Dark":"Light";
	
	app.changeTheme(themeMode);
};

top.xfdl은 헤더 부분의 폼입니다. Theme 변경 버튼을 클릭하는 부분입니다.
버튼을 클릭하면 Application_desktop.xadl에 정의된 사용자 함수가 호출됩니다.

Application_desktop.xadl

/*
 *	테마변경
 */ 
this.changeTheme = function(themeMode)
{
	this.themeMode = themeMode;
	
	nexacro.loadStyle("xcssrc::Demo_"+themeMode+".xcss");

	let root = this.mainframe.WorkFrame;			
	root.formurl = "";
	root.formurl = "frame::root.xfdl";		
};

Application_desktop.xadl에서 WorkFrrame에 전체적으로 loadStyle이 적용되도록 합니다.

프레임 구조가 프로젝트마다 상이하기 때문에 적용 범위가 다르기 때문에 이점을 유의하여야 하며 loadStyle을 전체적으로 적용하는 다른 예시 코드는 아래와 같습니다.

	var objFrameSet = application.mainframe.VFrameSet.HFrameSet.FrameSet;
	
	for(var i=0; i<objFrameSet.all.length; i++)
	{
		objFrameSet.all[i].form.loadStyle("CSS::Style1.css");
	}	

PrivateProfile

대표적으로 다국어 설정, 아이디 저장, 테마 설정은 개인화 정보를 사용하는 기능입니다.

• 개인화 데이터는 어플리케이션이 구동될 때 설정한 Key 값 별로 따로 관리되며 "nexacro.xml" 파일에 저장됩니다.
• 웹브라우저 환경일 경우 브라우저의 Local Storage 영역에 개인화 데이터를 저장합니다.

nexacro.getPrivateProfile, nexacro.setPrivateProfile 메소드를 사용하여 개인화 데이터를 저장하고 불러옵니다.