WinRT ::

IE8 에서 실버라잇 딥링크(Deep Link)와 브라우저 네비게이션을 지원

Silverlight 2008/07/11 12:00

기뿐 소식이 있어서 알립니다. 저는 IE8에 대해 특별한 관심이 없었습니다만, 아래의 글에서 언급한 것처럼 실버라잇에서 딥링크와 네비게이션을 지원할 수 있게 해준다는 군요. 원래는 Ajax에서 발생하는 문제를 해결하는 기능으로 개발되었는데, 동일한 문제가 노출되는 실버라잇까지 확장해서 지원하게 된다는 것 같습니다.
아래의 기사는 해당 기능을 지원하기 위하여 실버라잇 1.0에서 설정하는 방법에 대한 글이고, 실버라잇 2에 관한 내용은 다음에 다시 올린다는 내용입니다. 제일 마지막 부분에 보시면 Deep Link 가 어떤식으로 작동하는 지를 보여주는 링크가 있으니 확인해 보시길. 페이지를 넘기면 주소창에 해당 페이지의 링크주소가 자동 변경됩니다.

How IE8 Will Enables Silverlight Deep Linking and Browser Back/Forward Navigation

Published 10 July 08 04:29 PM | Michael S. Scherotter

One of new features in the next version of Internet Explorer (IE8) was created specifically for AJAX applications and can add significant functionality to Silverlight applications as well. Here is the description of the feature (from Better AJAX Development):

In IE8 mode, Internet Explorer treats window.location.hash updates like navigations and saves the previous document URL. The following actions occur as a result:

The previous URL, which may be from the previous hash fragment, will be updated in the Address bar, Back button and other browser components.
A “click” sound will play as if a traditional navigation occurred.
A new hashChanged event will fire.

In a Silverlight application, an issue that affect usability is that the Back/Forward navigation buttons are not used because all of the "paging" and navigation occurs in the context of a single page. This can be problematic because people are used to seeing their page history and navigating their page history. This new feature in IE8 can enable a Silverlight application to both add these pseudo page-views to the browser history and lets the user navigate among those page views and easily deep link to them. These techniques make the most sense for Silverlight applications that provide a full-page browser experience. To see it in action,take a look at pages from a Journal that I created from studying architecture in Europe in1992.

Here is how you would enable the functionality in your Silverlight 1 application:
Download and install the IE8 Beta
On the HTML page that your Silverlight application is hosted, add this meta tag to the <head> section:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
In the startup code for the page, add an event handler to the document.body for the onhashchange event
document.body.onhashchange = OnHashChange
Implement the OnHashChanged event callback to programatically navigate to the page/view within the Silverlight application (only if the hash changed happened via back/forth & history navigation). Here's how I implemented the OnHashChange handler for my Page Turn sample:
NavigationManager.prototype.OnHashChange = function()
{
  var journalPage = this.nextOddPage - 2;
  var hashPage = Number(document.location.hash.substr(5));
    
  if (hashPage != journalPage)
  {
    this.jumpToPage(hashPage);
  }
}
In your Silverlight code, when the page/view of your application changes, update the document.location.hash value accordingly. In the Page View sample, I adapted it to use hashes like #Page00, #Page01, #Page12 for each page. You should also update the document.title here so that the page history title shows useful information about the state of the application. Updating the document.location.hash will also update the URL in the browser. This basically enables a "deep link" to the page/view in the Silverlight application. An important aspect of the code to note is that if you update the window.location.hash and the document.title, you should update the hash before updating the title.
In my page turn sample app, this TrackPage() function is called whenever the page changes:
NavigationManager.prototype.TrackPage = function()
{
  var number = this.nextOddPage - 2;
  var hash = "";
  var title = this.Title;
    
  if (number == 1)
  {
    hash = "Page" + getTwoDigitInt(number);
    title = this.Title + " Page " + String(number);
  }
  else if(number > 1)
  {
    hash = "Page" + getTwoDigitInt(number);
    title = this.Title + " Pages " + String(number-1)
          + " & " + String(number);
  }
  window.location.hash = hash;
  document.title = title;
  TrackEvent(hash);
}
Add code to your application so that if a document.location.hash value is specified, the starting application view/page will reflect that state. In the page view sample, I added the following code to the PageTurn.prototype.downloadComplete event handler:
this.navigationManager.jumpToPage(pageNumber);
Once you have done these steps, your Silverlight 1 application can take better advantage of the IE8 browser capabilities and provide an easy way for your users to navigate and share (with deep links) the application. To see a deep link in action, go to this page and download the source code here. My next article will show how to do the same thing with a Silverlight 2 application.

Filed under: Silverlight, Code Gallery, IE8

Synergist : How IE8 Will Enables Silverlight Deep Linking and Browser Back/Forward Navigation

Posted by 한누리

트랙백 (0) l 댓글 (0)

실버라잇2 베타2 설치.

Silverlight 2008/06/08 23:59

원래 TechEd 행사에 맞춰서 공개할려고 했는데, 갑자기 치명적인 버그가 발견되어, 수정해서 주말에 발표한다길레, 금요일에 베타1에 대한 것 다 지우고 기다렸는데, 헛짓했다. 어쩐일로 ms가 친절하게도 silverlight_chainer.exe 라는 파일에 기존 것 찾아서 지워주고 새 버전으로 업그레이드까지 시켜주게 만들어놨다.
그런데 이게 실행해보니 설치중에 문제가 생겨서 중지가 되었다. 난 내가 미리 지워서 문제가 된줄 알았으나 설치와 관련된 도큐먼트를 찾아보니 그런건 아닌 것으로 보였다. 그래서 좀더 자료를 읽어보니 설치시 문제가되는 경우는 수동으로 KB949325 를 제거하라고 한다. 그런데 제어판에가서 설치된 프로그램 목록을 찾아보니 찾는게 안보인다. 그래서, 몇 가지 삽질을 한 후에 겨우 KB949325가 있는 곳을 발견할 수 있었다.
글쎄, 내가 비스타 RTM 나올때부터 사용했는데 어쩐지 HotFix들이 하나도 안보이더만, 이것만 따로 모아 놓고 있었던 것이었다, 사실 이것들까지 설치목록에 우루루 몰려 나올때를 생각하면 아주 잘 한짓인데 나만 모르고 있었던건가 싶다. 혹시 나같이 당황하시는 분이 계실까봐 이 글을 쓰니 참고하시길. 내가 영문 비스타를 쓰고 있고 해서 영문판용 그림으로 링크를 걸었다. 왼쪽 상단의 "View installed updates"를 누르면 된다.
실버라잇2 베타2를 설치할려면 Silverlight 2 Beta 2 Launches를, 나머지 설치시 문제와 관련된 내용은 다음 링크를 참고하시길. Upgrading to Silverlight Tools Beta 2 and Visual Studio 2008 SP1 Beta - BradleyB's WebLog

Posted by 한누리

트랙백 (0) l 댓글 (1)

Dynamic DataGrid II

Silverlight 2008/05/19 19:46

어제 동적으로 DataGrid에 항목을 추가하는 예제를 작성했는데요, 거기서는 INotifyCollectionChanged가 자체적으로 구현되어 있는 ObservableCollection 을 사용하였습니다.
그러나 이 ObservableCollection은 사용가능한 기능이 우리가 가장 많이 사용하는 List에 비해서는 제한적입니다. 예를 들어 Sort가 필요하다면 List를 사용해야 할 것입니다.
그래서, List가 제공하는 기능을 활용하면서 one-way 바인딩을 통한 동적인 DadaGrid 바운딩이 가능하도록 구현하려고 시도해 보았습니다. 완벽한 구현은 아니지만 참고할 만한 정도는 될것입니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Specialized;

namespace SilverlightTwoDatagrid2
{
public partial class Page : UserControl
{
  MyList<string> list;

  public Page()
  {
    InitializeComponent();

    dgOld.ItemsSource = "One Two Three Four Five Six".Split();
    btAdd.Click += new RoutedEventHandler(btAdd_Click);

    list = new MyList<string>();
    list.Add("Hello World!");
    dgNew.ItemsSource = list;
  }

  void btAdd_Click(object sender, RoutedEventArgs e)
  {
    list.Add(dgOld.SelectedItem.ToString());
  }
}

public class MyList<T> : List<T>, INotifyCollectionChanged
{
  public event NotifyCollectionChangedEventHandler CollectionChanged;

  protected virtual void OnCollectionChanged
      (NotifyCollectionChangedEventArgs e)
  {
    if (CollectionChanged != null)
    {
      CollectionChanged(this, e);
    }
  }

  public new void Add(T item)
  {
    base.Add(item);
    OnCollectionChanged(new NotifyCollectionChangedEventArgs
      (NotifyCollectionChangedAction.Reset));
 // 정상적으로는 이벤트 발생시 Add Action을 전송해야 하는데,
 // 위치조정이 어려워 Reset Action을 대신 전송했으니 차후에
 // 실전 사용시는 적절히 수정해서 사용해야 할 필요가 있습니다.
 // OnCollectionChanged((new NotifyCollectionChangedEventArgs
 //   (NotifyCollectionChangedAction.Add, o, 0));
  }

  public new void Remove(T item)
  {
    base.Remove(item);
    OnCollectionChanged(new NotifyCollectionChangedEventArgs
      (NotifyCollectionChangedAction.Reset));
 // 
 // OnCollectionChanged(new NotifyCollectionChangedEventArgs
 //   (NotifyCollectionChangedAction.Remove, o, 0));
  }
}
}

소스파일첨부:

SilverlightTwoDatagrid2.zip