방법: 코드를 사용하여 HTML 화면 수정

LightSwitch 응용 프로그램의 HTML 화면을 디자인할 때는 디자이너 및 도구 창이 주로 사용되지만 이러한 화면을 특정 방식으로 수정하기 위해서도 코드를 사용할 수 있습니다. LightSwitch JavaScript API를 사용하여 다음과 같은 데이터 관련 작업을 수행할 수 있습니다.

• Set a default value on a data entry screen

• Format a number

• Format a Date

• Change the background color and font color for list items

• Mark fields as required

• Validate data on a screen

• Delete an item from a screen or a popup

• Create a custom modal picker by using a popup

• Center a popup on a screen

• Show a message box, and respond to a user selection

• Set the screen title dynamically

• Change the title of an application

• Enable or disable a button

• Customize the Save command to save to multiple data sources

• Return focus to a selected item in a list

• Use a JQuery Mobile control

• Customize a FlipSwitch control

• Implement a CheckBox control

• Override the appearance of a custom control

• Get the location of a device

• Display a location on a map

• Show a numeric keyboard on a device

• Adjust the UI for different form factors

• Render HTML data directly on a screen

• Display a title on a popup

• Copy information to a new screen

• Change screen navigation when saving

• Disable bookmarking

데이터 입력 화면에서 기본값 설정

데이터 입력 화면을 만들 때는 일부 필드에 기본값을 채워야 할 수 있습니다. 예를 들어 날짜 필드의 기본값을 현재 날짜로 설정할 수 있습니다. 엔터티를 대상으로 하는 세부 정보 추가/편집 화면에서 기본값을 설정하려면 해당 엔터티의 created 메서드에 코드를 작성합니다.

기본값을 설정하려면

1. 엔터티 디자이너의 원근감 모음에서 HTMLClient 탭을 선택합니다.

2. 코드 작성 목록에서 작성됨을 선택합니다.

3. 코드 편집기에서 created 메서드에 코드를 추가하여 초기 값을 설정합니다.

   entity.OrderDate = new Date();
   entity.OrderStatus = 'New';
   

   엔터티를 위해 만든 모든 세부 정보 추가/편집 화면에는 이러한 기본값이 자동으로 표시됩니다.

숫자 서식 지정

일부 모바일 장치의 화면 공간은 제한되어 있으므로 숫자를 적은 정밀도로 표시할 수 있습니다. 다음 예제에서는 두 개의 소수 자릿수만 표시하도록 Double로 저장된 숫자의 형식을 지정하는 방법을 보여줍니다.

번호의 서식을 지정하려면

1. 화면 디자이너에서 서식을 지정할 숫자에 대한 노드를 선택합니다.

2. 도구 모음에서 코드 작성 목록을 연 다음 postRender 메서드를 선택합니다.

3. 코드 편집기에서 postRender 메서드에 다음 코드를 추가합니다.

   contentItem.dataBind("value", function (value) {
           if (value) {
               $(element).text(value.toFixed(2));
           }
       });
   

날짜 서식 지정

날짜의 표시 서식을 변경하려면 Moment.js와 같은 JavaScript 라이브러리를 사용해야 합니다. 프로젝트에 라이브러리를 추가한 후 default.htm 파일에 대한 참조를 추가하고 렌더링 또는 postRender 메서드에 코드를 작성합니다.

라이브러리를 추가하려면

1. 솔루션 탐색기에서 HTMLClient 노드의 바로 가기 메뉴를 열고 NuGet 패키지 관리를 선택합니다.

2. NuGet 패키지 관리 대화 상자에서 온라인 노드를 선택합니다.

3. 온라인 검색 텍스트 상자에 moment.js를 입력합니다.

4. 설치 단추를 선택하여 Moment.js 라이브러리를 설치한 다음 닫기 단추를 선택합니다.

참조를 추가하려면

1. 솔루션 탐색기에서 HTMLClient 노드를 확장한 후 default.htm 파일을 엽니다.

2. 코드 편집기에서 마지막 </script> 태그 뒤에 다음 스크립트 태그를 추가합니다.

   <script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
   

날짜 서식을 지정하려면

1. 솔루션 탐색기에서 날짜 서식을 지정하고 싶은 화면을 엽니다.

2. 화면 디자이너에서 날짜 서식을 지정하고 싶은 노드를 선택합니다.

3. 도구 모음에서 코드 작성 목록을 연 다음 postRender 메서드를 선택합니다.

4. 코드 편집기에서 postRender 메서드에 다음 코드를 추가합니다.

   contentItem.dataBind("value", function (value) {
           if (value) {
               $(element).text(moment(value).format("DD/MM/YYYY"));
           }
       });
   

목록 항목의 배경색 및 글꼴 색 변경

ListView 컨트롤의 모양은 CSS 스타일시트에 의해 결정되며 스타일은 매우 복잡합니다. CSS를 편집하는 대신 postRender 메서드를 사용하여 코드의 색상을 변경할 수 있습니다. ListView 자체의 스타일은 변경할 수 없지만 부모인 RowTemplate을 통해 각 목록 항목의 스타일을 변경할 수 있습니다. 각 목록 항목에는 background-image가 정의되어 있으므로 새로운 배경색을 적용하기 전에 background-image를 지정해야 합니다.

색을 변경하려면

1. 화면 디자이너에서 목록에 대한 행 레이아웃(또는 열 레이아웃) 노드를 선택합니다.

2. 속성 창에서 PostRender 코드 편집 링크를 선택합니다.

3. 코드 편집기에서 postRender 메서드에 다음 코드를 추가합니다.

   $(element).parent().css({
               "background-color": "green",
               "background-image": "none",
               color: "yellow"
           });
   

필요에 따라 필드 표시

한 화면에 필수 필드를 표시하기 위한 일반적인 규칙은 다른 글꼴 색을 사용하고 필드 이름 옆에 별표를 표시하는 것과 같은 시각적 실마리를 제공하는 것입니다.

필수 필드를 강조 표시하려면

1. 화면 디자이너에서 필수로 표시할 필드를 선택합니다.

2. 속성 창에서 PostRender 코드 편집 링크를 선택합니다.

3. 코드 편집기에서 postRender 메서드에 다음 코드를 추가합니다.

   $(element).parent().css('color', 'red'); $(element).parent().find("label")[0].innerHTML += " *"
   

화면에서 데이터 유효성 검사

사용자 지정 유효성 검사 논리를 제공함으로써 유효한 데이터만 데이터 소스에 저장되도록 할 수 있습니다. 사용자가 추가/편집 화면의 저장 단추를 누르면 호출되는 beforeApplyChanges 메서드에 유효성 검사 코드를 추가할 수 있습니다. 다음 예제에서는 문자가 ContactName 필드에 해당 필터에서 허용되지 않는 느낌표를 입력하는 사용자에게 메시지를 통보합니다.

데이터의 유효성을 검사하려면

1. 화면 디자이너의 코드 작성 목록에서 beforeApplyChanges를 선택합니다.

2. 코드 편집기에서 다음 코드를 추가하고 Contact를 엔터티 이름으로, ContactName를 유효성을 검사하려는 문자열 필드의 이름으로 바꿉니다.

   if (screen.Contact.ContactName.indexOf('!') != -1) {
   
           screen.findContentItem("ContactName").validationResults = [
   
           new msls.ValidationResult(
   
           screen.Contact.details.properties.contactName,
   
           "Contact Name cannot contain the character '!'.")
   
           ];
   
           return false;
   
       }
   

화면 또는 팝업에서 항목 삭제

LightSwitch는 HTML 화면에서 항목을 추가하고 편집하는 기본 제공 메서드를 제공하지만 삭제는 불가능합니다. 화면 또는 팝업에서 항목을 삭제하여 사용자 고유의 메서드를 쉽게 만들 수 있습니다.

항목을 삭제하려면

1. 화면 디자이너의 도구 모음에서 데이터 항목 추가 단추를 선택합니다.

2. 데이터 항목 추가 대화 상자에서 메서드 옵션 단추를 선택한 다음 메서드 이름을 입력합니다.

3. 메서드의 바로 가기 메뉴를 연 후 Execute 코드 편집을 선택합니다.

4. 코드 편집기에서 다음 코드를 추가하고 myScreen을 화면 이름으로, customers의 두 인스턴스를 엔터티 이름으로 바꿉니다.

   myapp.MyScreen.DeleteSelected_execute = function (screen) {
       screen.getCustomers().then(function (customers) {
           customers.deleteSelected();
       });
   };
   

   메서드는 엔터티를 표시하는 모든 화면 또는 팝업의 단추 추가 대화 상자에서 사용할 수 있습니다.

팝업을 사용하여 사용자 지정 모달 선택기 만들기

모달 대화 상자를 표시하고 화면 쿼리 및 팝업을 추가하면 사용자가 목록에서 항목을 손쉽게 선택하도록 할 수 있습니다. 이 예제에서는 OrderDetails를 기반으로 하는 AddOrders라는 이름의 Add/Edit Details, Products라는 이름의 두 번째 관련 엔터티가 있습니다.

모달 선택기를 만들려면

1. 화면 디자이너의 도구 모음에서 데이터 항목 추가 단추를 선택합니다.

2. 데이터 항목 추가 대화 상자에서 쿼리 옵션 단추를 선택한 다음 목록에서 제품을 선택합니다.

   제품 쿼리는 화면 디자이너의 왼쪽 창에 나타납니다.

3. 콘텐츠 트리에서 팝업 노드의 바로 가기 메뉴를 열고 팝업 추가를 선택합니다.

4. 추가 목록에서 제품을 선택합니다.

5. 도구 모음의 코드 작성 목록에서 작성됨을 선택합니다.

6. 코드 편집기에서 다음 코드를 created 메서드에 추가합니다.

   myapp.AddOrders.created = function (screen) {
           screen.findContentItem("Products").dataBind("value.selectedItem", function (newValue) {
               if (newValue !== undefined && newValue !== null) {
                   //Whenever selectedItem for Products changes, update the Product value on the main page 
                   screen.Order_Detail.setProduct(screen.Products.selectedItem);
   
                   //Close popup, if one is open. 
                   screen.closePopup();
               }
           });
       };
   

7. 화면 디자이너에서 명령 모음 노드의 바로 가기 메뉴를 연 후 단추 추가를 선택합니다.

8. 단추 추가 대화 상자에서 확인 단추를 선택합니다.

9. (선택 사항) 필드를 지우려면 다음 코드와 함께 화면 메서드를 추가합니다.

   myapp.AddOrders.Clear_execute = function (screen) {
       //Clear the selection for Product. (Useful for 0...1 to many relationships.) 
       screen.Order_Detail.setProduct(undefined);
   };
   

화면 가운데에 팝업 표시

팝업의 기본 위치는 화면 맨 아래이며, 더 넓은 화면은 오른쪽 하단에 나타납니다. 큰 화면에서는 팝업창을 인식하기 어려울 수 있습니다. 다음 예제에서는 더 눈에 띄도록 팝업을 화면 중앙에 배치합니다.

팝업을 가운데에 표시하려면

1. 화면 디자이너에서 팝업을 시작하는 단추 노드를 선택합니다.

2. 속성 창의 작업에서 탭 링크를 선택합니다.

3. 누르기 작업 편집 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택하고 이름을 지정한 후 확인 단추를 선택합니다.

4. 속성 창에서 Execute 코드 편집 링크를 선택합니다.

5. 코드 편집기에서 execute 메서드에 다음 코드를 추가합니다.

   // Note:If using JQuery Mobile 1.3 (or higher) use
       // "popupcreate" rather than "popupbeforeposition"
       $(window).one("popupbeforeposition", function (e) {
           $(e.target).popup({
               positionTo: "window"
           });
       });
   
       // Show the Popup
       screen.showPopup("Popup1");
   

메시지 상자를 표시하고 사용자 선택에 응답

메시지 상자를 표시함으로써 사용자에게 선택 항목을 제공한 다음 그 선택에 따라 작업을 수행할 수 있습니다. 다음 예제에서는 예/아니요/취소 메시지 상자 안의 각 선택 사항에 따라 다른 메시지를 표시합니다. 고유의 코드에서 사용자 선택에 따라 여러 화면을 표시하는 등 자신의 작업을 수행할 코드로 경고 코드를 대체할 수 있습니다.

메시지 상자를 표시하려면

1. 화면 디자이너에서 명령 모음 노드의 바로 가기 메뉴를 연 후 단추 추가를 선택합니다.

2. 단추 추가 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택하고, 메서드 이름을 ShowMessageBox로 지정합니다.

3. 코드 편집기에서 ShowMessageBox_execute 메서드에 다음 코드를 추가합니다.

   msls.showMessageBox("Please choose the appropriate button", {
   
           title: "This is a message box",
   
           buttons: msls.MessageBoxButtons.yesNoCancel
   
       }).then(function (result) {
   
           if (result === msls.MessageBoxResult.yes) {
   
               alert("Yes button was chosen");
   
           }
   
           else if (result === msls.MessageBoxResult.no) {
   
               alert("No button was chosen");
   
           }
   
           else if (result === msls.MessageBoxResult.cancel) {
   
               alert("Please choose either Yes or No");
   
           }
   
       });
   

동적으로 화면 제목 설정

현재 선택된 고객의 이름과 같이 디자인 타임에 사용할 수 없는 정보에 따라 화면 제목을 변경할 수 있습니다. 다음 코드 예제에서는 이름이 고객인 엔터티를 기준으로 하는 이름이 ViewCustomer인 화면의 화면 제목을 동적으로 표시합니다.

화면 제목을 설정하려면

1. 화면 디자이너의 코드 작성 목록에서 만든 날짜를 선택합니다.

2. 코드 편집기에서 다음 코드를 created 메서드에 추가합니다.

   myapp.ViewCustomer.created = function (screen) {
   
   var name;
   
       name = screen.Customer.CompanyName;
       screen.details.displayName = "Information about: " + name;
   };
   

응용 프로그램 제목 변경

기본적으로 프로젝트의 이름은 시작 화면과 제목 표시줄 또는 탐색기 탭에 응용 프로그램 제목으로 나타납니다. 프로젝트의 default.htm 파일을 수정하여 다른 제목을 지정할 수 있습니다.

제목을 변경하려면

1. 솔루션 탐색기의 HTMLClient 노드에서 default.htm 파일에 대한 바로 가기 메뉴를 연 후 열기를 선택합니다.

2. 코드 편집기에서 <title> 요소를 찾고 기존 값을 제목으로 바꿉니다.

   이 문자열은 제목 표시줄 또는 브라우저 탭에 표시됩니다.

3. <div> 요소를 찾고, 기존 값을 제목으로 바꿉니다.

   이 문자열이 시작 화면에 나타납니다.

단추를 사용하거나 사용하지 않도록 설정

특정 조건에 따라 자주 단추를 사용 또는 사용하지 않도록 설정해야 합니다. 예를 들어, 특정 사용자에 대한 화면 시작 단추를 비활성화하거나 값이 필요한 경우에만 추가 단추를 활성화할 수 있습니다. 첫 번째 예제에서는 코드에서 IsEnabled 속성을 설정하여 단추를 비활성화하는 방법을 보여줍니다.

두 번째 예제에서는 CanExecute 방법을 기반으로 하는 2 패스 접근을 보여줍니다. 데이터는 LightSwitch에서 비동기적으로 로드되지만, 단추의 CanExecute 메서드는 동기적입니다. 따라서 1 패스로 로드된 데이터에 따라 단추를 활성화할 수 없지만 IsLoaded 속성을 사용하여 2 패스 메서드를 구현할 수는 있습니다.

IsEnabled 속성을 사용해서 단추를 사용하지 않도록 설정하려면

1. 화면 디자이너의 도구 모음에서 데이터 항목 추가 단추를 선택합니다.

2. 데이터 항목 추가 대화 상자에서 메서드 옵션 단추를 선택한 다음 메서드 이름을 입력합니다.

3. 메서드의 바로 가기 메뉴를 연 후 Execute 코드 편집을 선택합니다.

4. 코드 편집기에서 MyButton을 단추 이름으로 바꾸는 다음 코드를 추가합니다.

   screen.findContentItem("MyButton").isEnabled = false;
   

   단추를 활성화하거나 비활성화할 때마다 항상 코드에서 메서드를 호출할 수 있습니다.

   팁

   단추를 숨기거나 표시하려면 IsVisible 속성을 사용합니다.

IsLoaded 속성을 사용해서 단추를 사용하도록 설정하려면

1. 화면 디자이너의 도구 모음에서 데이터 항목 추가 단추를 선택합니다.

2. 데이터 항목 추가 대화 상자에서 메서드 옵션 단추를 선택한 다음 메서드 이름을 입력합니다.

3. 메서드의 바로 가기 메뉴를 연 후 CanExecute 코드 편집을 선택합니다.

4. 코드 편집기에서 다음 코드를 추가하고 Orders를 엔터티 이름으로, Photo를 엔터티 속성 이름으로, GetPhoto를 실행하려는 함수의 이름으로 바꿉니다.

   var result = false; 
   if (!screen.Order.details.properties.Photo.isLoaded) { 
   screen.Order.getPhoto(); 
   } else { 
   screen.Order.getPhoto().then(function (ph) { 
   result = !ph; 
   }); 
   } 
   return result; 
   

   CanExecute 메서드는 화면이 만들어질 때 호출됩니다. 첫 번째 패스에서 코드는 Photo 속성이 이미 로드되었는지 여부를 확인합니다. 열려 있지 않다면 코드가 데이터를 로드하고 함수가 종료됩니다. 데이터가 로드된 후에는 CanExecute 메서드가 다시 호출되고 else 분기가 실행됩니다. 이번에는 데이터가 이미 로드되어 있기 때문에 유효한 결과가 보장되는 GetPhoto 함수가 동기적으로 실행됩니다.

여러 데이터 소스로 저장하도록 저장 명령 사용자 지정

기본 제공 저장 명령을 사용자 지정하기 위해 WinJs Promise 개체를 사용하여 한 화면에서 여러 데이터 소스로 업데이트 내용을 저장할 수 있습니다.

여러 데이터 원본에 저장하려면

1. 화면 디자이너의 도구 모음에서 코드 작성 단추를 선택합니다.

2. 코드 편집기에서 다음 코드를 onsavechanges 메서드에 추가하고 NorthwindData 및 ApplicationData를 데이터 소스 이름으로 바꿉니다.

   myapp.onsavechanges = function (e) {
   
       var promises = [];
   
       promises.push(myapp.activeDataWorkspace.NorthwindData.saveChanges());
   
       promises.push(myapp.activeDataWorkspace.ApplicationData.saveChanges());
   
       e.detail.promise = WinJS.Promise.join(promises);
   
   };
   

   더 많은 데이터 원본이 필요한 경우 promises.push… 줄을 각 소스에 추가할 수 있습니다.

목록에서 선택한 항목으로 포커스를 돌림

목록 항목에서 보기 또는 편집 화면으로 탐색한 후 기본 동작은 목록에서 첫 번째 항목으로 포커스를 돌리는 것입니다. 특히 스크롤이 필요한 큰 목록에서 화면을 시작한 목록 항목으로 포커스를 돌리는 것이 바람직한 경우가 종종 있습니다. Custom Method에 바인딩하고 JQuery scrollTop 메서드를 사용하여 이전에 선택한 목록 항목으로 돌아가도록 동작을 수정할 수 있습니다.

포커스를 설정하려면

1. 화면 디자이너에서 동작을 구현할 목록 노드를 선택합니다.

2. 속성 창의 작업에서 탭 링크를 선택합니다.

3. 누르기 작업 편집 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택한 후 확인 단추를 선택합니다.

4. 속성 창에서 Execute 코드 편집 링크를 선택합니다.

5. 코드 편집기에서 Tap_execute 메서드에 다음 코드를 추가합니다.

   var scrollTopPosition = $(window).scrollTop();
       myapp.showViewOrder(screen.Orders.selectedItem, {
           afterClosed: function () {
               $(window).scrollTop(scrollTopPosition);
           }
       });
   

JQuery Mobile 컨트롤 사용

화면 디자이너는 데이터 표시를 위해 제한된 컨트롤 집합을 제공하지만 더 풍부한 UI 경험을 위해 JQuery Mobile 컨트롤을 손쉽게 추가할 수 있습니다. JQuery Mobile Foundation 라이브러리에는 슬라이더, 라디오 단추, 확인란 등을 비롯한 모바일 장치에 최적화된 다양한 컨트롤이 포함되어 있습니다. JQuery Mobile 프레임워크를 참조하세요.

다음 예제에서는 텍스트 상자 컨트롤에 숫자 값을 설정하기 위한 슬라이더 컨트롤을 추가합니다.

슬라이더 컨트롤을 추가하려면

1. 화면 디자이너에서 숫자 필드에 대한 노드를 선택합니다.

2. 텍스트 상자 컨트롤을 사용자 지정 컨트롤로 바꿉니다.

3. 속성 창에서 너비 속성을 컨테이너에 맞게 늘이기로 설정합니다.

4. Render 코드 편집 링크를 선택하고 코드 편집기에서 다음 코드를 render 메서드에 추가합니다.

   createSlider(element, contentItem, 0, 100);
   

   참고

   슬라이더에 대한 기본값의 범위는 0에서 100까지입니다.필요한 경우 응용 프로그램에 적절한 값으로 대체하십시오.

5. 다음 기능을 화면 코드 파일에 추가합니다.

   function createSlider(element, contentItem, min, max) {
       // Generate the input element.var value = contentItem.value || 0,
           $element = $(element)
               .append('<input type="range" min="' + min + '" max="' + max + '" value="' + value + '"/>')
               .on("slidestop", function () {
                   contentItem.value = $element.find("input").val();
               });
   

FlipSwitch 컨트롤 사용자 지정

Boolean 값을 표시하는 FlipSwitch 컨트롤은 표시 텍스트에 예/아니요 또는 설정/해제의 두 가지 옵션만 제공합니다. 다른 값을 표시하려면 FlipSwitch 컨트롤을 기반으로 하는 사용자 지정 컨트롤을 만들 수 있습니다. 다음 예제에서는 True/False 컨트롤을 만듭니다.

컨트롤을 사용자 지정하려면

1. 화면 디자이너에서 Boolean 필드에 대한 노드를 선택합니다.

2. FlipSwitch에서 사용자 지정 컨트롤로 컨트롤 형식을 변경합니다.

3. 속성 창에서 Render 코드 편집 링크를 선택합니다.

4. 코드 편집기에서 render 메서드에 다음 코드를 추가합니다.

   createBooleanSwitch(element, contentItem);
   

5. 다음 기능을 화면 코드 파일에 추가합니다.

   function createBooleanSwitch(element, contentItem) {
       var $flipSwitch = $('<select data-role="slider"></select>').appendTo($(element));
       $('<option value="false">false</option>').appendTo($flipSwitch);
       $('<option value="true">true</option>').appendTo($flipSwitch);
   
       // set select value to match the original contentItem.value
       $flipSwitch.val((contentItem.value) ? "true" : "false");
   
       // add listener to update contentItem's value if slider changes
       $flipSwitch.change(function () {
           contentItem.value = ($flipSwitch.val() == "true");
       });
   
       // visually refresh the slider.
       $flipSwitch.slider().slider("refresh");
   };
   

   참고

   너비 속성의 값을 150 이상으로 설정해야 컨트롤이 제대로 표시될 수 있습니다.

CheckBox 컨트롤 구현

Boolean 데이터 형식의 기본 컨트롤 형식은 FlipSwitch 컨트롤이지만 사용자 지정 컨트롤을 사용하여 CheckBox를 손쉽게 대체할 수 있습니다.

CheckBox를 표시하려면

1. 화면 디자이너에서 Boolean 필드의 노드를 선택하고 FlipSwitch에서 사용자 지정 컨트롤로 컨트롤 형식을 변경합니다.

2. 속성 창의 높이 섹션에서 최소값을 선택하고 100을 입력합니다. CheckBox 컨트롤이 표준 TextBox 컨트롤보다 크기 때문에 필요합니다. 사용자의 폼이 다른 컨트롤 형식을 사용하는 경우 이 값을 조정해야 합니다.

3. 일반 섹션에서 Render 코드 편집 링크를 선택합니다.

4. 코드 편집기에서 render 메서드에 다음 코드를 추가합니다.

   // Create the checkbox and add it to the DOM.
       var checkbox = $("<input type='checkbox'/>")
               .css({
                   height: 20,
                   width: 20,
                   margin: "10px"
               })
               .appendTo($(element));
   
       // Determine if the change was initiated by the user.
       var changingValue = false;
   
       checkbox.change(function () {
           changingValue = true;
           contentItem.value = checkbox[0].checked;
           changingValue = false;
       });
       contentItem.dataBind("value", function (newValue) {
           if (!changingValue) {
               checkbox[0].checked = newValue;
           }
       });
   

추가/편집 화면에 필요한 필드에 CheckBox를 표시하는 경우 컨트롤의 초기 값을 설정할 수 있으며, 그렇지 않으면 유효성 검사 오류가 발생할 수 있습니다.

초기 값을 설정하려면

1. 엔터티 디자이너의 원근감 모음에서 HTMLClient 탭을 선택합니다.

2. 코드 작성 목록에서 작성됨을 선택합니다.

3. 코드 편집기에서 created 메서드에 코드를 추가하여 초기 값을 설정합니다.

   entity.FieldName = new Boolean();
       entity.FieldName = 'true';
   

   FieldName을 Boolean 필드의 이름으로 바꿉니다. 검사되지 않은 상태로 컨트롤을 초기화하려면 true를 false로 바꿉니다.

사용자 지정 컨트롤의 모양 재정의

사용자 지정 컨트롤은 JQuery Mobile 프레임워크를 기반으로 하며 프레임워크는 모바일 장치의 표시에 최적화되도록 특정 컨트롤의 스타일을 자동으로 지정합니다. 경우에 따라 외관을 재정의하여 보다 전통적인 스타일을 제공할 수 있습니다. 예를 들어, JQuery Mobile 단추는 전통적인 단추 컨트롤보다 큽니다. data-role="none" 특성을 사용해서 스타일을 재정의하고 표준 단추를 표시할 수 있습니다.

특성을 적용하려면

1. 화면 디자이너에서 사용자 지정 컨트롤 노드를 선택합니다.

2. 속성 창에서 Render 코드 편집 링크를 선택합니다.

3. render 메서드에 다음 코드를 추가합니다.

   var $element = $(element);
       var $textbox1 = $('<input type="text" data-role="none"/>');
       $element.append($textbox1);
   

   참고

   textbox1을 사용자 지정 컨트롤의 이름으로, “text”를 컨트롤 형식으로 바꿉니다.

장치의 위치 가져오기

특정 장치의 현재 위치를 확인하기 위해 지리적 위치 API를 사용하여 매핑 및 근접 기반 시나리오를 사용할 수 있습니다. 다음 예제에서는 이름이 Latitude 및 Longitude인 Double 형식 속성이 있는 명명된 MyLocation 엔터티의 좌표를 확인합니다.

위치를 가져오려면

1. 화면 디자이너의 도구 모음에서 코드 작성 단추를 선택합니다.

2. 코드 편집기에서 다음 메서드를 추가합니다.

   myapp.AddEditMyLocation.GetGeolocation_execute = function (screen) { 
   
   
   if (navigator.geolocation) { 
   navigator.geolocation.getCurrentPosition(function (pos) { 
   screen.MyLocation.latitude = pos.coords.latitude.toString(); 
   screen.MyLocation.longitude = pos.coords.longitude.toString(); 
   }); 
   } 
   else { 
   alert("Geolocation not supported"); 
   } 
   }; 
   

지도에 위치 표시

매핑 기능을 손쉽게 추가하려면 Bing Maps SDK에서 무료 개발자 키를 얻은 다음 Bing 지도 웹 서비스를 호출하는 사용자 지정 컨트롤을 만듭니다.

다음 예제는 지도에 압정을 꽂아 고객의 위치를 보여주며 압정을 눌러서 각 고객에 대한 세부 정보를 표시할 수 있습니다. 이 예제에는 주소, 구/군/시 및 국가 필드가 있는 고객 엔터티에 연결되는 BrowseCustomers라는 이름이 지정된 화면이 필요하며 이름이 세부 정보인 팝업은 BrowseCustomers 화면에 있어야 합니다.

사용자 지정 컨트롤을 만들려면

1. 솔루션 탐색기에서 스크립트 노드를 선택한 다음 이름이 lightswitch.bing maps.js인 JavaScript 파일을 추가합니다.

2. 코드 편집기에서 해당 파일에 다음 코드를 추가합니다.

   /// <reference path="jquery-1.7.1.js" />
   /// <reference path="jquery.mobile-1.1.1.js" />
   /// <reference path="msls-1.0.0.js" />
   
   (function ($) {
       var _credentialsKey = "Ao75sYhQSfLgssT0QkO9n22xt0lgxzntrZ1xpCwLOC-kGhI584OYED3viFXLIWgC";
   
       // load the directions module only once per session
       Microsoft.Maps.loadModule('Microsoft.Maps.Directions');
   
       $.widget("msls.lightswitchBingMapsControl", {
           options: {
               mapType: Microsoft.Maps.MapTypeId.road,
               zoom: 3,
               showDashboard: false
           },
   
           _create: function () {
           },
   
           _init: function () {
               this.createMap();
           },
   
           destroy: function () {
               this._destroyBingMapsControl();
           },
   
           createMap: function () {
               this.htmlMapElement = this.element[0];
   
               // create empty map
               this.map = new Microsoft.Maps.Map(this.htmlMapElement,
                                   {
                                       credentials: _credentialsKey,
                                       mapTypeId: this.options.mapType,
                                       zoom: this.options.zoom,
                                       showDashboard: this.options.showDashboard
                                   });
           },
   
           addPinAsync: function (street, city, country, i, callback) {
   
               var widgetInstance = this;
   
               // construct a request to the REST geocode service using the widget's
               // optional parameters
               var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" +
                                    street + "," + city + "," + country +
                                    "?key=" + _credentialsKey;
   
               // make the ajax request to the Bing Maps geocode REST service
               $.ajax({
                   url: geocodeRequest,
                   dataType: 'jsonp',
                   async: true,
                   jsonp: 'jsonp',
                   error: function (XMLHttpRequest, textStatus, errorThrown) {
                       alert(textStatus + " " + errorThrown);
                   },
                   success: function (result) {
                       var coordinates = null;
   
                       if (result && result.resourceSets && (result.resourceSets.length > 0) &&
                           result.resourceSets[0].resources && (result.resourceSets[0].resources.length > 0)) {
   
                           // create a location based on the geocoded coordinates
                           coordinates = result.resourceSets[0].resources[0].point.coordinates;
   
                           widgetInstance._createPinFromCoordinates(coordinates, i, callback);
                       }
                   }
               });
           },
   
           _createPinFromCoordinates: function(coordinates, i, callback) {
               var location = new Microsoft.Maps.Location(coordinates[0], coordinates[1]);
               var pin = new Microsoft.Maps.Pushpin(location, { text: '' + i + '' });
               Microsoft.Maps.Events.addHandler(pin, 'click', callback);
               this.map.entities.push(pin);
           },
   
           resetMap: function () {
               this.map.entities.clear();
           },
   
           _handleError: function (error) {
               alert("An error occurred.  " + error.message);
           },
   
           _destroyBingMapsControl: function () {
               if (this.map != null) {
                   this.map.dispose();
                   this.map = null;
               }
           }
       });
   }(jQuery));
   

   중요

   var _credentialsKey에 대한 값을 고유한 Bing Maps 개발자 키로 바꿉니다.

화면에 맵을 추가하려면

1. 화면 디자이너에서 맵을 추가하려는 노드를 선택한 다음 바로 가기 메뉴에서 사용자 지정 컨트롤 추가를 선택합니다.

2. 속성 창에서 컨트롤의 이름을 맵으로 변경한 다음 Render 코드 편집 링크를 선택합니다.

3. 코드 편집기에서 render 메서드에 다음 코드를 추가합니다.

   /// <reference path="../GeneratedArtifacts/viewModel.js" />
   
   var mapDiv;
   var current = 0;
   var step = 15;
   
   myapp.BrowseCustomers.Customer_render = function (element, contentItem) {
       mapDiv = $('<div />').appendTo($(element));
       $(mapDiv).lightswitchBingMapsControl();
   
       var visualCollection = contentItem.value;
       if (visualCollection.isLoaded) {
           showItems(current, step, contentItem.screen);
       } else {
           visualCollection.addChangeListener("isLoaded", function () {
               showItems(current, step, contentItem.screen);
           });
           visualCollection.load();
       }
   };
   
   function showItems(start, end, screen) {
       $(mapDiv).lightswitchBingMapsControl("resetMap");
   
       $.each(screen.Customers.data, function (i, customer) {
           if (i >= start && i <= end) {
               $(mapDiv).lightswitchBingMapsControl("addPinAsync", customer.Address,
                   customer.City, customer.Country, i + 1, function () {
                       screen.Customers.selectedItem = customer;
                       screen.showPopup("Details");
                   });
           }
       });
   };
   

4. 솔루션 탐색기에서 파일 뷰로 전환합니다.

5. HTMLClient 노드에서 default.htm 파일을 엽니다.

6. 코드 편집기에서 참조용 스크립트 블록 시작 부분에 다음 참조를 추가합니다.

   <script type="text/javascript" charset="utf­8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
   

7. 참조 스크립트 블록의 끝에서 JavaScript 파일에 참조를 추가합니다.

   <script type="text/javascript" charset="utf­8" src="Scripts/lightswitch.bing-maps.js"></script>
   

장치에 숫자 키보드 표시

사용자 지정 화면 키보드를 사용하여 사용자가 숫자 또는 다른 종류의 정보를 입력하도록 할 수 있습니다. 다음 예제에서는 사용자가 텍스트 상자 컨트롤을 활성화한 경우 숫자 키패드를 표시하는 방법을 보여줍니다.

숫자 키패드를 표시하려면

1. 화면 디자이너에서 숫자 데이터를 포함하는 필드에 대한 텍스트 상자 노드를 선택합니다.

2. 속성 창에서 PostRender 코드 편집 링크를 선택합니다.

3. 코드 편집기에서 PostRender 메서드에 다음 코드를 추가합니다.

   $(element).find("input").get(0).type = "number";
   

   참고

   다른 종류의 입력을 위한 키보드를 표시하기 위해 동일한 기법을 사용할 수 있지만 LightSwitch 응용 프로그램의 HTML 클라이언트에 대한 키보드를 위한 color 입력 형식을 표시할 수는 없습니다.

여러 폼 요소에 맞게 UI 조정

화면 크기에 따라 인터페이스를 사용자 지정하면 응용 프로그램이 다양한 모바일 장치에서 제대로 작동하는지 확인할 수 있습니다. 예를 들어, 태블릿에 고객의 전체 주소를 표시하지만 스크롤을 줄이기 위해 전화기에 같은 정보를 숨길 수 있습니다.

일부 장치에서 UI 요소를 숨기려면

1. 화면 디자이너에서 숨기려는 노드를 선택하고 코드 작성 목록을 확장한 다음 postRender 메서드를 선택합니다.

2. 코드 편집기에서 다음 코드를 추가합니다.

   $(element).addClass("hidden-on-phone");
   

3. 솔루션 탐색기에서 파일 뷰로 전환한 다음 HTMLClient 프로젝트의 콘텐츠 노드를 확장합니다.

4. user-customizations.css 파일을 엽니다.

5. 코드 편집기에서 @media 섹션의 끝에 다음 코드를 추가합니다.

   .hidden-on-phone {
          display: none;
      }
   

   이 코드는 화면 방향을 결정하는 기존 미디어 쿼리를 추가합니다. 응용 프로그램이 휴대폰에 표시될 때 필드가 표시되지 않습니다.

Default.htm 파일에 JavaScript 코드를 추가하여 전화 및 태블릿에 다양한 홈 화면을 표시할 수도 있습니다.

장치마다 서로 다른 홈 화면을 표시하려면

1. 솔루션 탐색기에서 HTMLClient 노드를 선택한 후 default.htm 파일을 엽니다.

2. 코드 편집기에서 다음 코드를 사용하여 msls.run() 함수를 포함하는 스크립트 요소를 바꿉니다.

   <script type="text/javascript">
          $(document).ready(function () {
              if ($.mobile.media("screen and (max-width: 400px) and (orientation: portrait), \
                  screen and (max-width: 640px)  and (max-height: 400px) and (orientation: landscape)")) {
                  var screen = "BrowseCustomersSmall";
              } else {
                  var screen = "BrowseCustomers";
              }
              msls._run(screen)
              .then(null, function failure(error) {
                  alert(error);
              });
          });
      </script>
   

   BrowseCustomersSmall을 전화기용 화면 이름으로 바꾸고 BrowseCustomers를 태블릿용 화면 이름으로 바꿉니다.

화면에서 직접 HTML 데이터 렌더링

일부 데이터베이스는 String 데이터 필드에 HTML을 저장합니다. LightSwitch 응용 프로그램은 이 정보를 일반 문자열로 해석하여 텍스트 컨트롤에서 원시 HTML을 화면, 태그 및 전부에 표시합니다. 사용자 지정 컨트롤 및 render 메서드를 사용하여 실제 HTML을 화면에 렌더링할 수 있습니다.

경고

보안 위험을 방지하려면 HTML이 신뢰할 수 있는 소스에서 온 것임을 확신하는 경우에만 이 방법을 사용합니다.

화면에 HTML을 렌더링하려면

1. 화면 디자이너에서 HTML 필드를 나타내는 노드를 선택한 다음 컨트롤 형식을 사용자 지정 컨트롤로 변경합니다.

2. 속성 창에서 Render 코드 편집 링크를 선택합니다.

3. 코드 편집기에서 render 메서드에 다음 코드를 추가합니다.

   element.innerHTML = contentItem.stringValue;
   

팝업에 제목 표시

팝업을 보거나 다른 화면으로 이동하지 않고 정보 입력을 쉽고 빠르게 제공합니다. 화면과 다르게 팝업에는 제목이 표시되지 않지만 사용자가 제목 또는 기타 정적 텍스트를 팝업에 표시하려고 할 수 있습니다. 다음 예제에서는 제목을 표시하고 글꼴을 사용자 지정하는 방법을 보여줍니다.

제목을 추가하려면

1. 화면 디자이너의 도구 모음에서 데이터 항목 추가 단추를 선택합니다.

2. 데이터 항목 추가 대화 상자에서 String 유형의 로컬 속성을 추가합니다.

3. 화면 디자이너에서 로컬 속성을 팝업에 추가한 다음 컨트롤 형식을 텍스트로 변경합니다.

4. 속성 창에서 LabelPosition 속성을 None으로 설정합니다.

5. 화면 디자이너에서 코드 작성 목록을 연 다음 postRender 메서드를 선택합니다.

6. 코드 편집기에서 postRender 메서드에 다음 코드를 추가합니다.

   element.textContent = "This is the title";
       $(element).css("font-size", "23px");
       $(element).css("font-weight", "bold");
   

새로운 화면으로 정보 복사

데이터 입력 응용 프로그램에서는 한 입력 화면에서 다음 입력 화면으로 일부 정보를 복제할 필요가 종종 있습니다. 폼에 대해 beforeShown 메서드를 사용해서 복사 함수를 쉽게 구현할 수 있습니다. 다음 예제에서 복사 단추가 AddEditCustomers 화면에 추가되고 현재 고객을 위해 국가 및 지역으로 미리 채워진 새로운 화면이 열립니다.

정보를 복사하려면

1. 화면 디자이너에서 복사 단추를 추가하려는 AddEdit 화면에 대해 명령 모음 노드를 선택합니다.

2. 도구 모음에서 레이아웃 항목 추가 단추를 선택한 후 단추를 선택합니다.

3. 단추 추가 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택하고, 메서드 이름을 Copy로 지정한 후 확인 단추를 선택합니다.

4. 왼쪽 창에서 복사 노드를 선택한 다음 도구 모음에서 코드 작성 목록을 열고 Copy_execute를 선택합니다.

5. 코드 편집기에서 Copy_execute 메서드에 다음 코드를 추가합니다.

   myapp.showAddEditCustomer(null, {
           beforeShown: function (addNewScreen) {
               var copied_item = screen.Customer;
               var new_item = new myapp.Customer;
               new_item.Country = copied_item.Country;
               new_item.Region = copied_item.Region;
               addNewScreen.Customer = new_item;
           }
       })
   

저장할 때 화면 탐색 변경

추가/편집 화면에서 저장 단추의 기본 동작은 화면을 닫고 실행한 화면으로 돌아가는 동작입니다. 경우에 따라 다른 화면으로 이동할 수 있습니다. 예를 들어, 보기 화면은 다른 형식으로 새로 추가된 데이터를 표시합니다. 이렇게 하려면 추가/편집 화면을 시작하는 단추의 afterClosed 메서드에 코드를 작성합니다. 다음 예제에서 주문 추가 및 보기 단추가 화면에 추가되어 저장 후 보기 화면이 표시되도록 동작을 수정합니다.

새 화면으로 이동하려면

1. 화면 디자이너에서 단추를 추가하려는 찾아보기 화면에 대해 명령 모음 노드를 선택합니다.

2. 도구 모음에서 레이아웃 항목 추가 단추를 선택한 후 단추를 선택합니다.

3. 단추 추가 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택하고, 메서드 이름을 AddAndViewOrder로 지정한 후 확인 단추를 선택합니다.

4. 왼쪽 창에서 AddAndViewOrder 노드를 선택한 다음 도구 모음에서 코드 작성 목록을 열고 AddAndViewOrder _execute를 선택합니다.

5. 코드 편집기에서 AddAndViewOrder_execute 메서드에 다음 코드를 추가합니다.

   myapp.showAddEditOrder(null, {
           beforeShown: function (AddEditScreen) {
               // Create a new order here.
               var newOrder = new myapp.Order();
               AddEditScreen.Order = newOrder;
           },
           afterClosed: function (addEditScreen, navigationAction) {
               // If the user commits the change, show the View screen
               if (navigationAction === msls.NavigateBackAction.commit) {
                   var newOrder = addEditScreen.Order;
                   myapp.showViewOrder(newOrder);
               }
           }
       })
   

   이 코드는 beforeShown 함수에서 새로운 명령 생성을 처리할 수 있습니다. 이 항목은 기본 AddEdit 폼 동작을 재정의하고 사용자가 변경 내용을 취소하는 경우를 처리합니다.

책갈피 사용 안 함

HTML 클라이언트 화면의 책갈피 기능을 통해 사용자는 특정 화면 인스턴스의 URL을 복사한 다음 나중에 해당 인스턴스로 돌아갈 수 있습니다. 이 URL의 일부에는 화면 엔터티의 기본 키가 사용될 수 있으므로 기본 키에 SSN과 같은 중요한 정보가 포함된 경우에는 책갈피 기능을 사용하지 않도록 설정하여 사용자가 이러한 정보를 볼 수 없도록 할 수 있습니다. 다음 코드는 URL에서 엔터티 ID(화면 이름과 세션 ID 사이 부분)를 제거하여 책갈피 기능을 사용하지 않도록 설정합니다.

책갈피를 사용하지 않도록 설정하려면

1. 솔루션 탐색기의 HTMLClient 노드 아래에서 default.htm 파일을 선택해 엽니다.

2. 코드 편집기에서 $(document).ready(function () { 줄을 찾은 후 그 아래 다음 코드를 추가합니다.

   msls.application.options.disableUrlScreenParameters = true;
   

   엔터티 ID가 URL에서 제거되므로 사용자는 더 이상 화면에 책갈피를 지정할 수 없습니다.

참고 항목

개념

HTML 클라이언트 API 참조