| Últimas 20 atualizações de FRANCISCO WILLIAM SARAIVA JUCÁ QUEIROZ FILHO |
|
|
Olá, Pessoal, o objetivo desse artigo é esta mostrando uma visão geral da nova ferramenta de designer da Microsoft o Expression Web e usá-la para criar masterpages. Nos tempos atuais, sabemos que a tecnologia cresce exponencialmente, enquanto que o uso desta não ocorre na mesma proporção, ou seja, mal aprendemos uma e logo se tem outra, mas isso não quer dizer que o quê já aprendemos fique para trás, pelo contrario, geralmente aplicamos a nova tecnologia agregada com o que já sabemos, isso acontece justamente com o Framework 3.0 da Microsoft. Criou-se uma nova camada complementar. A WPF/E nesse caso especifica para designer, entre outras.
Para aqueles que com eu, tinham dificuldades em desenvolver o designer das paginas no visual studio, o Expression Web é a solução da Microsoft pra esse problema. Microsoft Expression Web Designer é um editor de HTML, CSS, XML, ASP.NET 2.0, XHTML e etc. No estilo WYSIWYG , substitui o Microsoft Front Page e como já foi referido fará sombra ao Dreamweaver. Veja a figura abaixo:
Visão Geral.
1) Observe que a toolbox possui tanto controles HTML com APS.NET
2) Facilidade em trabalhar com folha de estilo
3) Explore do projeto
4) Propriedades dos controles e CSS
Bom, então agora podemos fazer o designer das paginas nele e a regra de negocio no visual studio sem problemas.
Você pode esta baixando a versão trial do expression neste endereço: http://www.microsoft.com/downloads/details.aspx?FamilyId=44FA7F93-7D57-4523-B0C9-2CE54397B732&displaylang=en
No site da microsoft você também pode conferir os detalhes da nova ferramenta, alguns tutoriais e vídeos( em inglês), bons estudos.
Prática:
Vamos aprender como criar uma masterpages e verificar que não há nenhuma dificuldade em “integrá-las” com o VS.
*Nota: o mesmo diretório que o Expression Web utiliza como website pode ser aberto como website pelo visual studio e vice-versa.
Abra o Microsoft Expression Web
1. Vá em file > new website > general > empty web site, dê o nome que desejar no meu caso masterpage clique em Ok. Criamos um novo site, irei usar uma folha de estilo que já vem pronto no Expression web em um dos templetes, se você notar os templetes prontos usam paginas com extensão DWT em vez de masterpage para criar a modelo, ao importar pro VS, ele vai ignora as paginas DWTs, pois o VS trabalha com masterpages uma atualização dos templetes que não repete o código nas paginas herdadas, facilitando o entendimento pro designer.
2. Em Folder list crie as pastas: style e images veja que vou usar como exemplo um estilo pronto para demonstrar, usarei só o essencial.
3. Crie 2 arquivo CSS dentro da pasta styles de nome style1 e layout.
style1.css
|
@import url("layout.css");
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-image: url("../images/background.gif");
background-repeat: repeat;
background-attachment: scroll;
}
#container {
width: 620px;
margin: 0 auto;
padding: 10px;
border-right: 2px solid #725972;
border-bottom: 2px solid #725972;
border-left: 2px solid #725972;
background-color: #fff;
}
#masthead {
text-align: center;
width: 600px;
padding: 10px;
border: 1px dotted #725972;
background-image: url("../images/masthead.gif");
background-repeat: repeat;
background-attachment: scroll;
}
#navigation {
position: relative;
float: left;
width: 139px;
margin-top: 10px;
margin-bottom: 10px;
border-right: 1px dotted #725972;
}
#content {
float: left;
width: 470px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#footer {
text-align: center;
clear: both;
width: 618px;
border: 1px dotted #d8bfd8;
}
|
/* Masthead Styles */
#masthead h1 {
color: #fff;
}
#masthead h3 {
color: #402640;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px dotted #dfb8df;
background-color: #dfb8df;
}
#navigation a {
color: #402640;
text-decoration: none;
display: block;
padding: 5px;
border-bottom: 1px dotted #fff;
background-color: #dfb8df;
}
#navigation a:hover {
color: #402640;
text-decoration: none;
background-color: #fff;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
color: #503750;
}
#content img {
padding: 5px;
border: 1px solid #402640;
}
/* Footer Styles */
#footer p {
color: #808080;
}
|
#footer a {
color: #503750;
text-decoration: underline;
}
#footer a:hover {
color: #402640;
text-decoration: none;
}
a {
color: #402640;
text-decoration: underline;
}
a:hover {
color: #dfb8df;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
layout.css
body {
margin: 0;
padding: 0;
border: 0;
}
#container {
margin: 0;
padding: 0;
border: 0;
}
#masthead {
margin: 0;
padding: 0;
border: 0;
}
#navigation {
margin: 0;
padding: 0;
border: 0;
}
#content {
margin: 0;
padding: 0;
border: 0;
}
#footer {
margin: 0;
padding: 0;
border: 0;
}
|
... Exibição do post interrompida. Para ler conteúdo completo, clique aqui |
|
|
|
Olá pessoal, vou falar um pouco sobre herança mostrarei um exemplo prático de como podemos esta fazendo uso do mesmo e reaproveitando o código, e para melhor entendimento sobre o assunto vamos ver um pequeno resumo teórico. Primeiro vamos entender algumas coisas: as dificuldades do modelo estruturado e a busca por um novo padrão.
Os métodos empregados como modelo para o desenvolvimento de software, em geral, é baseado em duas abordagens: decomposição funcional e na modelagem de dados, ou seja, estão constituídos segundo o paradigma estruturado, onde se tem visões dissociadas em que se distinguem claramente os processos de dados. Tanto os processos como os dados possuem uma modelagem própria. O método deve retratar com fidelidade o que ocorre no ambiente real e para isso o DFD( Diagrama de Fluxo de Dados) e o DER( Diagrama entidade Relaciona) são responsáveis por representar os processo e dados nesse modelo. O problema é que nem sempre essa representação é bem definida ou esclarecida no ambiente real e a manutenção é dificultosa, daí, a partir desses e outros problemas surge à necessidade de um novo padrão, e três aspectos foram relevantes para ascensão da orientação a objetos, contrapondo-se aos métodos estruturados: a unificação de conceitos entre a fase de analise e programação, o grande potencial de reutilização do software e a facilidade de manutenção.
A herança é um recurso dentro do conceito orientado a objeto, com ela podemos criar classes genéricas, e a partir dessa cria subclasses que herdam características da classe pai, veja a figura 1. Diagrama de classe UML(Unified Modeling Language)*
Figura 1. Classe derivado de um ator
Note que é fornecida uma modelagem mais natural, que melhor retrata a realidade, pois processos e dados estão coligados.
*Nota: juntamente com a Orientação a Objetos precisava-se de uma modelagem que correspondesse a esse modelo, dentre as propostas apresentadas a UML sai na frente e tornou se padrão universal de modelagem.
Quando uma subclasse herda características a partir de um único ramo da classe diz-se tratar de herança simples, independente da quantidade de superclasses existente no ramo veja figura 2.
Figura 2. Herança simples
E quando uma classe herda características de mais de um ramo genealógico diz-se haver herança múltipla. Veja figura 3. Mais o VS. NET e suas linguagens não suportam herança múltipla em vez disso tem-se o conceito de interfaces mais isso é outro assunto.
Figura 3. Herança múltipla
Bem, agora vamos ver um exemplo bem simples na pratica
1. Crie um novo projeto Visual C# > Windows Application
2. Depois, usando o Menu Project > Add Class, adicione uma classe ao nosso projeto, como mostra a figura abaixa:
Escreva a Classe como mostra a seguir:
using System;
using System.Collections.Generic;
using System.Text;
namespace DevMedia.Artigo // Ficheiro ou gaveta que contem a classe
{
class Pessoa // Construtor padrão
{
private string _Nome; // Atributo
public string Nome // Modificador de acesso e consulta
{
get { return _Nome; }
set { _Nome = value; }
}
private string _CPF;
public string CPF // Modificador de acesso e consulta
{
get { return _CPF; }
set { _CPF = value; }
}
}
}
Nós já temos a base de uma classe. Para implementar herança, vamos adicionar uma nova classe, usando Menu Projct > Add Class. Renomeie como Funcionario.cs e digite o seguinte código:
using System;
using System.Collections.Generic;
using System.Text;
namespace DevMedia.Artigo
{
class Funcionario : Pessoa // Para a Classe Funcionário herda da
// Classe Pessoa que criamos, basta
// acrescentar os ‘ : ‘ + o nome da
// classe que queremos herdar.
{
private string _dataAdmissao;
public string DataAdmissao
{
get { return _dataAdmissao; }
set { _dataAdmissao = value; }
}
private string _Salario;
public string Salario
{
get { return _Salario; }
set { _Salario = value; }
}
}
}
Testando a Classe
No design do Form1 da aplicação, desenhe os seguintes controles:
|
Tipo de Controle |
Nome |
Valor do Text |
...Exibição do post interrompida. Para ler conteúdo completo, clique aqui |
|
|
|
Olá, fiz esse artigo com conhecimento adquirido aqui no site, criei um sistema fictício onde pretendo mostrar alguns recursos que aprende por aqui, como seria impossível mostra tudo em um único artigo enumerei cinco funcionalidades bem legais. Vou mostrar como deletar vários registro de uma só vez atraves da GridView, usei uma Classe com um único método Delete pra mostrar com funciona também usei uma Classe do tipo Component Model DataObject . veja os itens abaixo:
1) ChecheBoxs em cada linha da GridView Produtos e no Cabeçalho onde vamos marcar todos ou alguns produtos que serão deletados.
2) Classe Produto que ira conter um único método Delete consumido na hora de Deletar o mesmo.
3) Preencher um DropDownList com um database
4) Encher a GridView Produtos a partir da Categoria passando parâmetro
5) Mostrar como fazer o passo 4 usando uma Classe do tipo Componente Model e Strore Procedure. Resultado final :
utilizei banco de dados SQL SERVER 2005 EXPRESS com as tabelas Produto, Categoria bem simples.
Primeiro abra o Visual Studio 2005, clique em File New > New Web Site > aparecera um tela.
Escolha ASP. NET Web Site linguagem C# e dê um nome a sua aplicação no meu caso Controle de Produto e clique em ok.
Feito isso selecione na toolbox um DropDownList1 e arraste para o default.aspx na smart tag selecione choose data source > new data source, crie uma novo conexão ou selecione uma existente e salvar a string de conexão quando pedir , na próxima tela selecione database dê o nome de dsProduto depois escolha a conexão que criamos e em seguida selecione id_CatProduto e a Descricao na tabela Cat_Produto quando finalizar escolha a Descrição em select a data field to display clique em ok. Agora altera as seguintes propriedades do DropDownList1: AppendDataBoundItems mude para true depois em items collecions e adicione um item na propriedade Text digite selecione e o valor -1 .
Agora adicione um botão mude as propriedade Text para Delete
Vamos criar a classe Produto2 com o único método de Delete que será consumida no clique ao botão Delete. Para isso clique com a botão direito no projeto na Solution Explore Add ASP. NET Folder > App_Code como mostra a figura 3.
Figura 3:
Depois com o botão direito do mouse em App_Code > Add new Item, na tela que aparece Clique em Class de o nome da classe de Produto2.cs clique em Add
Crie a classe conforme a listagem 1.
Listagem 1:
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Web.Configuration;
/// <summary>
/// Summary description for Produto2
/// </summary>
namespace devmedia.artigo
{
public class Produto2
{
private static readonly string _connectionString;
private int _Id_Produto;
private int _Id_CatProduto;
private string _Nome;
static Produto2()
{
_connectionString = WebConfigurationManager.ConnectionStrings["AnunciosConnectionString"].ConnectionString;
}
public int Id_Produto
{
get { return _Id_Produto; }
set { _Id_Produto = value; }
}
public int Id_CatProduto
{
get { return _Id_CatProduto; }
set { _Id_CatProduto = value; }
}
public string Nome
{
get { return _Nome; }
set { _Nome = value; }
}
public static void Delete(int Id_Produto)
{
Convert.ToInt32(Id_Produto);
SqlConnection con = new SqlConnection(_connectionString);
SqlCommand cmd = new SqlCommand("sp_Produto_Delete", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Id_Produto", Id_Produto);
using (con)
{
con.Open();
cmd.ExecuteNonQuery();
}
con.Close();
}
}
}
Store procedure
ALTER PROCEDURE [dbo].[sp_Produto_Delete]
(
@Id_Produto int
)
AS
DELETE Produto WHERE (Id_Produto = @Id_Produto)
Crie também a Classe Produto.cs como na listagem 2. Só que agora uma classe do tipo Component Model DataObject, para mostrar a diferença.
Na ToolBox navegue ate Data selecione um GridView e arraste para a pagina default.aspx
Na smart tag da Grid selecione Choose data base > New data source, aparecera uma tela pra você escolher o tipo do data source selecione Object a tela seguinte mostra todos os métodos disponíveis da classe por namespace escolha devmedia.artigo.Produto avance , na próxima tela será mostrado os métodos que definimos como sendo do tipo Componente Model DataObject
Veja que o método SelectByCat já estaselecionado conforme mostra a figura 3.
Isso devido a informação que passamos no parâmetro da Classe Produto.cs veja listagem 2 .
Listagem 2:
...Exibição do post interrompida. Para ler conteúdo completo, clique aqui |
|
|
| |
|
14/05/2007 13:36:00
2007
2007
5
1
