모바일 개발 프로젝트에서 사용되는 소프트웨어 설계 템플릿

소프트웨어 설계 템플릿 모바일 앱 개발 프로세스를 효율화하다 반복적인 구성 요소의 구현을 제거함으로써 효율성을 높일 수 있습니다. 또한, 디자인 템플릿을 사용하면 템플릿 자체의 변경 사항이 전체 프로젝트에 적용될 수 있으므로, 수정 및 업그레이드 작업을 간소화할 수 있습니다.

MobileTogether는 크로스 플랫폼 모바일 앱에서 사용자 인터페이스 요소를 디자인할 때 사용할 수 있는 템플릿을 제공하여 디자인 재사용을 용이하게 하고, 다양한 앱 요구사항에 맞춰 효율적이고 유연한 옵션을 쉽게 구축할 수 있도록 지원합니다.

MobileTogether의 컨트롤 템플릿은 개발자가 사용자 인터페이스 요소를 정의하고 그룹화하여 재사용성을 높일 수 있도록 하는 디자인 구성 요소입니다. 컨트롤 템플릿은 매개변수를 지원하며, 각 템플릿은 런타임 시 매개변수 값에 따라 사용자 정의할 수 있습니다.

예시를 하나 살펴봅시다.

MobileTogether Designer에는 컨트롤 템플릿을 보여주는 다양한 예제 프로젝트가 포함되어 있습니다. 여기서는 "Cities4-DynamicSelection" 앱을 예시로 설명하겠습니다. 아래 스크린샷은 안드로이드 폰에서 실행 중인 앱의 일부 화면을 보여줍니다

이 앱은 계층적 데이터를 표시할 때 흔히 발생하는 문제를 보여줍니다. 궁극적으로 이 앱은 사용자가 도시를 선택하도록 유도합니다. 효율성을 높이기 위해, 도시 목록 전체가 대륙별로 구성되어 있으며, 콤보 박스 형태로 제공됩니다. 그런 다음, 선택된 대륙 내의 국가별로 필터링되며, 라디오 버튼 세트로 표시됩니다. 마지막으로, 해당 국가 내의 도시들이 또 다른 라디오 버튼 세트로 제공됩니다.

가로 방향으로 설정하면 라디오 버튼이 가로로 나열됩니다 (위 그림 참조). 반면, 세로 방향으로 설정하면 라디오 버튼이 세로로 나열됩니다

만약 사용자 선택의 각 조합에 대한 라디오 버튼 컨트롤을 수동으로 만들어야 한다면, 이 앱을 개발하는 것은 매우 복잡한 작업이 될 것입니다. 또한, 국가 및 도시 이름은 XML 소스 파일에 포함되어 있으며, 우리는 소스 파일을 수정하는 것만으로 앱을 쉽게 업데이트할 수 있도록 하고 싶습니다.

MobileTogether 디자이너 앱을 실행하면, 메인 디자인 창에서 페이지 레이아웃을 확인할 수 있습니다.

페이지 상단에는 대륙 선택을 위한 콤보 박스 컨트롤이 있습니다. 그 아래에는 두 개의 테이블이 있으며, 각 테이블에는 임시 표시 컨트롤이 포함되어 있습니다. 런타임 시, 첫 번째 테이블과 임시 표시 컨트롤은 국가 목록을 생성하고, 두 번째 테이블은 도시 목록을 생성합니다.

MobileTogether Designer에는 모든 앱의 페이지, 하위 페이지 및 컨트롤 템플릿을 트리 구조로 보여주는 도움말 창이 포함되어 있습니다. 이 예시에서 각 템플릿은 두 개의 매개변수를 받으며, 실행 중에 플레이스홀더가 해당 매개변수를 전달합니다.

제어 템플릿 중 하나를 선택하면, 해당 템플릿의 구성 요소들이 주요 디자인 영역에 표시됩니다.

세로 버전의 경우, 템플릿은 동적으로 행이 추가되는 테이블을 사용하고, 가로 버전의 경우 동적으로 열이 추가되는 테이블을 사용합니다. 어떤 경우든, 템플릿에서 생성된 테이블은 상위 페이지에 정의된 부모 테이블의 단일 셀 안에 중첩됩니다. 이렇게 하면 라디오 버튼이 있는 모든 열에서 정렬 확인란이 수직으로 중앙에 배치되며, 행의 개수에 관계없이 일관성을 유지합니다.

플레이스홀더는 페이지 상에서 컨트롤 템플릿의 위치를 정의합니다. 플레이스홀더에 대한 "스타일 및 속성" 도우미 창은 어떤 컨트롤 템플릿이 사용되는지 확인하고, 필요한 매개변수 값을 제공합니다. 국가 목록을 위한 플레이스홀더는 해당 속성들을 XQuery 표현식으로 정의합니다

심지어 표현의 일부만 보여줘도, 페이지에 배치된 특정 컨트롤 템플릿은 런타임 시 장치의 방향에 따라 결정된다는 것을 알 수 있습니다.

MobileTogether 시뮬레이터를 사용하면 소프트웨어 디자인 템플릿을 실행 중에 검토하고, 플레이스홀더와 컨트롤 템플릿이 실제로 어떻게 작동하는지 확인할 수 있습니다. 다음 스크린샷에서는 아이폰을 가로 모드로 설정하여 미리보기 장치로 사용하고 있습니다. 이 앱은 특정 장치나 운영체제에 종속적인 기능이 없기 때문에, 정확한 미리보기 장치는 중요하지 않습니다.

앱에서는 대륙, 국가, 도시 선택에 대한 사용자 정의 값이 미리 설정되어 있지 않으므로, 실행을 시작하면 페이지 상단과 대륙 선택을 위한 빈 콤보 박스만 표시됩니다

"메시지" 창에는 대륙을 선택할 때 처리된 작업 목록이 표시되며, 아래에 녹색으로 강조 표시되어 있습니다

시뮬레이션 창에서는 이제 유럽 국가 목록이 제대로 표시되지만, 도시 이름은 목록에 나타나지 않습니다

현재 앱은 사용자가 국가를 선택할 때까지 기다리고 있습니다. 진행 대신, 시뮬레이터 내에서 XQuery 편집기를 열고, 컨트롤 템플릿에 전달된 매개변수를 평가할 수 있습니다. 스타일 및 속성 창에서 "템플릿 매개변수" 표현식을 복사하여 XQuery 창에 붙여넣기만 하면 됩니다. 이 표현식은 유럽 국가 목록과 정렬 상태를 포함하는 배열로 평가됩니다

하지만 왜 앱이 시뮬레이션 페이지에 도시 목록을 전혀 표시하지 않을까요? 두 번째 플레이스홀더에서 전달되는 도시 관련 매개변수 표현식을 확인해 볼 수 있습니다

해당 함수는 도시 이름 목록이 비어 있는 상태로 전달되었습니다. 도시 이름 선택 버튼이 동적으로 생성되는 열을 가진 테이블 안에 포함되어 있기 때문에, 열이 하나도 표시되지 않았습니다.

정렬 방식을 선택할 수 있는 체크 박스 컨트롤은 동적 열에 위치하지 않지만, 현재는 표시되지 않습니다. 체크 박스의 표시 여부 속성은 "$PERSISTENT/Root/@Country != ''"로 정의되어 있으며, 이는 사용자가 도시를 선택하기 전까지는 체크 박스와 해당 텍스트 레이블이 보이지 않음을 의미합니다.

요약하자면, Cities4-DynamicSelection 예제는 여러 컨트롤을 결합하여 맞춤형 소프트웨어 디자인 템플릿을 만들고, 이를 모바일 앱 디자인에 적용하여 사용자 선택이나 다른 외부 조건에 따라 정확한 결과를 제공하는 우아한 솔루션을 구축하는 방법을 보여줍니다. 데모 앱과 소스 데이터 파일은 MobileTogether Designer에 포함되어 있으므로, 위에 설명된 단계를 따라하거나, 직접 탐구하여 더 많은 것을 경험해 볼 수 있습니다.

MobileTogether Designer는 무료로 사용할 수 있는 도구로, 다음 기능을 제공합니다 단일 디자인을 기반으로 다양한 운영체제에서 실행되는 모바일 앱을 빠르게 개발할 수 있습니다. 시계 영상 시연 자료 MobileTogether 사용자들이 매일 어떤 종류의 앱을 개발하는지 확인해 보세요 설치 프로그램을 다운로드하세요 자, 소프트웨어 디자인 템플릿을 직접 활용해 보세요!