L'Oberta en Obert: Homeopenaccess.uoc.edu/webapps/o2/bitstream/10609/7883/… · Web...

MEMÒRIA DEL PROJECTE

Desenvolupament ràpid de llocs web

Àrea del projecte:NET Framework

Opció de projecte: Desenvolupament ràpid de llocs web

Autor:

Jaume Estaun Millet

Consultor:

Jesús Bosch Ayguade

Històric del document

Versió

Comentaris

Jaume Estaun

12/06/2011

Esborrany.

Jaume Estaun

13/06/2011

Revisió per document definitiu.

Documents adjunts

Descripció

Versió

Document

Planificació del projecte, Diagrama de Gantt

13/06/2011

Planificacio.mpp

Document formal de requisits

13/06/2011

Requisits.doc

Prototip del lloc web

10/04/2011

Prototip.zip

Diagrama de la navegabilitat del Front-end

22/05/2011

Navegabilitat.vsd

Diagrames d’arquitectura, Workflow i UML

22/05/2011

DissenyTecnic.vsd

Diagrama de Base de Dades

22/05/2011

BaseDeDades.vsd

Implementació

22/05/2011

Implementacio.zip

WebMatrix project

22/05/2011

Web.zip

Base de dades

22/05/2011

BD.zip

Llistat de distribució

Destinatari

Jesús Bosch Ayguade

13/06/2011

Jaume Estaun Millet

13/06/2011

Índex

61.Introducció

61.1.Definicions

61.2.Descripció

71.3.Abast

81.4.Objectius

81.5.Estratègia

81.5.1.Bases

91.5.2.Gestió

101.5.3.Execució

101.5.4.Tecnologia

112.Planificació del Projecte

112.1.Llistat d’activitats

132.2.Descripció de les activitats

152.3.Organització de les activitats

172.4.Calendari de Milestones

183.Requisits funcionals

183.1.Pluja d’idees

193.2.Recull de requisits amb el client

203.3.Anàlisi dels requisits i separació de fases

213.4.Identificació dels casos d’ús

223.5.Presentació del document de requisits al client i acceptació

223.6.Revisió de la planificació

234.Disseny i prototip

234.1.Bibliografia i aprenentatge sobre usabilitat

234.2.Disseny d’estils

234.3.Disseny de la navegabilitat

254.4.Creació del prototip

265.Disseny tècnic

265.1.Bibliografia i aprenentatge de les tecnologies

285.2.Creació de diagrames tècnics

305.3.Identificació de les tasques d’implementació

315.4.Definició dels test cases

315.5.Revisió de la planificació

316.Implementació

316.1.Definició de la solució i projectes

336.2.implementació del model

346.3.Implementació de l’aplicació de gestió

356.4.Implementació del projecte del lloc web

367.Desviaments de l’anàlisi previ

378.Documentació

378.1.Instal·lació i publicació

468.2.Documentació d’usuari

479.Ampliacions del projecte

4810.Bibliografia

49Apèndix A (Manual d’usuari)

57Apèndix B (Errors comuns i coneguts)

1. Introducció

1.1. Definicions

Per entendre el contingut del document es proveeix d’un seguit de definicions:

Milestone: Fita principal en el projecte.

TFC: Treball de fi de carrera.

.NET: Una plataforma estàndard per a aplicacions informàtiques.

WebMatrix: Tecnologia de Microsoft per a la creació i publicació ràpida de llocs web.

Test Case: Test del software que cobreix un ús d’una funcionalitat per validar-ne la seva execució esperada.

TFS: Team Foundation Server, software de Microsoft per al control de versions i de qualitat del software.

VSS: Visual Source Safe, tecnologia de Microsoft per al control de versions de software.

UI: User interface.

Front-end: Part visible del lloc web per als usuaris d’internet.

Back-end: Apartat del lloc web per a l’administració i control.

IDE: Integrated developement enviroment.

1.2. Descripció

Aquesta és la realització del TFC en l’àrea de .NET de en quant al “Desenvolupament ràpid de llocs web”. L’objectiu global del projecte és explorar la tecnologia WebMatrix de Microsoft, proveint una web per la PYME “Ceramicas Alba”, dedicada a les reformes i la venda al detall de mobiliari y ceràmiques per a banys i cuines. La PYME compleix la característica de requerir amb certa urgència una web per publicar d’una manera ràpida informació de l’empresa.

La web tindrà dues parts: Back-end i el Front-end. El Back-end pretén permetre al client administrar les parts dinàmiques de la web com ara productes i dades de l’empresa. El Front-end serà la part visible per els usuaris d’Internet.

Com a proveïdor de la web, és requisit disposar d’eines i un entorn per a generar i publicar la web, WebMatrix és una tecnologia de Microsoft que s’hi ajusta i la definida en el TFC.

1.3. Abast

El projecte de creació del lloc web conforma vàries àrees:

· Planificació del projecte mitjançant el software Microsoft Project.

· Adquisició de coneixements en l’entorn WebMatrix de Microsoft.

· Disseny del projecte fent ús de Microsoft Visio per als diagrames.

· Implementació del projecte web mitjançant WebMatrix, C#, Javascript i HTML.

· Documentació del projecte mitjançant Microsoft Word i PowerPoint per a les presentacions. S’intentarà mantenir referències entre requisits funcionals, disseny, codi i test cases.

· Control de qualitat mitjançant la definició de:

· Test cases que permetin evitar errors en el producte final.

· Unit tests per evitar errors produïts per l’acoblament del codi.

· Control del codi font i les versions del software mitjançant TFS o VSS. La decisió es prendrà valorant la corba de temps d’aprenentatge i d’instal·lació de cadascun.

L’abast d’aquest document és:

· Definir i documentar amb exactitud, tant a nivell funcional com tècnic, cadascuna de les especificacions del projecte.

· Documentar la implementació del projecte del lloc web en totes les fases que el composen.

1.4. Objectius

Els objectius presentats en el TFC es llisten a continuació.

· Dissenyar un lloc web per una PYME.

· Assolir els coneixements necessaris en l’entorn Microsoft WebMatrix per a la creació i publicació del lloc web.

· Implementar el lloc web.

Els requisits bàsics contemplen que el lloc web està destinat a una PYME que acaba d’iniciar la seva activitat i te una certa urgència en disposar de la web per comunicar informació de la PYME. També és necessari que el pressupost econòmic sigui prou adequat.

En aquest TFC es realitza una web per a una empresa que no acaba de començar, però està passant de generació en la seva direcció. Per tant inicia la seva nova etapa amb la necessitat d’adaptar-se al mercat que ofereix Internet. En el seu cas, es parteix d’una idea inicial poc definida i amb pocs recursos econòmics dedicats.

1.5. Estratègia

1.5.1. Bases

Per a aconseguir proveir a l’empresa d’una web, que convingui amb els requisits que demana complir, sobretot a un preu adequat, entenent que l’adequació d’aquest es basa en l’estat de crisi actual, específicament en el sector en que desenvolupa la seva activitat, s’ha de prendre com a mesura l’objectiu de reutilització d’aquest lloc web per altres PYME que puguin tindre una necessitat similar.

Per tant, s’estableix com a premisses que la web sigui extensible, escalable y modificable. Existeix un augment en el temps de disseny i d’implementació, però per contra, es pot disminuir el preu sabent que una bona part de la consecució de la web podrà ésser reutilitzada en altres projectes similars. La modularitat del disseny del lloc web ens brindarà una primera base de reusabilitat.

1.5.2. Gestió

En quant a l’estratègia de gestió del projecte, es pretén proveir a la PYME d’un recull de possibilitats a explotar en el nou lloc web. S’intentarà dirigir els requisits de la web per optimitzar al màxim la possibilitat de reutilització dels mòduls definits per assolir l’objectiu de l’adequació del preu al mercat actual. A més a més, partint de la premissa que la PYME client no te molt clara la projecció de la web, s’ha dividit la fase del recull de requisits en una primera fase on s’exposa cadascun d’ells, i una segona fase en la que s’han categoritzat els requisits en bàsics i complementaris. D’aquesta manera s’ha pogut iniciar l’activitat del lloc web amb unes fites temporals raonables tenint present la globalitat que ha d’adquirir amb el temps.

En una segona etapa, s’ha proveït al client amb un prototip de l’interface, que un cop acceptat ha estat el punt de partida per al disseny tècnic i la implementació. Aquest disseny tècnic inclou uns requisits no imposats per el client directament: contemplar les necessitats de reutilització de les eines i mòduls per altres projectes de caire similar amb l’objectiu de reduir el preu del projecte.

S’ha preparat un entorn de desenvolupament i un de proves per poder realitzar els tests adequats i realitzar diferents fases de presentació del lloc web al client.

També s’han fet continues revisions de la planificació per detectar els desviaments de temps i l’aparició de noves tasques no contemplades prèviament. L’entorn de proves ha quedat en desús degut a les desviacions de temps en les tasques de la planificació, esdevenint una etapa posterior a aquesta entrega del projecte ja que el client és real juntament amb la necessitat del lloc web.

1.5.3. Execució

L’estratègia en quant a l’execució del projecte web s’ha basat en les següents fases:

· Definició i planificació del projecte

· Presa i anàlisi de requisits.

· Disseny i prototip de la UI.

· Disseny tècnic de la web.

· Implementació i proves.

1.5.4. Tecnologia

Per a la presentació i publicació del lloc web s’ha utilitzat principalment l’entorn WebMatrix ja que és l’aposta de Microsoft en quant al desenvolupament ràpid de llocs web. També degut a la seva fàcil integració amb diferents llenguatges i plataformes de programació web.

Els llenguatges de programació utilitzats son C#, javascript i HTML en l’entorn IDE Visual Studio 2008.

Per a l’accés a dades es pretenia l’utilització d’Entity Framework, tecnologia de la plataforma .NET de Microsoft que sorgeix a partir de la release de NET Framework 3.5, però el baix nivell de tractament de les dades, per obtenir un alt nivell de polimorfisme, ha provocat que l’accés s’hagi realitzat amb ADO. La tecnologia del motor de bases de dades elegida ha estat SQLServer 2008.

2. Planificació del Projecte

2.1. Llistat d’activitats

(En aquest llistat, no es fan aparèixer les tasques corresponents a les entregues del TFC).

La planificació inicial del projecte correspon al llistat següent de tasques, però cal esmentar que s’ha vist afectada durant el transcurs de la seva execució. Tot i això, els canvis apareguts són comuns en el desenvolupament de qualsevol projecte, i per això, existeixen en la planificació diferent punts de revisió de la planificació.

Es marquen les tasques posposades en verd.

· Planificació del projecte

· Cerca i selecció de la bibliografia necessària.

· Creació del document inicial de planificació.

· Creació del diagrama de Gantt del projecte.

· Presa de requisits

· Pluja d’idees sobre les necessitats de la PYME.

· Recull de requisits amb el client.

· Anàlisi dels requisits i separació de fases.

· Identificació dels casos d’us.

· Presentació del document de requisits al client i acceptació.

· Revisió de la planificació.

· Disseny i prototip

· Cerca de bibliografia i aprenentatge sobre l’usabilitat.

· Disseny dels estils de l’interface web.

· Disseny de la navegabilitat de la web.

· Creació del prototip de la web.

· Presentació del prototip i acceptació.

· Revisió de la planificació

· Disseny tècnic

· Bibliografia i aprenentatge de les tecnologies utilitzades.

· Creació de diagrames tècnics.

· Casos d’ús

· Diagrama de l’arquitectura

· Diagrames d’activitat

· Diagrames estàtics de classes

· Identificació de les tasques d’implementació.

· Planificació de les tasques d’implementació.

· Definició del test cases.

· Implementació

· Implementació dels unit tests.

· Implementació de les funcionalitats i execució de unit tests.

· Presentacions per fases d’implementació.

· Testing i solució de defectes.

· Tests de la web i solució dels defectes

· Publicació de la web.

· Cerca de hosting.

· Publicació.

· Tests de la web

· Documentació final

· Redacció de la memòria.

· Preparació de la presentació.

En el cas del disseny tècnic, s’ha optat per realitzar els documents de disseny que més aporten en quant a orientar la implementació del projecte. Els casos d’ús permeten modularitzar la implementació i evitar d’incompliment de qualsevol requisit. Es considera que per desviaments en temps, pot quedar rellevat en un segon pla ja que millora i afina el disseny, però no és un punt inicial d’orientació per a la implementació.

També, per no perjudicar altres tasques essencials de la planificació, tota tasca de testing ha quedat posposada per una etapa posterior a la presentació del TFC degut a les desviacions aparegudes en la planificació.

2.2. Descripció de les activitats

Tot i els canvis en la planificació, totes les activitats a realitzar queden documentades per poder executar-les en el moment en que les iteracions en els cicles de disseny i implementació vagin produint-se.

Activitat

Planificació del projecte

Descripció

Es pretén introduir el projecte i detectar i planificar les activitats que s’han de dur a terme per assolir-lo.

En aquesta fase només es poden determinar a alt nivell les tasques a assolir ja que el lloc web encara no està definit, però ja es pot identificar les fases generals del projecte i identificar les activitats de que es componen en relació a l’estratègia que es defineix.

Duració

8 hores

Activitat

Presa de requisits

Descripció

S’ha de definir amb el client quines son les seves necessitats proveint-lo de la orientació necessària.

En aquesta activitat es defineixen els requisits que composen la primera versió del lloc web i les extensions que se’n farà en un futur.

Es revisa la planificació per poder tindre en compte l’abast dels requisits del client.

Duració

14 hores

Activitat

Disseny i prototip

Descripció

S’ha d’arribar a generar un prototip de la web per presentar al client.

Es definix un plànol de la web i els estils necessaris per utilitzar en la UI. És necessari informar-se de la usabilitat en la UI de l’entorn web.

Existeixen varis cicles entre la presentació del prototip i mapa de la web, i la seva redefinició amb el client fins arribar a l’acceptació.

Es revisa la planificació per poder contemplar desviaments de temps i els cicles emprats en l’acceptació.

Duració

40 hores

Activitat

Disseny tècnic

Descripció

Un cop acceptats els requisits funcionals i el prototip de UI de la web, es realitza el disseny tècnic per orientar i definir la implementació i el control de qualitat. S’utilitzarà la tècnica del disseny descendent.

Per realitzar un bon disseny serà necessari conèixer a fons les tecnologies emprades, és per això que hi haurà una fase d’aprenentatge.

Es revisa la planificació del projecte per incorporar les tasques d’implementació i la desviació detectada en aquesta activitat.

Duració

22 hores

Activitat

Implementació

Descripció

S’estableixen tècniques de Test Driven Development per definir els tests previs a la implementació segons el temps disponible en aquesta activitat.

Es defineixen certes fases per poder mostrar al client l’estat del projecte i poder rectificar a temps reduint l’impacte sobre la planificació. Les mostres parcials es realitzen en l’entorn de proves, que serà un host local o un hosting extern de baix cost i poc escalable.

A mida que es van complint les tasques d’implementació es realitzen revisions de la planificació.

Duració

75 hores

Activitat

Testing i solució de defectes

Descripció

En aquest punt, la web està complerta i es marca la versió del software per incrementant-la en cada cicle de testeig i solució de defectes.

El testeig es realitza en l’entorn de proves.

S’ha de revisar la planificació per cada cicle realitzat.

Duració

20 hores

Activitat

Publicació de la web

Descripció

S’ha de trobar un hosting adequat a la tecnologia emprada i realitzar la publicació de la web.

Es revisa la web publicada mitjançant els tests definits per evitar problemes deguts al nou entorn d’execució.

Es revisa la planificació per incorporar els últims canvis en els temps utilitzats.

Duració

10 hores

Activitat

Documentació final

Descripció

Es realitza la redacció de la memòria del TFC i la presentació.

Es fa la última revisió de la planificació.

Duració

62 hores

2.3. Organització de les activitats

S’estableix l’inici del projecte el 15/03/2011. S’estableixen, de dilluns a dijous, 3 hores diàries dedicades i 4 diàries, per dissabte i diumenge.

Existeix una setmana en que no hi ha dedicació al projecte degut a un viatge de treball de l’autor, per tant es redueix el temps total dedicat al projecte.

Seguidament es presenta el diagrama de Gantt de la planificació inicial i complerta del projecte.

2.4. Calendari de Milestones

Existeixen unes fites que s’han de complir al llarg del projecte el marc del TFC:

Continguts

16/03/2011

Definició i planificació del projecte.

11/04/2011

Presa i anàlisi de requisits.

Disseny i prototip de la UI.

Disseny tècnic de la web.

23/05/2011

Implementació i proves.

13/06/2011

Entrega final

Documentació final.

3. Requisits funcionals

3.1. Pluja d’idees

Sabent que el client no te massa clar com ha de ser el lloc web, i quines funcionalitats ha de tindre, es realitza una recerca i pluja d’idees per proposar al client com a requisits de la web.

Primer es fa una cerca a través del proveïdor Google per detectar de quins apartats es composen les webs del mateix estil i ram. Seguidament, es realitza la pluja d’idees per millorar el que actualment hi ha en el mercat. Finalment es realitza un anàlisi des del punt de vista comercial.

Primerament s’ha de determinar l’objectiu comercial que hauria de fer l’empresa del lloca web: Obtenir una major presencia entre clients potencials, i com a conseqüència, promocionar els productes i serveis que ofereix. Així doncs, el projecte de lloc web estarà determinat per, degut al tamany i dedicació de l’empresa, no delegar gaire part de la jornada laboral dels treballadors al manteniment de la web i evitar un contacte no personal amb els clients.

Seguidament s’estudia el projecte web per mantenir la directriu de realitzar la web d’una manera genèrica per poder baixar el preu de venta del lloc web i realitzar altres contractes aprofitant al màxim la feina realitzada prèviament. Per tant, desenvoluparem la major part del requisits possibles d’una manera parametritzable per adaptar-la a les necessitats del client i donant la possibilitat d’ampliar a requisits no intuïts amb antelació. En aquest punt, pensarem en la parametrització necessària per adaptar-la al client actual.

Els requisits resultants per al client son:

· Apartat/s d’informació de la tenda:

· Contacte: telèfon, mail, enviar correu.

· Localització: Mapa Google.

· Horari.

· Descripció de l’empresa.

· Treballs realitzats: Fotos, Plànols, Dibuixos,...

· Noticies

· Proveïdors: Marques, ...

· Historia.

· Serveis.

· Tenda: Fotos, ...

· Catàleg:

· Cerca per tipus, marca, preu, text, ...

· Ofertes/Promocions

· Normal: Complert.

· Novetats

· Vista virtual: 3D de cuines

· Idiomes:

· Català

· Castellà

· Comptadors i estadístiques:

· Numero de visites.

· Temps d’estància en la pàgina.

· Mitjanes diàries de visites.

· Temps mitjà de visites.

· Comptador de visites als productes.

· Temps mig de visita dels productes

· ...

· Pàgina principal home amb informació dels serveis, empresa, localització i horaris. (Per les cerques de Google)

· Cada pàgina incorpora claus de cerca en Google.

· S’ha de tenir la possibilitat de desactivar apartats de catàleg i molta de la informació de la tenda ja existirà en la pàgina d’entrada.

· Els comptadors tenen l’objectiu de saber l’èxit de la web i quins productes o dades son més determinants en les cerques dels clients.

3.2. Recull de requisits amb el client

Es realitza una reunió amb el client i es determina que:

· C1:Necessita una web tipus targeta.

· C2:Vol poder introduir alguns productes com els estocs que te de mostra o ofertes molt concretes.

· C3:Bàsicament informació d’on es troba la tenda, qui son, …

Seguidament es proposa al client tots i cadascun dels requisits recollits.

3.3. Anàlisi dels requisits i separació de fases

S’analitzen tots els requisits amb el client i es separa per una primera fase d’entrega els següents requisits:

· Pàgina principal amb la informació (Requisits C1, C2):

· Localització: Mapa Google.

· Descripció de l’empresa.

· Historia.

· Serveis.

· Tenda: Fotos, ...

· Apartat/s d’informació de la tenda (Requisits C1, C2):

· Contacte: telèfon, mail, enviar correu, localització, horari.

· Treballs realitzats: Fotos, Plànols, Dibuixos,...

· Proveïdors: Marques, ...

· Catàleg: Possibilitat de desactivar apartats i capacitat de configuració de les dades mostrades (Requisits C3)

· Cerca per camps de dades dels productes.

· Ofertes/Promocions (Principalment)

· Complert.

· Novetats (Principalment)

· Idiomes:

· Català

· Castellà

· Comptadors i estadístiques:

· Numero de visites.

· Temps d’estància en la pàgina.

· Mitjanes diàries de visites.

· Temps mitjà de visites.

· Comptador de visites als productes.

· Temps mig de visita dels productes

· ...

· Tot apartat de configuració de la web i estadístiques serà accessible des de una part de Back-end on tindrà accés només l’empresa.

3.4. Identificació dels casos d’ús

Els casos d’ús identificats amb el client són:

Client cerca una tenda per un servei i/o un producte.

Empresa vol determinar l’èxit dels productes.

Empresa vol determinar l’atracció de clients de la web.

Empresa vol publica/modificar/eliminar un producte.

Empresa vol publicar/modificar/eliminar dades informatives.

3.5. Presentació del document de requisits al client i acceptació

Es realitza un document formal i més profund dels requisits recollits amb el client i es presenta per obtenir una acceptació que eviti cap tipus d’interferència en el projecte degut a modificacions dels requisits. Per evitar confusions, s’explica un a un cadascun dels requisits que es recullen en el document.

Es pot trobar aquest document adjunt en la taula: “Documents adjunts”.

3.6. Revisió de la planificació

En aquest punt del projecte, finalitzant l’etapa de presa de requisits, es realitza una revisió de la planificació establerta.

Ha aparegut una desviació del temps establert per cada tasca que provoca un retràs d’un dia a guanyar en alguna de les fases posteriors.

La primera part que es veu sacrificada davant aquests events en el transcurs d’un projecte és la relacionada amb la qualitat del software. S’ha d’estar atent a no minimitzar esforços en aquest camp i ser capaç de sacrificar funcionalitats envers a la qualitat si fos en algun moment necessari i imperatiu.

Tot i això, i a l’intent de reduir el temps de desenvolupament i proves proporcionalment, s’han sacrificat tant funcionalitats com totes les etapes de testing formal, quedant posposades per una segona etapa del projecte.

4. Disseny i prototip

4.1. Bibliografia i aprenentatge sobre usabilitat

Relació de documents, llibres i material web utilitzats:

http://es.wikipedia.org/wiki/Usabilidad

http://es.wikipedia.org/wiki/Accesibilidad_web

http://www.w3.org/TR/WCAG10/

4.2. Disseny d’estils

Ja que es realitza un projecte web els estils es defineixen en Cascade Style Sheets (CSS).

Amb questa tecnologia, es defineix l’aparença genèrica de cada tipus d’element que apareix en les planes web com ara texte pla, menú i les seves opcions, títols, links, ...

Inicialment es realitza la preparació del prototip en HyperText Markup Language (HTML) i es defineixen els estils segons van apareixent diferents tipus d’elements de contingut de les planes web.

Finalment s’obtenen uns estils preliminars que són la guia bàsica per el desenvolupament del lloc web en la forma i producció de pàgines dinàmiques que es pretén. Aquest estils es troben en /Prototip/stylehome.css.

4.3. Disseny de la navegabilitat

Prenent com a base els requisits formals acceptats per el client, es realitza una fase de definició de la navegabilitat del lloc web.

El client demana principalment una web força estàtica amb la possibilitat d’incorporar una sèrie de llistes de productes que poden variar en forma de presentació i quantitat.

Així doncs, es planteja una web principalment governada per un menú que dona la navegabilitat necessària per accedir a cadascun dels continguts recollits en els requisits.

Per altre banda, existeix el Back-end. Aquesta secció del lloc web ha de permetre al client la revisió dels comptadors i la configuració de la plana web del Front-end. No es defineix la navegabilitat del Back-end ja que s’implementa en la mesura que els requisits del Front-end provoquen una necessitat de configuració dels seus elements. La navegabilitat per tant no es un concepte a destacar per a la definició del Back-end.

A continuació es mostra la senzilla navegabilitat definida per al Front-end, sempre tenint en compte, que en alguna plana poden aparèixer elements que permetin la mateixa navegabilitat proposada a través del menú però en forma de link per accedir als mateixos elements. D’aquesta manera incloem una de les bases de la usabilitat web que proposa la possibilitat de realitzar una mateixa acció de diferents maneres per agilitzar l’ús de la web i fer-la més intuïtiva.

4.4. Creació del prototip

Es defineix un prototip de plana web estàtic que permet al client visualitzar d’una manera fàcil la via que pren el projecte web en quant a distribució, navegabilitat i estils.

La distribució bàsica que es proposa es la subdivisió de la pàgina en tres zones apilades. De la part superior a la inferior:

· Logotip i idiomes: Apareix el logotip de l’empresa i la selecció d’idiomes.

· Menú: De forma horitzontal es mostren les opcions de menú que permeten la navegabilitat.

· Espai de formulari: En aquesta zona apareixen totes i cadascuna de les planes definides en els requisits en la mesura que es vagi navegant per la web.

A continuació es mostra una captura del prototip:

En l’apartat de documents adjunts, es fa entrega del prototip del lloc web.

Per visualitzar el prototip, fer doble-click al document /Prototip/ Home.html.

5. Disseny tècnic

5.1. Bibliografia i aprenentatge de les tecnologies

Les tecnologies que s’han utilitzat per al desenvolupament del projecte web són:

Tecnologia 1: CSS

Cascade Style Sheet

Sigles

Descripció

Permet el desenvolupament dels estils visuals dels elements de la web.

Nivell

Ja conegut

Bibliografia

Tecnologia 1: Javascript

Javascript

Sigles

Descripció

Permet la gestió de processos en el client i la comunicació amb el servidor.

Nivell

Ja conegut

Bibliografia

Tecnologia 1: HTML

Hypertext Markup Language

Sigles

Descripció

Generat en el servidor i executat en el client. Genera els components pertanyents a les planes web en el client.

Nivell

Ja conegut

Bibliografia

Tecnologia 1: ASP.NET (C#)

ASP.NET (C#)

Sigles

Descripció

Llenguatge i plataforma per a el programa servidor del lloc web.

Nivell

Ja conegut

Bibliografia

Tecnologia 1: Microsoft Visio

Microsoft Visio

Sigles

Descripció

Generació de diagrames per al disseny tècnic.

Nivell

Ja conegut

Bibliografia

Tecnologia 1: WebMatrix

WebMatrix

Sigles

Descripció

Gestiona la generació i publicació del lloc web.

Nivell

Desconegut

Bibliografia

http://www.asp.net/webmatrix/tutorials

Tecnologia 1: Navegadors

Firefox, Internet Explorer

Sigles

Descripció

Software de client que executa la web.

Nivell

Ja conegut

Bibliografia

Tecnologia 1: IIS

Internet Information Server

Sigles

Descripció

Software de servidor que executa la web a petició dels clients.

Nivell

Ja conegut

Bibliografia

5.2. Creació de diagrames tècnics

Per a la creació de diagrames tècnics s’utilitza l’eina Microsoft Visio. Es pot fer referència als diagrames en l’apartat de documents adjunts.

Es defineix primerament un diagrama i la decisió de l’arquitectura que seguirà el desenvolupament del lloc web. La decisió que s’ha pres és la d’utilitzar el patró Model-Vista-Presentador (MVP). D’aquesta manera, existeix l’entitat Presentador que te la capacitat de gestionar el Model a petició dels events que li transmet la Vista. Es ell qui coneix el motor de procés del lloc web i es capaç de modelar les dades per deixar-les preparades per que la Vista pugui mostrar-les.

Per a més coneixement del patró MVP referir-se a la bibliografia adjunta.

La Vista vindrà donada per la classe Page de .NET i la implementació de faci cada classe de l’interface IRenderizable.

El Presentador, motor de la web, serà l’encarregat de la carrega de les dades persistides i portar-les al model en forma d’objecte. També manipula, desa i recarrega els objectes per a acabar entregant a la vista un objecte Form a qui aquesta pot cridar per presentar a la UI. Cada element es l’encarregat de donar la seva representació a la Vista i demanar als elements que conté que es dibuixi en la seva pròpia representació.

Els elements del Model son bàsicament un grup de classes amb propietats basades en dades de la Base de Dades i amb mètodes per al seu maneig per al Presentador. A l’especialitzar les classes del Model, es dona al Presentador la capacitat de donar sentit a les dades i poder manejar-les d’una manera específica.

La idea que es vol explotar és la de poder carregar les dades persistides en la Base de dades al tipus d’objecte que es vulgui. Es per això que tot objecte del model és una especialització de PropertyContainer. Qualsevol objecte no fa res mes que donar objectes Propertiy y manejar-los a la seva classe base. Així doncs, un producte pot esdevenir un MenuOption per mostrar només el seu nom i linkar-lo a un Form on es mostri un Layout amb la seva representació de UI definida.

L’activitat del lloc web es desenvolupa per iniciar-se amb una crida per IRenderizable al Form principal que tindrà recuperat el ModelController. Qualsevol event que es produeixi arriba a ModelController per carregar i modificar l’estat en execució dels elements del Model i presentar un nou Form a la Vista per representar-lo en la UI.

El següent diagrama pretén mostrar en termes generals el Workflow que segueix l’execució de la web:

De la mateixa manera, el Back-end, gràcies a la mal·leabilitat que presenta la classe ProperyContainer, mostra i manega els objectes de la Base de dades per generar un estat del Model que permeti a ModelController en la part de Front-End iniciar una execució de la web.

En quant al disseny de la Base de Dades, es pot referir també al document adjunt en l’apartat corresponent. S’ha pretès no donar significat a les dades persistides sense que un intèrpret utilitzi les pròpies dades per fer-ho i amb coneixement de la forma que han de prendre.

Així doncs, per realitzar el lloc web, es dona un conaixement sobre les dades a cada projecció del patró. Des del punt de vista de la Vista, les dades es mostren segons el significat que es vol donar al tipus d’usuari i les accions que es volen realitzar. Des del del Presentador, els objectes del Model son els definits en els diagrames. Des del punt de vista del Model, tots els objectes són de la mateixa classe però amb propietats comuns i diferents. ModelController a de ser capaç de donar servei a tot significat de la Vista i del Model.

5.3. Identificació de les tasques d’implementació

En ordre de precedència es llisten les tasques globals d’implementació:

· Crear PropertyContainer

· Crear classes del Model.

· Crear esquelet de ModelController.

· Implementar Workflow d’execució(WE) amb mètodes dummy.

· Crear Base de Dades

· Crear QueryManager.

· Crear DataManager.

· ModelController: Implementar càrrega en (WE).

· Crear Classes de Vista.

· ModelController: Implementar Vista en (WE).

· Vista: Implementar crides IRenderizable.

· ModelController: Crear metodes per crear dades per pàgina principal.

· Crear pàgines estàtiques per gestionar els mètodes del ModelController.

· Crear pàgina principal amb les pàgines estàtiques.

· Trobar mancances i donar manejabilitat a nivell superior a les pàgines estàtiques per gestionar el Model persistit.

· Crear la resta de dades del Model amb les pàgines estàtiques.

· Crear les dades del Model necessàries per mostrar en una execució inicial diferent del ModelController i donar accés al client a pàgines de gestió de comptadors i el model de Dades des del nivell superior de maneig.

Notes:

· En tot punt del desenvolupament poden aparèixer necessitats d’especialitzacions de PropertyContainer i de la seva gestió en el ModelController. Aquestes s’han desenvolupant en la mesura que s’implementen les tasques i n’apareix la necessitat.

· El nivell superior de maneig de que es parla, tracta les dades des del punt de vista de significat en la web de la Vista. Es pot generar un layout per un producte donant a entendre al client que ho fa per tots i extendre el layout a totes els productes. Quan el client vulgui mostrar els productes, presentarà, no els productes, si no els layouts amb propietats donades pel ModelController per identificar-los a l’usuari com a llistables.

· No s’ha realitzat una planificació de les tasques d’implementació. S’ha realitzat cadascuna segons la seva precedència.

5.4. Definició dels test cases

En tot moment es desenvolupa la web pensant en la incorporació de Unit Testing i la definició de tests formals de qualitat.

Per problemes de temps pels endarreriments soferts fins aquest punt i l’increment del temps d’implementació proposat per el disseny, no es realitzarà cap mena de testeig formal o implementació externa al codi del desenvolupament de la web. Però com s’ha especificat, s’evitarà l’acoblament de classes i es primarà la possibilitat de introduir Mokers en el transcurs del Unit Testing..

5.5. Revisió de la planificació

Degut a la complexitat del disseny i la previsió que s’ha fet del temps de desenvolupament, en aquest punt del transcurs del projecte s’ha previst la falta de temps per realitzar-ho. Així doncs, es el punt on s’ha plantejat l’eliminació de les tasques de testing per posposar-les fins a la finalització del desenvolupament.

6. Implementació

6.1. Definició de la solució i projectes

En aquest projecte s’ha definit una base de dades totalment abstreta del que representa un objecte, per tant, qualsevol regla d’integritat de dades queda exempta en la definició de les dades.

Les dades prenen normes que defineixen la seva composició a partir de dos punts, el Front-end i el Back-end. En tots dos, el component que realitza aquesta tasca es el Model.

A través del Back-end es treballa la part de modelatge de les dades. Creació, eliminació y modificació dels objectes de base de dades a partir d’unes regles que permeten establir les classes que els composen:

· TFCForm: Classe apuntada inicialment en la web, que conté un TFCLayout per desencadenar el renderitzat HTML.

· TFCLayout: Classe que permet en el seu contingut algunes de les classe definides en el model per fer-ne el renderitzat de manera determinada o mitjançant l’interface IRenderizable que implementen algunes classes.

· TFCConfiguration: Classe que conté algunes dades que intervenen en les variables usades en runtime en la web.

· TFCTextContainer: Conté cadascuna de les cadenes de text estàtiques de la web.

· TFCImageContainer: Conté cadascuna de les imatges de la web.

· TFCMenu: Classe amb la capacitat de renderitzar una sèrie de links que provoquen un canvi de TFCForm i el repintat de la web segons aquest. El mecanisme de recepció de l’event i les variables, i tornar a renderitzar la web el gestiona ModelPresenter.

· TFCContentItem i TFCMenuItem: Son classes que permeten agrupar diferents dades sota un mateix objecte per permetre que TFCLayout i TFCMenu puguin tindre diferents propietats agrupades.

Es determina que existeixen varis tipus de classes segons la seva composició:

· Classes relacionals: permeten instanciar objectes que relacionen diferents propietats sota un sol identificador de classe. Contenen múltiples propietats i la capacitat de l’interface IRenderizable per poder portar a terme la seva especialització.

· Classes contenidores: Contenen propietats amb múltiples valors d’identificadors de classes relacionals, classes propietat i propietats, per gestionar-les i poder arribar a mostrar-les en la web en ordre determinat a partir de IRenderizable.

· Classes propietat: Contenen propietats amb múltiples valors de suport per les classes relacionals i contenidores.

Segons la seva multiplicitat i agregació:

· Classes úniques: una única instancia del seu tipus pot existir en l’aplicació.

· Classes agregades: Classes que només tenen sentit si es troben associades sota una classe contenidora que les gestiona.

· Classes principals: Classes que gestiona directament ModelPresenter (TFCForm), o que són enllaçades sota el cicle principal de dibuixat (en aquest cas només TFCLayout).

A través del Front-end, es visualitzen les dades i s’estableix un workflow entre elles a partir dels links que generen les opcions de menú TFCMenuItem.

Seguint amb la definició de la solució i els projectes, queda definit que existeix un projecte Model, un altre Gestió (App_Administrator), un altre de Vista (Web CeramicasAlba), el Presentador i finalment un altre Vista (Web de test).

S’ha definit que l‘espai de noms (namespace) serà TFC.Solutions.

A partir d’aquí, cada projecte te un nom concret sota aquest:

· TFC.Solutions.Model

· TFC.Solutions.View

· TFC.Solutions.App_Administrator

· TFC.Solutions.Presenter

En un altre solució es troba el projecte web del client utilitzat per WebMatrix. Aquest és quasi idèntic al projecte de TFC.Solutions.View.

6.2. implementació del model

Durant la implementació del model s’ha realitzat la implementació i definició de classes segons l’anàlisi realitzat inicialment pel projecte. Tot i això, es va establir que les classes serien definides segons la seva necessitat en cada apartat de la web final que es desitja definir, per mantenir una eina que permeti la definició de cada apartat de les web que es realitzin amb ella.

Així doncs, per la web actual s’han definit classes segons els paràmetres definits en l’apartat anterior produint TFCForm, TFCLayout, TFCConfiguration, TFCTextContainer, TFCImageContainer, TFCMenu, TFCContentItem i TFCMenuItem.

En relació a les dades del model, QueryManager y DataManager son les classes que s’han definit i que han estat implementades per poder recuperar, modificar i emmagatzemar cada classe del model d’una manera abstracta.

6.3. Implementació de l’aplicació de gestió

L’aplicació de gestió és l’encarregada de permetre la interacció del desenvolupador de la web amb el model de dades que la composa.

D’aquesta manera s’ha generat cadascun dels formularis necessaris per definir les dades de cada classe i poder guardar-ne l’objecte resultant.

Aquesta és una primera aproximació al treball que es pot realitzar per gestionar les dades del model per definir una web. S’ha partit del punt de vista més senzill que és la identificació de cada element del model i la gestió directe d’aquest. En l’apartat d’ampliacions, es pot trobar el futur que ha de prendre aquesta eina o d’altres.

L’aplicació s’ha implementat amb un arbre de .NET que fa la funció de menú. Aquest menú permet carregar panells com a control sota el panell situat al formulari MainForm.

Cada panell és gestionat per un formulari que no arriba a mostrar-se mitjançant l’interface IFormPanel. Gracies a l’interface, es pot demanar el panell de controls del formulari, guardar les dades i carregar-les de nou. Tota la lògica de negoci es troba en cada formulari individual.

Així doncs, s’aconsegueix poder definir els formularis amb la IDE de Visual Studio i representar-los en un de diferent. També s’aconsegueix separar la capa de negoci en el codi de cada formulari que representa un objecte del model i mantenir el flux de l’aplicació de gestió només en el formulari principal.

6.4. Implementació del projecte del lloc web

EL lloc web es redueix a la implementació de la classe ModelPresenter i el seu ús en una pàgina web aspx de .NET.

Mitjançant ModelPresenter, la pàgina recupera el formulari inicial o l’indicat per un paràmetre del request de la pàgina que actualment produeixen les opcions de menú TFCMenuItem. Un cop recuperat el formulari que pertoca, li demana al model mitjançant l’interface IRenderizable la sortida generada d’HTML per mostrar-la en un LiteralControl de .NET.

A part del desenvolupament dels mecanismes de generació de la web des del model, s’ha de definir el fitxer stylehome.css per ajudar a donar format als objectes de sortida HTML del model.

En el cas de la web que s’ha generat pel client Cerámicas Alba, es troba en estat de definició dels continguts. Falta definir alguns texts i imatges amb el client, però les instancies que participen de cadascun es troben ja totalment definides i situades.

7. Desviaments de l’anàlisi previ

En l’anàlisi previ del projecte, ja es va descartar la implementació de classes de test.

Per contra, cada classe del model està plantejada de manera incremental en quant a la seva funcionalitat permetent que el seu testeig es pugui realitzar des de la classe més bàsica fins a la classe de més alt nivell.

Degut a la falta de temps prevista en la última revisió de la planificació, s’ha posposat a una segona fase, ja fora de l’abast del TFC però necessària per a la consecució de les unitats funcionals requerides per el client, el desenvolupament del projecte de unit testing en tecnologia NUnit.

Així doncs, queden detectades les mancances del projecte a tindre en compte en un procés de control de qualitat del producte:

· Falta d’implementació de l’eliminació d’elements.

· UI d’administració de més alt nivell.

· UI d’administració per a canvis senzills per l’usuari final: Gestió de productes, edició de texts i imatges.

· Errors d’execució en l’aplicació d’administració de dades.

· Anàlisi de riscos.

8. Documentació

8.1. Instal·lació i publicació

Adjunt al document actual, es troben diferents arxius:

· Implementacio.zip: Solució de desenvolupament.

· Web.zip: Solució de Visual Studio per a WebMatrix

· BD.zip: Backup de les bases de dades de la web creada.

La solució de desenvolupament es la que incorpora els projectes Model i ModelPresenter compartits per la web i per l’aplicació d’administració. També incorpora l’eina d’administració i el lloc web de proves. Per a poder instal·lar-los només cal descomprimir el contingut en qualsevol directori. Com a requisit de software, és necessari Visual Studio 2008.

La solució de WebMatrix s’ha de descomprimir en qualsevol carpeta del host. Com a requisit es troba la instal·lació de Microsoft IIS en la màquina host, WebMatrix i Visual Studio 2008.

S’ha decidit realitzar una simulació de la publicació del lloc web en un host propi degut als preus de hosting i el risc que comporta publicar la web a Internet en estat de producció sense ser la definitivament aprovada per el client en qualsevol de les seves fases de compliment de requisits. És per això que es proveeix tant les indicacions necessàries per modificar i publicar el lloc web com per gestionar el hosting d’aquest.

Per configurar el lloc web en WebMatrix s’han de seguir les següents indicacions:

a) Crear una carpeta on es publicarà la web: En el host de desenvolupament s’ha creat a la carpeta que es troba a Implementacio.zip anomenada published.

b) Recuperar les bases de dades contingudes en el fitxer BD.zip sobre una instancia de SQL Server anomenada SQLEXPRESS en la base de dades de nom TFC. Si es vol variar, s’ha de caviar la cadena de connexió a la base de dades en el fitxer connectionString.dat que sempre ha d’estar en el path on es troba l’ensamblat TFC.Solutions.Model.

c) Crear un directori virtual de IIS sobre la carpeta creada en el punt a: En el host de desenvolupament s’ha fet sota el nom CeramicasAlba

d) Configurar el directori virtual per usar NetFramework 3.5 o 2.0.

e) Configurar el directori virtual per usar Home.aspx com a pàgina inicial.

f) Configurar el servei de FTP sobre el directori creat a l’apartat a.

g) Configurar els permisos del servei de FTP per acceptar upload de fitxers.

h) Crear un projecte sobre un directori en WebMatrix: En el host de desenvolupament es realitza sobre la carpeta del projecte de WebMatrix del fitxer Web.zip ‘WebMatrixProject\Cerámicas Alba’.

i) Configurar les dades del lloc en WebMatrix:

Definir el host local i un port lliure per a l’execució en proves locals.

Seleccionar .NET 2.0.

Definir la pàgina inicial com a Home.aspx.

j) Configurar les dades de publicació en WebMatrix.

Seleccionar el protocol FTP.

Indicar el Servidor com a localhost.

Utilitzar l’usuari anonymous

Seleccionar la direcció URL de la web destí: http://localhost/CeramicasAlba

k) Publicar i provar: WebMatrix permet publicar el lloc web en el host destí

i executar el lloc web en un host virtual privat.

En l’apèndix B es pot trobar problemes freqüents en la publicació o obertura de solucions del lloc web, però en cap cas de l’establiment del hosting.

8.2. Documentació d’usuari

S’ha realitzat una documentació d’usuari per a l’eina d’administració que es pot trobar en l’apèndix A del document actual.

9. Ampliacions del projecte

El concepte creat en aquest projecte de TFC ha estat explotat directament sobre el model de dades de manera que es gestiona directament amb coneixement directe del seu comportament. S’hauria de fer una aplicació que permetés a l’usuari visualment generar elements de la web, donant format, i traduís la pàgina generada al model de classes i, conseqüentment, al model de dades.

Seguint amb aquesta filosofia es podria crear un gestor de contingut per al client web sobre components predefinits per l’aplicació d’administració que permetés gestionar a l’usuari de manteniment de la web els productes que hi oferta. De la mateixa manera ho faria amb els horaris i dades de contacte com a component de la web en si mateix.

El model podria créixer per oferir classes de tipus link, llistat, ... i d’altres considerats bàsics per a la consecució de la web resultant, segons el seu resultat HTML i les dades que relaciona.

En quant a la base de dades, es pot gestionar un segon origen de dades per a la gestió de les dades del model i permetre referenciar-les en conjunts que conformarien controls web per a la creació d’aquest, com ara un llistat de productes amb producte detallat segons el que es seleccioni.

En resum, queden les portes obertes a la culminació del projecte en un gestor de continguts (CMS) publicat amb WebMatrix i sense necessitat implementació web.

10. Bibliografia

Relació de documents, llibres i material web utilitzats:

· Mòdul 1 de teoria de l’assignatura del TFC

· Exemple de TFC proveït per el consultor de l’assignatura.

· Document de propostes del TFC.

· Fòrum de l’assignatura.

· Bibliografia referent al MVP:

· http://msdn.microsoft.com/en-us/magazine/cc188690.aspx

· http://en.wikipedia.org/wiki/Model-view-presenter

· Tecnologies utilitzades:

· http://www.asp.net/webmatrix/tutorials

· Usabilitat:

· http://es.wikipedia.org/wiki/Usabilidad

· http://es.wikipedia.org/wiki/Accesibilidad_web

· http://www.w3.org/TR/WCAG10/

Apèndix A (Manual d’usuari)

Binaris

L’aplicació es troba compilada en la carpeta “TFC.Solutions\bin\ TFC.Solutions.App_Administrator.exe “.

L’aplicació requereix de l’extensió d’aplicació (dll) TFC.Solutions.Model i el fitxer de recurs connectionString.dat.

Format de l’aplicació

L’aspecte inicial de l’aplicació mostra un panell esquerre amb cadascuna de les opcions de menú de l’aplicació. El panell mes gran i situat a l’esquerra és el formulari de gestió de la opció de menú seleccionada. La opció inicial és la de configuració de la web.

En la part inferior de la finestra existeix un botó invariant en tota opció de menú que permet guardar els canvis fets en un formulari de gestió.

Qualsevol canvi d’opció de menú amb dades no emmagatzemades de la opció anterior provoca que es pregunti si es volen guardar els canvis previs o descartar-los.

Configuració

El formulari de configuració permet modificar el link generat per les opcions de menú i la direcció base de les imatges que apareixen en la web.

Form Principal

Permet seleccionar el formulari per defecte, i a la vegada inicial, de la web.

Formularis

El botó afegir permet definir un nou formulari, i el guardar, emmagatzemar les dades del formulari que s’està configurant, sigui afegit de nou o un de seleccionat en la graella “Selecció de Formulari”.

En l’apartat “Formulari actual”, apareixen les propietats d’un formulari. Per seleccionar el layout que conté un formulari, s’ha de seleccionar sobre la graella de “Layout relacionat”.

Layouts

El funcionament es molt similar al dels formularis però conté una característica especial, el desplegable Contents. Aquest permet seleccionar per ordre de 0 a la quantitat existent de continguts del layout. Aquests continguts es gestionen en l’apartat “Contingut actual del Layout”, que mostra el contingut seleccionat en el desplegable mencionat.

El botó + permet afegir un contingut més al layout actual.

Un layout proveeix un

amb els continguts que te segons el tipus.

Menús

El comportament del formulari de gestió de Menús és idèntic al de Layouts. Proveeix un

per les opcions.

Textes

En aquest formulari es selecciona de la graella el text que es desitja canviar o el botó afegir per fer-ne un de nou. El botó + permet afegir el nou text a la graella. Utilitzat com a propietat en els layouts permet fer HTML, en el cas de objecte es mostra com un .

Imatges

El funcionament és idèntic al formulari de gestió de texts. La seva representació correspon a un en cas de objecte i a un nom de fitxer en cas de propietat.

Com començar

Per començar a definir una web, s’ha de platejar l’estructura de layouts i continguts.

D’aquesta manera, es poden introduir ja tots els recursos de text independents i les imatges. Aquestes últimes s’han de copiar sota la carpeta configurada en la configuració dins de la ruta de la web.

Seguidament es poden definir els menús, les opcions es defineixen més tard.

Es pot procedir ja a la generació de layouts i les seves interrelacions i reutilitzacions.

Finalment es poden definir els diferents formularis, establint-ne el principal, i anar a crear les opcions de menú linkades al formulari que han de desenvolupar.

Apèndix B (Errors comuns i coneguts)

Causes d’error comuns i detectades:

· La solució del TFC no obre els projectes: Es pot generar una nova solució incorporant projectes ja existents i anant a buscar on es troben en el contingut del disc local.

· La solució de WebMatrix no obre el projecte de la web: S’ha d’afegir un nou projecte web existent, anant a buscar la carpeta que el conté, i eliminar el projecte antic.

· WebMatrix no inicia el projecte en local:

· Comprovar el port del servidor per si es troba ocupat.

· Comprovar que el fitxer de recurs connectionString.dat es troba amb l’ensamblat TFC.Solutions.Model.

· Seguir les instruccions de WebMatrix davant l’error.

· Revisar la configuració de WebMatrix indicada en l’apartat de documentació.

· WebMatrix no pot publicar: Comprovar que el servidor pot oferir el protocol configurat en WebMatrix i que les seves dades estan ben configurades. En altre cas, consultar a l’administrador del hosting web.

· Si s’ha realitzat alguna instal·lació de software recent, és aconsellable reiniciar el host.

· En quant a la configuració i gestió del hosting web i FTP, dirigir-se a la web de suport de Microsoft corresponent al producte utilitzat.

_1367589440.vsd
�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

Sistema�

Estructura estática�

�

�

Page

�

�

Model::PropertyContrainer

�

�

Presentador::ModelController

IRenderizable

1�

1

«uses»

Elements pertanyents a la Vista:

IRenderizablePage

Descripció:

Genera i guarda un únic Presentador.Controla els events d'interface i els transmet al Presentador.Genera la UI i mostra els elements del model mitjançant l'interface IRenderizable.


�

�

Vista::Page

�

�

Model::PropertyContrainer

�

�

ModelController

Elements pertanyents al Presentador:

ModelControllerDataManagerQueryManager

Descripció:

ModelController gestiona el Model otinguent les instancies a partir del DataManager.ModelController reb els events de la Vista i gestiona el model segons convingui.ModelController entrega a la Vista la part del model que ha de tractar en forma (interface) adecuada.DataManager obté les dades persistides del Model mitjançant QueryManager.DataManager genera els objectes del Model mitjançant les dades persistides obtingudes.DataManager pot cambiar les dades persistides mitjançant QueryManager.QueryManager reb, del DataManager, peticions de obtenció, eliminació i modificació de dades persistides.

1�

*

1�

1

�

�

DataManager

�

�

QueryManager

1�

*

1�

1

1�

1

Model::Dades persistides

«uses»


�

�

PropertyContrainer

�

�

MenuOption

�

�

Menu

1�

*

Descripció:

PropertyContainer es la base de tota classe.Menu es composa de menú options necessaries per composar l'estructura entregable a la Vista.MenuOption conté la informació necessaria per poder treballar tant des del Presentador com la Vista.

IRenderizable

IRenderizable


Descripció:

PropertyContainer es la base de tota classe.Producte no es més que una forma de PropertyContainer amb unes Propietats concretes.

�

�

PropertyContrainer

�

�

TextContainer

�

�

ImageContainer

�

�

Configuration


�

�

PropertyContrainer

�

�

Property

1�

*

Descripció:

PropertyContainer es la base de tota classe.PropertyContainer no es res més que un contenidor de propietats.Property es un conjunt clau,valor.


�

�

Form

�

�

Layout

�

�

Menu

�

�

PropertyContrainer

�

�

Property

1�

*

1�

*

*�

1

*�

*

IRenderizable

IRenderizable

Descripció:

PropertyContainer es la base de tota classe.Un Form conté un Layout.Un Layout es capaç de composar per la Vista varis objectes de la classe Menu, List i Capa.Una Capa por ser capaç de mostrar una Property d'un PropertyContainer, o un nou Layout.

*�

*

_1369399047.mpp

_1369400909/Prototip.zip

Prototip/bandera_castellana.GIF

Prototip/bandera_catalana.GIF

Prototip/cabezera.bmp

Prototip/Captura.bmp

Prototip/Home.html

Empresa

Serveis

Proveidors

Ofertes

Localització

Contacte

CERÁMICAS ALBA S.L. Camí Vell de Canovelles 23.

Prototip/img/bk_grey.gif

Prototip/img/Thumbs.db

Prototip/stylehome.css

/* ---------------- cabezera tiene dentro logo y menu ------------*/body{background: #FFFFFF url('img/bk_grey.gif') repeat;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;text-align:center; /* HAK1 para alinear al centro los divs */font-family: "times new roman";color: #353535;}

#content{background: white;width:924px;height:655px;margin-left:auto; /* centrar div */margin-right:auto; /* centrar div */margin-top: 5px;text-align:left; /* HAK1 para alinear al centro los divs */}

/* ---------------- cabezera tiene dentro logo y menu ------------*/#cabezera{width:750px;background:white; }

#logo{/*width:980px;*/width:924px;}

.cab{float: left;margin-top: 5px;}

#menu { clear: both; margin-left:13px; padding-top:5px; height:35px; width:900px; border-bottom:1px solid #9C9C9C;}

#menu ul{ list-style:none; /* Eliminamos los bullets */ margin:0px; /* Quitamos los margenes */ padding:0px; /* Quitamos el padding */ margin-left:100;}

#menu ul li { margin-top:3px; float:left; /* Hacemos que el menu se muestre horizontal */ padding-left:15px; padding-right:15px;}

#menu ul li a{ text-decoration:none; font-family: "century gothic"; color:#191007; font-weight: bold;}

#menu ul li a:hover{ color:#DF7401;}

.bandera{margin-left: 5px;float: right;}

/* ---------------- div login candidatos en home ------------#*/

#centro{height: 545px;}

#centromain{font-size: 10pt;float:left;/*width: 740px;*/margin-left: 0px;}

/* ---------------- div pie ------------#*/

#pie{float: left;margin: 0;padding: 0; background-color: #0080FF;width:100%; }

#pie label{float: right;color:#FFFFFF;font-size:12px;font-weight: bold;background-color: #0080FF;}

Prototip/Thumbs.db

_1367610600/Web.zip

WebMatrixProject/Cer?micas Alba/Bin/connectionString.dat

Data Source=(local)\SQLEXPRESS;Initial Catalog=TFC;Integrated Security=SSPI;

WebMatrixProject/Cer?micas Alba/Bin/TFC.Solutions.Model.dll

WebMatrixProject/Cer?micas Alba/Bin/TFC.Solutions.Model.dll.refresh

D:\UOC_KAY\PAC3\TFC.Solutions\bin\TFC.Solutions.Model.dll

WebMatrixProject/Cer?micas Alba/Bin/TFC.Solutions.Model.pdb

WebMatrixProject/Cer?micas Alba/Bin/TFC.Solutions.Presenter.dll

WebMatrixProject/Cer?micas Alba/Bin/TFC.Solutions.Presenter.dll.refresh

D:\UOC_KAY\PAC3\TFC.Solutions\bin\TFC.Solutions.Presenter.dll

WebMatrixProject/Cer?micas Alba/Bin/TFC.Solutions.Presenter.pdb

WebMatrixProject/Cer?micas Alba/Home.aspx

WebMatrixProject/Cer?micas Alba/Home.aspx.cs

using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;using TFC.Solutions.Model;using TFC.Solutions.Presenter;

public partial class Home : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { ModelPresenter l_oMP; string l_sFormId = "";

try { l_sFormId = Request.QueryString["formId"]; } catch { }

l_oMP = ModelPresenter.getInstance(); TFCForm l_oForm = l_oMP.nextForm(l_sFormId); if (l_oForm != null) { litMainOutput.Text = l_oForm.PaintHTML(); } else { litMainOutput.Text = "

Error processing weppe.

"; } }}

WebMatrixProject/Cer?micas Alba/img/bandera_castellana.GIF

WebMatrixProject/Cer?micas Alba/img/bandera_catalana.GIF

WebMatrixProject/Cer?micas Alba/img/bk_grey.gif

WebMatrixProject/Cer?micas Alba/img/cabezera.bmp

WebMatrixProject/Cer?micas Alba/img/oferta1.GIF




WebMatrixProject/Cer?micas Alba/img/proveidor1.GIF






WebMatrixProject/Cer?micas Alba/img/serveiImg1.GIF



WebMatrixProject/Cer?micas Alba/img/tenda.JPG

WebMatrixProject/Cer?micas Alba/img/treballadors.JPG

WebMatrixProject/Cer?micas Alba/robots.txt

# WebMatrix 1.0

WebMatrixProject/Cer?micas Alba/stylehome.css

/* ---------------- cabezera tiene dentro logo y menu ------------*/body{background: #FFFFFF url('img/bk_grey.gif') repeat;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;text-align:center; /* HAK1 para alinear al centro los divs */font-family: "times new roman";color: #353535;}

#content{background: white;width:924px;height:655px;margin-left:auto; /* centrar div */margin-right:auto; /* centrar div */margin-top: 5px;text-align:left; /* HAK1 para alinear al centro los divs */}

/* ---------------- cabezera tiene dentro logo y menu ------------*/#cabezera{width:750px;background:white; }

#logo{/*width:980px;*/width:924px;}

.cab{float: left;margin-top: 5px;}

#menu { clear: both; margin-left:13px; padding-top:5px; height:35px; width:900px; border-bottom:1px solid #9C9C9C;}

#menu ul{ list-style:none; /* Eliminamos los bullets */ margin:0px; /* Quitamos los margenes */ padding:0px; /* Quitamos el padding */ margin-left:100;}

#menu ul li { margin-top:3px; float:left; /* Hacemos que el menu se muestre horizontal */ padding-left:15px; padding-right:15px;}

#menu ul li a{ text-decoration:none; font-family: "century gothic"; color:#191007; font-weight: bold;}

#menu ul li a:hover{ color:#DF7401;}

#menu img{margin-left: 5px;float: right;}

/* ---------------- div principal ------------#*/

#centro{height: 545px;font-size:14px;}

#centromain{font-size: 12pt;float:left;/*width: 740px;*//*margin-left: 0px;*/margin: 10px;}

/* ---------------- div pie ------------#*/

#pie{float: left;margin: 0;padding: 0; background-color: #0080FF;width:100%; }

#pie label{float: right;color:#FFFFFF;font-size:12px;font-weight: bold;background-color: #0080FF;}

/* ---------------- divs EMPRESA ------------- */

#txtEMPTXT1{clear: left;clear: right;margin: 0;padding: 0;margin-left: 10px;margin-right: 10px;}

#emp1{clear: left;clear: right;height: 227px;margin: 10px;}

#imgTenda{float: left;margin: 0;padding: 0;width: 62%;}

#txtEMPTXT2{float: right;margin: 0;padding: 0;width: 38%;}

#txtEMPTXT3{clear: left;clear: right;margin: 0;padding: 0;}

#emp2{clear: left;clear: right;margin: 10px;}

#txtEMPTXT4{float: left;margin: 0;padding: 0;width: 62%;}

#imgTreballadors{float: right;margin: 0;padding: 0;width: 38%;}

#txtEMPTXT5{clear: left;clear: right;margin: 0;padding: 0;}

/* ---------------- divs SERVEIS ------------- */

#srv1{clear: left;clear: right;margin: 10px;margin-top: 30px;height: 109px; }

#srvIMGSRV1{float: left;margin: 0;padding: 0;width: 20%;}

#srcTXTSRV2{float: right;margin: 0;padding: 0;width: 80%;}

#srv2{clear: left;clear: right;margin: 10px;height: 109px;}



#srv3{clear: left;clear: right;margin: 10px;height: 109px;}



/* ---------------- divs PROVEIDORS ------------- */

#prv1{margin-left: 50px;margin-top: 30px;height: 109px;}

#prvIMG1{float: left;margin: 0;padding: 0;width: 33%;}



#prv2{margin-top: 20px;margin-left: 50px;}




/* ---------------- divs OFERTES ------------- */

#ofIn1{height: 109px;}




#oferta1{width: 50%;float: left;}




#ofIMG1{float: left;}




#ofertarow1{margin-top: 30px;margin-left: 30px;height: 130px;width: 100%;}

#ofertarow2{margin-left: 30px;margin-top: 20px;width: 100%;}

/* ---------------- divs LOCALITZACIO ------------- */

#locMain{margin-top: 50px;margin-left: 130px;}

#locMain label{clear: left;clear: right;}

#locTextes{width: 30%;float: left;}

#locTXT2{margin-top: 20px;}



#locTXT5{margin-left: 19px;}




WebMatrixProject/Cer?micas Alba/web.config

WebMatrixProject/WebMatrix-Cer?micas Alba.sln

Microsoft Visual Studio Solution File, Format Version 10.00# Visual Studio 2008Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "Cerámicas Alba", "Cerámicas Alba\", "{A2E171DA-E721-4122-8769-684C4037C6E2}"ProjectSection(WebsiteProperties) = preProjectTargetFramework = "3.5"Debug.AspNetCompiler.VirtualPath = "/Cerámicas Alba(1)"Debug.AspNetCompiler.PhysicalPath = "Cerámicas Alba\"Debug.AspNetCompiler.TargetPath = "PrecompiledWeb\Cerámicas Alba(1)\"Debug.AspNetCompiler.Updateable = "true"Debug.AspNetCompiler.ForceOverwrite = "true"Debug.AspNetCompiler.FixedNames = "false"Debug.AspNetCompiler.Debug = "True"Release.AspNetCompiler.VirtualPath = "/Cerámicas Alba(1)"Release.AspNetCompiler.PhysicalPath = "Cerámicas Alba\"Release.AspNetCompiler.TargetPath = "PrecompiledWeb\Cerámicas Alba(1)\"Release.AspNetCompiler.Updateable = "true"Release.AspNetCompiler.ForceOverwrite = "true"Release.AspNetCompiler.FixedNames = "false"Release.AspNetCompiler.Debug = "False"VWDPort = "1674"EndProjectSectionEndProjectGlobalGlobalSection(SolutionConfigurationPlatforms) = preSolutionDebug|.NET = Debug|.NETEndGlobalSectionGlobalSection(ProjectConfigurationPlatforms) = postSolution{A2E171DA-E721-4122-8769-684C4037C6E2}.Debug|.NET.ActiveCfg = Debug|.NET{A2E171DA-E721-4122-8769-684C4037C6E2}.Debug|.NET.Build.0 = Debug|.NETEndGlobalSectionGlobalSection(SolutionProperties) = preSolutionHideSolutionNode = FALSEEndGlobalSectionEndGlobal

WebMatrixProject/WebMatrix-Cer?micas Alba.suo

_1367610601/Implementacio.zip

TFC.Solutions/bin/connectionString.dat

Data Source=(local)\SQLEXPRESS;Initial Catalog=TFC;Integrated Security=SSPI;

TFC.Solutions/bin/TFC.Solutions.App_Administrator.exe

TFC.Solutions/bin/TFC.Solutions.App_Administrator.pdb

TFC.Solutions/bin/TFC.Solutions.App_Administrator.vshost.exe

TFC.Solutions/bin/TFC.Solutions.App_Administrator.vshost.exe.manifest

TFC.Solutions/bin/TFC.Solutions.Model.dll

TFC.Solutions/bin/TFC.Solutions.Model.pdb

TFC.Solutions/bin/TFC.Solutions.Presenter.dll

TFC.Solutions/bin/TFC.Solutions.Presenter.pdb

TFC.Solutions/bin/TFC.Solutions.View.dll

TFC.Solutions/bin/TFC.Solutions.View.pdb

TFC.Solutions/TFC.Solucions.App_Administrator/bin/Debug/TFC.Solutions.App_Administrator.exe

TFC.Solutions/TFC.Solucions.App_Administrator/bin/Debug/TFC.Solutions.App_Administrator.pdb

TFC.Solutions/TFC.Solucions.App_Administrator/bin/Debug/TFC.Solutions.App_Administrator.vshost.exe

TFC.Solutions/TFC.Solucions.App_Administrator/bin/Debug/TFC.Solutions.App_Administrator.vshost.exe.manifest

TFC.Solutions/TFC.Solucions.App_Administrator/bin/Debug/TFC.Solutions.Model.dll

TFC.Solutions/TFC.Solucions.App_Administrator/bin/Debug/TFC.Solutions.Model.pdb

TFC.Solutions/TFC.Solucions.App_Administrator/frmConfiguration.cs

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using TFC.Solutions.Model;

namespace TFC.Solutions.App_Administrator{ /// /// Gestio de la configuracio de la web /// public partial class frmConfiguration : Form, IFormPanel { /// /// Identifica si s'ha de grabar les dades modificades /// private bool m_bChanged;

public frmConfiguration() { InitializeComponent(); this.resetData(); }

#region Miembros de IFormPanel

/// /// Retorna el panell de controls /// /// public Panel getFormPanel() { return this.panel1; }

/// /// Torna a carregar totes les dades dels controls. /// public void resetData() { //Reload all data from DB

TFCConfiguration l_oConfiguration = DataManager.getInstance().getConfiguration(); txtBaseLink.Text = l_oConfiguration.BaseLink; txtLink.Text = l_oConfiguration.ImagesLink; m_bChanged = false; }

/// /// Guarda els canvis /// /// public bool saveData() { // Persist data at DB TFCConfiguration l_oConfiguration = DataManager.getInstance().getConfiguration();

l_oConfiguration.BaseLink = txtBaseLink.Text; l_oConfiguration.ImagesLink = txtLink.Text; if (DataManager.getInstance().SavePropertyContainer((PropertyContainer)l_oConfiguration)) { m_bChanged = false; } else { MessageBox.Show("Error saving data!"); }

resetData();

return !m_bChanged; }

/// /// Per consultar si s'ha de grabar. /// /// public bool mustSaveData() { return m_bChanged; }

#endregion /// /// Marca que s'ha canviat una dada /// /// /// private void txtBaseLink_TextChanged(object sender, EventArgs e) { m_bChanged = true; }

/// /// Marca que s'ha canviat una dada /// /// /// private void txtLink_TextChanged(object sender, EventArgs e) { m_bChanged = true; } }}

TFC.Solutions/TFC.Solucions.App_Administrator/frmConfiguration.Designer.cs

namespace TFC.Solutions.App_Administrator{ partial class frmConfiguration { /// /// Required designer variable. /// private System.ComponentModel.IContainer components = null;

/// /// Clean up any resources being used. /// /// true if managed resources should be disposed; otherwise, false. protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); }

#region Windows Form Designer generated code

/// /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// private void InitializeComponent() { this.panel1 = new System.Windows.Forms.Panel(); this.groupBox1 = new System.Windows.Forms.GroupBox(); this.txtLink = new System.Windows.Forms.TextBox(); this.lblImages = new System.Windows.Forms.Label(); this.txtBaseLink = new System.Windows.Forms.TextBox(); this.lblBaselink = new System.Windows.Forms.Label(); this.label1 = new System.Windows.Forms.Label(); this.panel1.SuspendLayout(); this.groupBox1.SuspendLayout(); this.SuspendLayout(); // // panel1 // this.panel1.Controls.Add(this.groupBox1); this.panel1.Controls.Add(this.label1); this.panel1.Location = new System.Drawing.Point(12, 12); this.panel1.Name = "panel1"; this.panel1.Size = new System.Drawing.Size(520, 420); this.panel1.TabIndex = 0; // // groupBox1 // this.groupBox1.Controls.Add(this.txtLink); this.groupBox1.Controls.Add(this.lblImages); this.groupBox1.Controls.Add(this.txtBaseLink); this.groupBox1.Controls.Add(this.lblBaselink); this.groupBox1.Font = new System.Drawing.Font("Verdana", 8.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0))); this.groupBox1.Location = new System.Drawing.Point(15, 36); this.groupBox1.Name = "groupBox1"; this.groupBox1.Size = new System.Drawing.Size(487, 371); this.groupBox1.TabIndex = 3; this.groupBox1.TabStop = false; this.groupBox1.Text = "Dades de configuració"; // // txtLink // this.txtLink.Location = new System.Drawing.Point(138, 72); this.txtLink.Name = "txtLink"; this.txtLink.Size = new System.Drawing.Size(248, 21); this.txtLink.TabIndex = 3; this.txtLink.TextChanged += new System.EventHandler(this.txtLink_TextChanged); // // lblImages // this.lblImages.AutoSize = true; this.lblImages.Location = new System.Drawing.Point(66, 75); this.lblImages.Name = "lblImages"; this.lblImages.Size = new System.Drawing.Size(73, 13); this.lblImages.TabIndex = 2; this.lblImages.Text = "ImagesLink"; // // txtBaseLink // this.txtBaseLink.Location = new System.Drawing.Point(138, 36); this.txtBaseLink.Name = "txtBaseLink"; this.txtBaseLink.Size = new System.Drawing.Size(248, 21); this.txtBaseLink.TabIndex = 1; this.txtBaseLink.TextChanged += new System.EventHandler(this.txtBaseLink_TextChanged); // // lblBaselink // this.lblBaselink.AutoSize = true; this.lblBaselink.Location = new System.Drawing.Point(81, 39); this.lblBaselink.Name = "lblBaselink"; this.lblBaselink.Size = new System.Drawing.Size(58, 13); this.lblBaselink.TabIndex = 0; this.lblBaselink.Text = "BaseLink"; // // label1 // this.label1.AutoSize = true; this.label1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle; this.label1.Dock = System.Windows.Forms.DockStyle.Top; this.label1.Font = new System.Drawing.Font("Verdana", 15.75F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(0))); this.label1.ForeColor = System.Drawing.Color.Blue; this.label1.Location = new System.Drawing.Point(0, 0); this.label1.Name = "label1"; this.label1.Size = new System.Drawing.Size(285, 27); this.label1.TabIndex = 2; this.label1.Text = "Configuració de la Web"; // // frmConfiguration // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(549, 447); this.Controls.Add(this.panel1); this.Name = "frmConfiguration"; this.Text = "frmConfiguration"; this.panel1.ResumeLayout(false); this.panel1.PerformLayout(); this.groupBox1.ResumeLayout(false); this.groupBox1.PerformLayout(); this.ResumeLayout(false);

}

#endregion

private System.Windows.Forms.Panel panel1; private System.Windows.Forms.TextBox txtBaseLink; private System.Windows.Forms.Label lblBaselink; private System.Windows.Forms.Label label1; private System.Windows.Forms.GroupBox groupBox1; private System.Windows.Forms.TextBox txtLink; private System.Windows.Forms.Label lblImages; }}

TFC.Solutions/TFC.Solucions.App_Administrator/frmConfiguration.resx

text/microsoft-resx 2.0 System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089

TFC.Solutions/TFC.Solucions.App_Administrator/frmForms.cs

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using TFC.Solutions.Model;

namespace TFC.Solutions.App_Administrator{ /// /// Gestio de formularis /// public partial class frmForms : Form, IFormPanel { private TFCForm m_oCurrentForm;

public frmForms() { InitializeComponent(); this.resetData(); }

#region Miembros de IFormPanel

public Panel getFormPanel() { return this.panel1; }

public void resetData() { //Reload all data from DB List l_oForms = DataManager.getInstance().getAllForms(); DataGridViewRow l_oRow; object[] l_oParams;

dgForms.Rows.Clear();

foreach (TFCForm l_oForm in l_oForms) { l_oParams = new object[3]; l_oParams[0] = l_oForm.Id.ToString(); l_oParams[1] = l_oForm.Description; l_oParams[2] = l_oForm.MainForm;

l_oRow = new DataGridViewRow(); l_oRow.CreateCells(dgForms, l_oParams); dgForms.Rows.Add(l_oRow); }

LoadLayouts();

setNewForm(); }

/// /// Carrega els layouts a la graella /// public void LoadLayouts() { List l_oLayouts = DataManager.getInstance().getAllLayouts(); DataGridViewRow l_oRow; object[] l_oParams;

dgLayouts.Rows.Clear();

if (l_oLayouts.Count == 0) { btnAddForm.Enabled = false; btnSave.Enabled = false; dgForms.Rows.Clear(); //MessageBox.Show("S'han de definir layouts primer."); //return; } else { btnAddForm.Enabled = true; btnSave.Enabled = true; }

foreach (TFCLayout l_oLayout in l_oLayouts) { l_oParams = new object[2]; l_oParams[0] = l_oLayout.Id.ToString(); l_oParams[1] = l_oLayout.LayoutId; l_oRow = new DataGridViewRow(); l_oRow.CreateCells(dgLayouts, l_oParams); dgLayouts.Rows.Add(l_oRow); } }

public bool saveData() { // Persist data at DB btnSave_Click(null, null); return true; }

public bool mustSaveData() { return false; }

#endregion

/// /// Crea els continguts per gestionar un formulari nou /// private void setNewForm() { dgForms.ClearSelection(); m_oCurrentForm = new TFCForm(new PropertyContainer(-1)); txtClass.Text = "formClass"; txtId.Text = "formId"; txtMain.Text = "false"; txtDescription.Text = "Nou form";

m_oCurrentForm.Class = txtClass.Text; m_oCurrentForm.FormId = txtId.Text; m_oCurrentForm.MainForm = txtMain.Text; m_oCurrentForm.Description = txtDescription.Text;

dgLayouts.ClearSelection(); if (dgLayouts.Rows.Count > 0) { dgLayouts.Rows[0].Selected = true; m_oCurrentForm.Layout = DataManager.getInstance().getLayout(int.Parse((string)dgLayouts.Rows[0].Cells[0].Value)); } }

/// /// Event per generar i gestionar un nou formulari /// /// /// private void btnAddForm_Click(object sender, EventArgs e) { setNewForm(); }

/// /// Guardar el formulari gestionat. /// /// /// private void btnSave_Click(object sender, EventArgs e) {

if (DataManager.getInstance().SavePropertyContainer((PropertyContainer)m_oCurrentForm)) { resetData(); MessageBox.Show("Form saved."); } else { MessageBox.Show("Form saving error."); } }

private void txtClass_TextChanged(object sender, EventArgs e) { m_oCurrentForm.Class = txtClass.Text; }

private void txtId_TextChanged(object sender, EventArgs e) { m_oCurrentForm.FormId = txtId.Text; }

private void dgLayouts_SelectionChanged(object sender, EventArgs e) { if(dgLayouts.SelectedRows.Count > 0) { m_oCurrentForm.Layout = DataManager.getInstance().getLayout(int.Parse((string)dgLayouts.SelectedRows[0].Cells[0].Value)); } }

/// /// Mostra la gestio del formulari seleccionat /// /// /// private void dgForms_SelectionChanged(object sender, EventArgs e) { if (dgForms.SelectedRows.Count > 0) { m_oCurrentForm = DataManager.getInstance().getForm(int.Parse((string)dgForms.SelectedRows[0].Cells[0].Value)); txtClass.Text = m_oCurrentForm.Class; txtId.Text = m_oCurrentForm.FormId; txtMain.Text = m_oCurrentForm.MainForm; txtDescription.Text = m_oCurrentForm.Description; dgLayouts.ClearSelection(); foreach (DataGridViewRow l_oRow in dgLayouts.Rows) { if (int.Parse((string)l_oRow.Cells[0].Value) == m_oCurrentForm.Layout.Id) { l_oRow.Selected = true; } } } }

private void txtDescription_TextChanged(object sender, EventArgs e) { m_oCurrentForm.Description = txtDescription.Text; } }}

TFC.Solutions/TFC.Solucions.App_Administrator/frmForms.Designer.cs

namespace TFC.Solutions.App_Administrator{ partial class frmForms { ///

L'Oberta en Obert: Homeopenaccess.uoc.edu/webapps/o2/bitstream/10609/7883/… · Web...

Documents

Transcript of L'Oberta en Obert: Homeopenaccess.uoc.edu/webapps/o2/bitstream/10609/7883/… · Web...