CSS

Pattern Meaning

.class

#id

* Any element

E Any E element

E F Any F element that is a descendant of an E element

E > F Any F element that is a child of an element E

E + F Any F element immediately preceded by a sibling element E

E[foo] Any E element with the "foo" attribute set

E[foo="warning"] Any E element whose "foo" attribute value is exactly equal to "warning".

E[foo~="warning"] Any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning"

E[lang|="en"] Any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en"

E#myid Any E element with ID equal to "myid"

E:first-child Element E when E is the first child of its parent

E:visited Element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)

E:link

E:active Matches E during certain user actions

E:hover

E:focus

E:lang(c) element of type E if it is in (human) language c

• Existe herança de propriedades nos elementos HTML• Um elemento pode redefinir propriedades herdadas• Devido a eficiência e aspeto visual, há propriedades que não são herdadas como background• HTTP Context/ Application

DOM

HTTP Pipeline• Maximização do paralelismo através da redução da partilha de instâncias• A cada pedido é atribuída uma nova cadeia de atendimento, com inicio em HttpApplication• Técnicas UsadasInstance Pooling:Conjunto de instâncias equivalentesDimensão do conjunto <= dimensão do ThreadPool• CachingOnde são usadas Instance Pooling para instâncias de HttpApplicationCaching para os restantes elementos do pipelineHTTP• STATELESS• Pedidos: GET: Pedido de Representação de um Recurso HEAD: Igual ao GET, mas não é enviado o corpo da resposta POST: Os dados vão no corpo do pedido PUT: Actualiza a representação de um recurso DELETE: Remove um recurso TRACE: Retorna o eco do pedido OPTIONS: retorna os métodos suportados• Códigos de Resposta: 1xx: Informational 2xx: Success 3xx: Redirection 4xx: Client Error 5xx: Server ErrorASP.NET HTTP PipeLinePontos de extensibilidade• HttpHandler• HttpApplication• HttpModule• Custom HandlersImplementam a interface IHttpHandler (Void ProcessRequest(HttpContext context) e bool IsReusable{get})• Configuração via ficheiros de configuração• Custom HttpApplication• Definido através do ficheiro Global.asax• Deriva de System.Web.HttpApplication• Atendimento de pedido• Receção de pedido• Autenticação e Autorização• Verificação de existência de resposta em cache• Resolução URL->handler• Aquisição de estado de conversação• Execução de handler para produção de resposta• Atualização do estado de conversação• Atualização da cache com resposta• Fim de atendimento• Envio de resposta para o cliente• Eventos implícitos• A maioria dos pedidos ocorrem em cada pedido, excepto Error e Disposed• Costum ModulesDefine novos nós da cadeia de atendimentoImplementam a interface IHttpModule (Init, Dispose)Cadeia especificada através de ficheiros de configuração

• PoolingMódulos são reutilizáveis• HttpContextContem a informação do pedido• Gestão de estadoEstado da Aplicação: Read-OnlyEstado de Conversação (Sessão): Suportado pelo módulo SessionStateModuleRealização condicional da aquisição e libertaçãoIReqireSessionStateIReadOnlySessionStateASP.NET Construção de Aplicações WebDatabinding• Associação de dados a controlos gráficos• Implementa o padrão MVCTrês aspetos• Associação baseada em fontes de dados (Coleções, Dicionários, Arrays, IdataReader)• Controlos que representam fontes de dadossuporte databinding, lista iterativos• Expressões de dataBind Datasourse, Datamember,DataTextField,DataValueField• DataSourceControlRealizam uma abstração da fonte de dadosDefinição da fonte de dados ASP.NET – Algumas FuncionalidadesUtilização de filtros [Authorize(Roles=”foo”)]; [HandleError(View = “Problem”)] (com custom errors no web.config)Nome de action [ActionName(“nome”)]Impedir acesso a método [NonAction]Tipo de pedidos [AcceptVers(HttpVerbs.Post)]ModelBinding ordem atribuição de valores: Form (POST), RouteData, QueryString.Excluir model binding [Bind(Include=”Email”)]ASP.NET – MVC ModelStateO ModelState guarda informação acerca de valores de entrada, bem como, respectivos erros de validação. Definir erros manualmente ModelState.AddModelError(“elem”,”msg”)). Caso ModelState.IsValid retorne false então direcciona-se para a mesma View, com info. do erro (Html.ValidationSummary ou ValidationError(“elem”)).ASP.NET Manutenção de Estado(através de cookies)Tipos de estado:• Application• Session• Cookie• ViewNão é fiável (não é reciclado)Partilhado pelas instâncias de HttpApplicationRepresentado por um contentor associativoProtege acesso à coleção de objetos através de uma instância de HttpApplicationSateLock (semântica de leitores escritores)O estado de aplicação é vocacionado para dados com leituras frequentesCookies• Mecanismo que fornece a aplicações HTTP servidoras suporte para guardar e obter informações sobre o cliente• Manutenção de informação sobre o estado do cliente• Informação sobre o estado na forma nome=valor• Uma resposta HTTP pode conter múltiplos cabeçalhos Set-Cookies• Para apagar um cookie, envia-se um cookie com o mesmo nome e com data de expiração no passado• Podem:• criar sessões (conversação)• Deixar registo de navegação• Deixar Registo de Preferências• Evitar Login(login automático)• Não Podem:• Aceder ao disco rígido• Enviar virus para o clienteEnviar informação para o servidor sem conhecimento do cliente Ajax• Utiliza HTML e CSS para apresentação de conteúdo• Utiliza DOM para oferecer páginas interativas e dinâmicas• Utiliza XML para trocar dados• Trocas assíncrono através do objeto XMLHttpRequest• Utiliza JavascriptVantagens• Aumento da usabilidade de aplicações WEB• Aplicações mais ricas sem recorrer a plugins• Aplicações requerem menos largura de banda• Interface responde mais rapidamenteDesvantagens• O Suporte depende de cada browser• O Botão back não funciona como esperado• O URI não se altera com a alteração do estado da aplicação• O recurso ao javascript aumenta o processamento no cliente• Os pedidos apenas podem ser endereçados ao domínio onde foi originado o pedido original• Debug de código mais dificilJquery$.post(url [,{params}][,function(){}][,dataType])$.get(url [,{params}][,function(){}][,dataType])$.getJSON(url [,{params}][,function(){}][,dataType])$.getScript(url[,function(){}][,dataType])$("MYDIV").each( function(){} )$.each( collection, function(){} )$("MYDIV").empty()

XMLHttpRequestclient . open(method, url, async, user, password)Objeto Javascript• Envia pedidos HTTP• Recebe respostas a esses pedidos• Efetua analise da resposta da resposta• Depende de cada browser• Estados (readyState): 0: Unset 1: Opened 2: Headers Received 3: Loading 4: CompleteresponseTextTem o conteúdo do corpo da mensagemresponseXMLtem formato XMLé feito parsing sobre a respostaresultado do objeto implementa Documentcaso contrario o valor é nullSuporte a pedidos sincronos• boolean assyn = true : o metodo send não é bloqueante• boolean assyn = false : o metodo send é bloqueante• metodo abort, aborta um pedidoXMLHttpRequestfunction doAjaxRequest(method, uri, callback, data) { var xhr = new XMLHttpRequest(); xhr.open(method, uri, true); //assincrono xhr.onreadystatechange = function(){ console.log("ReadyState: " + this.readyState); if (this.readyState == 4 && this.status == 200) {callback(this);} }; xhr.send(data);}POSTxhr.open("POST",URI,true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send(data);Search Auto Complete$(function () {$("#tags").keypress(function () { var url = "/CUF/Official/SearchTags?SearchValue=" + $("#tags").val(); $.get(url, function (tagsList) { $("#tags").autocomplete({ source: tagsList }); }); });});ASP MVC 3 – VIEWSDetail @model namespace.class@{ViewBag.Title = "ViewPage1";}<h2>ViewPage1</h2><fieldset> <legend>User</legend> Username:@Model.Attribute<br/> Name:@Model.Attribute<br /></fieldset> Partial @model namespace.class<div> <fieldset> <div class="editor-label"> @Html.LabelFor(m => m.Attribute) </div> <div class="editor-field"> @Html.TextBoxFor(m => m.Attribute) @Html.ValidationMessageFor(m => m.Attribute) </div> </fieldset></div> NEW @model namespace.class@{ViewBag.Title = "New";}<div> @using ( Html.BeginForm( actionName, controllerName, FormMethod.Post, new { id = "FormID" } ) ){ Html.RenderPartial(partialViewName, Model); <div class="input"> <input type='submit' value="Submit" /> <input type='reset' value="Reset"/> </div> }</div><!-- EDIT -->@model namespace.class@{ViewBag.Title = "Edit";}<div> @using ( Html.BeginForm( actionName, controllerName, FormMethod.Post, new { id = "FormID" } ) ){ Html.ValidationSummary(true, "Please correct"); Html.RenderPartial(partialViewName, Model); <div class="editor-label"> @Html.LabelFor(m => m.Attribute, "Version:") @Html.DisplayFor(m => m.Attribute, "Version:") </div> <div class="input"> <input type='submit' value="Submit" />

<input type='reset' value="Reset"/> </div> }</div>ASP MVC 3 Enumerator@Html.DropDownListFor(m=>m.Priority, new SelectList(Enum.GetValues(typeof(ToDos.Priority))))ASP MVC 3 Controller public class ClassController : Controller{readonly IRepository<Tarefa> _repo = RepositoryLocator<Tarefa>.getInstance(); public ActionResult Index(){return View();} [HttpPost] public ActionResult Confirm (AccountModels.ActivateModel model) { if (ModelState.IsValid){ //Do Something (Like Cookie) HttpCookie cookie = new HttpCookie("user", model.UserName); HttpContext.Response.Cookies.Add(cookie); return RedirectToAction("Index", "Home"); } ModelState.AddModelError("", "Data Invalid"); return View(model); }public ActionResult Edit(int id){ return View(_repo.GetById(id));}[ActionName("Edit")][HttpPost]public ActionResult EditPost(int id){ if (ModelState.IsValid){ ToDo todo = _repo.GetById(id); if (this.TryUpdateModel(todo)){ _repo.Update(todo); return this.RedirectToAction("Details", new { id = todo.Id }); }} ModelState.AddModelError("DueDate", "MyError"); return this.View(todo);} public JsonResult Owner(){ User u = null; if (this.HttpContext.User.Identity.IsAuthenticated) { String auth = HttpContext.User.Identity.Name; u = UserService.GetUserByAutenticationString(auth); }return Json(u,JsonRequestBehavior.AllowGet);}}ASP MVC 3 Modelpublic interface IRepository<T>{ IEnumerable<T> GetAll(); T GetById(int id); void Add(T td);}public class RepositoryLocator<T>{ public static IRepository<T> getInstance(){ return null;}}Implementar Modulepublic class Logger : IHttpModule{ public void Dispose(){} public void Init(HttpApplication app) { app.AuthenticateRequest += new EventHandler(LogFailureRequest); } private void LogFailureRequest (Object source, EventArgs args){ var app = source as HttpApplication; HttpRequest req = app.Context.Request; HttpResponse rep = app.Context.Response; if(req.IsAuthenticated && rep.StatusCode == 401){/* Do Something*/} }}httpModules><add type="ns.ExampleModule" name="modulename" /></httpModules>Ajax$.ajax({ type: 'Method', //HTTP Method url: url, data: {params}, success: function(){}, error: function(){}, dataType: dataType });Pagingvar grid = new WebGrid( source: (IEnumerable<WishListBook>)Model, defaultSort: "Title", rowsPerPage: 20, canPage: true, canSort: true ); grid.SortDirection = SortDirection.Ascending; @grid.GetHtml( htmlAttributes: new { id = "list-of-books" }, columns: grid.Columns( grid.Column("Titulo", "Title", bk => bk.Title), grid.Column("Autor", "Author", bk => bk.Author), grid.Column("Editor", "Editor", bk => bk.Editor) ));HTML Helpers• Html.TextBoxFor( m => m.Something[,TemplateName])• Html.TextAreaFor(m => m.Something[,TemplateName])• Html.DropDownListFor(m => m.Something, new

SelectList(Model.ItemsPerPage))• Html.CheckboxFor(m => m.Something, new SelectList(Model.ItemsPerPage))• Html.RadioButtonFor(m => m.Something)• Html.ListBoxFor(m => m.Something[,TemplateName])• Html.PasswordFor(m => m.Something[,TemplateName])• Html.HiddenFor(m => m.Something[,TemplateName])• Html.LabelFor(m => m.Something[,TemplateName])• Html.EditorFor(m => m.Something[,TemplateName])• Html.DisplayFor(m => m.Something[,TemplateName])• Html.DisplayTextFor(m => m.Something[,TemplateName])• Html.ValidationMessageFor(m => m.Something)• @Html.ActionLink(LABEL, ACTION, PARAMS)JqueryGET & SET HTML OF ELEMENT• get element html var DivHTML = $("#DivID").html();• set element html $("#DivID").html("<p>This is the new html</p>");CHANGE AN ELEMENT'S CSS PROPERTY $("#DivID").css("background-color", "#000"); $("#DivID").css("border", "solid 2px #ff0000");COMMON JQUERY SELECTOR• element by id: $("#ElementID").whatever();• element by class: $(".ClassName").whatever();• get elements where id contains a string: $("[id*='value']").whatever();• get elements where id starts with a string $("[id^='value']").whatever();• get elements where id ends with a string $("[id$='value']").whatever();• get all elements of certain type (can use "p", "a", "div" - any html tag) $("div").whatever();ADD & REMOVE CSS CLASSES • add css class $("#DivID").addClass("newclassname");• remove css class $("#DivID").removeClass("classname");• add & remove class together $("#DivID").removeClass("class") .addClass("newclassname");• add & remove multiple classes $("#DivID") .removeClass("classname classname2") .addClass("newclassname newclassname2");GET & SET TEXTBOX VALUE• get the value of a textbox var TextboxValue = $("#TextboxID").val();• set the value of a textbox $("#TextboxID").val("New Textbox Value Here");GET & SET TEXT OF ELEMENT• get text of element var DivText = $("#DivID").text();• set text of element $("#DivID").text("This is the new text.");GET & SET ELEMENT'S WIDTH & HEIGHT• get element height var ElementHeight = $("#DivID").height();• set element height $("#DivID").height(300);• get element width var ElementWidth = $("#DivID").width();• set element width $("#DivID").width(600);JavaScript• Tipos de Dados: Boolean : true, false Number : NaN, Infinity, undefined, null String Object Arrays: são objectos com a propriedade length Funções• Functions have predefined methods, two of them are apply() and call(). We can use them to do precisely that kind of overriding. The two methods are similar. The first parameter will override this. They differ on the subsequent arguments. Function.apply() takes an array of values that will be passed as arguments to the function and Function.call() takes the same arguments separately. In practice I believe you'll find that apply() is more convenient in most cases. • JavaScript function invocation rule #3 If we want to override the value of this without copying the function to another object, we can use myFunction.apply( obj ) or myFunction.call( obj ). var __ELEMENT_NODE__ = 1;function forEachNode(root, action){ if (!action){ action = root; root =document.getElementsByTagName("BODY")[0]; } var nodeList = root.childNodes; for (var idx = 0; idx < nodeList.length; ++idx){ if (nodeList[idx].hasChildNodes){ forEachNode(nodeList[idx], action); } } if(root.nodeType == __ELEMENT_NODE__){ action.call(root); }}