개발/Programming RUST

tauri 개발 따라해보기 7

슈케르 2024. 12. 17. 13:28
반응형

STEP13

지금까지는 README.md 를 찾기 위해서 소스에 직접 하드코딩 값을 입력하고

결과 또한 console에 출력하였지만 이제 UI에 보기 좋게 출력하도록 하기 위한 작업을

진행하기로 하였다. 

아래 그림처럼 출력하는 소스의 commit을 참고하자.

 

https://github.com/kchhero/suker_rust_project/tree/master/fastS

commit : 89cf53d45ba1d2d9aa7bcbfca3f21385927614b0

 

먼저 index.html에 몇가지 추가하자.

 

file명과 확장자에 대한 처리를 위해서 common.js를 추가한다.

그리고 output을 표시하기 위한 multiple select box를 추가한다. textbox로 하려고 하였으나 각각의 결과가

표시될 line을 클릭하여 폴더를 열기 위해서 select 속성을 가진 UI 객체가 필요하였다.

 

styles.css에는 아래처럼 추가..

 

 

 

main.js를 보자

default로 생성되어 존재하던 greet 관련 코드는 모두 제거한다.

 

function init()을 추가하였다.

RUN으로 새로운 검색을 시도할때 UI 초기화를 하기위한 목적이다.

 

async function checkDone() //file search 완료에 대한 flag 처리

async function displayList() //result 화면에 표시하기 위한 처리

async function setDialog() //dialog 버튼 처리

function changeHeaderText() //header text를 동적으로 바꾸려는 목적

 

중요한 부분은 displayList() 이므로 살펴보자.

main.js의 displayList()

뒤에서 설명하겠지만

search.rs 에 구현된 rust_make_vec_result 함수를 호출하여 결과 값을 얻어오는 부분이다.

search_result 라는 vector<string> 변수에는 검색된 결과물이 저장되어있고,

이것을 가져와서 select text에 하나씩 넣어준다.

search.rs의 rust_make_vec_result()

 

 

lib.rs 를 보자.

rust_check_search_done, rust_make_vec_result 등 javascript와 rust를 연결할 수 있도록 handler에 function name을

빼먹지 말고 추가하도록 한다.

 

 

Cargo.toml

rfd와 lazy_static을 추가한다. 설명은 다음에...

반응형