Building a Rich Social Network Application

Miho HeoProduct ManagerHugeFlow Inc.

Gilbok LeeCTOHugeFlow Inc.

Part 1 – Miho HeoCompany PR Video Company Overview “Pigmap” Service Concept “Pigmap” Road map for Service d

“Pigmap” Teaser Trailer

Table of Contents

Part 2 – Gilbok LeePigMap DemoPresctiption of co-work

MVVM and Command PatternPigMap MapViewer EngineHistory management in RIAConclusion

Table of Contents

HugeFlow Inc.

video

Company OverviewHistory

Founded on May 1, 2007

http://hugeflow.com

Company OverviewSurfers

Dongwook

Sunkyung

Gilbok

PeterC Gongdo

Guntae

ok!miho

294

Sumin

Yunjin

http://hugeflow.com

Company Overview Achievement

REMIX KOREA 08REMIX SEA 08MIX 09

http://hugeflow.com

No.1 in Korea

Beyond Music!

Company Overview Vision

RichRichFlowFlow

the World

Internet Application CompanyBe the

Make the World

Make people

http://hugeflow.com

Pigmap

Service Preview Key Action

addaskansweraccountcallcar-rycatchchangechasechatcheckcon-tactcheerdealdatedecidedigdodrag-dropeasyendexplainfaceflow-fallfeelfightfillfixflygaingetouthirehold-huntjoinjumpkeepknockloadmail-markmakemeetmatchmemomiss-movenoticenoteofferopenorderown-postpickpasspayplaypinsearchsee-sharesetsendtagtaketalktellthinkuse-visitvotewaitwantwatchwinzoon

Service Preview Good

Mission Easy Method to Access Contents and

People

Contact level Reality Relationship

Mash Up Open Platform

Service Preview Good

Mission Easy Method to Access Contents and People

Contact level Reality Relationship

Mash Up Open Platform

Service Preview Good

Mission Easy Method to Access Contents and People

Contact level Reality Relationship

Mash Up Open Platform

Service Preview Case

Road MapPhase 1 2 3

World Wide Pigmap My home Widget

Transaction KnowledgeProductCareer

Commercial Product Place-ment

Business blogGuide E-Book Promotion event

Application Disneyland mapCity TourTransportation

SDK, Open API

PortablePhone

CLOSED BETA OPEN BETA RELEASE

Service Preview Vision

Enhance Your Network / from online to offline

flow the world on the map

Huge Flow the Real WORLD

Pigmap Teaser

video

PigMap

Gilbok LeeCTOHugeFlow

Demo

UX PlanningPersona

UX PlanningPaper Prototyping

“1 pixel right!”- piggyback

<XAML>

It’s not enough

Design Development

You expect a success.

But, there is always an accident.

Design

Design +Development

Developer’sDesigner’s

Oops!

Prescription for co-workMVVM and Command Pattern

Referenced from Nikhil Kothari’s ViewModel Pattern in Silverlight using Behaviors

View

XAML

Code-BehindEvent Handlers

Data Model

Basic Silverlight Pattern

View

XAML

Code-BehindEvent Handlers

Data Model A-1

Basic Silverlight Pattern

Data Model A-2

Data Model A-n

Data Model A-3

MVVM Pattern

Model + View + ViewModelA variation of MVCA general mechanism for Data Binding

MVVM Pattern

View

XAML

Code-Behind

ViewModel

State+Operations

Data Model

ChangeNotificationData-binding &

Commands

Referenced from Nikhil Kothari’s ViewModel Pattern in Silverlight using Behaviors

is present everywhere ?

Command is present everywhere ?

ControlB

ControlC

ControlA

Command Pattern

Event A

Event B

Event C

Command {Comman

dExecutedEventHandling

static

Without Command Pattern

A B

event

event

event event

event

event

=Control

With Command Pattern

A BCommand

Execute

ExecutedEvent

Command Pattern

Don’t abuseDon’t support every functions with Com-mandsDon’t use only built-in controls forgetting you can make User Controls and ControlsDon’t create a command which is dedi-cated to the specific view

Command Pattern

SilverlightFX libraries from Nikhil Kotharihttp://www.nikhilk.net/Silverlight-Effects-Transitions.aspxSLEextensions libraryhttp://www.codeplex.com/SLExtensions

Designer vs. Developer

< >

;vs.

Battle

Designer and Developer

Happy Ending

< >

;and

Rich Map ViewerPigMap Engine

AJAXMap Viewer

Review

Live Map (maps.live.com)

Silverlight DeepZoomMap Viewer

Review

DeepEarth (by soul solutions)http://deepearth.soulsolutions.com.au/

SilverlightMap ViewerGilbok LeeCTOHugeFlow

Demo

Be richer

Pigmap MapViewer Engine

IMapTileProvider

MapTile

Pigmap MapViewer Engine

MapTile MapTileLayer( :

ItemsControl)

Pigmap MapViewer Engine

MapTileLayer MapTileLayerGroup

Pigmap MapViewer Engine

Permanent Item Layer

( : ItemsControl)

Instant MapItem Layer

( : ItemsControl)

Sample Code

<Pigmap_Controls:MapViewerStaticItemsSource=

"{Binding PermanentResults}“ItemsSource=

"{Binding Path=Results}“MapTileProviderGroup=

"{Binding MapTileGroup}“/>

Bookmark?

History management

RIA in “A” pageQueryString is just one time.History management using book-mark

http://foo.com/default.aspx#key=bookmark

History management

RememberIt is very important to define ‘States’ clearlyAvoid dependency of each parameter

History management

Deep Linkinghttp://labs.nerdplusart.com/deeplinking/Silverlight Sample

History managementusing BookmarkGilbok LeeCTOHugeFlow

Demo

Conclusion

Pay attention to Pigmap as a SNS and map viewer platformMVVM and Command pattern in Sil-verlight are good to co-work RIA can support history management using BookmarkNear future

A lot of Rich services will appear.You’d better prepare rich one against us

HugeFlow will be prepared and chal-lenge.

T-shirts &Invita-tion

Announc-ing

Question?

Please Complete an Evaluation FormYour feedback is important!

Evaluation forms can be found on each chairTemp Staff at the back of the room have additional evaluation form copies

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.