Todoenlavidacomienzaconcdigo VIIEncuentroDesarrolladoresMicrosoft

SketchFlow. Creacin de prototipos Silverlight y WPF

JoseGarcia|Servicios Profesionales
VIIEncuentroDesarrolladoresMicrosoft| TodoenlavidacomienzaconCdigo

MICROSOFT EXPRESSION BLEND + SKETCHFLOW SketchFlowesunaherramientadediseoconceptualparacrearprototipos,ycomotaltiene tresobjetivosprincipales: Experimentarlainterfazdeusuario,tantoporpartedelclientecomoporpartedel equipodedesarrollo. Comunicarlaspropuestasalcliente. Recopilarloscomentariosdelaspersonasinteresadas.

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

EnlaventanaMa apadeSketch hFlow,quea aparecebajo olapantallaseleccionada s a,tenemosuna esentacindetodaslaspantallas p ysu 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 ecutamoselproyecto, p seabrirelnav vegadorporlaprimerapgina p delpr rototipo,yala izquie erdadispond dremosdelReproducto w,quenospermitir p nav vegarporlas s rSketchFlow pgin nas,comprob bandotodaslasvasden navegacinde d nuestraap plicacin. CREA AR COMPO NENTES DE E PANTALLA A Laspantallasquecreamosparaelprototi porepresentanpginasdelaaplicac cin,ycomoera sperarpodem mosincluirco ontrolesdeiinterfazdeusuario u enellas.Haycont trolesconun n dees aspec ctomspare ecidoaldelo osdeVisualS Studio,yopo odemosutiliz zarlosquetiienenelestilo Sketc chFlow,paraqueasquedesiemprep patentequetrabajamosconunproto c otipo,ynocon unav versinmuyinicialdelaaplicacin, a lo oqueseradiferente. d Alad derechadenuestra n panta allaencontra aremoslave entanaActivo os,donde,en ntreotros elementosdelaaplicacin, a disponemosd deloscontro oles.Porejem mplo,dentro odeEstilos,estn e losco ontrolesdenominadosSk ketchSytles, quemantien nenunaspec ctodebocet toamanoalz zada,

quer resaltasucon ndicinlaco ondicinprot totipodelaaplicacin. a Podemosemp pleardiferen ntes contr roles,paraco omprobarqu uesucompo ortamientosi imulaaldelo osreales. Tamb binpodemo oscrearPant tallasdeCom mponentes,que q sonespe ecialmente tilespara conju untodecomponentesqu uevanairen nlaaplicacindeformarepetida. r Por rejemplo,si estemenapareceendiferentespg tuviramosunmencontres sbotones,ye ginas,enlug garde eracrearloen e cadaocasi in,loharem mosunasolavez,yluego oloconstitui remoscomo ouna volve Panta alladeComp ponentesque epuedeiras sociadaadiferentespant tallas.Porde efecto,apare ecer como ounaventan naverdedebordes b redon ndeadosenel e MapaSket tchFlow,com moenla Ilustr racin2.

Ilustrac cin2.MapaSke etchFlow

ESTA ADOS Lasaplicacionescada c vezsonmsinterac ctivas,yportanto t lospro ototiposhan depoder repro AJAX.Sketch oducirestado osparasimularlainterac ctividaddeaplicaciones a Silverlight S oA hFlow lores suelvepermi itindotegra abarlosvario osestadosdeunapantal lla. Pore ejemplo,supo ongamosquetenemosu unartculoSi illa,yqueenunpanelmo ostramosla image endelmode elodesillase eleccionado. Queremossimular s quecuando c pinch hamoseneltexto Verimagen,aparecerlasilla. Paraellopodram mosseleccion narlaimagen ndelasillayenelpaneldePropieda ades,enel apart tadoAparien nciadejemos slapropieda adOpacity(o opacidad),al0%,conloq quelaimagen nno sever.Luegogra abaremosun nEstadocon nlaimagende d lasillacon nunaopacid addel100% %,esto everperfec ctamente,yasociamos a a ltextoVerimageneseestado. es,se Dees staformacuandounusuariodelprot totipohagaun u clicderat tnsobreel texto,apare ecer laima agen,simula andouncomportamiento odenuestraaplicacin.Esta E funciona alidaddeEst tado,

nosresolverlasimulacin s de ediferentes tiposdecom mportamient tosdenuestr roscompone entes, enerquepro ogramaresas srespuestas aeventos. sinte ANIM MACIONES Unpa asomsdare emosconlas sAnimacione es.Enlasanimaciones,grabamos g un asimulacin ndela intera accindelus suarioconva arioscompo nentes.Porejemplo,pas saremoselra atnporenc cima deun naimagenysegenerarunarespues staautomticaquesermostrarunp preciodeofe erta. Luego oharemosclicsobreotra aimagenye estpasaraaadirunartculoaunp pedido,com mose mues straenlaIlus stracin3. Pararealizarestasoperacione esnosservir remosdelaventana v deAnimacin A Sk kectFlow,quenos tagrabardife erentesestados,movimiientos,trans siciones,etc. facilit Enes stetipodeco omportamientos,simula mosdiferent tesrespuestasaloseven ntosderatn n habit tualesquepu uedeteneruna u aplicaci n.

Ilustrac cin3.Animaciones.

COMPORTAMIENTOS Loscomportamientossonpaquetesdecdigoreutilizable,quepuedenseraplicadosalos objetosdelprototipo.Normalmente,uncomportamientopermitealgntipodeinteractividad. Normalmente,introduciremosestoscomportamientosenloscontrolesdeunaformamuy sencilla.Porejemplo,siqueremosquecuandopulsemosunbotncomorespuestanos movamosaotrapginadelaaplicacin,bastarconhacerclicderechosobreelbotnyenel mencontextual,elegirlaopcinDesplazarsea,queasuveznosofrecerlasposibilidadesde adelante,atrs,yelrestodelaspginasqueactualmenteestnenlaaplicacin. OtroscomportamientoscorrespondernalosEstadosyalasAnimaciones. USO DE DATOS DE PRUEBA 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 afectaraalgunade d laspartes sinvolucrada asenelproyecto. Sketc cFlownospro oporcionaalosusuarios unaformafcil f deinteractuarcone elprototipo,yal equip podedesarrollo,deverreflejados r lo sresultadosdeestaactu uacin. Cuandoejecutam mosnuestroproyecto, p co moyadijimo os,seejecutadentrodellexplorador, ,y tendr remosalaizquierdaunpanel p quead demsdeper rmitirnosnavegar,ejecut tarlas animaciones,vereldiagramadelmapade enavegacin n,etc.Tambinincluyeu unaventana adaComenta arios. llama Elusu uariopodrir i ejercitando otodoelpro ototipoydejandocomen ntariosparaa aquellaspan ntallas quelo ocreaprecis so.Ademsde d escribirlo 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,parasu s tratamient to.

Ilustrac cin4.Comentar rios.

EMPAQUETADO Y EXPORTACIN 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.