Designe General Form Components Validations Client Validations Components View Content Header

1. Designe • General • Form • Components • Validations • Client • Validations • Components • View • Content • Header • Footer • Menu • Logic • Managers • PHPUtils • Autentication • Reports • Conexion • Globals • Delegate • BD, WebService,etc. Designe View Client CSS HTML Javascript PHP Logic BD API WebService Model

2. This layer handels the renderization of the data. It’s made in CCS sintaxis with a very Simple class hierachy and definition that promots reusability at all cases. It’s devided in 5 main sheets, but you can create any other if you like. View Designe template general header form menu content help validation footer Components

3. Designe • General: All the style definitions related to the general classes and structures of the page. For example: View Designe <div id=“body”> <div id=“header”> </div> <div id=“content”> </div> <div id=“footer”> </div> </div> .body { color: 0xffffff; background: 0x000000 } .header { paddingLeft : 20px; } . . .

4. Designe • Form: All the style definitions for the form components of the web page, like TextInputs, FieldFields, Buttons, Inputs, etc: View Designe <textarea name="textarea" cols="" rows=""></textarea> input, textarea, select { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; font-weight:normal; }

5. Designe • Components: In some cases it is necesary to make your own components to improve the user interfaces just like datePickers, Sliders, etc. Here you can save the styles of all your components. View Designe <textarea name="textarea" cols="" rows=""></textarea> input, textarea, select { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; font-weight:normal; }

6. Designe • Validations: Some times you need to make some validations before submiting a form. Here you can set global standards for all the “error” messages, “warning” messages, etc. View Designe <strong class=“error”>Fecha de inicio:</strong> Error { color: red; }

7. Designe • Help: Some times you need to inform the user about new features, tips or any other help tha you think will be uesful. Here you can set global standards for all the “info” messages, “help” messages, “tip” messages, etc. View Designe <strong class=“tip”>Fecha de inicio:</strong> Error { color: yellow; }

8. In a 2.0 applications a lot of javascript code are needed, specially if you want to use a very ajax asincronous interface, in this layer all the Javascript codes or the creation of the components, validations, and many others are made. View Client template header components menu content validations utils footer

9. Client • Validations: Al the data introduced by the user needs a very strict validations to guarantee a more robust and stable software, in that matter, this layer contains all the tipical function validations and all the special function validations for special ocations. • Utils: Any util class or script that needs to be imported to the proyect

10. Client • Components: In order to prevent the users of making a mistake, this layers is made to generate the best components for the manipulations of the page, this components will be used and reused in any moment, and need to be very Parameterized for any ocations, for example: Instead of three TextInputs We create a special component Date Picker

11. When creating a page, a lot of containers need to be created to generate a standar layout to the information. This layer of the arquitecture is made to create the containers and bind them to special classes and id’s of the designe layer. 4 Directories need to be created for each project. View Client Designe template general header components form menu content validations help utils validation footer Components

12. View • Header: If the applications has tree diferent definitions layouts for layers, all of them will be in this directory. The header is the top part of the pages, it normaly has the title and logo. • Menu: The menu of the page has to be in a diferent view to make possible his reutilization in all the pages. • Header: All the pages need to have a footer. The Footer is the bottom part of the page, it normaly has a small bar of links like terms and conditions, contact, etc. Content: This part is never reused on any other page, is the main reason for all this layer to be part of the arquitecture.

13. The logic layer is a very important componet for the arquitecture, it merges all the layers in a single system taking special care in the independency of the layers. To get a simple, logic and clean system but at the same time very powerful: 4 main managers have been created as well as 4 extra-directories for specific reasons explained in the following pages. Logic Atentication Managers templateManager Utils crudManager infoManager Conection formManager Globals

14. Logic • Managers: A manager is a logic desicion maker that is responsible for assembling the entire system. • InfoManager: it handles al the requests for data in the aplication and is referenced by the templetaManager to prepare the data for the view, when the view is loaded, all the variables that conain the information are allready set. The infoManager uses the same logic that the templateManager have, to decide wich data needs to be requested according to the page being viewed. • formManager: It’s used to handle all the interactions that need to me made with forms that do not involve any data modifications in the model. His logic is very similar to the crudManager, to call for a action to be made by the formManager you need to write for example: formManager.php?action=login

15. Logic • Managers: A manager is a logic desicion maker that is responsible for assembling the entire system. • templateManager: Merges all the components of the page into a big page. When you need to view the page pacients.php you need to call the templateManager sending the variable “page” with the name of the page like a value, for example: If I want to call the page pacients.php of the admision module I will have to writte: “templateManager.php?page=pacients”. The manager will hand the request and create a web page with all the components configured when creating the manager. • crudManager: if you want to insert, delete or modify any data of the model layer, you need to talk to the crudManager, it is responsible for all the mantainence of the data. When you are using the crudManager you need to call the transaction you want to use like this: crudManager.php?action=new_student (of course you can send the var “action” in the post or get mode ). The crud manager fowards the page to another destination in case of a succesful transaction, otherwise it printrs the errors.

16. Logic • Autentication: Very compact module to create a small layer to protect all the transactions and views that can be made by one user. • Utils: In this directory you can put all the php classes that need to bee imported to the proyect to add extra funcionallity like fileUploads, data encripations, etc. • Conection: In this directory you need to put the conections scripts for all the users that are going to interact with de DB. • Globals: Files to load global vars on the proyect like: session duration, language, etc.

17. This layer does not have to be created any developer of the proyect, some parts coud be remote services, esternal mysql databases, etc. No logic of the aplication needs to be made here. Model BD WebService API’s

18. View Client Designe template general header components form menu content validations help utils validation footer Components Logic templateManager.php crudManager.php formManager.php infoManager.php API BD WebService

19. 1 Action=agregar-usuario Formularioparaagregarusuario Crud.php 2 5 3 Roles.xml Binding.xml Crud Manager 6 7 8 9 4 $vars[‘variable’] Persona.delegate.php Persona.php