[Expression Web] Publishing_Your_Silverlight_Content

 

Expression 시리즈의 마지막, 웹으로 보내는 작업입니다. 기존에 작업을 했으니 이제 클라이언트에게 우리는 이정도 만들었다 확인해달라고 할만한 결과물을 보여줘야겠지요. 그때 웹으로 하면 어떨까요? 그래서 이번 강의는 Expression Web으로 진행됩니다. 일단 기본 폼은 지지난 포스트에서 했던 비디오 플레이어입니다.

 

 

기억은 하시죠? 동영상도 같이 삽입한 형태입니다. 제걸 올리려 해도 용량제한때문에 기존 파일로 대체하겠습니다. 자 이렇게 만들었는데 이걸 웹으로 올리려면 어떻게 할까요? 우선 지금 생성한 파일의 원본은 여기에 있습니다.

 

 

바로 그 프로젝트가 있는 폴더의 Bin-Debug로 들어가시면 위와 같은 파일들이 있습니다. 이중 Default.html을 실행시키면 실제 실행시켰을 때와 똑같은 동작을 보입니다. 여기서 가장 핵심 파일은 xap 파일인데 이 이유는 뒤에서 설명드리겠습니다. 그래서 이 폴더를 통채로 전달해줘도 볼수는 있습니다. 그런데 이건 단순한 로컬 파일일 뿐 웹에 게시하는 형태로 변환하고자 하면 어떨까요? Expression Web을 켜보겠습니다.

product_demos.zip

 

우선 첨부파일을 풀고 메뉴바 사이에 있는 다음 아이콘을 통해서 해당 폴더를 선택해주세요.

 

여기서 index.html을 선택해주면 됩니다.

 

 

이게 바로 우리가 비디오 플레이어를 삽입할 웹페이지가 됩니다. 역시 html로 되어 있지요. 이걸 실제 웹페이지로 볼수도 있습니다.

 

 

여기서 원하는 플랫폼을 선택하고 크기를 지정하면 거기에 맞춰서 웹페이지로 보여줍니다. 아래와 같이 말이지요.

 

 

이제 기존에 만들었던 비디오플레이어를 삽입하려면 File의 Import를 통해서 기존의 비디오플레이어 폴더를 찾아주면 됩니다.

 

 

주의해야 될 것은 이때 Import시키는 파일이 Default.html뿐만 아니라 xap파일도 같이 첨부해야 합니다. 이렇게 해야 정상적으로 동작이 이뤄집니다. 이게 바로 xap 파일이 중요하다는 이유입니다. 추가적으로 동영상까지 3개의 파일을 추가합니다.

 

 

그럼 좌측 상단에 추가시킨 파일의 목록이 뜨게 됩니다.

 

여기서 삽입한 Default.html을 실행시키게 되면 디자인뷰상으로는 아무것도 안보이는데 코드뷰상으로는 뭔가가 빼곡히 적혀있습니다. 이는 정상입니다. 이걸 Preview로 실행시키면 정상적으로 플레이어가 등장합니다. 이걸 index.html에 넣으려면 약간의 코드 수정이 필요합니다.

 코드중에서 맨밑에 Body로 실행하는 부분이 있는데 여기부터가 html입니다. 그위는 silverlight로 형성된 자바스크립트와 css파일들이 위치해있습니다. 우선은 html부분부터 복사를 하고자 합니다.

먼저 body안에 들어있는 파트를 쭉 선택해서 복사를 해줍니다. 그 후에 index.html의 div id="PageContent"부분에 삽입해주면 됩니다. 다음과 같이 되겠지요.

 

 

이번에는 Default.html의 Script 태그로 묶여있는 부분을 복사해서 index의 Style이 끝나는 시점에서 붙여넣습니다.

 

 

마지막으로 Default상의 Style안에 있는 내용을 복사해서 index로 옮겨 넣습니다. style의 맨위에다가 삽입해주면 되겠습니다.

 

 

자 끝났습니다. 이걸 확인해보려면 저장하고 아까 봤던 Preview를 선택해주면 됩니다.

 

 

참고로 지금 제공되는 기술은 모두 실버라이트를 기반으로 동작하기 때문에 위와 같은 경고문이 뜰경우에는 해제를 시켜줘야 합니다.

 

 

음... 뭔가 코드상으로 문제가 있어서 플레이어가 짤립니다. 아무튼 이런방식으로 웹상으로도 포팅할 수 있는 것이 Expression Web의 기능입니다. 위 오류는 한번 알아보겠습니다.

 ------------------------------------------------------------------------------------------------------

이상하게도 크롬에서는 잘돌아가네요. 결과물입니다.

 

 

지금까지 예제를 통한 Expression Studio를 4버전에 맞춰서 설명드렸습니다. 아마 여기까지 하셨다면 다른 어플리케이션 구현도 가능할거라고 생각합니다. 저만의 생각은 아니겠지요? 이번에 새로 출시한 Blend for VS2012 에서도 이런 작업이 가능하다니까 한번 테스트해보시는 것도 좋지 않을까 생각합니다. 지금까지 읽어주셔서 감사합니다.