EXBUILDER - 로딩화면 구현

권무준·2024년 5월 29일

EXBuilder

목록 보기
2/9
  1. 로딩 화면 만들고 visiable = false 기본 값

  2. 데이터 받는 코드에 시작 시 true로 변경

  3. callback 함수에서 다시 false로 변경

    				app,서브미션 객체, callback 함수
    util.Submit.send(app, "selectCommonCodeList",function(e) {
    	e => 성공 시 true 실패 시 false 값
        if(e) {
    		
    	}
    });
    
    
    
    예상 코드
    app,서브미션 객체, callback 함수
    util.Submit.send(app, "selectCommonCodeList",function(e) {
    	e => 성공 시 true 실패 시 false 값
        if(e) {
    		visiable = true
           	search();
            visiable = false
    	}
    });
    
    
    
    Model
    요청 데이터
    * payload dataset만 가지고 있다.
    modified => 데이터셋의 수정된 행만을 서버로 전달한다.
    all => 모든 값을 가져간다.
    
    응답 데이터
    add
    false => 기존 데이터를 지우고 서버에서 가져온 데이터로 대체하겠다
    true => 기존 데이터를 냅두고 서버에서 가지고 온 데이터를 어펜드식     으로 추가하겠다.
    dataset
    
    
    datamap
    
    
    app.lookup("mse1").visible = true;

    promise

    function resultVal() {
    console.log("resultVal 출력");

    }

function search123() {
return new Promise(function(resolve, reject) {
console.log("search123 출력");
// search123 함수의 비동기 작업을 수행하고, 작업이 완료되면 resolve를 호출하여 Promise를 이행합니다.
// 예를 들어, 서버로부터 데이터를 가져오는 등의 작업을 수행할 수 있습니다.
resolve();
});
}

util.Submit.send(app, "selectList", function(e) {
if (e) {
// search123 함수를 호출하고 Promise가 이행되면 resultVal 함수를 호출합니다.
search123().then(function() {
resultVal();
});
}
});

callback

function resultVal() {
console.log("resultVal 출력");
}

function search123(callback) {
console.log("search123 출력");
// search123 함수의 비동기 작업을 수행하고, 작업이 완료된 후 콜백 함수를 호출합니다.
// 여기서는 간단히 setTimeout을 사용하여 비동기 작업을 대체하였습니다.
setTimeout(function() {
// 비동기 작업이 완료되면 콜백 함수를 호출합니다.
callback();
}, 1000); // 예시로 1초 후에 콜백을 호출하도록 설정
}

util.Submit.send(app, "selectList", function(e) {
if (e) {
// search123 함수를 호출하고, 비동기 작업이 완료된 후에 resultVal 함수를 실행하는 콜백 함수를 전달합니다.
search123(function() {
resultVal();
});
}
});

이미지 컴포넌트

alt => 이미지가 나오지 않을 경우 나올 문자
src => 이미지 경로
경로 현재 실행되고 있는 파일 폴더부터 시작

../img/abc.gif

이미지 컴포넌트 동적으로 그리기

//컨테이너 객체
var containerRect = container.getActualRect();
//컨테이너 width 구하기
var containerWidth = containerRect.width;
//컨테이너 height 구하기
var containerHeight = containerRect.height;

//이미지 객체 생성
var image_1 = new cpr.controls.Image("img1");
//이미지 경로
image_1.src = "img/tiger.PNG";
//이미지 안나올 경우 나올 텍스트
image_1.alt = "tomatoSystem since 2000";

//이미지 크기 생성
container.addChild(image_1, {
width: "50%",
height: "50%"
});

//컴퍼넌트 로드 후 실행되는 코드(이미지 중앙 위치)
image_1.addEventListenerOnce("load", function(e) {
	var imgRect = image_1.getActualRect();
	var imgWidth = imgRect.width;
	var imgHeight = imgRect.height;
	var left = (containerWidth - imgWidth) / 2 + "px";
	var top = (containerHeight - imgHeight) / 2 + "px";
	container.addChild(image_1, {
		top: "top",
		left: left
	});
});

//이벤트 감지 컴퍼넌트 모두 로드 후 실행
component.addEventListenerOnce("load", function(e) {
});

//Dom 모두 생성 후 실행되는 함수
cpr.core.DeferredCall.request(function() {
});


	// 이미지 소스 설정
image_1.src = "img/tiger.PNG";

// 컨테이너에 이미지 컨트롤 추가
app.getContainer().addChild(image_1, {
	width: "50%",
	height: "50%"
});
profile
신입 개발자 취업하기

0개의 댓글