DESENVOLVENDO APLICAÇÕES UTILIZANDO MICROSOFT SILVERLIGHT

Transcrição

1 UNIVERSIDADE DO PLANALTO CATARINENSE DEPARTAMENTO DE CIÊNCIAS EXATAS E TECNOLÓGICAS CURSO DE SISTEMAS DE INFORMAÇÃO (BACHARELADO) AKAUAM PITREZ WESTPHAL DESENVOLVENDO APLICAÇÕES UTILIZANDO MICROSOFT SILVERLIGHT LAGES (SC) 2010

2 AKAUAM PITREZ WESTPHAL DESENVOLVENDO APLICAÇÕES UTILIZANDO MICROSOFT SILVERLIGHT Trabalho de Conclusão de Curso submetido à Universidade do Planalto Catarinense para obtenção dos créditos de disciplina com nome equivalente no curso de Sistemas de Informação - Bacharelado. Orientação: Prof. Rafael Gattino Furtado. LAGES (SC) 2010

3 AKAUAM PITREZ WESTPHAL DESENVOLVENDO APLICAÇÕES UTILIZANDO MICROSOFT SILVERLIGHT ESTE RELATÓRIO, DO TRABALHO DE CONCLUSÃO DE CURSO, FOI JULGADO ADEQUADO PARA OBTENÇÃO DOS CRÉDITOS DA DISCIPLINA DE TRABALHO DE CONCLUSÃO DE CURSO, DO 8º. SEMESTRE, OBRIGATÓRIA PARA OBTENÇÃO DO TÍTULO DE: BACHAREL EM SISTEMAS DE INFORMAÇÃO Lages (SC), 16 de Novembro de 2010 Prof. Rafael Gattino Furtado. Orientador BANCA EXAMINADORA: Prof. Sabrina Bet Koerich, M.Sc. UNIPLAC Prof. Edson Roberto Souza Paes, M.Sc. UNIPLAC Prof. Alexandre Perin de Souza, M.Sc. Professor de TCC Prof. Sabrina Bet Koerich, M.Sc. Coordenador de Curso

4 LISTA DE ILUSTRAÇÕES FIGURA 1 - Comparação entre Web 1.0 e Web FIGURA 2 - Aplicação executada fora do browser FIGURA 3 - Ambiente Expression Blend FIGURA 4 - Painel de componentes Visual Studio FIGURA 5 - Depuração de uma aplicação Silverlight FIGURA 6 - Diagrama ER (Entidade-Relacionamento) do sistema FIGURA 7 - Bussiness application FIGURA 8 - Data Model do banco TimeCard FIGURA 9 - Controle relógio animado FIGURA 10 - Story board da animação FIGURA 11 - Exemplo de tratamento de erros do DataForm FIGURA 12 - Cadastro de funções FIGURA 13 - Cadastro de departamentos FIGURA 14 - Cadastro de feriados FIGURA 15 - Layout visão funcionários FIGURA 16 - Diálogo editar funcionário FIGURA 17 - Diálogo definir acesso ao funcionário FIGURA 18 - Acerto do banco de horas FIGURA 19 - Visão meu ponto FIGURA 20 - Dialogo exibido ao solicitar registro de ponto FIGURA 21 - Visão solicitações FIGURA 22 - Visão fechamento do banco de horas FIGURA 23 - Visão fotos QUADRO 1 - Req. funcional: cadastro de setores QUADRO 2 - Req. funcional: cadastro de funções QUADRO 3 - Req. funcional: cadastro de feriados QUADRO 4 - Req. funcional: cadastro de funcionários QUADRO 5 - Req. funcional: registro automático de ponto QUADRO 6 - Req. funcional: registro manual de ponto QUADRO 7 - Req. funcional: aprovação de registros manuais de ponto QUADRO 8 - Req. funcional: banco de horas QUADRO 9 - Req. funcional: acerto do banco de horas QUADRO 10 - Req. funcional: aniversariantes do dia

5 QUADRO 11 - Req. funcional: funcionários que estão trabalhando QUADRO 12 - Req. funcional: autenticação de usuários QUADRO 13 - Req. funcional: relatórios mensais de funcionários QUADRO 14 - Req. funcional: relatórios de funcionários com horas extras QUADRO 15 - Req. funcional: relatórios de funcionários com horas em débito QUADRO 16 - Conceitos e operações cadastrais do sistema QUADRO 17 - Caso de uso UC1 Aprovação de solicitações manuais de ponto QUADRO 18 - Caso de uso UC2 Acerto financeiro do banco de horas QUADRO 19 - Consultas e relatórios do sistema QUADRO 20 - Exemplo de XAML QUADRO 21 - Exemplo de classe Code-Behind QUADRO 22 - Método RIA Services criado automaticamente QUADRO 23 - Método RIA Services personalizado QUADRO 24 - XAML gerado automaticamente pelo Expression Blend QUADRO 25 - Code-Behind Início animações QUADRO 26 - XAML do controle DomainDataSource QUADRO 27 - XAML do controle DataPager QUADRO 28 - XAML do controle DataGrid QUADRO 29 - XAML do controle DataForm QUADRO 30 - Code-Behind de uma solicitação assincrona QUADRO 31 - Code-Behind método de fechamento do banco de horas QUADRO 32 - XAML Aplicação Silverlight QUADRO 33 - Code-Behind Controle de acesso... 53

6 LISTA DE ABREVIATURAS E SIGLAS API ER HTML RIA SDK UNIPLAC XML XAML - Application Program Interface - Entidade-Relacionamento - Hyper Text Markup Language - Rich Internet Application - Software Development Kit - Universidade do Planalto Catarinense - Extensible Markup Language - Extensible Application Markup Language

7 RESUMO A Internet evoluiu muito nos últimos anos. No princípio os sites eram desenvolvidos para somente exibir conteúdos apresentando pouca interatividade com o usuário. Porém, a partir de sua popularização para fins comerciais criou-se a necessidade de aplicações Web com recursos semelhantes às aplicações desktop, em especial interatividade e usabilidade. Neste contexto, surge um novo conceito em programação Web denominado Rich Internet Application (RIA) o qual consiste em uma tecnologia que integra os melhores aspectos de uma aplicação desktop com os melhores aspectos de uma aplicação Web. Assim, o objetivo do presente trabalho foi realizar um estudo sobre o desenvolvimento de aplicações RIA utilizando o Microsoft Silverlight 4. Para tal, realizou-se um levantamento bibliográfico acerca dos conceitos e tecnologias de Web 2.0, RIA e Microsoft Silverlight. Na seqüência, criou-se um estudo de caso para demonstrar as principais características e funcionalidades do Microsoft Silverlight o qual foi implementado na plataforma C#.Net, utilizando como ferramentas principais o Microsoft Visual Studio 2010 e o Microsoft Expression Blend 3. Como resultado, verificou-se que RIA e Web 2.0 fazem, cada vez mais, parte da vida do internauta e do desenvolvedor Web. O Visual Studio 2010 e Expression Blend 3 em conjunto com a tecnologia Microsoft Silverlight 4 constituem ferramentas que facilitam o trabalho do desenvolvedor uma vez que possibilitam utilizar qualquer linguagem.net. Além disso, o uso de RIA Services facilita a interação entre cliente e servidor a medida que trabalha com a comunicação de dados de modo assíncrono e torna a aplicação mais transparente tanto para o desenvolvimento quanto para a utilização do produto final. Palavras-chave: Silverlight; RIA Services; Web 2.0; Rich Internet Applications.

8 ABSTRACT Internet evolved greatly in recent years. In the beginning, sites were designed to only display content with minimal user interactivity. However, because of its increasingly commercial use, the need for web applications with similar characteristics to desktop applications, especially interactivity and usability, emerged. In this context, a new concept, known as Rich Internet Application (RIA), appears which consists of a technology that integrates the best of desktop and Web applications characteristics. So, the aim of this paper is to conduct a study on the development of RIA applications using Microsoft Silverlight 4. Therefore, we performed a literature review about the concepts and technologies of Web 2.0, RIA and Microsoft Silverlight. In sequence, we created a case study to illustrate the main characteristics and functionalities of the Silverlight platform, implemented in C#. Net, using Microsoft Visual Studio 2010 and Microsoft Expression Blend 3 as main tools. As a result, we found out that RIA and Web 2.0 are increasingly part of the life of internet users and Web developers. Visual Studio 2010 and Microsoft Expression Blend 3 along with Microsoft Silverlight 4 technology facilitate the developing work because it allows the developer to use any.net language. Furthermore, the use of RIA Services facilitates the interaction between client and server because it works with asynchronously data communication and makes application more transparent to development and to using the final product. Keywords: Silverlight; RIA Services; Web 2.0; Rich Internet Applications.

9 SUMÁRIO 1 INTRODUÇÃO Apresentação Descrição do problema Justificativa Objetivo geral Objetivos específicos Metodologia CONCEITOS INICIAIS Web RIA Silverlight Benefícios do Silverlight Expression Blend Visual Studio Conclusão MODELAGEM DO SISTEMA Sumário executivo Requisitos funcionais Organização dos requisitos Conceitos e operações cadastrais Casos de uso Consultas e relatórios Projeto do banco de dados Conclusão IMPLEMENTAÇÃO DO CONTROLE DE PONTO Silverlight Templates (Modelos) XAML(Extensible Application Markup Language) e Code-Behind RIA Services Criação de animações Cadastros Cadastro de funções Cadastro de Departamentos Cadastro de feriados... 42

10 4.2.4 Visão funcionários Registros de ponto Registro Automático Registro Manual Liberação de solicitações Fechamento do banco de horas Controle de Acesso Visão fotos Relatórios Conclusão CONSIDERAÇÕES FINAIS REFERÊNCIAS BIBLIOGRÁFICAS APÊNDICES... 59

11 10 1 INTRODUÇÃO 1.1 Apresentação A Internet evoluiu muito nos últimos anos. No princípio, com a limitação dos computadores e das conexões de Internet, os sites eram desenvolvidos em uma estrutura para somente exibir conteúdos, com pouquíssima interatividade com o usuário. Com o uso cada vez maior da Internet para fins comerciais, criou-se a necessidade de aplicações Web com recursos mais semelhantes com os existentes nas aplicações desktop. Assim, surgiram novos conceitos e tecnologias, como, por exemplo, a Web 2.0, através da qual o usuário não exerce apenas a função de leitor, mas também pode interagir com a aplicação Web. Dessa forma, a Web 2.0 funciona como uma plataforma na qual os softwares podem ser acessados de qualquer lugar do mundo. Com a crescente tendência da Internet se adaptar para a Web 2.0, observa-se a necessidade de aplicações com novos recursos, em especial interatividade e usabilidade. Segundo Cabrera (2009), a Internet é, sem dúvida, uma ótima ferramenta para encontrar e organizar informações. Entretanto, no que se refere às características de usabilidade, interatividade em tempo real e multimídia, a Internet está apenas começando a dar seus primeiros passos. Esse tipo de aplicação enquadra-se em outro conceito recente denominado Rich Internet Application (RIA). De acordo com Antunes e Silva (2010), RIA consiste em uma tecnologia que integra os melhores aspectos de uma aplicação desktop tais como alcance,

12 11 conectividade, disponibilidade e manutenção, com os melhores aspectos de uma aplicação Web (riqueza, interatividade, intuitividade e robustez). Dessa forma, ao desenvolver um projeto utilizando conceitos de RIA são combinadas a funcionalidade do desktop com a abrangência e flexibilidade da Web para criar uma única e integrada experiência rica em conteúdo. No presente trabalho apresenta-se um estudo de caso sobre o Microsoft Silverlight, o qual constitui uma tecnologia para o desenvolvimento de aplicações RIA, de forma a demonstrar como é desenvolver uma aplicação rica, ergonômica e com grande usabilidade. A partir do capítulo 2 são caracterizados os conceitos de Web 2.0 e RIA, bem como da tecnologia Silverlight. Na seqüência (capítulo 3), é definido o estudo de caso a ser desenvolvido com a tecnologia Silverlight e sua modelagem. O 4º capítulo demonstra a arquitetura da aplicação e detalhes sobre a implementação do estudo de caso. Por fim, no capítulo 5 são apresentadas as considerações finais. 1.2 Descrição do problema Com o atual avanço das tecnologias relacionadas à Internet, a forma como as pessoas interagem na rede e usam os sistemas computacionais também passa por grandes transformações. Prova disso são os novos conceitos que começam a fazer parte do dia-a-dia do internauta, como Web 2.0 e Aplicações de Internet Rica (RIA). Estes novos conceitos apresentam como aspecto principal levar as características dos softwares desktop tradicionais para a Internet. Por outro lado, a conversão de um sistema desktop para uma aplicação RIA não é algo trivial, em função das próprias limitações e dificuldades que a Internet possui. 1.3 Justificativa Até pouco tempo, com a limitação dos computadores e das conexões de Internet, os sites eram desenvolvidos em uma estrutura para somente exibir conteúdos,

13 12 com nenhuma ou quase nenhuma interatividade com o usuário. Com a evolução da tecnologia e o surgimento de novos conceitos, como a Web 2.0, o usuário não exerce a função somente de leitor, podendo interagir com a aplicação Web. Sendo assim, a Web 2.0 funciona como uma plataforma na qual os softwares podem ser acessados de qualquer lugar do mundo. Tendo em vista o entendimento da migração da Internet para o conceito de Web 2.0, há cada vez mais a necessidade de aplicações com novos recursos, em especial interatividade e usabilidade. Em função disso, as empresas precisam atualizar-se e dominar as tecnologias que surgem juntamente com esses conceitos, a fim de também incluir novos recursos em suas aplicações. As tecnologias RIA mais conhecidas são o Flash 10 (ADOBE, 2010) e o Microsoft Silverlight (MICROSOFT, 2010), sendo que este último é integrado à tecnologia.net. Dessa forma, qualquer linguagem.net pode ser utilizada com o Microsoft Silverlight, facilitando o desenvolvimento de aplicações RIA. Segundo Microsoft (2009), algumas das vantagens do Silverlight são: Uso de Smooth Streaming, uma tecnologia que permite a visualização de vídeos com uma resolução coerente a largura de banda disponível; Experiência fora do navegador (out of browser experience), que permite relações ainda mais próximas com os clientes; Criação de controles customizados, que podem ser reutilizados. Além de já contar com mais de sessenta controles nativos, que vão de datagrids a charts; Uso de multi threads, permite extrair todo potencial das máquinas atuais. 1.4 Objetivo geral Realizar um estudo sobre o desenvolvimento de aplicações RIA utilizando o Microsoft Silverlight.

14 Objetivos específicos a) Caracterizar o que é uma aplicação RIA; b) Identificar as principais características da tecnologia Microsoft Silverlight para o desenvolvimento de aplicações RIA; c) Demonstrar as características do Microsoft Silverlight em um estudo de caso. 1.6 Metodologia Para o desenvolvimento do presente trabalho, inicialmente realizou-se um levantamento bibliográfico, abordando os principais conceitos e tecnologias discutidos, sendo eles: Web 2.0, Rich Internet Applications (RIA) e Microsoft Silverlight 4, tendo sido escolhida esta versão devido ao fato de ser a mais atualizada e por apresentar mais vantagens inerentes ao desenvolvimento. O levantamento bibliográfico teve como principal fonte de pesquisa a Internet, revistas especializadas e livros. Esse estudo tem como objetivo entender os conceitos citados. Na seqüência, foi desenvolvido um estudo detalhado das características e funcionalidades do Microsoft Siverlight 4, o qual deu origem ao capítulo 2. Em seguida, criou-se um estudo de caso para demonstrar as principais características e funcionalidades do Microsoft Silverlight 4. Este estudo de caso foi documentado através da modelagem da aplicação, a qual é composta por levantamento de requisitos, diagrama de classes e expansão dos casos de uso. Também é modelado o banco de dados do estudo de caso, utilizando-se o modelo Entidade- Relacionamento (ER). Essa etapa é apresentada no capítulo 3 deste trabalho. Posteriormente, o estudo de caso foi implementado na plataforma C#.Net, utilizando como ferramentas principais o Microsoft Visual Studio 2010 e o Microsoft Expression Blend 3. Os principais pontos da implementação do estudo de caso estão descritos no capítulo 4. Por fim, o capítulo 5 apresenta as considerações finais sobre este trabalho de

15 pesquisa. 14

16 15 2 CONCEITOS INICIAIS Neste capítulo são descritos os conceitos e aplicações de Web 2.0 e RIA (Rich Internet Application), bem como detalhes das características e funcionalidades da tecnologia Microsoft Silverlight, apresentando as ferramentas utilizadas para o desenvolvimento do estudo de caso. 2.1 Web 2.0 O termo Web 2.0 foi criado por Tim O Reilly no ano de 2004 (O REILLY MEDIA, 2005) e consiste em um conceito de transformação da Internet em uma plataforma na qual aplicações podem ser executadas, visando desenvolver aplicativos que, quão mais usados pelos usuários, mais aproveitem os efeitos dessa rede para tornarem-se melhores. A Figura 1 ilustra a comparação entre Web 1.0 (tradicional) e Web 2.0 FIGURA 1 - Comparação entre Web 1.0 e Web 2.0 (FONTE: O REILLY MEDIA, 2005)

17 RIA Conforme citado anteriormente, apesar de caracterizar uma excelente ferramenta para busca e organização de informações, aplicações na Internet ainda são muito limitadas no que se refere às características de usabilidade, interatividade em tempo real e multimídia (CABRERA, 2009). Ao desenvolver um projeto baseado em RIA são combinadas a interatividade e a funcionalidade do desktop com a abrangência e a flexibilidade da Web, criando assim uma experiência única e integrada, rica em conteúdo. O uso de RIA aumenta o dinamismo do conteúdo e, segundo O Reilly Media (2005), O valor de um sistema é proporcional ao tamanho e dinamismo do conteúdo que ele ajuda a administrar. Conforme encontrado na Wikipédia (2009), RIA são aplicações Web que utilizam, também, o processamento do lado do cliente, sendo os principais motivos para sua utilização: Riqueza nas interfaces, como animações, que não têm suporte em interfaces desenvolvidas em HTML (HyperText Markup Language); Melhor resposta ao usuário, sendo que a interface utiliza o mínimo da comunicação com o servidor; Comunicação assíncrona com o servidor; Melhor usabilidade. Segundo López (2005), em sua maioria, as aplicações RIA possuem uma série de características elementares, tais como: Iniciar a partir de uma página Web; Os usuários que interagem com a aplicação, obtêm uma reação imediata, já que nestas aplicações RIA não é necessário renderizar páginas Web inteiras quando solicitados novos dados. Com este formato de funcionamento, evita-se que a janela do browser fique em branco enquanto recebe os dados do servidor, para depois renderizar novamente

18 17 a página; Utilizar controles de interface de usuário mais modernos, como menu em árvore, painel de abas, entre outros elementos gráficos; Permitir que o usuário realizar operações comuns de aplicações desktop, assim como o uso de drag & drop (arrastar e soltar), redimensionamento, ou animações de objetos; Complexidade do desenvolvimento das aplicações RIA não difere muito das aplicações Web existentes; Realizar todos os itens citados acima, sem necessidade de grande suporte de alguma plataforma e possui compatibilidade com todos os browsers. 2.3 Silverlight Segundo Czernicki (2009), Silverlight é uma plataforma Web para criar e rodar RIAs. Sendo uma plataforma Web é necessário instalar um plugin para que o browser consiga interpretar o código gerado pela aplicação Silverlight. Segundo Michail (2009), Silverlight suporta desenvolvimento de stream de vídeo, aplicações de , aplicações comerciais, redes sociais, jogos, visualizadores de imagens em alta qualidade, anúncios e uma variedade de outras aplicações Web. A plataforma Web Silverlight é multiplataforma, isto é, pode ser executada em vários sistemas operacionais e browsers. Em especial, pode ser executado nos sistemas operacionais: Windows 2000, Windows XP, Windows Vista, Windows 7 e MacOS; e nos browsers: Internet Explorer, Firefox, Safari e Chrome, dentre outros Benefícios do Silverlight Alguns dos recursos do Silverlight são: Desenho vetorial, reprodução de áudio, acesso a banco de dados e controles para aplicações RIA. Ainda, com base no livro publicado por Michail (2009), Silverlight é formado por código de aplicação e componentes gráficos. Existem várias ferramentas disponíveis para facilitar o desenvolvimento em Silverlight. Por exemplo, para

19 18 desenhar a aparência, visual, controles e animação, pode-se utilizar ferramentas como o Expression Blend. Para desenvolver o código, depuração e testes de desempenho, pode-se utilizar o Visual Studio juntamente com o SDK (Software Development Kit) do Silverlight. Além disso, o desenvolvimento pode ser feito em qualquer linguagem de programação que seja suportada pelo.net. No SDK do Silverlight, existem mais de sessenta controles nativos, como caixas de texto, caixas de lista, dentre outros, além de existir muitos componentes de terceiros. Pode-se também criar controles personalizados. O Silverlight possibilita executar uma aplicação fora do browser, sendo instalado diretamente no sistema operacional. A Figura 2 mostra uma aplicação Silverlight sendo executada fora do browser, demonstrando o uso do componente DataGrid. FIGURA 2 - Aplicação executada fora do browser. (FONTE: SILVERLIGHT, 2010) 2.4 Expression Blend A ferramenta Expression Blend pode ser utilizada para o desenvolvimento do

20 19 design da aplicação. Ela facilita o uso de animação e desenho vetorial. A Figura 3 mostra o ambiente do Expression Blend 3. À esquerda está o painel de componentes e de storyboard, no qual são controladas as animações. À direita, encontra-se o painel de propriedades do componente selecionado. FIGURA 3 - Ambiente Expression Blend Visual Studio 2010 O Visual Studio 2010, juntamente com o SDK do Silverlght, é uma poderosa ferramenta para desenvolvimento de aplicações Silverlght, contendo dezenas de componentes nativos e personalizados que podem ser utilizados por meio de drag and drop. A Figura 4 mostra o painel de componentes do Visual Studio.

21 20 FIGURA 4 - Painel de componentes Visual Studio 2010 Utilizando o Visual Studio 2010, o desenvolvedor tem a possibilidade de usar depuração para identificação de erros e testes em geral, conforme mostra a Figura 5. FIGURA 5 - Depuração de uma aplicação Silverlight

22 Conclusão O presente capítulo abordou conceitos básicos sobre Web 2.0 e RIA, bem como detalhes da tecnologia Microsoft Silverlight, e mostrou-se de grande importância para as etapas subsequentes do trabalho. No que diz respeito à Web 2.0 e aplicações RIA, observou-se que as mesmas são conceitos complementares que agregam à aplicação vantagens tanto do desenvolvimento desktop quanto do desenvolvimento Web. Quanto ao Microsoft Silverlight, verificou-se que o mesmo constitui uma importante plataforma para desenvolvimento de aplicações RIA, sendo uma multiplataforma que pode ser implementada em qualquer linguagem.net. Ressalta-se ainda a exposição das ferramentas, Expression Blend, utilizada para a concepção da interface, e Visual Studio, usada para desenvolver a lógica de negócio.

23 22 3 MODELAGEM DO SISTEMA Neste capítulo é apresentada a modelagem do sistema selecionado como estudo de caso, com o principal objetivo de esclarecer suas funcionalidades e estrutura. 3.1 Sumário executivo O sistema proposto é responsável por controlar os registros de entrada e saída dos funcionários (controle de ponto) de uma empresa, além de controlar as alterações destes registros e manter informações do banco de horas. O objetivo maior do sistema é aumentar a segurança e a confiabilidade das informações no que diz respeito ao controle de horários de cada funcionário, proporcionando também maior conforto e interação. Além do exposto acima, o sistema deve contemplar outras características extras, tais como apresentação dos aniversariantes do dia, do calendário com feriados e dos pontos facultativos em destaque, além de demonstrar quais funcionários estão trabalhando naquele momento e seus dados para contato. Por fim, relatórios de funcionários também devem ser gerados, contendo filtros de pesquisa, tais como: setor, função, sexo, dentre outros. 3.2 Requisitos funcionais Nos quadros 1 a 15 são apresentados os requisitos funcionais e os requisitos não-funcionais do sistema.

24 23 QUADRO 1 - Req. funcional: cadastro de setores. F1. Cadastro de setores Oculto () Descrição: O sistema deve permitir inserção, alteração, exclusão e consulta de setores. Os dados a serem informados são: nome e código Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF1.1 Acesso Somente os administradores têm Segurança restrito acesso a esta funcionalidade. QUADRO 2 - Req. funcional: cadastro de funções. F2. Cadastro de funções Oculto () Descrição: O sistema deve permitir inserção, alteração, exclusão e consulta de funções. Os dados a serem informados são: nome e código. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF2.1 Acesso Somente os administradores têm Segurança restrito acesso a esta funcionalidade. QUADRO 3 - Req. funcional: cadastro de feriados. F3. Cadastro de feriados e pontos facultativos Oculto () Descrição: O sistema deve permitir inserção, alteração, exclusão e consulta de feriados e pontos facultativos no calendário. Os dados a serem informados são: Data e Descrição. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF3.1 Acesso Somente os administradores têm Segurança restrito acesso à funcionalidade de inclusão, alteração e exclusão de feriados e pontos facultativos. QUADRO 4 - Req. funcional: cadastro de funcionários. F4. Cadastro de funcionários Oculto () Descrição: O sistema deve permitir inserção, alteração, exclusão e consulta de funcionários. Os dados a serem informados são: código, nome completo, nome de usuário, senha, , data de nascimento, telefone, setor, função, sexo, foto, se o funcionário é um dos responsáveis pelo setor e se o funcionário é um administrador do sistema. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF4.1 Acesso Somente os administradores têm Segurança restrito NF4.2 Validação do nome de usuário NF4.3 Validação do NF4.4 Validação da data de nascimento NF4.5 Validação do telefone NF4.6 Validação de setor NF4.7 Validação de função acesso a esta funcionalidade. O nome de usuário não pode conter caracteres especiais. O deve ser informado no formato padrão. A data de nascimento deve ser informada no formato padrão nacional (dia/mês/ano). O telefone deve ser informado por meio de dez caracteres numéricos. O setor deve ser selecionado através de uma lista. A função deve ser selecionada através de uma lista. Especificação Especificação Especificação Especificação Interface Interface

25 24 NF4.8 Validação de sexo NF4.9 Validação de administrador O sexo deve ser informado através de uma lista. Estão disponíveis dois ítens: feminino e masculino. O privilégio de administrador do sistema deve ser informado através de uma caixa de seleção. Especificação, Interface Interface QUADRO 5 - Req. funcional: registro automático de ponto. F5. Registrar ponto Oculto () Descrição: O sistema deve permitir que os usuários registrem o ponto, utilizando automaticamente o horário do sistema. QUADRO 6 - Req. funcional: registro manual de ponto. F6. Alteração manual de registros de ponto Oculto () Descrição: O sistema deve permitir inserção, alteração, consulta e exclusão manual de registros de ponto. Ao realizar uma alteração, é gerada uma solicitação da mesma para os responsáveis pelo setor e administradores para ser aprovada posteriormente. Os dados a serem informados são: horário de entrada, horário de saída, tipo e justificativa. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF6.1 Validação de horário de entrada NF6.2 Validação de horário de saída NF6.3 Validação de tipo O horário de entrada deve ser informado no padrão nacional (ex.: 14:15). O horário de saída deve ser informado no padrão nacional (ex.: 14:15). O tipo deve ser selecionado através de uma lista. Estão disponíveis os seguintes ítens: trabalho, férias, saúde, viagem e saída legal. Especificação Especificação Especificação, Interface QUADRO 7 - Req. funcional: aprovação de registros manuais de ponto. F7. Aprovação de solicitações de registros manuais de ponto Oculto () Descrição: Quando é gerada uma alteração manual de registro de ponto, um dos responsáveis pelo setor ou um administrador deve ou não aprovar a mesma. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF7.1 Acesso Somente os responsáveis pelo setor Segurança restrito e os administradores têm acesso a esta funcionalidade. QUADRO 8 - Req. funcional: banco de horas. F8. Manter informações de banco de horas Oculto () Descrição: O sistema deve manter informações referentes ao banco de horas de cada funcionário, inclusive de horas que já foram pagas. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF8.1 Acesso Somente os administradores têm Segurança restrito acesso às informações de horas que já foram pagas. Os funcionários têm acesso apenas ao seu respectivo NF8.2 Jornada de trabalho banco de horas. A jornada de trabalho dos funcionários é de 8 horas diárias. Especificação

26 25 QUADRO 9 - Req. funcional: acerto do banco de horas. F9. Acerto financeiro do banco de horas Oculto () Descrição: O sistema deve permitir que seja realizado o acerto financeiro referente às horas (em débito ou extra) do banco de horas. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF9.1 Acesso Somente os administradores têm Segurança restrito acesso às informações de horas que já foram pagas. Os funcionários têm acesso apenas ao seu respectivo banco de horas. QUADRO 10 - Req. funcional: aniversariantes do dia. F10. Aniversariantes do dia Oculto () Descrição: O sistema deve apresentar os aniversariantes do dia. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF10.1 Fins de Se a data do aniversário coincidir Interface semana ou com fim de semana ou feriado, o feriados sistema deve apresentar os aniversariantes também no próximo dia útil. QUADRO 11 - Req. funcional: funcionários que estão trabalhando. F11. Funcionários trabalhando Oculto () Descrição: O sistema deve apresentar os funcionários que estão trabalhando naquele momento, juntamente com seus respectivos dados para contato. QUADRO 12 - Req. funcional: autenticação de usuários. F12. Autenticação de usuários Oculto () Descrição: O sistema deve realizar a autenticação de usuários, através de nome de usuário e senha. QUADRO 13 - Req. funcional: relatórios mensais de funcionários. F13. Relatórios mensais de funcionários Oculto () Descrição: O sistema deve apresentar relatórios mensais de funcionários, que podem ser filtrados por: nome, setor, função e sexo. As informações apresentadas nos relatórios são: horário de entrada e horário de saída de cada dia e o total de horas trabalhadas no mês selecionado. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF13.1 Acesso restrito Somente os administradores têm acesso a esta funcionalidade. Segurança QUADRO 14 - Req. funcional: relatórios de funcionários com horas extras. F14. Relatórios de funcionários com horas extras Oculto () Descrição: O sistema deve apresentar relatórios de funcionários com horas extras, que podem ser filtrados por: nome, setor, função e sexo. As informações apresentadas nos relatórios são: nome do funcionário e a quantidade de horas extras feitas. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF14.1 Acesso restrito Somente os administradores têm acesso a esta funcionalidade. Segurança

27 26 QUADRO 15 - Req. funcional: relatórios de funcionários com horas em débito. F15. Relatórios de funcionários com horas em débito Oculto () Descrição: O sistema deve apresentar relatórios de funcionários com horas em débito, que podem ser filtrados por: nome, setor, função e sexo. As informações apresentadas nos relatórios são: nome do funcionário e a quantidade de horas em débito. Requisitos não-funcionais Nome Restrição Categoria Desejável Permanente NF15.1 Acesso restrito Somente os administradores têm acesso a esta funcionalidade. Segurança 3.3 Organização dos requisitos Com os requisitos especificados, é importante organizá-los, classificando-os em Conceitos e Operações Cadastrais, Casos de Uso e Relatórios Conceitos e operações cadastrais sistema. No quadro 16 estão listados os conceitos e as operações cadastrais do QUADRO 16 - Conceitos e operações cadastrais do sistema. Conceito I A E C Observações Referências cruzadas Setor X X X X É possível excluir apenas F1 se não houver funcionários associados. Função X X X X É possível excluir apenas F2 se não houver funcionários associados. Feriado e ponto X X X X F3 facultativo Funcionário X X X X F4, F1, F2 Registro de ponto X X F5 Registro manual de ponto X X X X F Casos de uso Os casos de uso do sistema podem ser observados nos quadros 17 e 18. QUADRO 17 - Caso de uso UC1 Aprovação de solicitações manuais de ponto Ator Passos Referências Cruzadas Administrador ou Fluxo Principal: F7 responsável pelo setor 1. [EV] A partir de uma lista, o ator seleciona a solicitação desejada. 2. [RS] O sistema apresenta a solicitação detalhada com

28 27 todos os seus dados. 3. [EV] O ator analisa a solicitação e aprova ou não a mesma. 4. [RS] O sistema exibe uma mensagem de confirmação. QUADRO 18 - Caso de uso UC2 Acerto financeiro do banco de horas Ator Passos Referências Cruzadas Administrador Fluxo Principal: F9 1. [EV] A partir de uma lista, o administrador seleciona um funcionário e seu respectivo banco de horas. 2. [RS] O sistema apresenta os dados detalhados do banco de horas. 3. [EV] O administrador informa os dados necessários (a quantidade de horas acertadas e uma descrição, se necessária) e confirma a atualização. 4. [RS] O sistema exibe uma mensagem de confirmação Consultas e relatórios A geração de relatórios e consultas é um dos processos mais fundamentais dentro de sistemas de informação. A identificação correta dos relatórios desejados na fase de concepção pode ajudar muito no levantamento dos requisitos e na elaboração do sistema (WAZLAWICK, 2004). A seguir, no quadro 19, são apresentados as consultas e os relatórios fornecidos pelo sistema. QUADRO 19 - Consultas e relatórios do sistema. Nome Referências cruzadas Banco de horas F8 Aniversariantes F10 Funcionários que estão trabalhando F11 Funcionários por mês F13 Funcionários com horas extras F14 Funcionários com horas em débito F Projeto do banco de dados A Figura 6 apresenta o projeto do banco de dados, sendo as principais tabelas do banco tbemployee, tbuser, tbpunch e tbtimebank. A primeira caracteriza o local onde são armazenados os dados cadastrais dos funcionários. A segunda contém o login

29 28 e senha dos funcionários quais são utilizados para acessar o sistema. A terceira representa as operações de entrada e saída no ponto do funcionário. A quarta contabiliza o banco de horas do funcionário. FIGURA 6 - Diagrama ER (Entidade-Relacionamento) do sistema 3.5 Conclusão Neste capítulo, foi apresentada a modelagem do estudo de caso escolhido para demonstrar o uso da tecnologia Microsoft Silverlight. Ao finalizar este capítulo, conclui-se que a modelagem de um sistema é essencial, pois caracteriza as funcionalidades que o sistema deve apresentar e a estrutura de dados, facilitando assim seu desenvolvimento. Através da modelagem, o analista consegue visualizar o que é necessário fazer, estabelecendo critérios objetivos a serem atingidos. Além disso, ele consegue monitorá-los e corrigi-los, quando necessário e verificar ao final se as metas foram atingidas. Enfim, é um esforço necessário, pois evita retrabalho, e se ganha maior produtividade futura.

30 29 4 IMPLEMENTAÇÃO DO CONTROLE DE PONTO Neste capítulo é demonstrada a implementação do sistema proposto anteriormente, desenvolvido como um estudo de caso. São descritas também as tecnologias utilizadas para o desenvolvimento da aplicação. 4.1 Silverlight Templates (Modelos) A implementação utilizando Silverlight pode ser facilitada com o uso de templates, um template nativo do Silverlight 4 é o bussines application. A Figura 7 demonstra a estrutura inicial deste template.

31 30 FIGURA 7 - Bussiness application O template bussines application cria uma solução, baseada em estilos, com um layout básico para o início de um novo projeto. Divide a solução em dois projetos, uma aplicação Silverlight, que roda no lado cliente, e projeto.net ao qual é adicionado os serviços e a lógica de negócios que é processado pelo lado servidor. A interação entre estes dois projetos é demonstrada adiante. Com base neste template é desenvolvido o estudo de caso XAML(Extensible Application Markup Language) e Code-Behind Ao criar uma página ou controle silverlight, são criados dois arquivos que trabalham em conjunto. O arquivo XAML e o Code-Behind. O XAML é uma linguagem baseada em XML (Extensible Markup Language), que pode ser interpretada ou compilada e é neste arquivo que fica a camada de apresentação de cada controle ou página Silverlight. O Quadro 21 mostra um exemplo de página Silverlight.

32 QUADRO 20 - Exemplo de XAML <navigation:page x:class="pontoapp.views.page1"... Title="Page1 Page"> <Grid x:name="layoutroot"> <Button x:name="button1" Click="Button1_Click"></Button> </Grid> </navigation:page> Cada tag significa um objeto, esses objetos podem ser acessados e manipulados no Code-Behind usando o atributo x:name, linhas 5 e 6. Todo objeto que tenha este atributo definido será visível ao Code-Behind. O objeto Button foi adicionado a partir da paleta de componentes do Visual Studio Na linha 2 é definido qual classe é o code-behind. Na linha 6 é definido o evento Click que é disparado quando o botão é pressionado. Este evento aponta para um método do Code-Behind. Code-Behind é um termo usado para descrever a classe que está associada ao XAML. O Quadro 22 mostra o Code-Behind da página Silverlight criada anteriormente QUADRO 21 - Exemplo de classe Code-Behind... namespace PontoApp.Views { public partial class Page1 : Page {... private void Button1_Click(object sender, RoutedEventArgs e) { Button1.Visibility = System.Windows.Visibility.Collapsed; } } } O método Button1_Click, linha 6, é executado ao momento que o Button1, definido no XAML, é clicado. Este método altera a propriedade Visibility do objeto Button1 para invisível, linha 8. Demonstrando, assim, a interação entre XAML e Code-Behind.

33 RIA Services A interação entre cliente e servidor, utilizando Silverlight, é facilitada pelo uso da tecnologia RIA Services. Esta tecnologia permite esta comunicação, com o banco de dados, de forma assíncrona e transparente para a aplicação tanto em tempo de execução quanto no desenvolvimento. Para o uso desta tecnologia é necessário primeiramente criar no projeto.net um modelo de dados (ADO.NET Entity Data Model), que pode ser criado através de um assistente, bastando selecionar a base de dados e as tabelas a serem mapeadas. A Figura 8 demonstra o modelo de dados, gerado através do assistente, da base de dados que será utilizada no desenvolvimento deste estudo de caso. FIGURA 8 - Data Model do banco TimeCard Ao adicionar ao projeto.net um Domain Service Class, este modelo de dados servirá como base para o mapeamento objeto-relacional. Depois de apontado ao assistente do Domain Service Class o modelo de dados, será criado automaticamente

34 33 todas as classes de objetos, bem como os métodos de adição, exclusão e consulta das entidades do modelo de dados. Tais métodos que podem ser chamados no projeto Silverlight sendo assim, o controle do tráfego de dados e comunicação entre cliente e servidor é gerenciado pela tecnologia RIA Services. Estes métodos podem ser personalizados com a lógica de negócio desejada. O quadro 22 mostra um método que foi gerado automaticamente QUADRO 22 - Método RIA Services criado automaticamente public IQueryable<Employee> GetEmployees() { return this.objectcontext.employees; } Este método foi criado automaticamente e simplesmente retorna todos os funcionários do banco sem nenhum tipo de filtro. O Quadro 23 mostra o mesmo método do Quadro 22 que foi personalizada para retornar os funcionários que contenham um determinado texto no nome QUADRO 23 - Método RIA Services personalizado public IQueryable<Employee> GetEmployees(string name) { if (! string.isnullorempty(name)) { return this.objectcontext. Employees.Where(e => e.name.contains(name)).orderby(e => e.name); } } else { return this.objectcontext. Employees.OrderBy(e => e.name); } Sendo assim, caso o parâmetro name do método GetEmployees, linha 1, seja passado um valor diferente de nulo este método retornará somente os funcionários que contenham tal texto no nome. Esta classe gerada pode ser acessada do projeto silverlight e seus métodos

35 34 podem ser chamados de forma assíncrona. Como é demonstrado nos cadastros Criação de animações Neste item será demonstrada a criação de animações em Silverlight utilizando o Microsoft Expression Blend. Como exemplo é utilizado o componente criado para a janela de registro de ponto, um controle relógio. FIGURA 9 - Controle relógio animado. As animações deste controle consistem em mostrar e esconder o horário mostrado de forma digital. A Figura 10 demonstra a animação criada para mostrar o horário. Foram criados dois pontos na timeline (linha do tempo) da animação e em cada um dos pontos definido a propriedade Opacity do TextBlock. FIGURA 10 - Story board da animação

36 35 O Quadro 24 mostra o código gerado automaticamente pelo Expression Blend a partir do exemplo anterior QUADRO 24 - XAML gerado automaticamente pelo Expression Blend <Storyboard x:name="showdigitaltimeanimation"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="txDigitalTime"> <EasingDoubleKeyFrame x:name="showdigitaltimeframe1" KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.90"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:name="hidedigitaltimeanimation"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="txDigitalTime"> <EasingDoubleKeyFrame x:name="hidedigitaltimeframe1" KeyTime="0" Value="0.90"/> <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> O Quadro 25 mostra como iniciar uma animação QUADRO 25 - Code-Behind Início animações private void Clock_MouseEnter(object sender, MouseEventArgs e) { ShowDigitalTimeFrame1.Value = txdigitaltime.opacity; ShowDigitalTimeAnimation.Begin(); } private void Clock_MouseLeave(object sender, MouseEventArgs e) { HideDigitalTimeFrame1.Value = txdigitaltime.opacity; HideDigitalTimeAnimation.Begin(); } O horário em formato digital deve ser mostrado ao passar o mouse por cima do controle relógio. Sendo assim, foram adicionados dois eventos ao controle, Mouse enter e Mouse leave, respectivamente, nas linhas 1 e 7. Quando o mouse passar por cima do controle relógio a animação para mostrar o horário de forma digital deve ser iniciado, linha 4, método Begin da animação. Quando o mouse sair de cima do

37 36 controle de relógio a animação para esconder o horário de forma digital deve ser iniciado, linha 10, método Begin da animação. 4.2 Cadastros Neste item é demonstrada a implementação de todos os cadastros do estudo de caso. Especificando apenas uma vez detalhadamente cada particularidade da implementação utilizando a tecnologia Silverlight Cadastro de funções Este cadastro serve para controle de adição, edição, pesquisa e exclusão das funções dos funcionários. O layout da página foi definido pelo Visual Studio 2010, utilizando a funcionalidade drag & drop (arrastar e soltar), não necessitando adicionar controles manualmente pelo XAML. Neste cadastro foram adicionados os controles DataGrid, DataPager, DataForm e DomainDataSource. O DomainDataSource é um controle utilizado para acessar dados via RIA Services. Este controle pode ser vinculado, através do método binding, a alguns controles que são utilizados para exibir informações. Entre eles, está o DataGrid. O método binding serve para fazer um vinculo de alguma propriedade de um objeto com outro objeto ou propriedade de outro objeto. O Quadro 27 mostra o XAML gerado para o controle DomainDataSource QUADRO 26 - XAML do controle DomainDataSource <Navigation:Page... xmlns:ds="clr-namespace:pontoapp.web.services" >... <riacontrols:domaindatasource x:name="mydata" LoadSize="25" QueryName="GetFunctions" AutoLoad="True"> <riacontrols:domaindatasource.domaincontext> <ds:timecarddomaincontext /> </riacontrols:domaindatasource.domaincontext> <riacontrols:domaindatasource.queryparameters> <riadata:parameter ParameterName="name"

38 Value="{Binding ElementName=tbNameFilter, Path=Text}" /> </riacontrols:domaindatasource.queryparameters> </riacontrols:domaindatasource>... <TextBox x:name="tbnamefilter" FontSize="11" Margin="100,2,6,0" Grid.Row="1" Height="23" HorizontalContentAlignment="Left" /> O nome do objeto DomainDataSource foi definido para MyData, utilizando a propriedade x:name, linha 5. Assim como no Code-Behind, ao adicionar objetos e classes que não estejam no mesmo namespace ou projeto é necessário criar um vínculo com a classe a ser acessada. No XAML, como demonstrado na linha 3, foi adicionado a propriedade xmlns com o namespace a ser utilizado. Sendo assim, ao chamar a tag ds podemos acessar as classes que estão dentro do namespace definido. Para acessar as funções registradas no banco de dados, é necessário definir a propriedade DomainContext do objeto MyData, para a classe TimeCardDomainContext do namespace ds, linhas 7, 8 e 9. Esta classe é do tipo DomainServiceClass que foi demonstrada no item É necessário, também, definir a propriedade QueryName, linha 6, que representa o nome do método a ser acessado na classe TimeCardDomainService. O nome do parâmetro que o método espera é name, definido na linha 11 através da propriedade ParameterName, e o valor do parâmetro é definido, na linha 12, utilizando o método binding vinculando assim, a propriedade Text do controle tbnamefilter. Sendo assim, quando aplicação está executando, ao momento que a propriedade Text é alterada o filtro por nome da função já é feito de forma automática. A propriedade AutoLoad foi definida para True para que ao carregar a página o carregamento dos dados, de forma assíncrona, seja iniciado automaticamente. A propriedade LoadSize define quantos registros serão carregados por vez, este caso 25. Sendo assim, quando o objeto tiver carregado os primeiros 25 registros, eles já estarão disponíveis para exibição enquanto carrega assincronamente outros 25 e assim por diante. Para aumentar o desempenho e evitar que muitos registros sejam carregados desnecessariamente, é utilizado um controle para fazer a paginação dos dados. Este controle é o DataPager, demonstrado no Quadro 28.

39 QUADRO 27 - XAML do controle DataPager... <sdk:datapager x:name="pager" PageSize="10" Source="{Binding ElementName=MyData, Path=Data}" Grid.Row="2" Margin="0,0,5,0" Grid.RowSpan="2" />... A propriedade Source foi definida para vincular a propriedade Data do objeto MyData através do binding, linha 3. Na linha 2 foi definida a propriedade PageSize para 10. Assim, os dados são paginados de 10 em 10 registros fazendo que o objeto MyData carregue somente os registros necessários para cada página. Agilizando assim, o processo como um todo. Como demonstra o Quadro 29, os dados são exibidos vinculando o componente DataGrid ao objeto MyData QUADRO 28 - XAML do controle DataGrid... <sdk:datagrid x:name="grdfunctions" MinHeight="100" MinWidth="300" IsReadOnly="True" AutoGenerateColumns="False" ItemsSource="{Binding ElementName=MyData, Path=Data}" Grid.Row="2" Margin="0,0,5,24" Grid.RowSpan="2" SelectionMode="Single"> <sdk:datagrid.columns> <sdk:datagridtextcolumn Binding="{Binding functionid}" Header="Código" Width="80" /> <sdk:datagridtextcolumn Binding="{Binding name}" Header="Nome" /> </sdk:datagrid.columns> </sdk:datagrid>... O nome do objeto DataGrid foi definido para grdfunctions, utilizando a propriedade x:name, linha 2. Da mesma forma que o DataPager, a propriedade ItemSource foi definida para vincular a propriedade Data do objeto MyData através do binding. Assim, os dados são exibidos assim que carregados pelo objeto MyData. O objeto DataGrid possui a possibilidade de gerar as colunas automaticamente, neste caso, na linha 3, foi definido a propriedade AutoGenerateColumns para False para que seja possível especificar as colunas que são exibidas. Estas colunas foram definidas adicionando a propriedade Columns, do objeto

40 39 grdfunctions, objetos do tipo DataGridTextColumn. Duas colunas foram adicionadas. Uma contendo o código e outra contendo o nome da função. Para tal foi definido a propriedade binding e Header destes objetos, linhas 8 a 12. O parâmetro IsReadOnly do objeto MyData foi definido para True, para que os dados do DataGrid sejam somente leitura. A inclusão, edição e exclusão são controladas por um controle DataForm. O Quadro 30 demonstra este controle QUADRO 29 - XAML do controle DataForm... <toolkit:dataform x:name="dffunction" Header="Informações da Função" CommandButtonsVisibility="All" AutoEdit="true" AutoGenerateFields="False" AutoCommit="False" ItemsSource="{Binding ElementName=MyData, Path=Data}" CurrentItem="{Binding ElementName=grdFunctions, Path=SelectedItem}" EditEnded="dfFunction_EditEnded" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" Grid.RowSpan="2" DeletingItem="dfFunction_DeletingItem" > <toolkit:dataform.edittemplate> <DataTemplate> <StackPanel> <toolkit:datafield Label="Código"> <TextBox Text="{Binding functionid }" /> </toolkit:datafield> <toolkit:datafield Label="Nome"> <TextBox Text="{Binding name, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/> </toolkit:datafield> </StackPanel> </DataTemplate> </toolkit:dataform.edittemplate> <toolkit:dataform.newitemtemplate> <DataTemplate> <StackPanel> <toolkit:datafield Label="Nome"> <TextBox Text="{Binding name NotifyOnValidationError=True, ValidatesOnExceptions=True}" /> </toolkit:datafield> </StackPanel> </DataTemplate> </toolkit:dataform.newitemtemplate> </toolkit:dataform>... O nome do objeto DataForm foi definido para dffunctions, utilizando a propriedade x:name, linha 2. A propriedade ItemSource foi definida da mesma forma que o grdfunctions. A propriedade CurrentItem se refere ao item ao qual o usuário visualiza no

41 40 controle. Esta propriedade foi vinculada a propriedade SelectedItem do objeto grdfunctions. Assim, quando o item selecionado no DataGrid é alterado, muda também o item selecionado no DataForm. O controle DataForm é utilizado para facilitar o controle de inclusão, edição e exclusão. Além possibilitar disparo de eventos, no Code-Behind, para cada uma dessas operações, ele também pode tratar erros automaticamente. Este controle também possui a possibilidade de gerar os campos automaticamente, neste caso, na linha 3, foi definido a propriedade AutoGenerateFields para False para que seja possível especificar os campos que são exibidos a cada operação. Os campos que são utilizados no momento da edição e na inclusão foram adicionados através das propriedades EditTemplate e NewItemTemplate, respectivamente, do DataForm. Ao campo que corresponde ao nome da função foram adicionados os parâmetros NotifyOnValidationError como True e ValidatesOnExceptions como True ao binding. Estes parâmetros servem, respectivamente para que o DataForm exiba erros caso ocorram e não permita finalizar a operação caso os erros não sejam corrigidos. A Figura 11 demonstra como o DataForm exibe os erros ao usuário. FIGURA 11 - Exemplo de tratamento de erros do DataForm

42 41 Ao dffunctions foi definido o evento DeletingItem para o metodo dffunction_deletingitem do Code-Behind. Sendo assim, ao pressionar o botão de exclusão do DataForm, o método definido no evento será executado. Este evento simplesmente exibe um dialogo para confirmação da exclusão. A Figura 12 demonstra como é o layout final da visão de funções. FIGURA 12 - Cadastro de funções Nesta visão os usuários administradores possuem acesso total, gerentes possuem somente leitura e funcionários não possuem acesso a esta visão Cadastro de Departamentos Este cadastro serve para controle de adição, edição, pesquisa e exclusão dos departamentos dos funcionários. A implementação deste cadastro é similar ao cadastro de funções. Sendo assim, não será descrito novamente os passos de implementação. A Figura 13 mostra o layout final do cadastro de departamentos.

43 42 FIGURA 13 - Cadastro de departamentos Nesta visão, assim como na visão de funções, os usuários administradores possuem acesso total, gerentes possuem somente leitura e funcionários não possuem acesso a esta visão Cadastro de feriados Este cadastro serve para controle de adição, edição, pesquisa e exclusão dos feriados. A implementação deste cadastro é similar ao cadastro de funções. Sendo assim, não será descrito novamente os passos de implementação. A Figura 14 mostra o layout final deste cadastro.

44 43 FIGURA 14 - Cadastro de feriados Nesta visão, assim como na visão de funções, os usuários administradores possuem acesso total, gerentes possuem somente leitura e funcionários não possuem acesso a esta visão Visão funcionários Este cadastro serve para controle de adição, edição, pesquisa e exclusão dos dos funcionários, além de permitir definir acesso, lançar acerto no banco de horas. A implementação deste cadastro é similar a descrita nos demais cadastros. Sendo assim, não será descrito novamente os passos de implementação. Usuários administradores possuem acesso completo a esta visão, incluindo as opções de definir acesso e lançar acerto no banco de horas. Usuários gerentes somente possuem acesso para leitura. Usuários não possuem acesso a esta visão. A Figura 15 mostra o layout final da visão de funcionários.

45 44 FIGURA 15 - Layout visão funcionários Inserir e editar funcionário Este diálogo possibilita a edição e inserção dos dados do funcionário, tais como: Nome, , Telefone, Nascimento, Gênero, Departamento, Função e Foto. A Figura 16 mostra o layout deste diálogo. FIGURA 16 - Diálogo editar funcionário

46 Definir acesso ao funcionário Este diálogo possibilita a definição de acesso ao funcionário, através do fornecimento dos dados: Login, Senha e Nível de acesso. A Figura 17 demonstra o layout deste diálogo. FIGURA 17 - Diálogo definir acesso ao funcionário Acerto do banco de horas do funcionário Este diálogo possibilita realizar o acerto do banco de horas de funcionários que possuam saldo de horas positivo ou negativo. Este acerto pode ser total ou parcial. A Figura 18 mostra o layout deste diálogo. FIGURA 18 - Acerto do banco de horas

47 Registros de ponto Neste item é demonstrada a implementação dos registros de ponto, tanto manual quanto automático, do estudo de caso. Nesta visão foi utilizado o componente personalizado criado especialmente para esta aplicação, o qual constitui um controle relógio. Assim como na implementação dos cadastros anteriores, esta página utiliza um componente DomainDataSource para comunicação com DomainDataService. Entretanto, a mesma se diferencia por utilizar o Code-Behind para fazer solicitações assíncronas ao serviço TimeCardDomainService, conforme demonstra o Quadro QUADRO 30 - Code-Behind de uma solicitação assincrona using PontoApp.Web.Services;... private TimeCardDomainContext domaincontext = new TimeCardDomainContext();... private void LoadUserTimeBank(long employeeid) { domaincontext.getemployeetimebank(employeeid, timebankret => { int totalminutes = timebankret.value;... lbtimebank.text = "Saldo do Banco de Horas: " + time; },null); } O método LoadUserTimeBank é executado assim que a página é carregada. Sua função é exibir, na tela, o saldo do banco de horas do funcionário logado. Na linha 1 é feita a referência com o projeto Web, permitindo, assim, o acesso ao serviço TimeCardDomainContext. O método GetEmployeeTimeBank, linha 8, foi criado no serviço para retornar um valor do tipo inteiro, contendo o número de minutos que o banco de horas do funcionário possui, passando apenas o código do funcionário. Como a comunicação entre o lado cliente e o lado servidor é feita de forma assíncrona, foi necessário utilizar a expressão => (lambda), linha 8. Tal expressão possibilita criar um trecho de código, assim como nas linhas 9 a 12, para ser executado após a solicitação assíncrona ser concluída, retornando o valor da

48 47 solicitação. A Figura 19 mostra o layout final da visão de registro de pontos. FIGURA 19 - Visão meu ponto Os registros exibidos no DataGrid correspondem a data selecionada no controle de calendário. Sendo assim, o funcionário tem como ver seus registros de ponto, inclusive os que aguardam aprovação, os quais aparecem em amarelo Registro Automático Conforme descrito nos requisitos funcionais, o registro de ponto automático não necessita da aprovação de gerentes, sendo que o registro de entrada ou saída definido pelos horários do sistema. Dessa forma, os botões de entrada e saída são visíveis somente quando a data selecionada no controle de calendário é a data atual. A quantidade de minutos trabalhados no dia é calculada e salva neste registro, quando o usuário bate a saída automática Registro Manual Conforme descrito nos requisitos funcionais, o registro de ponto manual necessita de aprovação de gerentes. Sendo assim, podem ser solicitadas inclusões e edições de registro de ponto em qualquer data. A Figura 20 demonstra o dialogo de solicitação de registro ponto.

49 48 FIGURA 20 - Dialogo exibido ao solicitar registro de ponto solicitação. A quantidade de minutos trabalhados no dia é calculada e salva com a Liberação de solicitações Conforme detalhado no capitulo 3, referente a modelagem do sistema, as solicitações manuais feitas pelos usuários podem ser liberadas ou rejeitadas pelos gerentes ou administradores. Os gerentes terão a possibilidade de gerenciar as solicitações somente do seu setor, ao passo que os administradores podem gerenciar todas as solicitações. A Figura 21 mostra o layout final da visão de solicitações.

50 49 FIGURA 21 - Visão solicitações 4.4 Fechamento do banco de horas Neste item será demonstrada a implementação do fechamento do banco de horas de funcionários do estudo de caso. Conforme detalhado nos requisitos funcionais, tem-se como base que todos os funcionários devem trabalhar 8 horas por dia útil, sendo excluídos sábados, domingos e feriados. O fechamento do banco de horas pode ser feito em qualquer período entre a última atualização (ao iniciar a utilização do sistema esta data é definida manualmente no banco de dados) e a data atual. No entranto, o processo não é iniciado caso exista alguma solicitação pendente neste período. O processo de fechamento do banco de horas é feito no lado do servidor, evitando processamento e trafego desnecessários ao computador do cliente. Sendo assim, o lado cliente faz somente uma solicitação assíncrona do método que foi implementado na classe TimeCardDomainService e aguarda a conclusão.

51 50 O Quadro 31 demonstra este método, o GenerateTimeBank QUADRO 31 - Code-Behind método de fechamento do banco de horas public void GenerateTimeBank(DateTime startdate, DateTime enddate) { int shouldbeminutes = GetShouldBeMinutes(startDate, enddate); foreach (Employee employee in this.objectcontext.employees) { int workedminutes = 0; foreach (Punch punch in GetAllPunchesByPeriod(employee.employeeId, startdate, enddate)) { workedminutes += punch.minutes; } SaveEmployeeTimeBank(employee.employeeId, workedminutes - shouldbeminutes); } this.objectcontext.savechanges(); } private int GetShouldBeMinutes(DateTime startdate, DateTime enddate) { startdate = DateTime.Parse(startDate.ToShortDateString()); enddate = DateTime.Parse(endDate.ToShortDateString()); int shouldbeminutes = 0; while (startdate <= enddate) {//Caso não seja final de semana nem Feriado, soma 8 horas; if (startdate.dayofweek!= DayOfWeek.Sunday && startdate.dayofweek!= DayOfWeek.Saturday &&!IsHoliDay(startDate)) { shouldbeminutes += 8 * 60;//8 horas por dia } startdate = startdate.adddays(1); } return shouldbeminutes; } private void SaveEmployeeTimeBank(long employeeid, int minutes) { TimeBank timebank = GetTimeBankByEmployee(employeeId); if (timebank == null) { timebank = new TimeBank(); timebank.timebankid = employeeid; timebank.minutes = minutes; this.objectcontext.timebanks.addobject(timebank); } else { timebank.minutes += minutes; this.objectcontext.timebanks.attachasmodified(timebank);

52 } } Ao executar o método de fechamento de banco de horas (GenerateTimeBank), linha 1, são fornecidos dois parâmetros, data inicial e data final, os quais são utilizados para calcular a quantidade de horas de trabalho do período. No banco de dados a informação do banco de horas é salva em minutos, sendo que todo o calculo de horas de trabalho é feito em minutos. O método GetShouldBeMinutes retorna quantos minutos deveriam ser trabalhados no período, linha 4. Este método foi definido nas linhas 19 a 36. Primeiramente, é calculada a quantidade de dias úteis que existem no período. Após isso, são contabilizados quantos minutos deveriam ser trabalhados no período e retorna este valor. A quantidade total de minutos vai ser utilizada para calcular o banco de horas de cada funcionário. Na linha 5, usando a função foreach do C#, é iniciada uma iteração para acessar cada funcionário do banco. Na linha 8 inicia-se uma iteração para percorrer todos registros de pontos do funcionário, obtido a partir da iteração anterior, no período. Esta segunda iteração serve para somar a quantidade de minutos trabalhados de cada registro de ponto. Ao final, se obtêm a quantidade de minutos trabalhados do funcionário, sendo que esta informação é subtraída da quantidade de minutos que deveriam ser trabalhados e atualizada no banco de horas do funcionário através do método SaveEmployeeTimeBank. Este método verifica a necessidade de criar o registro de banco de horas para o funcionário, atualizando assim, no banco de dados o banco de horas do funcionário. Ao final da iteração de funcionários, na linha 17, é executado o método SaveChanges, do objeto ObjectContext, para persistência dos dados no banco de dados. A data da última atualização é alterada para data final passada por parâmetro, através de uma solicitação assíncrona do cliente similar a descrita anteriormente.

53 52 A Figura 22 mostra o layout final desta visão. FIGURA 22 - Visão fechamento do banco de horas Somente administradores possuem acesso a essa visão. 4.5 Controle de Acesso Para o controle de acesso foi criado uma classe DomainService herdando da interface IAuthentication que implementa os métodos necessários para login, logout, e GetUser. Este serviço foi implementado de forma bastante similar ao serviço TimeCardDomainService. Por este motivo, a implementação destes métodos não será descrita. Este serviço é informado à aplicação Silverlight, conforme demonstra o Quadro 32.

54 QUADRO 32 - XAML Aplicação Silverlight <Application x:class="pontoapp.app"... xmlns:appsvc="clrnamespace:system.servicemodel.domainservices. Client.ApplicationServices;assembly=System.ServiceModel. DomainServices.Client.Web"> <Application.ApplicationLifetimeObjects> <app:webcontext> <app:webcontext.authentication> <appsvc:formsauthentication DomainContextType="PontoApp. Web.Services.AuthenticationUser"/> </app:webcontext.authentication> </app:webcontext> </Application.ApplicationLifetimeObjects>... </Application> Nas linhas 10 a 13, através da tag app:webcontext.authentication podemos definir qual é o serviço que fará o controle de autenticação. A aplicação Silverlight fará o controle de sessão automaticamente. Após esta configuração, qualquer página do sistema pode acessar o WebContext de autenticação, conforme demonstra o Quadro QUADRO 33 - Code-Behind Controle de acesso protected override void OnNavigatedTo(NavigationEventArgs e) { UpdateInterface(WebContext.Current.User.Roles.First()); } private void UpdateInterface(string role) { if (role == "ROLE_MANAGER") { dfdepartment.isreadonly = true; dfdepartment.commandbuttonsvisibility = DataFormCommandButtonsVisibility.Navigation; } if (role == "ROLE_ADMINISTRATOR") { dfdepartment.commandbuttonsvisibility = DataFormCommandButtonsVisibility.All; } } Para acessar o nível de acesso do usuário logado é utilizado o Current.User do WebContext, linha 3. O método UpdateInterface atualiza a interface de acordo com

55 54 o nível de acesso do usuário, definido nas linhas 5 a Visão fotos Para esta visão foi criado um componente personalizado no qual é passado um objeto Employee como parâmetro. Com base neste parâmetro, o componente exibe a foto, o nome, o departamento e o setor do funcionário. Foi criada, ainda, uma animação ao passar o mouse em cima de cada foto. A animação consiste em trocar a cor da sombra do componente. A Figura 23 mostra a visão fotos. FIGURA 23 - Visão fotos Todos os usuários possuem acesso a esta visão.

56 Relatórios Apesar de a tecnologia Microsoft Silverlight 4 possuir uma API (Application Program Interface) para impressão, a mesma não possui nenhum assistente de relatórios nativo e, além disso, não foram utilizados nenhum controle de terceiros. Desta forma, neste trabalho não foram implementados os relatórios que foram descritos na modelagem do sistema. 4.8 Conclusão Neste capítulo foi demonstrado, de forma detalhada, a implementação do estudo de caso proposto, utilizando a tecnologia Microsoft Silverlight 4 e as ferramentas Visual Studio 2010 e Expression Blend 3. Descrevendo as implementações através de figuras e quadros, conclui-se que a ferramenta Visual Studio 2010 em conjunto com a tecnologia Microsoft Silverlight 4 pode facilitar o desenvolvimento de aplicações ricas para internet. Tal capítulo constituiu a etapa mais importante e significativa do trabalho, uma vez que a implementação deste sistema foi o principal foco do estudo, sendo esta destinada, posteriormente, a ser utilizada como base para o desenvolvimento de novos projetos baseados em Silverlight. No entanto, ressalta-se que esta foi, ainda, a etapa mais desafiadora do trabalho por apresentar dificuldades tais como escassez de materiais abordando esta tecnologia na língua portuguesa, além do fato de que consiste em uma tecnologia relativamente nova.

57 56 5 CONSIDERAÇÕES FINAIS Aplicações de Internet Rica (Rich Internet Application - RIA) e Web 2.0 fazem, cada vez mais, parte da vida do internauta e do desenvolvedor Web. Entretanto, o desenvolvimento de uma aplicação RIA não é algo trivial, em função das próprias limitações e dificuldades que a Internet possui, tais como velocidade da conexão e limitações inerentes aos browsers. Este trabalho teve como objetivo realizar um estudo sobre o desenvolvimento de RIA utilizando a tecnologia Microsoft Silverlight 4, através da implementação de um estudo de caso e descrição de sua a modelagem e especificações. Para tal, foram estudadas as definições de Web 2.0 e RIA, as quais constituem conceitos complementares à tecnologia Silverlight. Quanto aos objetivos específicos, o primeiro foi alcançado no item 2.2 ao caracterizar de forma detalhada o que é RIA. Já o segundo objetivo foi alcançado, no item 2.3, identificando as principais características da tecnologia Microsoft Silverlight para o desenvolvimento de RIA. O terceiro objetivo específico foi atingido através dos capítulos 3 e 4, os quais abordam, respectivamente, a modelagem e implementação do sistema. A modelagem do sistema proposto como estudo de caso foi definida no capítulo 3, o qual abordou, dentre outros assuntos, os requisitos funcionais e nãofuncionais, bem como os casos de uso e o modelo lógico. O capítulo 4, o qual abordou a implementação do sistema, descreve com detalhamento considerável o desenvolvimento do estudo de caso proposto com a utilização da tecnologia Microsoft Silverlight 4 e ferramentas Visual Studio 2010 e Expression Blend 3.

58 57 Como dificuldades encontradas, ressalta-se quanto ao capítulo 4 que o item 4.8, correspondente a implementação de relatórios, não foi desenvolvido devido ao fato de que o Microsoft Silverlight 4, apesar de possuir uma API (Application Program Interface) para impressão, não possui assistente de relatórios nativo. Destaca-se, ainda, que não foram utilizados controles de terceiros em nenhuma etapa do desenvolvimento, fato este que justifica a não implementação dos relatórios. O Visual Studio 2010 e Expression Blend 3 em conjunto com a tecnologia Microsoft Silverlight 4 constituem ferramentas que facilitam o trabalho do desenvolvedor uma vez que possibilitam utilizar qualquer linguagem.net. Além disso, o uso de RIA Services facilita a interação entre lado cliente e lado servidor a medida que trabalha com a comunicação de dados de modo assíncrono e torna a aplicação mais transparente tanto para o desenvolvimento quanto para a utilização do produto final. O presente estudo foi bastante desafiador uma vez que por se tratar de uma tecnologia relativamente nova, materiais abordando o uso de Silverlight ainda são escassos, sendo que boa parte da informação encontra-se publicada em idiomas estrangeiros e em sites da internet. No entanto, este trabalho contribuiu de maneira positiva para expansão do conhecimento profissional a partir do estudo de novos conceitos e possibilidades acerca de aplicações Web. Por fim, sugere-se a realização de trabalhos futuros e novos estudos de caso que possibilitem aprofundar o conhecimento sobre a tecnologia Silverlight, bem como realizar comparações com outras tecnologias de desenvolvimento de RIA.

59 58 REFERÊNCIAS BIBLIOGRÁFICAS ANTUNES, M. S.; SILVA, R. E. S. Sistema Online de Gerenciamento de Dados Clínicos Utilizando RIA (Rich Internet Applications). Disponível em: < Acessado em: 05 jun ADOBE (Ed.). Adobe flash professional CS5. Disponível em: < Acesso em: 19 jun CABRERA, E. Conceitos de Rich Internet Application RIA. Detalha os conceitos de Aplicações Web ricas. Disponível em: < Application_-_RIA>. Acessado em: 25 fev CZERNICKI, B. Next-Generation Business Intelligence Software with Silverlight 3. New York: Apress, p. LÓPEZ, R. F. Rich Internet applications, Disponível em: < Acessado em: 15 fev MICHAIL, A. Essential Silverlight 3. Boston: Pearson Education, O REILLY MEDIA. What Is Web Disponível em: < Acessado em: 12 fev RIA. In: WIKIPÉDIA, A enciclopédia livre. [S.l.]: Wikimedia Foundation, Disponível em: < Acessado em: 05 mar MICROSOFT CORPORATION. Microsoft Silverlight. Documentação do Silverlight 3.0. Disponível em: < Acessado em: 15 out MICROSOFT CORPORATION, Microsoft. Microsoft Silverlight. Disponível em: < Acessadoo em: 26 maio WAZLAWICK, R. S. Análise e projeto de sistemas de informação orientados a objetos. Rio de Janeiro: Elsevier, p.

60 APÊNDICES APÊNDICE A - ARTIGO... 60

61 APÊNDICE A - ARTIGO Desenvolvimento de Aplicação Rica Para Internet utilizando o Microdoft Silverlight Akauam Pitrez Westphal Universidade do Planalto Catarinense (UNIPLAC) Lages SC Brasil akauam@hotmail.com Abstract. The aim of this paper is to conduct a study on the development of RIA applications using Microsoft Silverlight 4. Therefore, we created a case study to illustrate the main characteristics and functionalities of the Silverlight platform, implemented in C #. Net, using Microsoft Visual Studio 2010 as main tool. As a result, we found out that RIA and Web 2.0 are increasingly part of the life of Internet users and Web developers. Visual Studio 2010 along with Microsoft Silverlight 4 technology facilitates the developing work because it allows the developer to use any.net language. Furthermore, the use of RIA Services facilitates the interaction between client and server because it works with asynchronously data communication and makes application more transparent to development and to using the final product. Resumo. O objetivo deste artigo foi realizar um estudo sobre o desenvolvimento de aplicações RIA utilizando o Microsoft Silverlight 4. Para tal, criou-se um estudo de caso para demonstrar as principais características e funcionalidades do Silverlight o qual foi implementado na plataforma C#.Net, utilizando como ferramenta principal o Microsoft Visual Studio Como resultado, verificou-se que RIA e Web 2.0 fazem, cada vez mais, parte da vida do internauta e do desenvolvedor Web. O Visual Studio 2010 em conjunto com a tecnologia Microsoft Silverlight 4 facilita o trabalho do desenvolvedor uma vez que possibilita utilizar qualquer linguagem.net. Além disso, o uso de RIA Services facilita a interação entre cliente e servidor a medida que trabalha com a comunicação de dados de modo assíncrono e torna a aplicação mais transparente para o desenvolvimento e para o uso do produto final. 1. Introdução A Internet evoluiu muito nos últimos anos. No princípio, com a limitação dos computadores e das conexões de Internet, os sites eram desenvolvidos em uma estrutura para somente exibir conteúdos, com pouquíssima interatividade com o usuário. Com o uso cada vez maior da Internet para fins comerciais, criou-se a necessidade de aplicações Web com recursos mais semelhantes com os existentes nas aplicações desktop.

62 Assim, surgiram novos conceitos e tecnologias, como, por exemplo, a Web 2.0, através da qual o usuário não exerce apenas a função de leitor, mas também pode interagir com a aplicação Web. Dessa forma, a Web 2.0 funciona como uma plataforma na qual os softwares podem ser acessados de qualquer lugar do mundo. Com a crescente tendência da Internet se adaptar para a Web 2.0, observa-se a necessidade de aplicações com novos recursos, em especial interatividade e usabilidade. Segundo Cabrera (2009), a Internet é, sem dúvida, uma ótima ferramenta para encontrar e organizar informações. Entretanto, no que se refere às características de usabilidade, interatividade em tempo real e multimídia, a Internet está apenas começando a dar seus primeiros passos. Esse tipo de aplicação enquadra-se em outro conceito recente denominado Rich Internet Application (RIA). De acordo com Antunes e Silva (2010), RIA consiste em uma tecnologia que integra os melhores aspectos de uma aplicação desktop tais como alcance, conectividade, disponibilidade e manutenção, com os melhores aspectos de uma aplicação Web (riqueza, interatividade, intuitividade e robustez). Dessa forma, ao desenvolver um projeto utilizando conceitos de RIA são combinadas a funcionalidade do desktop com a abrangência e flexibilidade da Web para criar uma única e integrada experiência rica em conteúdo. No presente trabalho apresenta-se um estudo de caso sobre o Microsoft Silverlight, o qual constitui uma tecnologia para o desenvolvimento de aplicações RIA, de forma a demonstrar como é desenvolver uma aplicação rica, ergonômica e com grande usabilidade. Diante do exposto, o presente trabalho tem por objetivo a realização de um estudo sobre o desenvolvimento de aplicações RIA utilizando o Microsoft Silverlight 4, bem como caracterização dos conceitos e tecnologias utilizados neste processo. 2. Metodologia Inicialmente realizou-se um levantamento bibliográfico, tendo como principal fonte principal de pesquisa a Internet, revistas especializadas e livros, acerca dos principais conceitos e tecnologias abordados, sendo eles: Web 2.0, Rich Internet Applications (RIA) e Microsoft Silverlight. Na seqüência, criou-se um estudo de caso para demonstrar as principais características e funcionalidades do Microsoft Silverlight. Este estudo de caso foi documentado através da modelagem da aplicação, a qual é composta por levantamento de requisitos, diagrama de classes e expansão dos casos de uso. Também é modelado o banco de dados do estudo de caso, utilizando-se o modelo Entidade-Relacionamento (ER). Posteriormente, o estudo de caso foi implementado na plataforma C#.Net, utilizando como ferramentas principais o Microsoft Visual Studio 2010 e o Microsoft Expression Blend 3.

63 2. Conceitos Iniciais 2.1 Web 2.0 O termo Web 2.0 foi criado por Tim O Reilly no ano de 2004 (O REILLY MEDIA, 2005) e consiste em um conceito de transformação da Internet em uma plataforma na qual aplicações podem ser executadas, visando desenvolver aplicativos que, quão mais usados pelos usuários, mais aproveitem os efeitos dessa rede para tornarem-se melhores. 2.2 Rich Internet Application (RIA) Apesar de caracterizar uma excelente ferramenta para busca e organização de informações, aplicações na Internet ainda são muito limitadas no que se refere às características de usabilidade, interatividade em tempo real e multimídia (CABRERA, 2009). Ao desenvolver um projeto baseado em RIA (Rich Internet Application) são combinadas a interatividade e a funcionalidade do desktop com a abrangência e a flexibilidade da Web, criando assim uma experiência única e integrada, rica em conteúdo. Conforme encontrado na Wikipédia (2009), RIA são aplicações Web que utilizam, também, o processamento do lado do cliente, sendo os principais motivos para sua utilização: Riqueza nas interfaces, como animações, que não têm suporte em interfaces desenvolvidas em HTML (HyperText Markup Language); Melhor resposta ao usuário, sendo que a interface utiliza o mínimo da comunicação com o servidor; Comunicação assíncrona com o servidor; e Melhor usabilidade. Segundo López (2005), em sua maioria, as aplicações RIA possuem uma série de características elementares, tais como: Iniciar a partir de uma página Web; Os usuários que interagem com a aplicação, obtêm uma reação imediata, já que nestas aplicações RIA não é necessário renderizar páginas Web inteiras quando solicitados novos dados; Utilizar controles de interface de usuário mais modernos, como menu em árvore, painel de abas, entre outros elementos gráficos; Permitir que o usuário realizar operações comuns de aplicações desktop, assim como o uso de drag & drop (arrastar e soltar), redimensionamento, ou animações de objetos; Complexidade do desenvolvimento das aplicações RIA não difere muito das aplicações Web existentes; Realizar todos os itens citados acima, sem necessidade de grande suporte de alguma plataforma e possui compatibilidade com todos os browsers. 2.3 Silverlight Segundo Czernicki (2009), Silverlight é uma plataforma Web para criar e rodar RIAs. Sendo uma plataforma Web é necessário instalar um plugin para que o browser consiga interpretar o código gerado pela aplicação Silverlight.

64 Segundo Michail (2009), Silverlight suporta desenvolvimento de stream de vídeo, aplicações de , aplicações comerciais, redes sociais, jogos, visualizadores de imagens em alta qualidade, anúncios e uma variedade de outras aplicações Web. A plataforma Web Silverlight é multiplataforma, isto é, pode ser executada em vários sistemas operacionais e browsers. Alguns dos recursos do Silverlight são: Desenho vetorial, reprodução de áudio, acesso a banco de dados e controles para aplicações RIA. Com base no livro publicado por Michail (2009), Silverlight é formado por código de aplicação e componentes gráficos. Existem várias ferramentas disponíveis para facilitar o desenvolvimento em Silverlight. Por exemplo, para desenhar a aparência, visual, controles e animação, pode-se utilizar ferramentas como o Expression Blend. Para desenvolver o código, depuração e testes de desempenho, pode-se utilizar o Visual Studio juntamente com o SDK (Software Development Kit) do Silverlight. Além disso, o desenvolvimento pode ser feito em qualquer linguagem de programação que seja suportada pelo.net. No SDK do Silverlight, existem mais de sessenta controles nativos, como caixas de texto, caixas de lista, dentre outros, além de existir muitos componentes de terceiros. Pode-se também criar controles personalizados. 3. Estudo de caso O sistema proposto é responsável por controlar os registros de entrada e saída dos funcionários (controle de ponto) de uma empresa, além de controlar as alterações destes registros e manter informações do banco de horas. O objetivo maior do sistema é aumentar a segurança e a confiabilidade das informações no que diz respeito ao controle de horários de cada funcionário, proporcionando também maior conforto e interação. Além do exposto acima, o sistema deve contemplar outras características extras, tais como apresentação dos aniversariantes do dia, do calendário com feriados e dos pontos facultativos em destaque, além de demonstrar quais funcionários estão trabalhando naquele momento e seus dados para contato. A Figura 1 apresenta o projeto do banco de dados, sendo as principais tabelas do banco tbemployee, tbuser, tbpunch e tbtimebank. A primeira caracteriza o local onde são armazenados os dados cadastrais dos funcionários. A segunda contêm o login e senha dos funcionários quais são utilizados para acessar o sistema. A terceira representa as operações de entrada e saída no ponto do funcionário. A quarta contabiliza o banco de horas do funcionário.

65 Figura 1- Diagrama ER (Entidade-Relacionamento) do sistema 4. Implementação do sistema A interação entre cliente e servidor, utilizando Silverlight, é facilitada pelo uso da tecnologia RIA Services. Esta tecnologia permite esta comunicação, com o banco de dados, de forma assíncrona e transparente para a aplicação tanto em tempo de execução quanto no desenvolvimento. Para o uso desta tecnologia é necessário primeiramente criar no projeto.net um modelo de dados (ADO.NET Entity Data Model), que pode ser criado através de um assistente, bastando selecionar a base de dados e as tabelas a serem mapeadas. A Figura 2 demonstra o modelo de dados, gerado através do assistente, da base de dados que será utilizada no desenvolvimento deste estudo de caso.

66 Figura 2 - Data Model do banco TimeCard Ao adicionar ao projeto.net um Domain Service Class, este modelo de dados servirá como base para o mapeamento objeto-relacional. Depois de apontado ao assistente do Domain Service Class o modelo de dados, será criado automaticamente todas as classes de objetos, bem como os métodos de adição, exclusão e consulta das entidades do modelo de dados. Tais métodos que podem ser chamados no projeto Silverlight sendo assim, o controle do tráfego de dados e comunicação entre cliente e servidor é gerenciado pela tecnologia RIA Services. Estes métodos podem ser personalizados com a lógica de negócio desejada. A Figura 3 mostra um método que foi gerado automaticamente que simplesmente retorna todos os departamentos do banco sem nenhum tipo de filtro. Figura 3 Método RIA Services criado automaticamente A Figura 4 mostra a mesmo método da Figura 3 que foi personalizada para retornar os departamentos que contenham um determinado texto no nome. Sendo assim, caso o parâmetro

67 name do método GetDepartments, linha 71, seja passado um valor diferente de nulo este método retornará somente os departamentos que contenham tal texto no nome. Esta classe gerada pode ser acessada do projeto Silverlight e seus métodos podem ser chamados de forma assíncrona. Como é demonstrado a seguir. Figura 4 Método RIA Services personalizado O layout da página Silverlight foi definido pelo Visual Studio 2010, utilizando a funcionalidade drag & drop (arrastar e soltar), não necessitando adicionar controles manualmente pelo XAML (Extensible Application Markup Language). Neste cadastro foram adicionados os controles DataGrid, DataPager, DataForm e DomainDataSource. O DomainDataSource é um controle utilizado para acessar dados via RIA Services. Este controle pode ser vinculado, através do método binding, a alguns controles que são utilizados para exibir informações. Entre eles, está o DataGrid. O método binding serve para fazer um vinculo de alguma propriedade de um objeto com outro objeto ou propriedade de outro objeto. A Figura 5 mostra o XAML gerado para o controle DomainDataSource. O nome do objeto DomainDataSource foi definido para MyData, utilizando a propriedade x:name, linha 14. Assim como no Code-Behind, ao adicionar objetos e classes que não estejam no mesmo namespace ou projeto é necessário criar um vínculo com a classe a ser acessada. No XAML, como demonstrado na linha 11, foi adicionado a propriedade xmlns com o namespace a ser utilizado. Sendo assim, ao chamar a tag ds podemos acessar as classes que estão dentro do namespace definido. Para acessar as funções registradas no banco de dados, é necessário definir a propriedade DomainContext do objeto MyData, para a classe TimeCardDomainContext do namespace ds, linhas 15, 16 e 17. Esta classe é do tipo DomainServiceClass que foi demonstrada anteriormente. É necessário, também, definir a propriedade QueryName, linha 6, que representa o nome do método a ser acessado na classe TimeCardDomainService, este método espera o parâmetro do tipo texto. O nome do parâmetro que o método espera é name, definido na linha 19 através da propriedade ParameterName, e o valor do parâmetro é definido, na linha 19, utilizando o método binding vinculando assim, a propriedade Text do controle tbnamefilter. Sendo assim, quando aplicação está executando, ao momento que a propriedade Text é alterada o filtro por nome da função já é feito de forma automática. A propriedade AutoLoad foi definida para True para que ao carregar a página o carregamento dos dados, de forma assíncrona, seja iniciado automaticamente, linha 14.

68 Na linha 14, propriedade LoadSize define quantos registros serão carregados por vez, este caso 25. Sendo assim, quando o objeto tiver carregado os primeiros 25 registros, eles já estarão disponíveis para exibição enquanto carrega assincronamente outros 25 e assim por diante. Figura 5 XAML do controle DomainDataSource Para aumentar o desempenho e evitar que muitos registros sejam carregados desnecessariamente, é utilizado um controle para fazer a paginação dos dados. Este controle é o DataPager, demonstrado na Figura 6. A propriedade Source foi definida para vincular a propriedade Data do objeto MyData através do binding, linha 47. Foi definida a propriedade PageSize para 10, linha 47. Assim, os dados são paginados de 10 em 10 registros fazendo que o objeto MyData carregue somente os registros necessários para cada página. Agilizando assim, o processo como um todo. Figura 6 XAML do controle DataPager Como demonstra a Figura 7, os dados são exibidos vinculando o componente DataGrid ao objeto MyData. O nome do objeto DataGrid foi definido para grddepartments, utilizando a propriedade x:name, linha 54. Da mesma forma que o DataPager, a propriedade ItemSource foi definida, na linha 55, para vincular a propriedade Data do objeto MyData através do binding. Assim, os dados são exibidos assim que carregados pelo objeto MyData. O objeto DataGrid possui a possibilidade de gerar as colunas automaticamente, neste caso, na linha 55, foi definido a propriedade AutoGenerateColumns para False para que seja possível especificar as colunas que são exibidas. Estas colunas foram definidas adicionando a propriedade Columns, do objeto grddepartments, objetos do tipo DataGridTextColumn. Duas colunas foram adicionadas. Uma contendo o código e outra contendo o nome da função. Para tal foi definido a propriedade binding e Header destes objetos, linhas 57 a 60. O parâmetro IsReadOnly do objeto MyData foi definido para True, para que os dados do DataGrid sejam somente leitura, linha 54. A inclusão, edição e exclusão são controladas por um controle DataForm.

69 Figura 7 XAML do controle DataGrid A Figura 8 demonstra como utilizar o controle DataForm. O nome do objeto DataForm foi definido para dfdepartment, utilizando a propriedade x:name, linha 63. A propriedade ItemSource foi definida da mesma forma que o grddepartment. A propriedade CurrentItem se refere ao item ao qual o usuário visualiza no controle. Esta propriedade foi vinculada a propriedade SelectedItem do objeto grddepartment, linha 65. Assim, quando o item selecionado no DataGrid é alterado, muda também o item selecionado no DataForm. O controle DataForm é utilizado para facilitar o controle de inclusão, edição e exclusão. Além possibilitar disparo de eventos, no Code-Behind, para cada uma dessas operações, ele também pode tratar erros automaticamente. Este controle também possui a possibilidade de gerar os campos automaticamente, neste caso, na linha 64, foi definido a propriedade AutoGenerateFields para False para que seja possível especificar os campos que são exibidos a cada operação. Os campos que são utilizados no momento da edição e na inclusão foram adicionados através das propriedades EditTemplate e NewItemTemplate, respectivamente, do DataForm. Ao campo que corresponde ao nome da função foram adicionados os parâmetros NotifyOnValidationError como True e ValidatesOnExceptions como True ao binding. Estes parâmetros servem, respectivamente para que o DataForm exiba erros caso ocorram e não permita finalizar a operação caso os erros não sejam corrigidos. Figura 8 XAML do controle DataForm A Figura 9 demonstra como o DataForm exibe os erros ao usuário.