Blend의 기본 제공 동작을 사용하여 대화형 작업 추가(HTML 및 JavaScript)

  • 아티클

Blend for Visual Studio를 사용하면 기본 제공 끌어서 놓기 동작을 사용하여 대화식 응용 프로그램을 만들 수 있습니다.

이 예제에서는 사용자가 목록의 항목을 끌기 시작하면 Blend의 기본 제공 JavaScript 동작 중 하나를 사용하여 앱의 메시지를 변경한 다음, 사용자가 항목 끌기를 중지하면 다시 원상태로 변경합니다.

이 예제에 따라 작업을 수행하려면 샘플 갤러리에서 이 프로젝트 다운로드(영문)를 수행합니다. 이 방식을 사용하면 코드를 검토할 수 있을 뿐 아니라 프로젝트를 수행하고 수정하는 데 필요한 모든 자산을 보유하게 됩니다.

이 샘플 앱에는 원하는 목록을 표시하는 목록 뷰가 포함되어 있습니다. 기존 위치에서 항목을 끌어와 목록의 다른 위치에 두어 목록을 다시 정렬할 수 있습니다. 이 예제는 사용자가 항목을 끌어와 새 위치에 항목을 놓으면 여러 다른 메시지를 표시하는 동작을 사용하여 샘플 앱에서 빌드합니다.

동작 정의

동작은 두 부분, 즉 트리거와 작업이 있습니다. 트리거가 이벤트(예: 마우스 클릭)에 반응하여 하나 이상의 작업을 호출합니다.

Blend에서 기본 제공 동작을 적용하려면 먼저 요소에 동작을 추가합니다. 그런 다음 동작이 반응하게 할 트리거를 정의한 다음, 수행할 작업을 정의합니다.

이 예제에는 두 개의 동작(두 개의 EventTriggerBehavior 동작)을 정의합니다. 그런 다음 각 동작에 대한 이벤트 트리거를 정의합니다. 첫 번째 트리거는 itemdragstart 이벤트(항목 끌기)이고 두 번째 트리거는 itemdragend 이벤트(항목 놓기)입니다.

각 트리거를 통해 두 개의 SetStyleAction 작업이 발생합니다. 한 SetStyleAction에서는 선택한 div visibility 속성을 hidden(으)로 설정하고 다른 SetStyleAction에서는 선택한 div visibility 속성을 visible(으)로 설정합니다.

완료된 앱에서 사용자가 목록의 항목을 끌기 시작하면, “Mix it up”이라는 메시지는 표시하고 “Pick a flavor!”라는 메시지는 숨깁니다. 사용자가 항목 끌기를 중지하면 "Mix it up"을 숨기고 "Pick a flavor!"를 표시합니다.

"Mix it up!" 메시지 숨기기

샘플 앱을 열면, 두 메시지("Pick a flavor!" 및 "Mix it up!")가 모두 표시됩니다. 기본적으로 "Pick a flavor!" 메시지는 표시하고 "Mix it up!" 메시지는 숨기는 것이 좋습니다. 이와 같은 결과를 얻으려면 #mixit div("Mix it up!" 메시지 포함)의 기본 visibility 속성을 hidden으로 설정합니다.

"Mix it up!" 메시지 숨기기

  1. 프로젝트를 다운로드한 경우 Sample ListView Drag and Drop for Blend Behaviors 폴더를 연 다음 JavaScript 폴더를 엽니다. Controls_ListViewReorderDragDrop.sln 파일을 마우스 오른쪽 단추로 클릭하고 연결 프로그램을 클릭한 다음 Blend for Visual Studio를 클릭합니다.

  2. 라이브 DOM 패널의 검색 텍스트 상자에 mix를 입력하거나 디자인 화면에서 "Mix it up!" 메시지를 클릭하여 #mixit div를 찾습니다.

    팁

    라이브 DOM 패널에서 #mixit div를 검색하는 경우, 원하는 사항을 찾기 위해 계층 구조의 개체를 펼쳐야 할 수도 있습니다.

  3. 속성 패널에서 검색 텍스트 상자에 vi를 입력하여 visibility 속성을 찾습니다. 가시성 드롭다운 목록에서 숨김을 클릭합니다.

    Blend behaviors #mixit visibility: hidden

디자인 화면에서 "Mix it up!" 메시지가 더 이상 표시되지 않습니다.

기본 제공 동작 추가

다음 두 방법 중 하나로 기본 제공 동작을 추가할 수 있습니다.

  • 자산 패널에서 라이브 DOM 패널 또는 디자인 화면의 요소로 동작을 끌어올 수 있습니다.

  • HTML 특성 패널의 동작 범주에서 새 동작 추가를 클릭하여 선택한 요소에 동작을 적용할 수 있습니다.

이 예제에서는 HTML 특성 패널을 사용하여 동작을 추가하고 정의합니다.

동작 추가

  1. 라이브 DOM 패널에서 검색 텍스트 상자에 list를 입력하여 개체 계층 구조에서 listView를 찾습니다.

  2. 라이브 DOM 패널에서 listView를 선택한 상태로, HTML 특성의 동작 범주에서 새 동작 추가Blend Add new behavior button를 클릭합니다.

  3. 새 동작 추가 대화 상자에서 EventTriggerBehavior를 클릭한 다음 확인을 클릭합니다.

    Blend Add new behavior dialog box

    라이브 DOM 패널의 listView에 파란색 마커가 표시되어 동작이 추가되었음을 나타냅니다.

    Blend behaviors - ListView - Objects and Timeline

이벤트 트리거 정의

이벤트가 실행되면 EventTriggerBehavior에서 작업을 호출합니다. 이제 동작을 추가했으므로 동작이 반응할 이벤트를 선택할 수 있습니다. 이 예제에서는 itemdragstart 이벤트를 사용합니다. 사용자가 ListView 컨트롤에서 항목을 끌기 시작하면 itemdragstart 이벤트가 발생합니다. 자세한 내용은 ListView.onitemdragstart 이벤트(영문)를 참조하세요.

EventTriggerBehavior의 itemdragstart 이벤트 정의

  • HTML 특성 패널의 동작 범주에서 EventTriggerBehavior를 선택한 상태로 이벤트 드롭다운 목록에서 itemdragstart를 클릭합니다. sourceSelector를 빈 상태로 둡니다.

    팁

    목록에서 원하는 이벤트를 더 쉽게 찾을 수 있도록 값 편집기에 입력할 수도 있습니다.

    Blend behaviors Add event trigger

itemdragstart 이벤트의 작업 추가 및 정의

트리거가 실행도면 SetStyleAction에서 선택한 요소의 새 속성을 설정합니다. 사용자가 항목 끌기를 시작하면 itemdragstart 이벤트의 첫 번째 SetStyleAction 작업에서 "Pick a flavor!" 메시지를 숨깁니다.

itemdragstart 이벤트의 첫 번째 SetStyleAction 추가 및 정의

  1. 동작 범주에서 트리거된 작업 옆의 작업 추가Blend behaviors Add new action를 클릭합니다.

  2. 새 동작 추가 대화 상자에서 SetStyleAction을 클릭한 다음 확인을 클릭합니다.

    Blend behaviors Add New Action dialog box

  3. styleProperty 드롭다운 목록에서 가시성을 클릭합니다. Enter 키를 누릅니다.

    Blend behaviors visibility property

    styleValue 특성이 나타납니다.

  4. styleValue 드롭다운 목록에서 숨김을 클릭합니다.

    Blend behaviors stylevalue visibility: hidden

  5. targetSelector 텍스트 상자에서 #pickit를 입력합니다.

    Blend behaviors targetselector #pickit

사용자가 항목을 끌기 시작하면 itemdragstart 이벤트의 두 번째 SetStyleAction 작업에서 "Mix it up!" 메시지를 표시합니다.

itemdragstart 이벤트의 두 번째 SetStyleAction 추가 및 정의

  1. 트리거된 작업 오른쪽의 작업 추가 Blend behaviors Add new action를 클릭합니다.

  2. 새 동작 추가 대화 상자에서 SetStyleAction을 클릭한 다음 확인을 클릭합니다.

  3. styleProperty 드롭다운 목록에서 가시성을 클릭합니다. Enter 키를 누릅니다.

    styleValue 특성이 나타납니다.

  4. styleValue 드롭다운 목록에서 표시를 클릭합니다.

  5. targetSelector 텍스트 상자에 #mixit를 입력합니다.

    Blend behaviors targetselector mixit

두 번째 동작 추가

사용자가 항목을 끌기 시작할 때(itemdragstart 이벤트) 수행될 동작 정의를 완료했으므로, 다음 단계로 사용자가 항목 끌기를 중지할 때(itemdragend 이벤트) 수행할 동작을 정의합니다.

두번째 동작 추가

  1. listView가 여전히 라이브 DOM 패널에서 선택되었는지 확인합니다. HTML특성 패널의 동작 범주에서 새 동작 추가 Blend Add new behavior button를 클릭합니다.

  2. 새 동작 추가 대화 상자에서 EventTriggerBehavior를 클릭한 다음 확인을 클릭합니다.

이벤트 트리거 정의

다음으로 두 번째 EventTriggerBehavior의 itemdragend 이벤트를 정의합니다. 사용자가 ListView 컨트롤에서 끌어온 항목을 놓으면 itemdragend 이벤트가 발생합니다. 자세한 내용은 ListView.onitemdragend 이벤트(영문)를 참조하세요.

EventTriggerBehavior의 itemstartend 이벤트 정의

  • HTML 특성 패널의 동작 범주에서 EventTriggerBehavior를 선택한 상태로 이벤트 드롭다운 목록에서 itemdragend를 클릭합니다. sourceSelector를 빈 상태로 둡니다.

    Blend behaviors Add event trigger

itemdragend 이벤트의 작업 추가 및 정의

사용자가 항목 끌기를 중단하면 itemdragend 이벤트의 첫 번째 SetStyleAction 작업에서 "Pick a flavor!" 메시지를 표시합니다.

itemdragend 이벤트의 첫 번째 SetStyleAction 작업 추가 및 정의

  1. 동작 범주에서 트리거된 작업 옆의 작업 추가Blend behaviors Add new action를 클릭합니다.

  2. 새 동작 추가 대화 상자에서 SetStyleAction을 클릭한 다음 확인을 클릭합니다.

  3. styleProperty 드롭다운 목록에서 가시성을 클릭합니다. Enter 키를 누릅니다.

    styleValue 특성이 나타납니다.

  4. styleValue 드롭다운 목록에서 숨김을 클릭합니다.

  5. targetSelector 텍스트 상자에서 #pickit를 입력합니다.

    Blend behaviors targetselector #pickit

사용자가 항목 끌기를 중지하면 itemdragend 이벤트의 두 번째 SetStyleAction 작업에서 "Mix it up!" 메시지를 숨깁니다.

itemdragend 이벤트의 두 번째 SetStyleAction 작업 추가 및 정의

  1. 트리거된 작업 오른쪽의 작업 추가 Blend behaviors Add new action를 클릭합니다.

  2. 새 동작 추가 대화 상자에서 SetStyleAction을 클릭한 다음 확인을 클릭합니다.

  3. styleProperty 드롭다운 목록에서 가시성을 클릭합니다. Enter 키를 누릅니다.

    styleValue 특성이 나타납니다.

  4. styleValue 드롭다운 목록에서 표시를 클릭합니다.

  5. targetSelector 텍스트 상자에 #mixit를 입력합니다.

    Blend behaviors targetselector #mixit

이제 대화형 모드를 사용하여 앱을 실행하거나 F5를 눌러 앱을 빌드하고 실행할 수 있습니다. 목록 뷰에서 항목을 끌기 시작하면 메시지가 “Mix it up!”으로 변경됩니다. 항목 끌기를 중지하면 메시지가 다시 "Pick a flavor!"로 변경됩니다.

Alt+F4를 눌러 응용 프로그램을 닫습니다.