Todoenlavidacomienzaconcdigo VIIEncuentroDesarrolladoresMicrosoft

SketchFlow. Creacin de prototipos Silverlight y WPF

JoseGarcia|ServiciosProfesionales
VIIEncuentroDesarrolladoresMicrosoft| TodoenlavidacomienzaconCdigo

MICROSOFTEXPRESSIONBLEND+SKETCHFLOW SketchFlowesunaherramientadediseoconceptualparacrearprototipos,ycomotaltiene tresobjetivosprincipales: Experimentarlainterfazdeusuario,tantoporpartedelclientecomoporpartedel equipodedesarrollo. Comunicarlaspropuestasalcliente. Recopilarloscomentariosdelaspersonasinteresadas.

EstaherramientaespartedeBlend.CuandocreamosunnuevoproyectoenBlend,podemos escogerdostiposdeproyectos,SilverlightoWPF,yencualquieradelosdoscasos,unadelas opcionessercrearunaaplicacinSketchFlow.Tambinnospermiteelegirellenguajede programacin,C#oVisualBasic.NET. EstonosproporcionarunIDEconelaspectodelailustracin1. PANTALLADENAVEGACIN SketchFlownospermitesimularlanavegacinatravsdelaspantallasdelaaplicacin,y tambinlacreacindelaspantallasysusrelacionesdenavegacin,creandounmapa interactivoquerepresentaelflujodelaaplicacin.

EnlaventanaMa apadeSketch hFlow,quea aparecebajo olapantallas seleccionada a,tenemosuna esentacindetodaslasp pantallasysu usrelaciones s. repre

Ilustrac cin1.IDEdeBle end

EnelMapadeSketchFlowpo odemoscrear rnuevaspan ntallas,darlesnombres,c cambiarlos res,porejem mplopodemo oshacerque unapantalla adeErrorap parezcaenro ojo,opodem mos color blecerlasrela acionesentr relaspantall as. estab Sieje ecutamoselp proyecto,seabrirelnav vegadorporlaprimerap pginadelpr rototipo,yala izquie erdadispond dremosdel Reproducto rSketchFlow w,quenosp permitirnav vegarporlas s pgin nas,comprob bandotodaslasvasden navegacind denuestraap plicacin. CREA ARCOMPO NENTESDE EPANTALLA A Laspantallasquecreamosparaelprototi porepresentanpginasdelaaplicac cin,ycomoera sperarpodem mosincluirco ontrolesdeiinterfazdeu usuarioenellas.Haycont trolesconun n dees aspec ctomspare ecidoaldelo osdeVisualS Studio,yopo odemosutiliz zarlosquetiienenelestilo Sketc chFlow,paraqueasquedesiemprep patentequetrabajamosconunproto con otipo,ynoc unav versinmuyinicialdelaa aplicacin,lo oqueserad diferente. Alad derechaden nuestrapanta allaencontra aremoslave entanaActivo os,donde,en ntreotros elementosdelaa aplicacin,disponemosd deloscontro oles.Porejem mplo,dentro odeEstilos,e estn losco ontrolesdenominadosSk ketchSytles, quemantien nenunaspec ctodebocet toamanoalz zada,

quer resaltasucon ndicinlaco ondicinprot totipodelaa aplicacin.Podemosemp pleardiferen ntes contr roles,paraco omprobarqu uesucompo ortamientosi imulaaldelo osreales. Tamb binpodemo oscrearPant tallasdeCom mponentes,q quesonespe ecialmente tilespara conju untodecomponentesqu uevanairen nlaaplicacindeformar repetida.Por rejemplo,si estemenapareceendiferentespg tuviramosunmencontres sbotones,ye ginas,enlug garde eracrearloe encadaocasi in,loharem mosunasolavez,yluego oloconstitui remoscomo ouna volve Panta alladeComp ponentesque epuedeiras sociadaadiferentespant tallas.Porde efecto,apare ecer como ounaventan naverdedeb bordesredon ndeadosene elMapaSket tchFlow,com moenla Ilustr racin2.

Ilustrac cin2.MapaSke etchFlow

ESTA ADOS Lasaplicacionesc cadavezsonmsinterac ctivas,yport tantolospro ototiposhan depoder repro AJAX.Sketch oducirestado osparasimularlainterac ctividaddea aplicacionesS SilverlightoA hFlow lores suelvepermi itindotegra abarlosvario osestadosdeunapantal lla. Pore ejemplo,supo ongamosquetenemosu unartculoSi illa,yqueenunpanelmo ostramosla image endelmode elodesillase eleccionado. Queremoss simularquec cuandopinch hamoseneltexto Verimagen,aparecerlasilla. Paraellopodram mosseleccion narlaimagen ndelasillay yenelpaneldePropieda ades,enel apart tadoAparien nciadejemos slapropieda adOpacity(o opacidad),al0%,conloq quelaimagen nno sever.Luegogra abaremosun nEstadocon nlaimagend delasillacon nunaopacid addel100% %,esto everperfec ctamente,ya asociamosa ltextoVerimageneseestado. es,se Dees staformacuandounusuariodelprot totipohagau unclicderat tnsobreel texto,apare ecer laima agen,simula andouncomportamiento odenuestraaplicacin.E Estafunciona alidaddeEst tado,

nosresolverlas simulacinde ediferentes tiposdecom mportamient tosdenuestr roscompone entes, enerquepro ogramaresas srespuestas aeventos. sinte ANIM MACIONES Unpa asomsdare emosconlas sAnimacione es.Enlasanimaciones,g grabamosun asimulacin ndela intera accindelus suarioconva arioscompo nentes.Porejemplo,pas saremoselra atnporenc cima deun naimagenysegenerarunarespues staautomticaquesermostrarunp preciodeofe erta. Luego oharemosclicsobreotra aimagenye estpasara aaadirunartculoaunp pedido,com mose mues straenlaIlus stracin3. Pararealizarestasoperacione esnosservir remosdelav ventanadeA AnimacinSk kectFlow,quenos tagrabardife erentesestados,movimiientos,trans siciones,etc. facilit Enes stetipodeco omportamientos,simula mosdiferent tesrespuestasaloseven ntosderatn n habit tualesquepu uedeteneru unaaplicaci n.

Ilustrac cin3.Animaciones.

COMPORTAMIENTOS Loscomportamientossonpaquetesdecdigoreutilizable,quepuedenseraplicadosalos objetosdelprototipo.Normalmente,uncomportamientopermitealgntipodeinteractividad. Normalmente,introduciremosestoscomportamientosenloscontrolesdeunaformamuy sencilla.Porejemplo,siqueremosquecuandopulsemosunbotncomorespuestanos movamosaotrapginadelaaplicacin,bastarconhacerclicderechosobreelbotnyenel mencontextual,elegirlaopcinDesplazarsea,queasuveznosofrecerlasposibilidadesde adelante,atrs,yelrestodelaspginasqueactualmenteestnenlaaplicacin. OtroscomportamientoscorrespondernalosEstadosyalasAnimaciones. USODEDATOSDEPRUEBA Todoloqueresolvamosenlosprimerospasosayudarahacerunaaplicacinmsrentable,y paramuchasaplicaciones,laintegracindedatosesunodelospuntosaresolver. SketchFlownospermitecrearconjuntosdedatosdeprueba,paraquepodamoscomprobarsu funcionalidadenlaaplicacin.Ademsnosdejarcrearestosconjuntosdedatosdeformaque estndisponibleseneldocumentoenelquenosencontramosoentodalaaplicacin. TambinnospermitircrearlosdatosoimportarundocumentoXML. EstosehardesdelaventanaDatos.Porejemplo,creramosunconjuntodedatosconun campoNombre,detipoCadena,queserellenarautomticamentecontextodeltipolorem ipsum,yotrocampoPrecio,detipoNmero.Porltimo,otrocampoImagenalquele asignaremosunacarpetadondeguardamosimgenesdeejemplo,deformaqueestecampo presentartodaslasimgenesqueencuentreencadaregistro. Unavezcreadaestacoleccindedatos,podramosarrastrarlaauncomponentedetipoGrid,y mostrarregistrosdeejemploconloscamposapropiados. FEEDBACK Esimportanterecordarqueelconceptoderealimentacinesintrnsecoalprototipado.Gracias alasaportaciones,opiniones,etc.,delaspersonasdenegocioimplicadasenelproyecto,ser queelprototipoaportavalor,ayudandoatodoseneldefinicinydiseodelaaplicacin.

Atrav vsdevarios sciclosdere ealimentaci n,lasaplicac cionesevolucionarnhas staconvertir rseen unpr roductoslid do,yaqueun nodelosobj jetivosdelpr rototipoesid dentificarte masquepue edan afectaraalgunad delaspartes sinvolucrada asenelproyecto. Sketc cFlownospro oporcionaalosusuariosunaformaf fcildeinteractuarcone elprototipo,yal equip podedesarrollo,deverr reflejadoslo sresultadosdeestaactu uacin. Cuandoejecutam mosnuestrop proyecto,co moyadijimo os,seejecutadentrodellexplorador, ,y tendr remosalaizquierdaunp panelquead demsdeper rmitirnosnavegar,ejecut tarlas animaciones,vereldiagramadelmapade enavegacin n,etc.Tambinincluyeu unaventana adaComenta arios. llama Elusu uariopodri irejercitando otodoelpro ototipoydejandocomen ntariosparaa aquellaspan ntallas quelo ocreaprecis so.Ademsd deescribirlo oscomentari iosenlaventana,tambi ntendrla opci ndedibujar rsobrelaspa antallascon diversosestilosdelpice esymarcado ores,ydifere entes color res,talycom moseveenla aIlustracin 4. Cadausuario,pod drguardarsuficherode ecomentario os,ydespuselequipod dedesarrollo olos importar,paras sutratamient to.

Ilustrac cin4.Comentar rios.

EMPAQUETADOYEXPORTACIN Empaquetarlasolucinparadistribuirlaoenviarlaalasdistintaspersonasimplicadas,esfcily tenemosunaopcinparaelloenelmen,deEmpaquetarelproyecto. Alempaquetarelproyecto,comprobaremosquetenemosqueenviarunbuennmerode ficheros,porsupuestodependiendodelvolumendenuestroprototipo,peroinclusoencasos deunopequeo,suponenladistribucindeunaaplicacincompleta. Sinembargo,esposibleencasodequelonecesitemosempaquetarunasolucinmsligera.Si vamosanuestrasolucinyaempaquetadaycogemoslosficherosTestPage.htmly[Nombre delprototipo].xap,podremoscopiarlosdentrodeunacarpetaydistribuirlos. ElusuariosolonecesitarabrirlapginaTestPage.htmlensunavegador,ydispondrdecasi todaslasfuncionalidadesdelprototipo. Pudieraserqueenalgncaso,pocohabitualporotrolado,estohicieraqueseprodujeraun error.Entoncesdeberamosenviarlaaplicacinempaquetadadeformacorrecta,peroenla mayoradeocasionessermsquesuficiente. LaexportacinaWord,esotradelasopcionesquenospermite.Utilizandoestaopcin encontraremosquetenemosundocumentodediseo,contodaslasventanasycomentarios pertinentesdeformaquepodemosaadirestearchivoaladocumentacindelproyecto. TambinesposibleconvertirelprototipoenelprimerarmadodelasolucinenVisualStudio. EnlaayudadeBlend,seindicanlasoperacionesnecesariasparahacerlo,quesibiennoson obvias,tampocosondemasiadocomplicadasparaunprogramador.Esdeesperarqueenla versin4queestsaliendoenbreve,estaoperacinseamsautomtica. PorltimoaadiremosqueBlend,esunproductoqueseintegracomoclientedeTeam FoundationServer,porloquepodemostrabajardeformaintegradaconelrestodelequipode desarrollo,yhacerquelosprototiposdeSketcFlowentrenaformarpartedenuestras secuenciasdetrabajoeneldesarrollodeunamaneranatural. ParamsinformacinnodudesencontactarconDanysoft,visitawww.danysoft.com,o llmanosal902123146.