17/08/2018 Development / java script

Esse é um baita pulinho do gato pra traduzir o ui-grid facilmente!

var app = angular().....

app.run(i18nService) {

i18nService.setCurrentLang('pt-br')

}

 

03/08/2018 Development / links

http://instagram.pixelunion.net

Pra nao esquecer ;-)

21/07/2018 Development / angular

      this._ConsultorioService.get({id: this._$stateParams.id}, (resp) => {
        console.log(resp.toJSON()); // AQUI É O MACETE!!!
        //this.form = resp;
      });

21/06/2018 Development / css

Eu estou fazendo um css animate pra border-image com gradient e minha solucao foi essa!

https://jsfiddle.net/5uoypaoo/27/

14/06/2018 Development / java script

Eu estava procurando um generator de API REST e encontrei o feathersjs.

Usando ele com MONGOOSE é possível definir os models, e ai usar o famoso populate.

Fica muito facil fazer uma API.

Então, eu vou postar aqui rapidinho pra eu não esquecer. Eu fiquei o dia todo vendo como isso funcionava.

Basicamente, depois de criar o service

feathers generate service

Ai você escolhe o nome da rota, e define o banco -> MONGOOSE

No model, você coloca sua relação:

    text: { type: String, required: true },
    cliente : { type: mongoose.Schema.Types.ObjectId, ref: 'Cliente' }

Esse é um exemplo

E no hooks,você faz a importação.

const {populate} = require('feathers-hooks-common');
  
const userRoleSchema = {
  include: {
    service: 'cliente',
    nameAs: 'cliente',
    parentField: 'cliente',
    childField: '_id'
  }
};

e no metodo after

  after: {
    all: [
      populate({ schema: userRoleSchema })
    ],

É isso! Espero que ajude

22/05/2018 Development / css

<div class="title" title="Meu Sandbox">Meu Sandbox</div>

.title {

  1. position: relative;
  2. border-bottom: solid 1px #DEDEDE;
  3. padding: .3em 0;
  4. font-weight: 400;
  5. color: #3B3B3B;

}

.title:before{

  1. content: attr(title);
  2. overflow: hidden;
  3. border-top: solid 4px rgba(0,0,0,.2);
  4. position: absolute;
  5. top: 100%;
  6. height: 0;
  7. display: inline-block;

}

Essa é uma solucao simples ;-)

Espero que ajude

08/05/2018 Development / java script

Eu to virando especialista em UI-GRID e agora esse trechinho de código serve pra deixar a altura da row automatica.

this.gridOptionsTitulos.gridApi.core.on.rowsRendered(null, () => {

//scope.gridApi.treeBase.expandAllRows();

this.gridOptionsTitulos.gridApi.expandable.expandAllRows();

});

 

this.gridOptionsTitulos.gridApi.expandable.on.rowExpandedBeforeStateChanged(null, (row) => {

var len = row.entity.parcelamento ? row.entity.parcelamento.parcelas.length : 0;

this.gridOptionsTitulos.expandableRowHeight = (len * 30);

});

15/04/2018 Development / java script

Esse macete aqui, poucos conhecem! Então eu vou passar o pulo do gato pra galera!!!

Quando se está trabalhando com firebase, pode ocorrer da sua tabela ser muito grande, tipo ter uns 90mil registros.

Isso vai onerar sua aplicacao, então, no caso é melhor fazer uma paginação.

Mas como faço pra pegar o total de itens do meu banco?

firebase.auth().currentUser.getToken().then(data => {

let auth = data;

fetch('https://SEUPROJETO.firebaseio.com/SUAREFERENCIA/.json?shallow=true&auth=' + auth).then(resp => { return resp.json(); }).then(data => { this.gridOptions.totalItems = Object.keys(data).length; console.log(Object.keys(data).length) });

});

E oque é esse auth?

auth é a chave de autenticacao, que indica que você pode realmente acessar os dados. Pra vc pegar esse auth, basta usar o seguinte codigo.

firebase.auth().currentUser.getToken().then(data => {

let auth = data;

fetch('https://rjr-backend.firebaseio.com/clientes/.json?shallow=true&auth=' + auth).then(resp => { return resp.json(); }).then(data => { this.gridOptions.totalItems = Object.keys(data).length; console.log(Object.keys(data).length) });

});

É isso, ai o resto é só implementar!!!

15/04/2018 Development / java script

Firebase ou você AMA ou você ODEIA!

O firebase não tem uma resposta muito boa, tipo um formato de que um tratamento decente.

No caso de paginacao de dados, é ainda pior.

Pra voê saber quantos registros você tem na sua base, tem um macete.

https://SEUPROJETO.firebaseio.com/SUAREFERENCIA/.json?shallow=true

Esse json?shallow=true, retorna somente as KEYS que estao no banco.

Na minha opiniao é uma GAMBIARRA, mas ajuda, quando se trata de ter um banco com 1milhao de registros.

13/04/2018 Development / angular

Quem trabalha com firebase, deve "OBRIGATORIAMENTE" seguir oque os caras falam:

Melhorar a eficiência dos listeners

Coloque os listeners na última parte possível do caminho para limitar a quantidade de dados que eles sincronizam. Seus listeners devem estar perto dos dados que você quer detectar. Não coloque listeners na raiz do banco de dados, pois isso resulta em downloads de todo o seu banco de dados.

Adicione consultas para limitar os dados retornados pelas suas operações de detecção e use listeners que fazem o download somente de atualizações de dados. Por exemplo, on() em vez de once(). Use .once() somente em ações que realmente não exigem atualizações de dados. Além disso, classifique suas consultas com orderByKey() sempre que possível para alcançar o melhor desempenho. A classificação com orderByChild() pode ser de seis a oito vezes mais lenta. A classificação com orderByValue(), por sua vez, pode ser muito lenta para grandes conjuntos de dados porque requer uma leitura de todo o local, desde a camada de persistência.

Lembre-se também de adicionar listeners de maneira dinâmica e de removê-los quando não forem mais necessários.

#ficadica

15/03/2018 Development / java script

Essa foi a forma menos feia que eu encontrei pra não ter que ficar setando toda hora o createdAt, createdBy, updatedAt, updatedBy... É um baaaaaaaita jump the cat, hehehe!! Espero que sirva pra alguem tambem!

var set = firebase.database.Reference.prototype.set;
firebase.database.Reference.prototype.set = function(value, onComplete){
  value['createdAt'] = firebase.database.ServerValue.TIMESTAMP;
  value['createdBy'] = firebase.auth().currentUser.displayName;
  return set.apply(this, arguments);
}
var update = firebase.database.Reference.prototype.update;
firebase.database.Reference.prototype.update = function(value, onComplete){
  value['updatedAt'] = firebase.database.ServerValue.TIMESTAMP;
  value['updatedBy'] = firebase.auth().currentUser.displayName;
  return update.apply(this, arguments);
}

 

13/03/2018 Development / angular

Oque é um decorator?

Basicamente ele é utilizado para sobreescrever métodos antes que de fato o método original seja chamado!

Vamos imaginar o seguinte cenario:

Temos alguns endpoints que realizam Create e Update no banco. E para cada um desses métodos, eu quero salvar o dia da criacao do registro e quem fez o cadastro, e o dia da alteracao do registro e que fez o cadastro!

Usando MongoDB é muito facil fazer isso, basta a gente indicar no model um timestamp: true

Exemplo:

var clienteSchema = new mongoose.Schema({

nome: {type: String}

},{

    timestamps: true

});

Qualquer inclusão ou alteração que ocorrer, o mongo já incluirá os valores da data da criação e ou alteração!

Mas no nosso caso, não estamos usando MONGO e tambem queremos incluir a pessoa que fez a ação!

Voltando ao nosso cenário, criamos o nosso Service que receberá os dados e enviará para API.

Eu vou fazer bem básico, porque a intenção aqui é focar no decorator!!!

Service.create = (data)=> {

    data.createdAt = firebase.database.ServerValue.TIMESTAMP; // ou new Date().getTime()

    data.createdBy = firebase.auth().currentUser.displayName; // ou currentUser.uid;

  return this._$firebaseArray(firebase.database.ref('suaRefencia')).$add(data)  

}

 

Service.update = (id, data)=> {

    data.createdAt = firebase.database.ServerValue.TIMESTAMP; // ou new Date().getTime()

    data.createdBy = firebase.auth().currentUser.displayName; // ou currentUser.uid;

  return this._$firebaseObject(firebase.database.ref('suaRefencia').child(id)).$save(data)  

}

Olha que chato, se toda vez que a gente criar um servico, ter que ficar colocando esse código, createdAt, createdBy, updatedAt, updatedBy

O ideial é quando a gente chamar o $add ou $save, antes de executar o método, ele inclua essas propriedades no nsso objeto data.

É ai que entra o decorator!!!

let app = angular.module('app', []);

app.config(function($provide) {

    $provide.decorator('$firebaseArray', function($delegate, $window) {

        var _add = $delegate.prototype.$add;

        $delegate.prototype.$add = function (newData) {

            newData['createdAt'] = $window.firebase.database.ServerValue.TIMESTAMP;

            newData['createdBy'] = $window.firebase.auth().currentUser.displayName; //uid

 

            return _add.call(this, newData);

        };

        return $delegate;

    });

})

app.config(function($provide) {

    $provide.decorator('$firebaseObject', function($delegate, $window) {

        var _save = $delegate.prototype.$save;

        $delegate.prototype.$save = function () {

            this['updatedAt'] = $window.firebase.database.ServerValue.TIMESTAMP;

            this['updatedBy'] = $window.firebase.auth().currentUser.displayName;

            return _save.call(this);

        };

        return $delegate;

    });

})

Agora no nosso controller, a gente faz a chamada do Service

let data = {

  nome: 'Joao da Silva';

  idade: 33

}

Service.create(data);

Nosso service chamado o firebaseArray, mas antes entra no decorator, que insere a data da criacao e o nome do usuário logado no firebase!

E assim, a gente finaliza nossa tarefa.

Espero que ajude!

 

 

 

 

 

 

 

 

20/02/2018 Development / java script

Trabalhar com firebase é muuuuuuuuuuuuuuito produtivo! Super rapido fazer as paradas, subir aplicação, mas tem 2 coisas que eu vi que são chatinhas, uma eu já citei aqui que é o lance de não ter um JOIN decente no database, a outra, porém é necessário, é que a gente só consegue manipular os dados de usuários através do servidor. No client, não é possível fazer um firebase.auth().getUser(uid) por exemplo, e tem total sentido isso né!

Então, acaba que a gente tem que meter a mão na massa e fazer as Cloud Functions, que são tipos umas funções que você vai poder executar do lado do servidor. Nesse caso, eu precisei meeeeeesmo, fazer um CRUD pra manipular os dados de usuários. Então eu vou compartilhar com vocês. É só trocar a chave da public key, fazer o deploy e correr pro abraco!

const express = require('express');

const app = express();

const functions = require('firebase-functions');

const admin = require("firebase-admin");

const bodyParser = require('body-parser');

const cors = require('cors');

 

app.use(cors({ origin: true }));

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

 

admin.initializeApp({

  credential: admin.credential.cert({

    projectId: "AQUIVEMSEUPROJETO",

    clientEmail: "AQUIVEMOSEUEMAILPROVADO",

    privateKey: "-----BEGIN PRIVATE KEY-----AQUIVEMASUACHAVEPRIVADA==\n-----END PRIVATE KEY-----\n"

  }),

  databaseURL: "https://AQUIVEMOSEUPROJETO.firebaseio.com"

});

 

//GET

app.get('/:id', (req, res) => {

let uid = req.params.id;

admin.auth().getUser(uid)

  .then(function(userRecord) {

    resp.json(userRecord.toJSON());

  })

  .catch(function(error) {

    res.json(error);

  });

});

 

//POST

app.post('/', (req, res) => {

let data = req.body;

console.log(data);

 

admin.auth().createUser(data)

  .then(function(userRecord) {

    res.json(userRecord);

  })

  .catch(function(error) {

    res.json(error);

  });

});

 

//DELETE

app.delete('/:id', (req, res) => {

let uid = req.params.id;

admin.auth().deleteUser(uid)

  .then(function(userRecord) {

    res.json(userRecord.toJSON());

  })

  .catch(function(error) {

    res.json(error);

  });

});

 

//UPDATE

app.put('/:id', (req, res) => {

let uid = req.params.id;

let data = req.body;

admin.auth().updateUser(uid, data)

  .then(function(userRecord) {

    res.json(userRecord.toJSON());

  })

  .catch(function(error) {

    res.json(error);

  });

});

exports.api = functions.https.onRequest(app);

Espero que sirva!

20/02/2018 Development / macetes

Agora no bootstrap 4 existe uma série de classes utilitarias, aquelas classes que são uma mão na roda. Uma delas é pra margin e padding e funciona da seguinte maneira.

m = margin
p = padding

e as combinações são

m-0, m-1, m-2, m3, m-4, m-5, sendo que m-0, tira completamente a margin e as outras você vai adicionado 15% da aréa da margin.

E tem tambem a possibilidade de setar a posição da margin. Ex: mt-0 isso é o margin-top. Entao temos: mt, mb, ml, mr

E por fim se quisermos deixar centralizado a margin, usamos o mx-auto!

A mesma coisa serve para o padding ;-)

Espero que ajude!

02/02/2018 Development / ferramentas

Com certeza, se alguém precisar exportar os dados de uma tabela SQL Server para JSON, o pulo do gato é isso aqui! BCP

BCP é uma linha de comando que transforma uma consulta SQL no arquivo txt ou arquivo que vc deseja. Então pra executar é a seguinte parada:

Abra a sua linha de comando, no meu caso é o prompt do DOS e digite:

bcp "SELECT * FROM [hfbimoveis-bkp].[dbo].[tabImovel] FOR JSON AUTO" QUERYOUT "C:\data\arquivo.txt" -S HUGGLER\SQLEXPRESS -T

Nesse caso, eu ainda usei outro pulo do gato, que foi o FOR JSON AUTO, essa porrinha transforma o resultado da consulta em formato JSON :-))))))))))

Obs: No prompt do DOS vão aparecer algumas perguntas:

Digite o tipo de armazenamento: Você digita -> cr
Insira o comprimento do prefixo: Você digita -> 0
Insira o comprimento do campo: Você digita -> 0
Insira o terminador: Dê enter

E pronto, na sua pastinha C:\data\arquivo.txt estará seu JSON bonitinho, depois é só formatar e correr para o abraço!

 

30/01/2018 Development / java script

Essa parada do firebase não ter um join, innerjoin, groupBy, é meio frustante, então, eu vou descrever aqui, oque eu tenho feito para suprir as minhas necessidades.

O firebase tem um evento listener chamado ON e ONCE, onde você pode aplicar alguns valores:

let ref = firebase.database().ref();

ref.child('livros').on('child_added', => snapshot { console.log(snapshot.val()); })
ref.child('livros').on('value', snapshot  => { console.log(snapshot.val()); })
ref.child('livros').on('child_removed', snapshot => { console.log(snapshot.val()); })
ref.child('livros').on('child_changed', snapshot => { console.log(snapshot.val()); })

A diferença entre ON e ONCE é que ONCE escuta uma vez só, e ON fica escutando sempre.

Seguindo essa documentação, imagina que eu tenho uma LISTA de LIVROS, e pra cada LIVRO eu gostaria de trazer o AUTHOR e todo mundo que já comprou esse livro.

Bom, com SQL ou até mesmo com MONGO, isso seria uma tarefa fácil, mas com essa porra de firebase, já é chatinho, mas vamo la!!!

No cenário mais simples, a gente usuário o child_added, que pra cada livro a gente iria consultar o author e os clientes. Vamos fazer a query

ref.child('livros').on('child_added', => snapshot {
let livro = snapshot.val();
let authorId = livro.authorId;
console.log('nome do livro: ' + livro.nome);
ref.child('author').orderByChild("authorId").equalTo( authorId ).on('value', author => {
console.log('nome do author:' + author.val().nome;
})
})

Sabe oque aconteceria nesse caso? Primeiro, ia dar o console.log de todos os nomes dos nossos livros e depoooooois, iria dar o console do nome dos autores. Ex:

nome do livro é: SENHOR DOS ANEIS
nome do livro é: O ALQUIMISTA
nome do livro é: TUDO É POSSÍVEL

nome do author: J. R. R. Tolkien
nome do author: Paulo Coelho
nome do author: Allan Percy

Mas oque a gente queria fazer é:

nome do livro é: SENHOR DOS ANEIS
nome do author: J. R. R. Tolkien

nome do livro é: O ALQUIMISTA
nome do author: Paulo Coelho

nome do livro é: TUDO É POSSÍVEL
nome do author: Allan Percy

Ai você pensa: Ahhhhhh, fácil, no retorno da segunda consulta eu mostro o nome do livro junto com o nome do author :-), Que malandro sou eu? hummmmm

ref.child('livros').on('child_added', => snapshot {
let livro = snapshot.val();
let authorId = livro.authorId;

ref.child('author').orderByChild("authorId").equalTo( authorId ).on('value', author => {
console.log('nome do livro: ' + livro.nome + '\n');
console.log('nome do author:' + author.val().nome;

})
})

Tá, assim funciona! Mas e agora no caso da gente adicionar o terceiro listener, que é o caso dos clientes que compraram, oque a gente pode fazer? Ao mesmo tempo que você esta consultando o author, também esta consultando os clientes, você não sabe qual vai ser o primeiro ou último a responder, por isso não pode jogar o console no listener do author ou no listener do cliente, certo?

Nesse caso, usamos o conceito de Promisse() e ao inves de ON, usamos o ONCE que retorna uma Promisse, e a implementação ficaria da seguinte maneira:

Só uma observação: Quando a gente usa orderByChild, é como se fosse um filtro, então, ele retorna um array podendo conter 1 ou mais objetos.

let promises = [];

ref.child('livros').on('child_added', => snapshot {
let livro = snapshot.val();
let authorId = livro.authorId;

let promise_author = ref.child('author').orderByChild("authorId").equalTo( authorId ).once('value') //no caso do author, vai trazer 1 só
let promise_pedidos = ref.child('pedidos').orderByChild("livroId").equalTo( livroId ).once('value') //no caso de pedidos, vai trazer varios, 1 pedido contem o codigo do cliente e codigo do livro e como o pedido é um snapshot de como estão as informações no momento. Aprendi isso trabalhando na B2W! Pra mim oque vale é o nome do cliente naquele dia.

promises.push(promise_author, promise_pedidos) //inserindo as promises na fila

// Quando terminar todas as minhas promises, ai sim eu monto a resposta final

Promise.all(promisses).then(function(resp){

let nomeLivro = livro.nome;
let nomeAuthor = resp[0].val().nome;
let clientePedidos = resp[1].val().map(pedido => { return pedido.nomeCliente });

      array.push(livro.nome + ' - ' + nomeAuthor + ' - ' + clientePedidos.join('\n'))

     $('pre').text(array.join('\n'))

    })

})

Essa foi a saida para a implementação usando uma espécie de JOIN, claro que ao inves de colocar no ARRAY, eu fiz um objeto bonitinho, mapeado, e tal, mas isso fica a critério da sua implementação. Espero que sirva de base!

 

13/12/2017 Development / java script

Eu uso com muuuuuita frequencia essa parada, então, deixar registrado aqui pra eu poder usar com mais facilidade.

A primeira é essa porrinha aqui, pra pegar somente os números: "ABABABABAAB12121212-232323fdfdf".replace(/\D/g, '')

A outra é pra formatar moeda antes de salvar no banco de dados.

Ex: "R$ 15.404,00" (STRING) se eu salvar assim direto, depois fica ruim de formatar.

Entao é bom salvar assim => Number("R$ 15.404,00".replace(/[^0-9\.]+/g,""))

Espero que me ajude :-)

 

08/12/2017 Development / java script

this._$state.transitionTo('titulos', this._$stateParams, { reload: true, inherit: false, notify: true });

Espero que ajude!

04/12/2017 Development / css

div {

  font: 70px -apple-system;

  animation-name: 'doughnuts';

  animation-duration: 3s;

  animation-iteration-count: infinite;

  animation-direction: alternate;

}

 

@keyframes doughnuts {

from {

font-variation-settings: "wght" 1;

}

to {

font-variation-settings: "wght" 1.98;

}

}

02/12/2017 Development / java script

angular.module('myUtils', [])
.factory('$Utils', ['$rootScope', function($rootScope){

  this._$scope = $rootScope;

  var NormalizedCollection = (ref, childKey, keyValue, obj) => {
    ref.child(childKey).once('value').then(resp => {
        obj[keyValue] = resp.val();
        this._$scope.$apply();
    });
  };

  return {
    NormalizedCollection : NormalizedCollection
  };
}]);

angular.module('MyOtherApp', ['myUtils']);

export class MyController {
  constructor ($Utils) {}
}

02/12/2017 Development / java script

Firebase é bom pra caraaaaaaaleo, mas uma coisa que falta é ter JOIN mais facilmente entre as coleções.

Tem um projetinho chamado normalizeCollection de um carinha lá do time do angular firebase, mas só funciona pra versões 1.x alguma coisa do firebase, como eu estou usando a versão 3, eu me fudi!

Então eu fiz meu próprio normalize.

Eu tenho 4 bases que precisam ser juntadas.

Clientes, Pessoas, Credores, Titulos

Primeiro eu consulto todos os meus títulos, e cada título tem cliente, credor e operador(que é a base Pessoas)

Olha como ficou a primeira versão do script

var ref = firebase.database().ref();

var refPessoas = ref.child("pessoas");

var refClientes = ref.child("clientes");

var refCredores = ref.child("credores");

ref.child("titulos").orderByChild('codigoOperador').on('child_added', snapshot => {

var codigoOperador, codigoCliente, codigoCredor;

var obj = {};

obj = snapshot.val();

codigoOperador = obj.codigoOperador;

codigoCliente = obj.cnpjCliente || obj.cpfCliente;

codigoCredor = obj.cnpjCredor;

var NormalizedCollection = (ref, childKey, keyValue, obj) => {

ref.child(childKey).once('value').then(resp => {

obj[keyValue] = resp.val();

this._$scope.$apply();

});

};

NormalizedCollection(refPessoas, codigoOperador, 'Operador', obj);

NormalizedCollection(refClientes, codigoCliente, 'Cliente', obj);

NormalizedCollection(refCredores, codigoCredor, 'Credor', obj);

this.data.push(obj);

})

Acho que ficou uma bosta, mas funcionou ! Espero que sirva de ideia

28/11/2017 Development / css

Se você for pesquisar no google por override boostrap variables vai encontrar uma grande quantidade de pessoas que necessitam fazer essa mudança em seus projetos.

Aqui vai o pulo do gato oficial

Se você esta usando o generator do angular, provavelmente no arquivo index.scss tem essa linha comentada

/**

* If you want to override some bootstrap variables, you have to change values here.
* The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

*/

aqui você faz o override

/**
* Do not remove the comments below. It's the markers used by wiredep to inject
* sass dependencies when defined in the bower.json of your dependencies
*/
// bower:scss
// endbower

O erro que o pessoal comete é querer mudar direto a variavel 

$brand-primary: #fff // Isso é errado, nao vai funcionar 

Oque tem que fazer é mudar através do MAPA

$gray-100: #f8f9fa;

$gray-600: #868e96;

$gray-800: #343a40;

$red: #dc3545;

$yellow: #ffc107;

$green: #006600; // This is the only variable I wanted to change

$cyan: #17a2b8;

$theme-colors: (

primary: $green,

secondary: $gray-600,

success: $green,

info: $cyan,

warning: $yellow,

danger: $red,

light: $gray-100,

dark: $gray-800

);

Agora funciona!

27/11/2017 Development / java script

Agora que eu comecei a migrar a Odete de ANGULAR5 pra REACT, comecei a traduzir o ngClass.

Exemplo usando ANGULAR

<div class="container-fluid how-works" [ngClass]="{'how-works-hidden' : data.length > 0}">

Exemplo usando REACT

es6 transpiler 

<div className={`container-fluid how-works ${this.state.data.length > 0 ? 'how-works-hidden' : ''}`}>

 

25/11/2017 Development / java script

Isso acontece quando você tenta ler uma propriedade de um retorno de uma consulta. Exemplo

.subscribe(resp => { resp.nome }) // Aqui pode extourar um erro.

O ideial é criar uma interface e associar o retorno da requisicao, a essa interface. Exemplo

interface NotificacaoUsuario {

nome: string;
imagem: string;

}

service

getNewPedidoTelefone() {

return this.sockets.fromEvent('newPedidoTelefone').map((data: NotificacaoUsuario) => {

return data;

});

}

controller

this.service.getNewPedidoTelefone().subscribe(data => {

Notification.requestPermission(function(perm) {

const NotificationOptions: NotificationOptions = {

body: 'Pediram o telefone de: ' + data.nome,

tag: new Date().getTime().toString(),

icon : 'https://odete.com.br/uploads/' + data.imagem

};

const notification = new Notification('Pediram o Telefone', NotificationOptions);

});

});

23/11/2017 Development / angular

No projeto da Odete, eu estava implementando um esquema para abrir o modal quando o usuário clicasse no cadeado.

Esse cadeado fica dentro de um componente chamado perfil. E aqui eu posto a minha solução.

Na minha classe perfil, eu coloquei mais um component

@Component({

selector: 'app-modal-content',

moduleId: module.id,

templateUrl: './perfil.cadastroConfiavel.modal.html'

})

export class ModalContentComponent {

constructor(public bsModalRef: BsModalRef) {}

}

dentro da minha classe perfil, fiz o metodo que chama o modal

export class PerfilComponent implements OnInit {

 

@Input('model') model;

public modalRef: BsModalRef;

 

constructor(private service: ColaboradorService, private modalService: BsModalService) { }

openModal() {

this.modalRef = this.modalService.show(ModalContentComponent);

}

Aqui esta o pulo do gato. No app.module.ts tem que importar

import { PerfilComponent, ModalContentComponent } from './perfil/perfil.component';

e no ngModule

@NgModule({

declarations: [

PerfilComponent,

ModalContentComponent

],

entryComponents: [ ModalContentComponent ],

Thats Great!

23/11/2017 Development / angular

In angular1 we use 

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
<head>
  <base href="/">
  ...
</head>

In angular 5

import in -> app.module.ts

import {APP_BASE_HREF} from '@angular/common';

and include in yours providers

providers: [{provide: APP_BASE_HREF, useValue: '/'}]

thats great!

22/11/2017 Development / java script

import { Pipe, PipeTransform } from '@angular/core';

 

@Pipe({

name: 'tel'

})

export class TelPipe implements PipeTransform {

 

transform(value: any, args?: any): any {

 

let str = value + '';

str = str.replace(/\D/g, '');

if (str.length === 11 ) {

str = str.replace(/^(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');

}else {

str = str.replace(/^(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');

}

return str;

}

}

22/11/2017 Development / java script

I preferr observable

getColaboradores(filters) {

return new Promise((resolve, reject) => {

this.http.get(this.urlApi + '/colaboradores', { params : { data : filters }})

.toPromise()

.then(response => {

this.dataColaboradores = response.json();

resolve();

});

});

in your controller 

constructor(private service: ColaboradorService) {}

service.getColaboradores().then(_=>  this.loading = false)

and Observable

getColaboradores(filters): Observable<any[]> {

return this.http.get(this.urlApi + '/colaboradores', { params : { data : filters }})

.map(response => {

return response.json();

});

}

22/11/2017 Development / java script
// in the service
getVehicles(){
    return Observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}])
}

// in the controller
vehicles: Observable<Array<any>>
ngOnInit() {
    this.vehicles = this._vehicleService.getVehicles();
}

// in template
<div *ngFor='let vehicle of vehicles | async'>
    {{vehicle.name}}
</div>
22/11/2017 Development / java script

Esse código foi feito para integrar o site da Odete.com.br usando angular5 e googleMaps

Eu criei um service chamado ColaboradorService onde tem uma porrada de método que eu utilizo nas consultas dos colaboradores, e um desses métodos é uma função que retorna a latitude e longitude de uma pessoa, a partir de um cep ou endereço consultado. Eu preciso desses dados, para consultar no mongo e trazer as diaristas, com base na lat e lng, + o Raio de distancia.

Como vocês sabem, não é possível injetar o script do google na mão, é muito feio. 

import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';

import { Injectable, NgZone } from '@angular/core';

export class ColaboradorService extends GoogleMapsAPIWrapper {

constructor(private http: Http, private __loader: MapsAPILoader, private __zone: NgZone) {

super(__loader, __zone);

}

/* retorna latitude e longitude */

getCepbyGoogle(address: string): Observable<any[]> {

 

return Observable.create(observer => {

this.__loader.load().then(() => {

console.log('Getting Address - ', address);

const geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

if (status === google.maps.GeocoderStatus.OK) {

observer.next(results[0].geometry.location);

observer.complete();

} else {

console.log('Error - ', results, ' & Status - ', status);

observer.next({});

observer.complete();

}

});

});

});

 

22/11/2017 Development / angular

@Injectable()

export class ColaboradorService {

constructor(private http: Http) { }

getColaboradores(filters): Observable<any[]> {

return this.http.get('https://odete-app.herokuapp.com/colaboradores', filters)

.map(response => response.json())

.map((messages: Object[]) => {

return messages.map(message => message);

});

}

}

My component

import { ColaboradorService } from '../colaborador.service';

export class MainComponent implements OnInit {

data: Array<any> = [];

constructor(private service: ColaboradorService) {}

}

ngOnInit() {

this.service.getColaboradores(this.filters).subscribe(colaborades => this.data = colaborades);

}

Easy!

 

21/11/2017 Development / java script

no angular 5 para enviar um objeto para o componente, basta na classe do componente incluir

// fazer o import do decorate Input
import { Input } from '@angular/core';

export class PerfilComponent implements OnInit {

// model = nomedoModel
@Input('model') model;

}

e no chamada do componente
<app-perfil [model]="{ ObjetoModel }"></app-perfil>

20/11/2017 Development / java script

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {

// Make the HTTP request:

this.http.get('https://odete-app.herokuapp.com/colaboradores').subscribe(data => {
 // Read the result field from the JSON response.
 this.results = data;
 console.log(data);
});

}

20/11/2017 Development / angular

export class AboutComponent implements OnInit {

 

asks = [];

 

constructor() {

 

this.asks = [{

ask : 'O cadastro é gratuito?',

ans : 'Sim. Completamente grátis.'

},

{

ask : 'Preciso fazer um cadastro?',

ans : 'Se você quiser participar do nosso banco de dados ficamos felizes em compartilhar o seu interesse em oferecer seus serviços ou contratar profissionais da área.'

},

{

ask : 'Quero oferecer meus serviços, oque devo fazer?',

ans : 'Acesse nosso formulário de cadastro e preencha com seus dados pessoais, escolha uma foto de perfil e no final selecione os serviços que você realiza.'

},

{

ask : 'Como funciona a aprovação do cadastro?',

ans : 'Nossa equipe entrará em contato para conferir seu cadastro e habilitar seu registro.'

},

{

ask : 'Quanto posso cobrar pelos meus serviços?',

ans : 'Você pode cobrar quanto você achar justo pelos seus serviços, nós indicamos colocar um valor pela diária ou por hora trabalhada.'

},

{

ask : 'Como vou receber pelos meus serviços?',

ans : 'A negociação em geral, como execução do serviço, data e hora agendada e a forma de pagamento é de responsalidade do contratante e da contratada.'

},

{

ask : 'Como posso avaliar um serviço executado?',

ans : 'Estamos em constante desenvolvimento e aprimoramento de nossas funcionalidades, essa funcionalidade estará disponível em breve.'

},

{

ask : 'Como posso avaliar um bagunceiro?',

ans : 'Estamos em constante desenvolvimento e aprimoramento de nossas funcionalidades, essa funcionalidade estará disponível em breve.'

}

];

}

 

<accordion>

<accordion-group heading="{{q.ask}}" class="mb-2" *ngFor="let q of asks; let i = index" [isOpen]="i === 0">

{{q.ans}}

</accordion-group>

</accordion>

20/11/2017 Development / angular

There are different type :

type one

[class.my-class]="step=='step1'"

type two

[ngClass]="{'my-class': step=='step1'}"

type three

[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"

type four

[ngClass]="(step=='step1')?'my-class1':'my-class2'"
20/11/2017 Development / angular
<!-- Angular -->
<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>
<ul>
  <li *ngFor=" let item of items; trackBy: trackByFn;">
    {{item}}
  </li>
</ul>
// Method in component class
trackByFn(index, item) {
  return item.id;
}
20/11/2017 Development / java script
app.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function() {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);

      $window.addEventListener("online", function() {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

In your controller $rootScope.online in your view {{online}}

14/11/2017 Development / macetes

Agora ficou facil a gente desenvolver uma aplicação offline, basta a gente gerar um app.cache, com os arquivos e incluir a tag do manifest no html. Basicamente é isso.

O lance é a configuracao que tem que ser feita.

O arquivo app.cache precisa responder como um outro content-type para o browser poder ler.

response.setHeader("Content-Type", "text/cache-manifest");

Como eu estava usando o node-static pra subir uma aplicacaozinha no heroku, eu estou postando o código que eu usei e funcionou. Espero que ajude.

 

var static = require('node-static');

var file = new static.Server('./docs', { gzip: true });

require('http').createServer(function(request, response) {

 

response.setHeader('Access-Control-Allow-Origin', '*');

response.setHeader('Access-Control-Request-Method', '*');

response.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');

response.setHeader('Access-Control-Allow-Headers', '*');

//response.setHeader("Content-Type", "text/cache-manifest");

 

 

  request.addListener('end', function() {

    file.serve(request, response, function (e, res) {

    if(e && request.url == '/app.cache'){

    response.setHeader("Content-Type", "text/cache-manifest");

    }

    });

  }).resume();

}).listen(process.env.PORT || 3333);

12/11/2017 Development / macetes

Crie um procFile

#web: node index.js
web: node node_modules/gulp/bin/gulp
foreman start

e uma tarefa no seu gulpfile

gulp.task('serveprod', function() {
  connect.server({
    root: 'docs',
    port: process.env.PORT || 5000, // localhost:5000
    livereload: false
  });
});

e pronto :-)

Mas isso é meio feio né, que tal usarmos no package.json

  "scripts": {
    "test": "gulp test",
    "prestart": "gulp default", //aqui entra sua tarefa normal do gulp build - a minha caso eu chamei de default, poderia ser gulp build
    "start": "node index.js" // rodar o script do servidor
    },

Eu usei o prestart, porque o postinstall, por alguma motivo deu erro no gulp, e eu usei esta comando para desabilitar o cache do nome

heroku config:set NODE_MODULES_CACHE=false

 

12/11/2017 Development / java script

É comum quando a gente está desenvolvendo ter que simular os dados mockados, isso é um porre, mas necessário.

Eu uso uma parada chamada chancejs, mas o chancejs só gera o valor, 1 único valor. O legal é passar um model e ja retornar tudo de uma vez.

Exemplo com o chancejs.

gerarDados(qtdeRows, jsonModel){
return {
nome: chance.name(),
idade: chance.int()
}
}

Basicamente, beeeeeem basicamente essa é a ideia.

Mas o ideial seria fazer um request para uma url, passando a qdte e o model.

Exemplo:

fetch(endpoint, {qtde: qtdeRows, model: jsonModel})

Porque isso é legal? Porque voce pode fazer uma parada que seja em DEV desse jeito e em PROD, apontar pra outro endpoint que vai retornar exatamente a mesma coisa, e você não fica travado, esperando o cara do backend fazer sua parte.

Tá, mas como eu gero esses dados com URL?

Bom, aqui vão alguns links.

http://www.objgen.com/json?demo=true

https://www.json-generator.com/

http://json-schema-faker.js.org

https://www.npmjs.com/package/dummy-json // Esse carinha faz oque a gente quer

https://github.com/marak/Faker.js/ bom pra caraaaaaaleo, porque da pra fazer um requisicao pela URL direta.

Também é possível gerar os dados apenas usando um schema

Ex: Essa url - http://faker.hook.io/?property=name.findName&locale=de

fetch('http://faker.hook.io/?property=name.findName&locale=de').then(function(resp){ return resp.json() }).then(function(data){ console.log(data) }) :-)

https://rawgit.com/Marak/faker.js/master/examples/browser/index.html

https://github.com/typicode/json-server //sobe um servidor e você pode fazer schemas

Espero que sirva

 

12/11/2017 Development / java script

Com as recentes tecnologias aparecendo no mundo do desenvolvimento web, como as novas versões dos browsers, novas versões do NPM, NODE, novas versões dos pacotes das bibliotecas e frameworks, surgiu algumas novidades que possibilitam utilizá-las para melhorar a performance das nossas aplicações.

Uma delas é o navigator.connection.type que retorna como você esta conectado. 

Ex: wifi, 2G, etc...

Imagina fazer o seguinte, quando estiver wifi,carrega um vídeo, quando estiver 2G carrega uma imagem. :-)

Outro pulinho do gato é o display: optional em uso das fontes

Ex:

font-family: 'Xibata';
font-display: optional

 

11/11/2017 Development / css

Eu estava estudando os pseudos-elementos e me surgiu uma dúvida, existe alguma restrição em usá-los em alguns elementos?

A resposta é: SIM! Nos chamados replaced elements

No CSS, um replaced elements é um elemento cuja representação está fora do escopo do CSS. Em outras palavras, estes são objetos externos cuja representação é independente do modelo de formatação CSS, ou seja, não adiantar fazer css pra esses elementos, o CSS vai cagar pra você hehe.
Alguns elemento

  • video
  • iframe
  • img
  • embed

Elementos em casos específicos:

  • canvas
  • audio
  • object
  • applet

Alguns controles de formulário também podem ser elementos substituídos. A especificação HTML diz que um elemento pode ser substituído e os elementos do tipo de imagem devem ser sempre substituídos. Os objetos inseridos usando a propriedade de conteúdo CSS são elementos substituídos anônimos. Eles são "anônimos" porque eles não existem na marcação HTML

Então pra finalizar:

Replaced elements do not have ::before and ::after pseudo-elements

No caso de alterar um input, é comum as pessoas alterarem o label. Veja esse exemplo:

http://jsbin.com/roxem/2/edit?html,css,js,output

Espero que sirva!

07/11/2017 Development / css

Quem esta utilizando input type date no bootstrap 4, percebe que tem 1 pixelzinho a mais que os outros controles.

Para consertar isso,

input::-webkit-datetime-edit-fields-wrapper {
padding: 0
}

Espero que ajude

07/11/2017 Development / css

https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a

referencia muito boa

06/11/2017 Development / css

Se tem uma coisa que os browsers ainda não fizeram bem feito, é o tal do icone do input type date.

No chrome é uma setinha pra baixo, bem malacabada!!!!

Então pra gente deixar bonitinha, que tal isso!!!!

input[type="date"] {
  position: relative;
}

/* o transparent no color, é que é o jum the cat */
input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}

input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'FontAwesome';
  content: '\f073';
  /* Icone do calendar - FontAwesome */
  width: 15px;
  height: 20px;
  position: absolute;
  right: 8px;
  color: #999;
}

06/11/2017 Development / java script

Talvez vocês não conheçam, mas o chancejs tem uma lista grande de métodos que não estão na documentação..

  • chance.hex();
  •  chance.cnpj();
  •  chance.profession();
  •  chance.company();
  •  chance.israelId();
  •  chance.mrz();
  •  chance.HIDN();
  •  chance.nationality();
  •  chance.semver();
  •  chance.tlds();
  •  chance.port();
  •  chance.locale();
  •  chance.geojson();
  •  chance.county();
  •  chance.weekday();
  •  chance.iban();
  •  chance.file();
  •  chance.mac_address();
01/11/2017 Development / java script

É muito chato na hora da gente desenvolver, ter que ficar fazendo dados mockados, então, pra ficar um pouco mais divertido tem uma biblioteca chamada changejs.

Que a gente pode fazer o seguinte

this.data = new Array(50).fill(1).map(() => {

return {
"codigo": chance.hash({length: 4}),
"operador": chance.name(),
"titulos" : chance.integer({min: 0, max: 500}),
"valorTotal" : chance.floating({min: 0, max: 100}),
"valorRecebido" : chance.floating({min: 0, max: 100}),
"valorEstimado" : chance.floating({min: 0, max: 100})
}

});

isso vai gerar um array de 50 itens contendo dados que eu nem imagino qual serão os valores, rs...mas vai gerar :-)

 

06/10/2017 Development / macetes
C:\Users\Huggler-Vaio\AppData\Local\Android\sdk\platform-tools\adb logcat chromium:D SystemWebViewClient:D *:S
05/10/2017 Development / java script
Eu uso essa parada pra testar as notificações e vira e mexe eu esqueço! Agora não esqueço mais ;-)

var key = 'YOUR-SERVER-KEY';
var to = 'YOUR-IID-TOKEN';
var notification = {
  'title': 'Portugal vs. Denmark',
  'body': '5 to 1',
  'icon': 'firebase-logo.png',
  'click_action': 'http://localhost:8081'
};

fetch('https://fcm.googleapis.com/fcm/send', {
  'method': 'POST',
  'headers': {
    'Authorization': 'key=' + key,
    'Content-Type': 'application/json'
  },
  'body': JSON.stringify({
    'notification': notification,
    'to': to
  })
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.error(error);
})
28/09/2017 Development / java script

Esse post serve só pra eu lembrar que no REDUX é criado uma unica STORE...maaaaaaas, não é bem assim...a gente pode sim, e aqui abaixo eu tenho o pulo do gato pra usar isso.

import { createStore } from 'redux'

// ISSO É O REDUCER = funcao redutora, entra de um jeito e sai de outro ;-)
function minhaFuncao(state, action){
if(action.type === 'BLABLABLA'){
return state
}

}

const store = createStore(minhaFuncao)

App store={store}

Quando a gente recebe as propriedades do store, usando o REDUX nos temos os métodos

subscribe()
getState()
dispatch()

http://redux.js.org/docs/api/Store.html

O getState() retorna o ultimo valor retornado da funcao redutora

O dispatch({ type: 'BLABLABLA' , payload: 'PAYLOAD'}) ou no ES6 poderia só passar dispatch({ type: 'BLABLABLA' , payload}) que recebe o type que vai ser responsavel por disparar a acao na funcao redutora, e o payload que é o valor.

Só que ficar mandando toda hora dispatch com o type, é uma merda!

Pra resolver esse problema a gente tem o REDUX-THUNK

https://github.com/gaearon/redux-thunk

E dai nosso dispatch ficaria

this.props.store.dispatch(minhaFuncao(meusparametros)) e na minha funcao eu retorno um dispatch

minhafuncao(url){
return dispatch => {
fetch(url).then(resp => {
dispatch({ type: 'BLABLABLA' , resp}) //explosao de variaveis para objetos literais
return resp
})
}
}

Pra isso temos que importar

import ReduxThunk from 'redux-thunk'

mas na hora de criar a store precisamos importar

import { createStore, applyMiddleware(ReduxThunk) } from 'redux'

O lance é que isso não é nada sem esse carinha aqui ó

https://github.com/reactjs/react-redux

import { Provider } from 'react-redux'

E para usar isso é bom a gente declarar as propriedades das classes que vão herdar o nosso store

App.contextTypes = {
store: React.PropTypes.object.isRequired
}

e usar no App store={this.context.store}

E no final a gente usa o npm install generator-electrode :-)

14/09/2017 Development / css

Esse jump the cat, é pra retirar aquele background amarelo horrivel que o chrome coloca, quando tem o autocomplete.

@-webkit-keyframes autofill {
    to {
        color: #fff;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Boa sorte!

31/08/2017 Development / java script

A pessoa pode quebrar a cabeça um pouquinho com isso. Então pra ajudar outros pessoas e a me ajudar futuramente, caso eu venha utilizar novamente, vou postar aqui o pulinho do gato que faz funcionar a recuperação dos dados usando o req.body no node.

Basicamente é isso aqui uma chamada usando fetch

                    fetch('http://localhost:3000/position', {
                        method: 'post',
                        headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            position: {latitude : position.coords.latitude, longitude: position.coords.longitude},
                            id: 'XPTO'
                        })
                    }); 

E no node você usa req.body.position, por exemplo.

Mas pra isso funcionar, o pulo do gato é inserir o headers

                        headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json'
                        },

Espero que ajude

 

08/08/2017 Development / mobile

Ja faz tempo que eu quero fazer um post falando sobre isso, eu vejo um monte de site fazendo uma série de posts falando que tem que fazer isso e fazer aquilo, e eu nunca entendia porra nenhuma que esses caras estavam falando.

Até que um dia eu coloquei na minha cabeça que ia ficar algum tempo estudando isso e fazer um post que eu mesmo pudesse entender.

Então basicamente é o seguinte, levando-se em consideração que você ja tenha criado o projeto, agora você vai gerar build, mas antes disso você precisa criar a chave de assinatura.

Que é esse comandinha ai:

keytool -genkey -v -keystore C:/onboard.keystore -alias onboard -keyalg RSA -keysize 2048 -validity 10000

 C:/onboard.keystore = PASTA ONDE ESTA MEU KEYSTORE

-alias onboard = NOMEDOMEUALIAS

Feito isso, o comando line vai pedir pra você inserir algumas informações e no final você digita Y de YES ou se for brasileiro Digita S de SIM

Blz, sua chave foi criada

Agora fazer o build

cordova build android --release -- --keystore="c:\onboard.keystore" --storePassword=123456 --alias=onboard

Pronto gerou sua APK-RELEASE MUTHER FUCKER!

20/06/2017 Development / java script

Recentemente eu desenvolvi um programinha para cadastrar eventos de corredores. É o onboard - http://onboard.run

E comecei a pesquisar os polylines, que mostram as rotas dos trajetos realizados. É para uma possível implementação.

E olha como ficou o resultado.

https://jsfiddle.net/3ubgkpwu/1/

30/03/2017 Development / css

Issso aqui é pra ser executado basicamente com after ou before

content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    height: 0;
    width: 0;
    border-color: transparent transparent #ffc819;
    border-style: solid;
    border-width: 0 0 3vw 100vw

É um códigozinho bem de bosta, mas não precisa usar fundo de imagem :-)

position: absolute;
    left: 10px;
    bottom: -10px;
    z-index: -1;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 0 13px 130px;
    border-color: transparent transparent transparent rgba(0,0,0,.2);

Exemplo rapidinho:

https://jsfiddle.net/ug8p0cbo/3/

20/03/2017 Development / css

http://jsfiddle.net/yqq2ogaq/

https://jsfiddle.net/36m7796q/2/

06/03/2017 Development / java script

Muita gente não sabe, mas o método split aceita expressões regulares. Imagine o seguinte cenário.

var arquivo = '100,200-150,200;20';
var valores = arquivo.split(',');
["100", "200-150", "200;20"] //vai imprimir

var exp = /[,;-]/;
var valores = arquivo.split(exp);
["100", "200", "150", "200", "20"] //vai imprimir tudo separado e bonitinho de uma vez só.

Espero que ajude.

30/01/2017 Development / css

É muito comum ver os caras querendo tirar o background-color de css... Uns tentam usar background-color: none, auto, inherit...

Mas nesse caso, o correto é background-color: transparent;

Espero que sirva

 

27/01/2017 Development / java script

FormatMessage do react-intl pode ser usado de algumas maneiras, vou expor aqui 2 maneiras.

Diretamente no html.

Ex: <Field label={<FormattedMessage {...messages.publicoAlvo} />}

Ou você pode criar uma função que retorna o defaultMessage.

const m = (message) => ({ ...messages[message] }.defaultMessage);

<Field label={m('publicoAlvo')} />

Eu prefiro a segunda.

Espero que ajude

 

24/01/2017 Development / java script

insert in your component - attribute (data-componente="namecomponente")

function debugComponent(){

    document.querySelectorAll("[data-component]").forEach(function(component, index){

        var modulo = document.createElement('div');
        modulo.classList.add('debug-modulo');

        var moduloName = document.createTextNode(component.getAttribute('data-component'));
        modulo.appendChild(moduloName);

        component.classList.toggle("debug-modulo-active");
        component.appendChild(modulo);
    });
}

//css

.debug-modulo-active {
    border: 1px solid red;
    position: relative;
    display: block;
}

.debug-modulo {
    position: absolute;
    top: 0;
    left : 0;
    z-index: 1000;
    right: 0;
    background-color: #fff;
    color: #000;
    font-size: 10px;
}

23/01/2017 Development / css

Mais 1 certificado :-)

https://cursos.alura.com.br/certificate/75306fdd-af07-4ba2-8c2b-2e70efc4eb32

FlexBix Froggy - 24 acertos :-) = 100%

23/01/2017 Development / css

container:

  • display: flex
  • flex-direction
  • justify-content
  • flex-wrap
  • flex-flow
  • align-items
  • align-content

flex item:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
20/01/2017 Development / java script

When you are working with the component toastr, you may want to customize the css, there is a need to debug the css on the console. However, when you do this, if you just hover and pull, toastr closes :-(

With this code it will only close in the click :-)

    angular.extend(toastrConfig, {

        // use for debug component
        // timeOut: 0,
        // extendedTimeOut: 0,

        closeButton: true
    });

 

11/01/2017 Development / css

With Sass

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

$colorTim : #00CC66;
$colorClaro: #B71C1C;
$colorOi : #0D47A1;
$colorVIVO : #FF9900;
$colorNextel : #CC00FF;
$colorCTBC : #00F2FF;
$colorSercontel : #000;

.leaflet-layer.baseRasterLayer.TIM img {
  @include background-opacity($colorTim, 0.2);
}

With Javascript

window.hexToRgbA = function(hex, opacity){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255, opacity].join(',')+')';
    }
    throw new Error('Bad Hex');
};

 

03/01/2017 Development / java script

this is the demo

the secret is:  ng-selected="true"

        <md-input-container>
            <label for="aggregation">Aggregation:</label>
              <md-select ng-model="aggregation">
                <md-option ng-value="Select" ng-selected="true">Select</md-option>
                <md-option><em>Hour</em></md-option>
                <md-option><em>Day</em></md-option>
                <md-option><em>Week</em></md-option>
              </md-select>
          </md-input-container>

03/01/2017 Development / java script

Same time i need repeat using numbers

sample: ng-repeat="item in [1,2,3,4,5,6...]" but this is very hugly :-(

I prefer

 ng-repeat="n in [].constructor(48) track by $index"

26/12/2016 Development / java script

Depois de muito, muito, mas muito mesmo procurar na internet algo que fosse mais ou menos assim.

Queria deixar desabilitador ou readonly os campos de datetimepicker do kendo e deixar o usuario manipular apenas pelos icones de calendario e timer.

Nao encontrei nada :-(

A minha solucao foi a seguinte:

Eu inicializo os campos como readonly e dou um bind via js nos elementos

      var kendoDateTimePicker = element.find('#roc-datetimeinterval-start').data('kendoDateTimePicker');
      var kendoDateTimePickerEnd = element.find('#roc-datetimeinterval-end').data('kendoDateTimePicker');

      // abre o calendario do start date
      element.find('.startDatetime .k-link-date').on("click", function (e) {
        kendoDateTimePicker.close('time');
        kendoDateTimePicker.open('date');
      });

      // abre o calendario do end date
      element.find('.endDatetime .k-link-date').on("click", function (e) {
        kendoDateTimePickerEnd.close('time');
        kendoDateTimePickerEnd.open('date');
      });


      // abre o timer do start date
      element.find('.startDatetime .k-link-time').on("click", function (e) {
        kendoDateTimePicker.close('date');
        kendoDateTimePicker.open('time');
      });

      // abre o timer do end date
      element.find('.endDatetime .k-link-time').on("click", function (e) {
        kendoDateTimePickerEnd.close('date');
        kendoDateTimePickerEnd.open('time');
      });

Ficou supimba, Espero que funcione pra vc!

 

22/12/2016 Development / java script

Tudo que você precisa saber sobre eventos e Layers de Mapa usando Leaflet

// Base Mapa
map.on('layeradd' // Usado para inicializar o mapa - todas as layer passam por ele inicialmente
baseLayer.on('loading', function() { //Esse evento sé chamado, em casos de zoom in ou out
baseLayer.on('load', function() { //Esse evento é chamado no final do layeradd ou no final do loading

// Raster
baseRasterLayer.on('loading', function() { //Esse evento só é chamado quando tem zoom + ou zoom -
baseRasterLayer.on('load', function() { // Esse evento é chmado no final do layeradd ou loading

// Vetor
overlay.on('layeradd', function() { //Usado para carregar as layers dos vetores
overlay.on('load', function() { // Chmado no final de layeradd

//Issues
overlay.on('loading', function(e) { //Evento quando tem zoom - ou zoom +
overlay.on('load', function(e) { // Final do loading
Nesse caso de issues, foi inserido um evento que fica escutando cada ícone de issue inserido
myMarker.on('add', function(e){ // E zera o mapa

E o pulo do gato nesse caso, foi desabilitar o map.off('layeradd');

21/12/2016 Development / css

Esse fit-content é bom pra ser usado quando vc quer usar a proporcao exata do min-width e min-height

Vale a pena dar uma estudada nessas propriedades tambem

fillmax-contentmin-content, and fit-content

20/12/2016 Development / links

Este aqui é o link da base de dados global do robots.txt

Quem trabalha com SEO deveria ter conhecimento

http://www.robotstxt.org/db.html

20/12/2016 Development / java script

Essas contantes sao usadas para fazer filtros usando o ui grid

1.  STARTS_WITH
2.  ENDS_WITH
3.  CONTAINS 
4.  EXACT
5.  NOT_EQUAL
6.  GREATER_THAN
7.  GREATER_THAN_OR_EQUAL
8.  LESS_THAN
9.  LESS_THAN_OR_EQUAL

 

18/12/2016 Development / angular

Quando criamos um controller usando angular é normal usarmos 

$scope.varivel = 'Xibata';

e na view usarmos {{variavel}}

ou

$scope.obj = {};
$scope.obj.variavel = 'Xibatinha';

e na view {{obj.variavel}}

E tambem existe a seguinte situacao, quando a gente quer usar o $rootScope para usar de forma global de maneira mais rapida, o certo é usar Service ou Factory ou alguma outra coisa, mas isso aqui que eu quero falar é um pulinho do gato rapido.

Pois bem, quando usamos $rootScope e queremos print o objeto na view, usamos:

$rootScope.variavel = 'Xibaaaaata';

{{$root.variavel}}

Espero que sirva!

 

17/12/2016 Development / java script

É muito chato ter que parsear data usando o html input type date.

Então pra facilitar tem um macetezinho que quando voce grava no banco um tipo no formato data e depois vc quer reutilizar, usa esse eskema aqui ó

$scope.birthday= moment(result.birthday).toDate()

Nesse caso, usei a biblioteca moment.js

Espero que sirva!

17/12/2016 Development / angular

md-select readonly="true" or readonly="readonly" not run :-( 

use  ng-attr-disabled="true" :-)

Espero que sirva!

17/12/2016 Development / angular

Include in css

md-dialog.fullscreen-dialog {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

In html

<md-dialog aria-label="Dialog" class="fullscreen-dialog">

Espero que sirva!

16/12/2016 Development / html5
  • autocorrect="off"
  • autocapitalize="off"

É muito normal desenvolvedores esquecerem esses atributos, mas isso é sem dúvida muito útil, porque no celular, campos de email, senha, nome de usuario, se nao estiverem com essa marcacao, irao ficar com letra maiuscula, e dependendo da validacao do backend, nao vai coincidir.

Isso aqui ajuda! Espero que ajude

15/12/2016 Development / telerik

Eu uso direto esse codigozinho, e vivo me esquecendo.

var item = $("#grid").data("kendoGrid").dataSource.get(id);

23/11/2016 Development / angular

2 tipos de inicializar o projeto com angular

    // pure angular
    (function() {
        var initInjector = angular.injector(['ng', 'requestFromAPIService', 'config', 'ngCookies']);
        var $http = initInjector.get('$http');
        var requestFromAPI = initInjector.get('requestFromAPI');
        var ENV = initInjector.get('ENV');
        var $cookies = initInjector.get('$cookies');

        if (!ENV.disable_auth) {

            if ($cookies.get('wrsso') === '' || !$cookies.get('wrsso')) {
                console.log('initialize redirecionando para o auth');
                window.location.href = '/auth/webradar';
                return false;
            }

            requestFromAPI.request(ENV.rocketAppUrl + 'capabilities', '', {}, 'clearance').then(function(resp){

                if(!resp || !resp.data || !resp.data.roles || resp.data.roles.length === 0){
                    console.log('falha na resposta do initialize rule - redirecionando para o auth');
                    window.location.href = '/auth/webradar';
                    return false;                
                }

                angular.module('APP_CONFIG', []).constant('APP_CONFIG', resp.data);
                angular.element(document).ready(function() {
                    angular.bootstrap(document, ['rocketUI']);
                });
            }, function(err){
                window.location.href = '/auth/webradar';
            });
        }else{
            angular.module('APP_CONFIG', []).constant('APP_CONFIG', {roles: ['manager']});
            angular.element(document).ready(function() {
                angular.bootstrap(document, ['rocketUI']);
            });            
        }

    })();

    // deferredBootstrapper-lib
    // deferredBootstrapper.bootstrap({
    //   element: document.body,
    //   module: 'rocketUI',
    //   injectorModules: ['requestFromAPIService', 'config'],
    //   resolve: {
    //     APP_CONFIG: ['requestFromAPI', 'ENV', function (requestFromAPI, ENV) {        
    //         return requestFromAPI.request(ENV.rocketAppUrl + 'capabilities', '', {}, 'clearance');
    //     }]
    //   }
    // });

23/11/2016 Development / css

https://jsfiddle.net/2fgLfbgg/

14/10/2016 Development / macetes

Esse comando é uma mão na roda, quando você precisa acessar coisas de outro dominio sem usar CORS.

chrome.exe --args --disable-web-security –-allow-file-access-from-files

10/08/2016 Development / css

/* background */
md-tabs > md-tabs-wrapper {
  /*background-color: #f00 !important;*/
}

/* color tab button */
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {
  /*color: #fff !important;*/
}

/* color tab button active */
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
  color: #fff !important;
}

/* color icon */
md-tabs .md-tab[disabled], md-tabs .md-tab[disabled] md-icon {
/*  color: #000 !important; */
}

/* background border and swipe */
md-tabs md-ink-bar {
  background-color: #00B8D4;
}

03/08/2016 Development / java script
SELECT ST_AsGeoJSON("poiGeometrico") geojson, * FROM "Incidente"
    WHERE 
ST_Intersects(ST_Buffer((SELECT shape FROM "RotaOlimpica" WHERE id = 1), 0.001),"poiGeometrico")
AND
inicio >= now() - interval '1 day'
AND
inicio <= now() + interval '1 day'
AND
status = 'ABERTO';
02/08/2016 Development / java script

            var MyIcon = L.Icon.extend({
              options: {
                  iconUrl: '/data-s4c/Camadas/Rotas/s4c_ic_ending_point.png',
                  iconSize: new L.Point(24, 24),
                  iconAnchor: new L.Point(22, 94),
                  popupAnchor: new L.Point(-3, -76)
              }
            });
            var icon = new MyIcon();

                via.geom.setStyle({color: $scope.fillColor()});

                MapaService.adicionarLayer(via.geom);
                MapaService.obterMapa().then(function(mapa) {
                    mapa.fitBounds(via.geom);

                    var layers = _.first(via.geom.getLayers());
                    var posIni = layers.getLatLngs()[0];
                    var posEnd = layers.getLatLngs()[layers.getLatLngs().length -1];

                    var marker1 = L.marker([posIni.lat, posIni.lng], {icon: icon}).addTo(mapa);
                    var marker2 = L.marker([posEnd.lat, posEnd.lng]).addTo(mapa);

                  

11/07/2016 Development / css

https://jsfiddle.net/fxL4zcma/1/

07/07/2016 Development / java script

http://jsfiddle.net/b43hj/3387/

Fiz esse pequeno script para a landing Page da GVT é bem util. O footer fica travado quando o scrolltop chega em determinado elemento. theFixed é o elemento que vc quer comparar.

$(document).ready(function(){
var the = $("#theFixed").offset().top;

  $(window).scroll(function(){

    if($(this).scrollTop() > Math.max(0,($("#theFixed").offset().top + $("#theFixed").height())-$(this).scrollTop())){
  $("#theFixed").addClass("fixed")
  }else{
  $("#theFixed").removeClass("fixed");
  }

})

05/07/2016 Development / css

#channels_scroller {
  max-height: 100px;
  overflow-y: scroll;
  background: #ccc
}

#col_channels:hover #channels_scroller::-webkit-scrollbar {
    display: block;
}
#channels_scroller::-webkit-scrollbar {
    position: absolute;
    -webkit-appearance: none;
    width: 8px;
    display: none;
}
#channels_scroller::-webkit-scrollbar-corner {
    background: transparent;
}
#channels_scroller::-webkit-scrollbar-thumb {
    background: #ab9ba9;
    box-shadow: inset 0 -2px,inset 0 -3px,inset 0 2px,inset 0 3px;
    min-height: 36px;
}
#channels_scroller::-webkit-scrollbar-thumb, #channels_scroller::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 3px;
    color: #4d394b;
}

#channels_scroller::-webkit-scrollbar-track {
    background: #3e313c;
    box-shadow: inset 0 -4px 0 0,inset 0 4px 0 0;
}
#channels_scroller::-webkit-scrollbar-thumb, #channels_scroller::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 3px;
    color: #4d394b;
}

 

05/07/2016 Development / css

*::-webkit-scrollbar {
    width: 6px!important;
}
Pseudo ::scrollbar-thumb element
*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
}
Pseudo ::scrollbar-track element
*::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
}

.app-wrapper-main::-webkit-scrollbar-track {
    background-color: #dfdfdf
}

27/06/2016 Development / java script

        function returnPromisse() {
            var p = $q.defer();
            $http.get(API_ENDPOINT + '/usuarios')
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        p.resolve(response.data);
                    } else {
                        p.reject(response);
                    }
                }, function(err) {
                    p.reject(err);
                });

            return p.promise;
        }

var promisse = returnPromisse().then(function(data){ console.log(data) })

 

22/06/2016 Development / java script

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}
        
        
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }


 

 



     

Sticky Header


      
     
     Big Image
      
     
     
      
     
     
     $(window).scroll(function() {
     if ($(this).scrollTop() > 1){
     $('header').addClass("sticky");
     }
     else{
     $('header').removeClass("sticky");
     }
     });

Outras referencias

http://jsfiddle.net/sinky/S8Fnq/

http://callmenick.com/_development/resize-header-on-scroll/

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

https://codepen.io/chrissp26/pen/gBrdo

https://codepen.io/renby/pen/tKnFH

20/06/2016 Development / css

-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3))

Usado para fazer aquele efeitozinho do header do material-design

Cores legais

#3367d6 - header
#2a56c6 - content

17/06/2016 Development / css

nice effect in buttons

sample: btn bootstrap version 2

background: linear-gradient(to bottom, rgb(33, 33, 33), #303030);
box-shadow: 0px 1px 0px rgba(0,0,0,0.1), inset 0px 1px 0px #303030;

15/06/2016 Development / css

Nao posso mais esquecer dessa porrinha!!!

 

.Aligner {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  }
   
  .Aligner-item {
  flex: 1;
  }
   
  .Aligner-item--top {
  align-self: flex-start;
  }
   
  .Aligner-item--bottom {
  align-self: flex-end;
  }
   
  .Aligner-item--fixed {
  flex: none;
  max-width: 50%;
 

}

<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>
14/06/2016 Development / css

i did this css to the s4c app

<div class="box pulse animated"></div>

.box {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%
}
.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.8);}
  100% {transform: scale(1); opacity: 0}
}
.pulse {
  animation-name: pulse;
  animation-duration: 1s;
}

09/06/2016 Development / java script

Insert in your html, attribute data-component="nameComponent"

and javascript Debug View

function debugComponent(){
    
    

    $("[data-component]").each(function(index, item){

var modulo = $('<div>').css({'position': 'absolute', 'top': 0, 'left' : 0, 'z-Index': 1000, 'right': 0, backgroundColor: '#fff', 'color': '#000', 'fontSize': '10px'})

var obj = $(item);

        var cmpt = obj.data("component");

        obj.css({"border": "1px solid red", 'position': 'relative', 'display': 'block'}).append(modulo.text(cmpt))

    })
}

14/05/2016 Development / java script

I change database of My App Odete.

Odete was MySQL, now is Mongo.

Sample of change:

Query for select users and geoLocation using Mysql

        var sql = 'SELECT colaboradores.id, colaboradores.verify, colaboradores.latitude, colaboradores.longitude, colaboradores.cidade,colaboradores.nome, colaboradores.sobrenome, colaboradores.valor, colaboradores.uf, colaboradores.bairro, colaboradores.idfacebook, colaboradores.imagem, CAST( ' +
                      '6371 ' + 
                      '* acos ( ' +
                      'cos(radians('+ $latitude +')) * ' +
                      'cos(radians( colaboradores.latitude)) * ' +
                      'cos(radians( colaboradores.longitude) - ' +
                      'radians( '+ $longitude +' )) + ' +
                      'sin(radians( '+ $latitude +' )) * ' +
                      'sin(radians(colaboradores.latitude)) ' +
                    ') AS UNSIGNED) AS distance, GROUP_CONCAT(telefones.numero) as telefone, GROUP_CONCAT(operadoras.txtOperadora) as operadora, (SELECT GROUP_CONCAT(servicos.txtServico) from odete.servicos inner join odete.colaboradores_servicos on colaboradores_servicos.servico_id = servicos.id where colaboradores_servicos.colaborador_id in (colaboradores.id)) as servico FROM (odete.colaboradores) INNER JOIN odete.telefones ON colaboradores.id = telefones.colaborador_id INNER JOIN odete.operadoras ON operadoras.id = telefones.operadora_id WHERE tipo_colaborador = "COLABORADOR" GROUP BY colaboradores.id having distance <= ' + range + ' ORDER BY colaboradores.nome';

And Now Mongo

            Colaborador.geoNear(coords, {num: limit, maxDistance: maxDistance, spherical: true, distanceMultiplier: km}, function(err, resp) {
                if (err) return res.status(500).json(err);

The difference is brutal!

 

 

12/05/2016 Development / java script

My app http://odete.hagility.com.br was backend php.

Now odete app is NODE.

My app is host in Heroku and the endpoints for front-end are

https://odete-app.herokuapp.com/colaboradores

https://odete-app.herokuapp.com/servicos

https://odete-app.herokuapp.com/operadoras

The database odete is MySQL, but in the future will be Mongo.

 

05/05/2016 Development / html

In Odete i need to used ng-repeat whit row

My solutions is

<div class="row">
    <div ng-repeat="item in data">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
            <h2>{{item.nome}}</h2>
        </div>
    </div>
</div>

 

26/04/2016 Development / java script

Olhando de curioso os métodos no chrome, descobri essa muther fucker!

navigator.getBattery().then(function(resp){ console.log(resp) });

Espero que sirva!

17/02/2016 Development / java script

using angular with find, i discovered that "find" run only on name atributte.

Sample:

element.find('.myclass') - not run

element[0].querySelector('.myclass') - run

Jump the cat

 

04/02/2016 Development / java script

window.onload = function() {
    var n, div, worker;
    
    var wikis = [
        "brownie",
        "lemon",
        "chocolate",
        "sesame",
        "lollipop",
        "oat",
        "cake",
        "gingerbread",
        "sweet",
        "applicake",
        "apple",
        "chups"
    ];

    for (n = 0; n < 5; ++n) {
        worker = new Worker("task.js");
        div = document.getElementById("text-" + n);
        worker.onmessage = function (event, index) {
          var d = event.data[0];
          document.getElementById("text-" + event.data[1]).innerHTML = d;
        };
        worker.postMessage([div.innerHTML, wikis, n]);
    }
}

task.js

this.onmessage = function(e) {
    var html = e.data[0];
    var index = e.data[2];
    for(var i=0; i<e.data[1].length;i++){
        var reg = new RegExp(e.data[1][i], 'gi');
        html = html.replace(reg, "<span class='wiki'>" + e.data[1][i] + "</span>");
    }
    this.postMessage([html, index]);
}


<div id="text-0">esse eh o texto lemon, muito legal, cake</div>
<div id="text-1">applicake, apple</div>
<div id="text-2">sweet, brownie</div>
<div id="text-3">chocolate legal, cake, gingerbread</div>
<div id="text-4">brownie lemon, muito legal, cake</div>

.wiki {color: red}

04/02/2016 Development / java script

I did a test in my job with WORKERS.

I create a file task.js

onmessage = function(e) {
    var html = e.data[0];
    for(var i=0; i<e.data[1].length;i++){
        var reg = new RegExp(e.data[1][i], 'gi');
        html = html.replace(reg, "<span class='wiki'>" + e.data[1][i] + "</span>");
    }
    postMessage(html);
}

And my app

window.onload = function() {
    var div = document.getElementById("text");
    var wikis = [
        "brownie",
        "lemon",
        "chocolate",
        "sesame",
        "lollipop",
        "oat",
        "cake",
        "gingerbread",
        "sweet",
        "applicake",
        "apple",
        "chups"
    ];

    var worker = new Worker('task.js');
    
    worker.onmessage = function (event) {
        var d = event.data;
        div.innerHTML = d;
    }
    worker.postMessage([div.innerHTML, wikis]);

}

And my HTML

<div id="text">esse eh o texto lemon, muito legal, cake</div>

css - .wiki {color: red}

25/01/2016 Development / angular

This a simple example of queues using setIterval. This is a best practices for iterator object array.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    
    $scope.queue = [];
    
    $scope.addQueue = function(){
       
        $scope.queue.push({
          name : $scope.name,
        money:$scope.money
      });
    }
    
    
    $scope.tratarFila = function(){

            if($scope.queue.length === 0){
          return false;
      }

            var indice = $scope.queue.filter(function(item){
          return item.money > 0;
        }); 
      
      if(indice.length === 0){
          return false;
      }

            var index = Math.floor(Math.random() * indice.length);
            var fila = indice[index];

            if(fila.money > 0){
          fila.money--;
        $scope.$apply();
      }
    };
    
    setInterval(function(){
        $scope.tratarFila();
    }, 50);
    
}

 

<div ng-controller="MyCtrl">
  
  <input ng-model="name" placeholder="nome"/>
  <input ng-model="money" placeholder="money"/>
  <button ng-click="addQueue()">
  adicionar user
  </button>
  <hr/>
  <ul>
  <li ng-repeat="q in queue">{{q.name}} - {{q.money}}</li>
  </ul>
  </ul>
  
</div>

http://jsfiddle.net/HB7LU/22825/

 

30/11/2015 Development / java script

I did two implementations using promisses.

One using angular, and other using node.

Angular Implementation

---------------------------------------------------------------------------

    var myApp = angular.module('myApp',[]);
    function MyCtrl($scope, $http, $q, $timeout) {

        $scope.response = [];
        $scope.brands = ['shoptime', 'americanas', 'submarino'];

        $scope.update = function(data){

            var promises = [];

            $scope.brands.forEach(function(brand){

                var deferred = $q.defer();
                var url = 'https://api.'+ brand +'.com.br/';
                promises.push($http.get(url, {params: {brand : brand}}, function (error, msg, body) {
                  if (error) {
                    deferred.reject();
                  }
                  deferred.resolve();
                }));
            });

            $q.all(promises).then(function (resp) {

                $scope.response = [];
                var arr = [];

                resp.forEach(function(obj){

                  var brand = obj.config.params.brand;
                  var body = obj.data;

                  var oas = body.oas[brand];
                  var oassitepage = body.oassitepage[brand];
                  var ftpupload = body.ftpupload[brand];
                  arr.push({ 'oas' : oas, 'oassitepage': oassitepage, 'ftpupload': ftpupload, 'brand' : brand });
                });

                $scope.response = arr;
            });

            $timeout($scope.update, 5000);
        };

        $scope.update();
    };

 

Node Implementation - using socket.io

------------------------------------------------------------------------------------

function requestUrl(socket){

  var promises = [];

  brands.forEach(function (brand){
    var deferred = Q.defer();
    var options = {url: 'https://api.'+ brand +'.com.br/'};
    promises.push(request(options, function (error, msg, body) {
      if (error) {
        deferred.reject();
      }
      deferred.resolve();
    }));
  })

  Q.all(promises).then (function (resp) {
    var body = resp;
    var arr = [];

    resp.forEach(function(obj){

      brand = obj[0].request.uri.host.replace("api.", "");
      brand = brand.replace(".com.br", "");

      body = JSON.parse(obj[0].body);

      var oas = body.oas[brand];
      var oassitepage = body.oassitepage[brand];
      var ftpupload = body.ftpupload[brand];
      arr.push({ 'oas' : oas, 'oassitepage': oassitepage, 'ftpupload': ftpupload, 'brand' : brand });
    });

    socket.emit('news', { 'brands': arr });
  }).catch(function(err){
    console.log(err);
  });

For B2W Implementation

09/11/2015 Development / java script

<!-- add a class to the first item -->
<ul>
    <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
    <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
    <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

 

09/11/2015 Development / java script

With plugin - http://codepen.io/anon/pen/dYgxNL

Without plugin - https://jsfiddle.net/bbgtjobb/

16/10/2015 Development / ferramentas

Este post tem como objetivo único e restrito ao meu conhecimento para buildar o projeto spacey.

Se você que esta lendo, não faz parte da equipe que eu trabalho, por favor desconsidere, rsrs

1) Baixar os projetos - git clone XXXXX

2) Rodar o git submodule update --init --recursive na raiz do projeto spacey

3) Instalar docker e docker-compose

docker : http://docs.docker.com/linux/step_one/

docker-compose : https://github.com/docker/compose/releases

Colocar no registry o endereço do repositorio : DOCKER_OPTS="--insecure-registry registry.atlas.b2w:5000"

para isso, executar o comando nano /etc/default/docker

4) Instalar node, grunt, bower

Play

 

25/09/2015 Development / java script

Essa semana eu comecei a dar uma olhada bem superficial no react e a principio comecei bem de leve, abri uma paginazinha no google, digitei react jsfiddle, entrei no primeiro exemplo e fui brincando.

A primeira impressão fiquei com pé atras, por ter visto o html misturado ao javascript, mas quando caiu a ficha que aquilo ali se tratava de um componente e que um componente tem vida propria e pode se comunicar com qualquer outro componente, pensei como existem pessoas inteligentes na face da terra!!!

E a partir dai fui brincando, brincando e fazendo os testes.

A minha missão era fazer uma pagina renderizar N componentes e dentro desses componentes, poderiam ter N componentes e ai por diante...

O desafio maior é que essa estrutura estava em um JSON.

var spacey = [{
    type : 'Position',
    position: 'x01',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
},{
    type : 'Position',
    position: 'x02',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
},{
    type : 'Position',
    position: 'x03',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
},{
    type : 'Position',
    position: 'x04',
    sm: 12,
    md: 6,
    lg: 6,
    items : [{
        type : 'Carrousel',
        items : [{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        },{
            type : 'Imagem',
            imgP : 'http://www.hiperativos.com.br/wp-content/uploads/2013/11/background.jpg'
        }]
    }]
}];

module.exports.spacey = spacey;

Ou seja, dentro desse JSON eu tenho um componente chamado Position, que dentro dele tem um componente chamado Carrousel que dentro dele tem componentes chamado Imagem.

E o desafio ficou maior quando eu decide aproveitar ao máximo o poder do REACT e fazer uma aplicação Isomorphica que respondia tanto no client como no server com o mesmo código :-)

Primeiro criei um servidor usando o EXPRESS

Server.js

// server.js

var express = require('express'),
path = require('path'),
app = express(),
port = 4444,
bodyParser = require('body-parser');

// JSX transpiler
require("node-jsx").install();

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

require('./app/routes/core-routes.js')(app);

app.get('*', function(req, res) {
    res.json({
        "route": "Ops, não encontrado"
    });
});

app.listen(port);
console.log('Server is Up and Running at Port : ' + port);

Feito isso minha preocupação foi fazer os componentes

Componente Position

/** @jsx React.DOM */

var React = require('react');
var Position = require('./Position');
var Carrousel = require('./Carrousel');
var Imagem = require('./Imagem');

var id = 0;
function newId(){
    return id++;
}
var Position = React.createClass({

    componentDidMount: function() {
        setTimeout(function(){
            //sp.getPublication();
        }, 5000); 
    },


    render: function() {

        var obj = {};
        obj['col-sm-' + this.props.properties.sm] = this.props.properties.sm;
        obj['col-md-' + this.props.properties.md] = this.props.properties.md;
        obj['col-lg-' + this.props.properties.lg] = this.props.properties.lg;
        obj['spacey-oas'] = 'spacey-oas';

        var classes = React.addons.classSet(obj);
        var dataPos = this.props.properties.position;


        if(this.props.items){
            var components = this.props.items.map(function(component){
            var module = React.createFactory(require('./' + component.type));
            var instance = React.createElement(module, {items: component.items, properties: component, key: newId()});
                return (instance);
            });            
        }
 
        return (<div className={ classes } data-pos={dataPos}><div className="well">{components}</div></div>);
    }
});

module.exports = Position;

Componente Carrousel

/** @jsx React.DOM */

var React = require('react/addons');
var Imagem = require('./Imagem');

var id = 0;
function newId(){
    return id++;
}

var Carrousel = React.createClass({

    //antes de carregar
    componentDidMount: function() {
        jQuery(this.getDOMNode()).not('.ready').addClass('ready').slick({infinite: true,slidesToShow: 1,slidesToScroll: 1});
    },

    //depois de carregar
    componentWillMount: function() {
    },

    render: function() {
        var components = this.props.items.map(function(component){
        var module = React.createFactory(require('./' + component.type));
        var instance = React.createElement(module, {items: component.items, properties: component, key: newId()});
            return (<div>{instance}</div>);            
        });

        return (<div className="slick-slider">{components}</div>);
    }
});

module.exports = Carrousel;

Componente Imagem

/** @jsx React.DOM */

var React = require('react/addons');

var Imagem = React.createClass({
    render: function() {
        return (<img src={this.props.properties.imgP} className='imagem img-responsive'/>);
    }
});

module.exports = Imagem;

Componente MyComponents - Responsavel por chamar todos os componentes.

/** @jsx React.DOM */

var React = require('react');
var Position = require('./Position');
var id = 0;
function newId(){
    return id++;
}

var MyComponents = React.createClass({
    render: function() {
        var obj = [].concat(this.props.obj);
        var components = obj.map(function(component){
        var module = React.createFactory(require('./' + component.type));
             return (React.createElement(module, {items: component.items, properties: component, key : newId() } ));            
        });
 
        return (<div>{components}</div>);
    }
});

module.exports = MyComponents;

3) Feito isso, fui fazer o arquivo que iria renderizar todo esse processo, o arquivo MAIN.JS do Client e o meu Core-Routes.js no Server

Core-routes.js

/* Server Side */
var React = require('react');
var MyComponents = React.createFactory(require('../components/MyComponents'));
var spacey = require('../data/spacey.js').spacey;
var http = require('http');

module.exports = function(app) {

    app.get('/', function(req, res){
        var reactHtml = React.renderToString(MyComponents({'obj' : spacey}));
        res.render('index.ejs', {reactOutput: reactHtml});
    });
};

Main.js - Client

/** @jsx React.DOM */
/* Client Side */    

var React = require('react');
var spacey = require('./data/spacey.js').spacey;

var MyComponents = require('./components/MyComponents');
var container = document.getElementById("react-main-mount");

var app = React.createElement(MyComponents, {'obj' : spacey});
app = React.render(app, container);

E por ultima a minha view que iria fazer o merge com os dados

  <div class="container-fluid">
    <div class="row">
      <div id="react-main-mount">
        <%- reactOutput %>
      </div>
    </div>
  </div>

<!-- se comentar esse cara só renderiza via server  -->
<script src="/main.js"></script>

E tambem um arquivo importantissimo que transforma os componentes no main.js, para isso usei o gulp

var gulp       = require('gulp'),
browserify = require('gulp-browserify'),
watch = require('gulp-watch'),
livereload = require('gulp-livereload');

gulp.task('scripts', function () {

    gulp.src(['app/main.js'])
        .pipe(browserify({
            debug: true,
            transform: [ 'reactify' ]
        }))
        .pipe(livereload())
        .pipe(gulp.dest('./public/'));

});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('app/**/*.js', ['scripts']);
});

gulp.task('default', ['scripts','watch']);

Ai foi juntar tudo isso e plaaaay! A parada é absurdamente animal

Espero que sirva para alguém ;-)

 

15/09/2015 Development / html

Maybe yourself not is understand pull and push col with bootstrap.

Sample.

<div class="container">
    <header class="row">
        
    </header>
    <div class="row">
        <div role="main" class="col-md-6 col-md-push-3">
            
        </div>
        <aside role="complementary" class="col-md-3 col-md-push-3">
            
        </aside>
        <nav class="col-md-3 col-md-pull-9">
           
        </nav>
    </div>
    <footer class="row">
        
    </footer>
</div>
07/09/2015 Development / iis

This is a command for start a simple server in windows.

CMD > python -m http.server 8080

open browser localhost:8080

Linux: python -m SimpleHTTPServer 8080

07/09/2015 Development / css
1) used * { border-sizing: border-box} 2) text-hide for h1.logo 3) clear-fix for float elements 4) text-overflow for ...text paragraph 5) visible-xs-* in elements alone desktop
07/09/2015 Development / java script

Hi guys.

I am development a system in my company, using component in components in loop.

I have a idea of using REACT and i development this script.

var obj = [{
    type : 'Carrousel',
    effect : 'fade',
    items : [{
        type : 'Product',
        productId: '121212121'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    },{
        type : 'Image',
        imgP: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150'
    }]
}];

var MyComponents = React.createClass({
    render: function() {
        var components = obj.map(function(component){
        var module = window[component.type]
            return (React.createElement(module, {items: component.items}));            
        });

        return (

{components}

);
    }
});

 


var Carrousel = React.createClass({
    render: function() {

        var components = this.props.items.map(function(component){
        var module = window[component.type]
        var instance = React.createElement(module, {properties: component})
            return (

  • {instance}
  • );            
            });

     

            return (

    • {components}
    );
        }
    });

     

    var Product = React.createClass({
        render: function() {
            return (

    Produto: {this.props.properties.productId}

    );
        }
    });

     

    var Image = React.createClass({
        render: function() {
            return ();
        }
    });

    React.render(, document.getElementById('container'));

    this is a jsfiddle

  • https://jsfiddle.net/69z2wepo/15430/

16/06/2015 Development / angular

I development a new CMS usign angular and this CMS has a menu recursive.

My solution:

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});

 

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

http://jsfiddle.net/brendanowen/uXbn6/8/

02/06/2015 Development / mobile

I tested my web site in google tools - google tools and google says.

18/06/2015 Development / angular

In Angular Material Design, exists any importants classes CSS.

  • md-primary
  • md-war
  • md-accent

This is classes, indicator the first colors on elements.

md-default-theme // Indicator the theme default

md-button // Indicator the button

md-raised // This is used for display: block in element em apply background color.

md-cornered // Create a button com border-radius: 0

md-padding // Add padding 16px default

Attibute layout-padding // Add padding 8px default

layout-wrap

 flex-sm="100" flex-gt-sm="50" flex-gt-md="25" // resolution

.md-ripple-container // add position absolute, left:0 top:0 width: 100%, height: 100%, pointer-events

md-fab md-fab-bottom-left fab-position // insert button with border-radius 50% left or right , bottom or top

md-medium-tall // used in <md-toolbar> 

02/06/2015 Development / angular

I did update the website wallstreetvideo.com.br

I used angularjs with materializecss because i want the material-design of  apperance.

I am studying angularjs, material-design and also frameworks.

My tips:

fastclick - change the click for touchstart

desable selection
-webkit-tap-highlight-color: rgba(0,0,0);
user-select:none

best scroll
-webkit-overflow-scrolling:touch;

acelerate application
-wekbit-transform: translate3d(0,0,0);

body no move
document.ontouchstart = function(){
event.prevendDefualt();
}

bbUI.js - framework of UI to mobile;

Frameworks

Finallity the website of my client - wallstreetvideo - I used only angular material design, never other framework.

04/05/2015 Development / java script

I developement a new implementation at b2wDigital.

http://jsfiddle.net/wa1mL8s2/

http://jsfiddle.net/rn8snfod/2/

This initial development, and hir next Post.

http://jsfiddle.net/rn8snfod/4/

21/04/2015 Development / soap

I development a solution for my company B2W Digital. We need using OAS real media SOAP and for this using Nodejs.

In my node index.js

var soap = require('soap');
var xml2js = require('xml2js');
var builder = new xml2js.Builder();
var parser = new xml2js.Parser({ explicitArray : false });

function requestOas( OasUrl, OasAccount, OasUser, OasPass, xml, callback){

  soap.createClient(OasUrl, function(err, client) {

    if (err) {
      callback(err);
      return;
    } 

    client.OasXmlRequest({
      String_1 : OasAccount,
      String_2 : OasUser,
      String_3 : OasPass,
      String_4 : xml
    }, function( err, data ) {

      if (err) {
        err = { errorStatus : err.code, errorMessage : 'SOAP error' };
      }

      if(data && data.result){
          parser.parseString(data.result, function(err, data) { 
            callback(err, data.AdXML.Response);
          });
      }else { 
        callback(err, data);
      }
    },
    {proxy: process.env.http_proxy || '', strictSSL: false});
  });
}

function OasApi(url, account, user, pass) { 
  this.url = url;
  this.account = account;
  this.user = user;
  this.pass = pass;
}

This a example for prototype method:

OasApi.prototype.addPage = function(url, callback) {

  var xml = {};
  xml.AdXML = {};
  xml.AdXML.Request = {
      $ : {
        type : 'Page'
      },
      Database : {
        $ : {
          action : 'add'
        },
        Pages : {
          Url : url
        }
      }
  };

  OasXml = builder.buildObject(xml);

  requestOas( this.url, this.account, this.user, this.pass, OasXml, callback );
};

Example for use this:

var oas = new OasApi('http://oas.realmedia.com.br?wsdl', 'Americanas', 'login','senha')

oas.addPage('url', function(resp){ console.log(resp) });

26/03/2015 Development / macetes

Windows is BAD!!!! very BAD

I need removed files with extension very long and Windows not realized this task.

My will solution do share folder in my network and access this files at network.

Thats great!!! Not instalation softwares ;-)

19/03/2015 Development / css

This is very nice. You can personalized console.logmessage styles google chrome.

How?

console.log('%cBlue!.', 'color: blue;');

The propertie %c receive style.

Or in Windows XP 

C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

.console-error-level .console-message-text{
    color: red;
}

.console-warning-level .console-message-text {
    color: orange;
}

.console-log-level .console-message-text {
    color:green;
}
18/03/2015 Development / php

I need to tranform sql query result text in Array. Sample:

[{"id":"71","nome":"Felipe","sobrenome":"Huggler","email":"fhuggler@hotmail.com","telefone":"2133967755,983500852,22332280"}]

to this

[{"id":"71","nome":"Felipe","sobrenome":"Huggler","email":"fhuggler@hotmail.com","telefone":["2133967755","983500852","22332280"]}]

Because in my view angular, I make loop to this information at list.

I used codeigniter framework for make querys, and my final solution is this.

    public function colaboradores(){
          $this->load->database();

            $this->db->select('colaboradores.id, colaboradores.nome, colaboradores.sobrenome, colaboradores.email, colaboradores.uf, colaboradores.cidade, colaboradores.bairro, colaboradores.valor, colaboradores.idfacebook, GROUP_CONCAT(telefones.numero) as telefone, GROUP_CONCAT(servicos.txtServico) as servicos');

            $this->db->from('colaboradores');
            $this->db->join('telefones', 'colaboradores.id = telefones.colaborador_id');
            $this->db->join('operadoras', 'operadoras.id = telefones.operadora_id');
            $this->db->join('colaboradores_servicos', 'colaboradores_servicos.colaborador_id = colaboradores.id', 'left');
            $this->db->join('servicos', 'servicos.id = colaboradores_servicos.servico_id', 'left');
            $this->db->group_by('colaboradores.id');
            $query = $this->db->get()->result();

            foreach ($query as $row){

                 $row->telefone = explode(",", $row->telefone);
            }

        echo json_encode($query);

    }

The big jump the cat is words in bold.

I'm happy to help you!

 

02/06/2015 Development / soap

Development a new service using SOAP for B2W Digital, i need tested service.

I used http://membrane-soa.org/soap-client/. Membrane its a free software.

02/06/2015 Development / html

jsFiddle

Imagem de 1px em base 64

 

12/01/2015 Development / java script

Mas que porra é essa?

Essa é uma porrinha que tem no site novo da MSN Brasil e que eu achei legal e tive a ideia de implementar.

http://jsfiddle.net/evqt871L/65/

update (ainda falta colocar o evento touch)

http://jsfiddle.net/evqt871L/69/

update

http://jsfiddle.net/evqt871L/72/ - agora com evento de touch

Espero que sirva!!!

06/10/2014 Development / angular

Quando usamos html5 mode do angular, precisamos reconfigurar as rotas dentro do servidor.

Segue um web.config de exemplo.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <rewrite>
      <!--This directive was not converted because it is not supported by IIS: RewriteBase /.-->
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^index\.html" ignoreCase="false" />
          <action type="None" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="." ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  </configuration>

Espero que sirva!

06/10/2014 Development / ferramentas

Utilizando o doskey para mapear comandos MS-DOS]

Modo de usar: doskey <nome> = tarefa

O ideial é salvar os comandos em um arquivo.bat e fazer um registro no regedit para que toda vez que o CMD seja aberto, ele execute esses mapeamentos, caso contrário, você terá que mapear toda hora, oque não valeria esse post.

Ex: autorun.bat - Obs: Eu deixei o meu salvo no diretório C:

@echo off
doskey suba = start.bat suba $*
doskey acom = start.bat acom $*
doskey shop = start.bat shop $*
doskey soub = start.bat soub $*
doskey sub = "C:\Program Files\Sublime Text 2\sublime_text.exe" $*
@echo on

No regedit abra: HKEY_CURRENT_USER\Software\Microsoft\Command Processor e adicione uma nova entrada chamada: AutoRun - com o valor C:/autorun.bat

Abra o CMD - teste seu mapeamento. No meu caso eu fiz ACOM, SUBA, SHOP e Sub para o sublime.

O $* siginifica que são parametros recebidos pelo mapeamento. Ex: Eu posso digitar suba update que vai funcionar ;-)

 

01/10/2014 Development / html5

Este é um exemplo de como customizar aquelas mensagens de alerta quando o formulário identifica que os campos não foram preenchidos ou não estão preenchidos corretamente.

<form>
    <p>Para submeter o formulário, preenche os campos abaixo.</p>
    <label for="one">Email: </label><input type="email" id="one" required data-errormessage-value-missing="Preencha o campo de e-mail" data-errormessage-type-mismatch="E-mail Inválido!">
    <label for="another">Email: </label><input type="email" id="another" data-errormessage="Generic error message">
    <label for="textarea">Textarea: </label><textarea id="textarea" required data-errormessage-value-missing="Adicione um mensagem"></textarea>

    <select required data-errormessage-value-missing="Por favor, escolhe um!">
        <option selected disabled value="">Opção 1</option>
        <option value="1">Um</option>
    </select>
    <button>Enviar</button>
</form>

Espero que sirva!

23/09/2014 Development / java script

Exemplo rapidinho de filter usando jquery com expressão regular. Nem preciso explicar o script, só pra caso um dia eu precise mesmo ;-)

    $(function() {    
        $('#input-search').on('keyup', function() {
          var rex = new RegExp($(this).val(), 'i');
            $('.searchable-container .items').hide();
            $('.searchable-container .items').filter(function() {
                return rex.test($(this).text());
            }).show();
        });
    });

18/09/2014 Development / css

Analizando um código do google, me interessei por esse efeitozinho.

<div></div>

div {
background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,0)));
-webkit-mask-box-image: -webkit-gradient(linear,left top,right top,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
border-top: 1px solid rgba(0,0,0,0.4);
height: 8px;
opacity: 0;
position: absolute;
width: 100%;
z-index: 300;
top: 69px;
opacity: 1    
}

Uma parada maneira é ir diminuindo a opacidade.

http://jsfiddle.net/yhhf8rqy/

16/09/2014 Development / asp.net

Hoje o pulo do gato é com relação a uma importante regra de SEO no qual o google prioriza os resultados de pesquisa.

Há um tempo, era comum ver urls do tipo index.asp?id=123&subid=321&produto=10

O meu blog mesmo era assim, até a escrita desse post.

Eis que um belo dia eu resolvi migrar a minha base de ACCESS, kkkkkkk para SQL Server e aproveitar e colocar a tal da url amigavel :-)

Primeiro eu pensei que fosse algo relacionado ao .htaccess, e é para servidores apache.

No meu caso, uso servidor windows, então a parada fica registrada no web.config

A configuração básica pra funcionar é a seguinte:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Reescrevendo a regra do artigo">
                  <match url="^artigo/([0-9]+)/([_0-9a-z-]+)" />
                  <action type="Rewrite" url="index.asp?i={R:1}" />
                </rule>
                <rule name="Reescrevendo a regra da categoria">
                  <match url="^categoria/([0-9]+)" />
                  <action type="Rewrite" url="index.asp?categoria={R:1}" />
                </rule>
                <rule name="Reescrevendo a regra da subcategoria">
                  <match url="^subcategoria/([0-9]+)/([_0-9a-z-]+)" />
                  <action type="Rewrite" url="index.asp?categoria={R:1}&amp;subcategoria={R:2}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

A tag match é o pulo! Tudo que começar com XXXXXX e que venha depois com as regras de sua expressão regular, vai ser redirecionado pra url em questão passando os parametros adicionais.

Molezinha neh!

Espero que sirva!

26/08/2014 Development / css

Triangulo Mágico!!!!

Oque é um triangulo mágico? Não tem nada haver com forró, muito menos com aqueles cubos mágicos, trata-se de uma técnica onde é possível mover-se entre os itens de um menu de forma diagonal.

Um exemplo de menu que não funciona:

Exemplo de menu que funciona:

Segue um link com algumas implementações - http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Porém essas implementações foram feitas usando javascript.

Implementei esse menu na nova página do submarino usando apenas css. :-)

Mas vamos ao que interessa.

Segue o link da implementação: - http://codepen.io/anon/pen/Cwnjq

O grande pulo do gato são as transitions:

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  transition-delay: 0.3s;

e utilizar opacitidade e visibilty.

Agora é só usar a criatividade e fazer um menuzão bolado!

Espero que sirva

 

04/08/2014 Development / css

Como eu sempre preciso dessas paradinhas com setas, fiz um demo rapidinho pra quando eu precisar ja ter um local pra copiar ;-)

http://jsfiddle.net/4m7Q8/

http://jsfiddle.net/4m7Q8/1/

Espero que sirva

22/07/2014 Development / css

Quando se usa display: inline-block o elemento cria uma margem extra, isto porque, inline-block é considerado um texto.

http://jsfiddle.net/sBUhm/

Uma solução bizarra pra esssa porra, é deixar todos os elementos na mesma linha :-(

http://jsfiddle.net/sBUhm/1/

Uma solução menos amigavel, mas um pouco melhor que deixar na mesma linha é deixar um comentario entre os elementos. :-|

http://jsfiddle.net/sBUhm/2/

A solução mais amigavel e indicada é colocar uma elemento PAI em volta dos filhos e usar letter-spacing. ;-)

http://jsfiddle.net/sBUhm/5/

Nesse caso usamos o tamanho negativo em EM, que independente da fonte do browser e do zoom da página, ele vai zerar as margens: 
* Dica do coisa!

Ou usando margin-left negativa. - Luiz Felipe Tartarotti Fialho

http://jsfiddle.net/sBUhm/6/

Espero que sirva

 

20/07/2014 Development / css

Esse lance de ficar calculando fonte size daqui, dali, acho mto perda de tempo. Por isso lancei essa tabelinha.

 

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%
02/07/2014 Development / html

Eu particularmente acho uma mierda, ficar criando icones ou aqueles eskemas de span com before e after pra deixar um icone com a aparencia de um icone de navegacao.

Descobri um macetinho.

        <label class="menu-icon" for="menuToggle">&equiv;</label>
        <label class="menu-icon" for="menuToggle">&#9776;</label>

Espero que sirva!

02/07/2014 Development / polymer

Muito tem se falado atualmente em polymer, e uns até chegam a dizer que será o sucessor do angular. Então antes disso, vamos separar os meninos dos homem!

Oque é Polymer? Polymer é uma library para a construção de componentes, NADA MAIS DOQUE ISSO!

Oque é Angular? Um buta framework completo para construção de sistemas e componentes.

E porque eu usaria polymer ao inves de angular? Porque vai cair na tendencia do mercado e o google vai padronizar essa porra toda!!! ou nao, rs

Link para um site foda de componentes: http://component.kitchen/

Um exemplo de construcao de componente usando polymer e usando angular.

1) Polymer

<!-- Importing Web Component's Polyfill -->
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.0/polymer.js"></script>

<!-- Importing Custom Elements -->
<link rel="import" href="src/gravatar.html">
</head>
<body>

<!-- Using Custom Elements -->
<h1>Hash</h1>
<gravatar-image hash="be74fd9a577ea5ef1ab2e7c71bcfa4b5"></gravatar-image>

<h1>Email</h1>
<gravatar-image username="djalma.araujo@gmail.com"></gravatar-image>

<h1>Different Size</h1>
<gravatar-image username="djalma.araujo@gmail.com" size="200"></gravatar-image>

<h1>Custom Default</h1>
<gravatar-image hash="huellwaitsdudeeeeeee" placeholder="http://trampt.com/images/products/000/071/306/Mr_White-The_Beast_Brothers-Acrylic-trampt-71306m.jpg?1345574938"></gravatar-image>

<h1>Default fallback</h1>
<gravatar-image hash="huellwaitsdudeeeeeee"></gravatar-image>

 Eis aqui o componente: gravatar.html

 

  <polymer-element name="gravatar-image" attributes="username size hash placeholder">
   
  <template>
  <style>
  img {
  margin: 0;
  padding: 0;
  }
  </style>
   
  <img id="username_image" />
  </template>
   
  <script src="scripts/md5.js"></script>
   
  <script>
  var Gravatar = {
  imageURL: function (email, size, hash, placeholder) {
  var avatarString = (hash.length > 0) ? hash : MD5(email);
   
  url = 'http://www.gravatar.com/avatar/' + avatarString + '.jpg?s=' + size;
   
  if (placeholder && placeholder.length > 0) {
  url += '&d=' + placeholder;
  }
   
  return url;
  }
  };
   
  Polymer('gravatar-image', {
  enteredView: function() {
  this.size = this.size || 80;
  this.hash = this.hash || "";
   
  this.$.username_image.src = Gravatar.imageURL(this.username, this.size, this.hash, this.placeholder);
  }
  });
  </script>
   
 

</polymer-element>

*************************************************************************************************************

Agora usando angular

<gravatar name="Felipe Huggler Luz" email="felipe@felipehuggler.com"></gravatar>

angular.module('components', [])
    .directive('gravatar', function () {
        return {
            restrict: 'E',
    link: function(scope, element, attrs, ctrl) {
    element.html("<img src='http://www.gravatar.com/avatar/" + hex_md5(attrs.email) + "?s=150'/><br/>Olá "+ attrs.name);
    }
}
})

angular.module('MyApp', ['components'])

link em acao: http://jsfiddle.net/9Ymvt/1810/

Qual eu prefiro? Nem preciso falar neh

Espero que sirva.

 

 

 

 

 

29/04/2014 Development / jsf

<h:outputText value="&lt;li class=item-sublinha&gt;" escape="false" />

&lt; <

&gt; >

29/04/2014 Development / XPath

The following table lists the comparison operators for comparisons between operands (single operands or calculation expressions) of various data types.

Operator Description
=EQ Equal: True, if the value of operand1 is equal to the value of operand2.
<>NE Not Equal: True, if the value of operand1 is not equal to the value of operand2.
<LT Less Than: True, if the value of operand1 is less than the value of operand2.
>GT Greater Than: True, if the value of operand1 is greater than the value of operand2.
<=LE Less Equal: True, if the value of operand1 is less than or equal to the value of operand2.
>=GE Greater Equal: True, if the value of operand1 is greater than or equal to the value of operand2.

 

Comparison of the values takes place according to the comparison rules. 
 

Notes

  • The operators =<><><=, and >= are exactly the same as EQNELTGTLE, and GE.
  • It is recommended that you use only one type of operator in the context of a program. If you are unsure of which to use, the variant with the characters =<, and > is considered more modern, but can also lead to an overload of these characters. In contrast, the logical two-letter operators are more suited to other logical operators such as COCN, and so on, for which no alternative exists.
  • Due to comparison rules, the size comparisons shown here are not only suitable for determining a textual sequence of character-like data objects.
  • Outside of classes, the obsolete forms ><=<=> of relational operators can also still exist.
  •  
09/04/2014 Development / java script

Fiz esse scriptzinho na hora do almoço para usar em uma aplicação.

Espero que sirva.

http://jsfiddle.net/jPfCX/406/

12/03/2014 Development / photoshop

Dica do Allan

Apos agrupar a imagem.

control a
contrl c
control n
control v

e pra exportar: control + alt + shift + s

 

Dica do Maestro

control + H = tirar as guias

25/02/2014 Development / java script

Script pra controlar o audio.

http://jsfiddle.net/tfSTh/44/

16/02/2014 Development / grunt

Essa semana eu fiz o arquivo que gera todas as tarefas do SIO, como:

Minificar e gerar o js;
Buildar todos os arquivos sass, minificar;
Gerar o pacote;

O arquivo ficou mais ou menos assim:

 module.exports = function(grunt) {

 // Project configuration.
 grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),

    /* 1- Minifica o js */
    /****************************************************************************/
    uglify: {
     options: {
       compress: true,
       banner: '/*! <%= pkg.name %> - <%= pkg.author %> - <%= grunt.template.today("yyyy-mm-dd") %> */\n'
     },
     build: {
       src: 'Core/js/funcoes.js',
       dest: 'Core/js/funcoes.min.js'
     }
    },


    /* 2- Testa o js */
    /****************************************************************************/
    jshint: {
      ignore_warning: {
          options: {
              '-W061': true,
              '-W030': true
          },
          src: ['Core/js/funcoes.js'],
      }
    },   

    /* 3-  Gera e Minifica todos os css .scss */
    /****************************************************************************/
    sass: {
        dist: {
            options: {
                outputStyle: 'compressed'
            },
            files: [{
        expand: true,
        src: ['Core/**/*.scss'],
        ext: '.css'
        }]
      }
    },

    /* 4- Copia todos os arquivos pra pasta build target */
    /****************************************************************************/
    copy: {
        main: {
            expand: true,
            cwd: 'Core/',
            src: ['**'],
            dest: 'build/'
        },

        /* 4-2 Copia apenas a pasta do meu projeto em execucao para a pasta build */
        /****************************************************************************/
        my_build:{
            expand: true,
            cwd: 'Core/css/appThemes/' + grunt.option('target'),
            src: ['**'],
            dest: 'build/css/appThemes/' + grunt.option('target')
          }
    },

    /* Apaga os themas desnecessarios */
    /****************************************************************************/
    clean: {
      build : {
        src : ["build/css/appThemes","build/imagens/png","build/css/componentes","build/css/*.scss","build/js/funcoes.js"]
      },
      my_build : {
       src : ["build/css/appThemes/" + grunt.option('target') + "/css/estilo.scss"] 
      },
      init : {
       src : ["build"] 
      }
    },


    /* Fica escutando alteracoes nos arquivos */
    /****************************************************************************/
    watch: {
        options: {
            livereload: 1337,
        },
        scripts: {
            files: ['Core/**/*.js'],
            tasks: ['build']
        },
        css: {
            files: ['Core/**/*.css'],
            tasks: ['build']
        }
    }
 });

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');

 // Default task(s).
 grunt.registerTask('build', ['clean:init','uglify','jshint','sass','copy','clean:build','copy:my_build','clean:my_build']);
 grunt.registerTask('default', ['watch']);
};

 

30/01/2014 Development / css

Entrei no site da estacio e vi essa lista e decidi inspecionar o css. Acabei gostando e alterando algumas coisas para caso um dia eu precise.

Se for util!

http://codepen.io/anon/pen/BgioF

29/01/2014 Development / grunt

Fiz esse scriptzinho para ler um json de plugins de colocar os arquivos em cada marca de e-commerce. Serve para o submarino, shoptime, americanas e soubarato.

A ideia é seguinte

Estrutura das pastas

- acom
- soub
- shop
- suba
- plugins
 -- slider
 -- superzoom
 -- etc...
 -- config.js
 -- gruntfile.js

Arquivo config.js

{
    "superzoom": ["acom","soub"],
    "validate": ["acom"],
    "carouFredSel":["acom"],
    "mustache":["acom"],
    "jquery":["acom"]
}

Arquivo Gruntfile.js

module.exports = function(grunt) {

    /* Carrega todos os mapeamentos de tarefas */
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

    // configuração do projeto
    grunt.initConfig({

        watch : {
            scripts: {
            files: ['**/*.js'],
            tasks: ['copy_plugins'],
            options: {
              spawn: false,
            },
          },
        }
    }); /* fim do initConfig */


    /* Registra a tarefa */
    grunt.registerTask('copy_plugins', 'Copia de Plugins', function(){

        /* Deleta todas as pastas da pasta vendor de determinada MARCA */
        var marcas = ['acom','suba','soub','shop'];

        for (var i = 0; i<marcas.length; i++) {
            grunt.file.delete("../" + marcas[i] + "/catalog/app/scripts/vendor/",{
                force:true
            })
        }

        /* Leitura do Json config.js */
        var config = grunt.file.readJSON('config.js', {
            encoding: 'utf-8'
        });

        /* Parse dos Plugins */
        var plugins = Object.keys(config);

        var pluginsLenght = plugins.length,
            plugin,
            pluginName,
            marcas;

        /* Itera sobre os plugin existentes no arquivos de configuracao */
        for (var i = 0; i<pluginsLenght; i++) {

            console.log("**************************** Plugin " + i + "*******************************");

            pluginName = plugins[i];
            marcas = config[pluginName];

            console.log("Nome: " + pluginName);
            console.log("Marcas: " + marcas);

            var srcpath = pluginName + "/*.js";
            var files = grunt.file.expand({cwd: srcpath});

            var marcasLenght = marcas.length,
                marca;

            /* Itera sobre os arquivos existentes na pasta do Plugin */
            grunt.file.recurse(pluginName, function(abspath, rootdir, subdir, filename){

                /* Itera sobre as marcas que o plugin vai existir */
                for (var x = marcasLenght - 1; x >= 0; x--) {
                    
                    marca = marcas[x];

                    var destpath = "../" + marca + "/catalog/app/scripts/vendor/" + pluginName + "/";

                    if(!grunt.file.isDir(destpath)){
                        console.log("O diretorio " + destpath + " foi criado com sucesso.");
                        grunt.file.mkdir(destpath);
                    }

                    var filepath = pluginName+"/"+filename;
                    var filedest = destpath+"/"+filename;

                    grunt.file.copy(filepath, filedest);
                }
            })

            console.log("\n");
        }
    });

    /* Registra a tarefa default */
    grunt.registerTask('default', ['watch']);
}

 

15/01/2014 Development / java script

http://jsfiddle.net/r2hnL/

To estudando ainda!

14/01/2014 Development / css

Esse é só um postzinho pra mostrar como eu venho fazendo as minhas extensões de classes em CSS.

http://jsfiddle.net/9B3XM/

 

19/12/2013 Development / java script

.animate-enter, 
.animate-leave

    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: absolute;

 
.animate-enter {
    left: 100%;
}
.animate-enter.animate-enter-active {
    left: 0;
}
 
.animate-leave {
    left: 0;
}
.animate-leave.animate-leave-active{
    left: -100%;
}

<div ui-view ng-animate=" 'animate' "></div>

29/04/2015 Development / css

Segue um exemplo só para colocar em prática mesmo!

http://jsfiddle.net/ScXD3/2/

http://jsfiddle.net/5q5adj17/1/

 

04/12/2013 Development / css

Vai que alguem precise, segue um exemplo rapidinho.

http://jsfiddle.net/bexu4/

01/12/2013 Development / java script

DomNodeInserted, é um evento que escuta todas as mudanças no documento.

Imagina que a cada elemento criado dinamicamente em nossa página, iremos adicionar uma borda vermelha. Qualquer elemento mesmo! Independente da ação a qual ele este vinculado.

<p><button id="insert">Insert</button></p>

$(document).bind('DOMNodeInserted', function(e) {
    var element = e.target;
        $(element).css("border", "1px solid red");
});

$('#insert').click(function() {
    $('<div id="test"/>').
    text('Test').
    appendTo('body');
});

$('#insert2').click(function() {
    $('<div id="test2"/>').
    text('Test2').
    appendTo('body');
});

http://jsfiddle.net/XaTCh/358/

28/11/2013 Development / php

Isso é só um lembrete mesmo.

Usando " ou ' ,

aspas simples não é feito parser por caracteres de controle, como o \n

echo '\n'; nao funciona

echo "\n"; funciona

Espero que sirva

26/11/2013 Development / java script

No exemplo abaixo, Restrict, é configurada com um valor ‘E’.

Este ‘E’ vem de Elemento, ou seja, você está dizendo que a diretiva deve funcionar restritamente como um elemento.

O padrão é ‘A’, de Atributo. Você também pode aceitar as duas formas, basta configurar como ‘AE’.

Diretivas:

Restrict

E = Elemento
<my-directive></my-directive>

A = Atributo
<div my-directive="exp"></div>

C = Classe
<div class="my-directive: exp;"></div>

M = Comentario
<!-- directive: my-directive exp -->

angular.module(‘app.directives.customcontrols’, [])

.directive(‘loginControl’, function() {

return {

          restrict: ‘E’,

template: ‘<h1>Meu primeiro control customizado!</h1>’

};

});

25/11/2013 Development / django

Vamos ver se esse negócio é bão mesmo!

Inicialmente achei muito, mas muito tranquilo mesmo a parte de instalação e configuração.

Agora vamos ver a parte de codificação!

21/11/2013 Development / java script

Eh isso mesmo, console.table, ele renderiza os dados no formato de uma tabelinha.

function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; }

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

Espero que sirva!

 

26/10/2013 Development / css

Esse códigozinho foi criado para fazer as bordas laterais.

.box-shadow1 {
position: relative;
box-shadow: 12px 0px 15px -15px rgba(0,0,0,0.8);


.box-shadow1:before {
content: "";
position: absolute;
z-index: -1;
box-shadow: -12px 0px 15px -15px rgba(0,0,0,0.8);
top: 10px;
bottom: 10px;
left: 0;
right: 0;

http://jsfiddle.net/uaXuU/

Espero que sirva!

 

01/10/2013 Development / css

Hoje eu comecei a dar uma olhada mais profunda em SASS.

Particularmente eu achei animal a ideia da parte de escrita e compilação. Poder colocar todos os arquivos num mesmo diretório e depois que salvar automaticamente já sair um css compressado, achei do caraleo.

Então, vamos lá:

  1. Instalar o Ruby - http://rubyinstaller.org/downloads/
  2. Depois rode no cmd - gem install sass
  3. Agora você já pode usar o sass.

O ideial é que você sempre crie uma pasta em seu projeto chamada sass e outra css.

Na pasta sass, você coloca todos seus arquivos scss.

Você pode compilar seu arquivo manualmente : sass input.scss output.css ou fazer uma escuta na pasta, e a qualquer alteração de qualquer arquivo, ele compila automaticamente: sass --watch sass:css 

Você ainda pode compactar o css e até mesmo fazer uma compressão do arquivo.

1) sass --watch sass:css --style compact --no-cache
2) sass --watch sass:css --style compressed --no-cache

Uma outra dica é deixar todos os arquivo .scss com o underline no nome

_grid.scss
_buttons.scss
_nav.scss

e um arquivo default.scss e nesse default, você usar os imports

@import "grid";
@import "buttons";
@import "nav";

Quando rodar, o arquivo default vai ser gerado com todos os css agrupados.

Espero que sirva!

 

17/01/2014 Development / java script

Ultima versão do script

http://codepen.io/anon/pen/btDjA

 

Eu fiquei cansado de ficar procurando um plugin jquery que fixasse minha thead e meu tfoot e decidi fazer o meu próprio pluginzinho.

Está ainda no inicio, mas já atende minha necessidade.

Versao final saindo do forno!!!!!! Feliz pra caraleo, meu FixedGrid funcionando 100%.

HFGrid

 

http://jsfiddle.net/nJMAs/8/

Update: http://jsfiddle.net/nJMAs/10/

Codepen: http://codepen.io/anon/pen/GzwpF

Update goood:

http://codepen.io/anon/pen/nhkAJ

http://codepen.io/anon/pen/Fjyba

Espero que sirva!

06/07/2013 Development / asp.net

Esse código é referente a uma customização de controle fazendo um override na classe RadioButtonList no framework 3.5

No framework 4.5 não precisa disso porque o controle tem alguns outros tipos de listagem.

Porque dessa customização? 

No framework 3.5 o RadioButtonList gera uma lista fora dos padrões da atualidade. Tipo gerando table, tr, td...Enfim, meio zuado. Então esse codigo serve pra tirar o lixo e deixar só oque você vai usar mesmo.

public class HtmlTextWriterNoSpan : HtmlTextWriter {
    ///Text writer.
    public HtmlTextWriterNoSpan(TextWriter textWriter) : base(textWriter)  { }
    
    protected override bool OnTagRender(string name, HtmlTextWriterTag key)  {
        // Do not render tags
        if (key == HtmlTextWriterTag.Span)
        return false;
        
        return base.OnTagRender(name, key);
    }
}

public class CustomRadioButtonList : RadioButtonList {

    protected override void Render(HtmlTextWriter writer) {
        // Use custom writer
        writer = new HtmlTextWriterNoSpan(writer);
        base.Render(writer);
    }

    protected override void RenderItem(ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer){
        HtmlGenericControl li = new HtmlGenericControl("li");
        
        li.Attributes.Add("class", "it");
        li.Page = this.Page;
        
        ListItem item = this.Items[repeatIndex];
        RadioButton radioButton = new RadioButton();
        radioButton.Page = this.Page;
        radioButton.GroupName = this.UniqueID;
        radioButton.ID = this.ClientID + "_" + repeatIndex.ToString();
        radioButton.Text = this.Items[repeatIndex].Text;
        radioButton.Attributes["value"] = this.Items[repeatIndex].Value;
        radioButton.Checked = this.Items[repeatIndex].Selected;
        radioButton.TextAlign = this.TextAlign;
        radioButton.AutoPostBack = this.AutoPostBack;
        radioButton.TabIndex = this.TabIndex;
        radioButton.Enabled = this.Enabled;
        
        //radioButton.CssClass = "it";
        //radioButton.Style.Add(HtmlTextWriterStyle.BackgroundColor, this.Items[repeatIndex].Text);
        li.Controls.Add(radioButton);
        
        //writer.RenderBeginTag(HtmlTextWriterTag.Li);
        //writer.Write(item.Text);
        //writer.RenderEndTag();
        
        li.RenderControl(writer);
    }
}

Chamando o controle.

lstCampo = new CustomRadioButtonList();
lstCampo.ID = string.Format("seleciona-{0}", Campo);
lstCampo.CssClass = string.Format("lista-{0} radio-{0} customRadio", Campo);
((RadioButtonList)lstCampo).RepeatLayout = RepeatLayout.Flow;
((RadioButtonList)lstCampo).RepeatDirection = RepeatDirection.Horizontal;
lstCampo.AutoPostBack = true;

Espero que sirva.

01/07/2013 Development / css

Hoje comecei a estudar o uso do atributo content do css3. Simplesmente animal. Um bom exemplo disso, é no uso de colocar as aspas duplas em um blockquote.

Vou postar alguns links de referência e uma demo no jsfiddle. Só usar a criatividade.

/* Aspas Duplas curvas cross browser */ 
blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

  1. http://www.evotech.net/articles/testjsentities.html
  2. http://css-tricks.com/snippets/html/glyphs/
  3. http://www.danillocesar.com.br/4-boas-utilidades-para-o-uso-do-atributo-content-do-css
  4. http://css-tricks.com/css-content/
10/06/2013 Development / php

    <ul class="product-list">
    <?php for($i=0;$i < 11;$i++): ?>
        <li class="prod-it">
            <img class="prod-img" src="img/exemplo_produto_sumario.png" alt="">
            <strong class="prd-tit">Tênis nike</strong>
            <ul class="prd-info">
                <li class="info-it"><strong>Entrega:</strong>3 dias úteis*</li>
                <li class="info-it qtd"><strong>Quantidade:</strong></li>
                <li class="info-it price-unit"><strong>Valor Unitário:</strong>R$ 40,00</li>
                <li class="info-it price-ship"><strong>Total com Frete:</strong>R$ 40,00</li>
            </ul>
        </li>
    <?php endfor; ?>
    </ul>

Achei interessante a sintaxe desse endfor.

 

25/06/2013 Development / java script

Função para saber quais métodos estão atachados no seu seletor. Utilizo muito quando estou fazendo engenharia reversa no site de terceiros ou plugins.

var clickEvents = $._data($('.shop')[0], "events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
console.log(handlerObj.handler);
});

16/05/2013 Development / php

date("d/m/Y", strtotime($row['DtNasc']))

 

25/06/2013 Development / php

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST'){

$nome = $_POST['nome'];
$apelido = $_POST['apelido'];
$DtNasc= $_POST['DtNasc'];

$con = mssql_connect("SQLSERVER01.xxxxxx.COM.BR", "usuario", "senha");

mssql_select_db("concept21",$con);
$result = mssql_query("Update tabela set nome = '$nome',apelido = '$apelido',DtNasc = 'CONVERT(DateTime, '$DtNasc', 103)' where Email='". $_SESSION['userEmail'] ."')", $con);

if(!$result){
        echo mssql_error();
        exit;
    }
mssql_close($con);
echo "Dados cadastrados com sucesso";
?>

16/05/2013 Development / php
$con = mysql_connect("localhost", "banco", "abc123") or die('Não foi possível conectar');
$nome = $_POST['nome'];
$nome_completo = $_POST['nome_completo'];
$idade = $_POST['idade'];
mysql_select_db("my_db", $con);
mysql_query("INSERT INTO pessoas (nome, nome_completo, idade) VALUES ('$nome', '$nome_completo', '$idade')");
mysql_close($con);
16/05/2013 Development / php
Soh um exemplo para ter quando precisar. Essa semana precisei e não quis ficar batendo cabeça.

// *************************************************************************************
/* Codigo para conectar na base e trazer os dados os resultados */
// *************************************************************************************
$con = mssql_connect("servidor", "login", "senha");
mssql_select_db("concept21",$con);

$SQL = "SELECT * FROM tabela";
$res = mssql_query($SQL,$con);
//seu codigo de header de tabela

while($row = mssql_fetch_array($res))
{
$nomeatleta = $row["NomeAtleta"];
$pais= $row["Pais"];
$cidade = $row["Cidade"];
$cidade = $row["Cidade"];
$idade= $row["Idade"];
$peso = $row["Peso"];
$data = $row["DtRecorde"];
$tempo = $row["Tempo"];
$distancia = $row["Distancia"];

//seu codigo de tbody de tabela

}

15/05/2013 Development / html5

Esse eh um template que eu fiz de loja virtual usando bootstraap

 

http://www.felipehuggler.com/bike

 

 

10/04/2013 Development / ferramentas

Hoje eu terminei a ferramenta de CMS da empresa Dr.Celular.

Eis algumas telas do sistema que foi feito usando bootstrap.

 

10/04/2013 Development / java script

O exemplo é esse aqui.

http://imoveis.felipehuggler.com/

E o script é basicamente este:

    var menu = $("ul#menu-front"); // é o menu que queremos abrir ou fechar
    function showMenu(event) {
 
        if(menu.is(":visible"))
            menu.slideUp({ complete: function() { $(this).css('display', '') } });
        else
        menu.slideDown();
    }

    var button = $("#menu-back a"); // é o botão que vai testar se esta fechado ou aberto

    button.live("click", function() {
        showMenu();
    });

Espero que sirva!

 

22/08/2013 Development / css

Recentemente fiz uma prova em uma avaliação profissional e caiu o exercício para fazer uma lista com espaçamento. Na hora o meu exame ficou uma merda e resolvi dar uma estudada e eis o resultado correto.

 

 

  • 1

  • 2

  • 3

 

 

li {
    width: 40%;
    display: inline-block;
    list-style-type: none;
    margin:0;
}
li div{
 margin-right: 5px;
    background: blue;
    min-height: 250px;
}
.area { width: 20% !important; }

li.area div{
    background: red;
}

http://jsfiddle.net/zKUXA/

É muito bom saber que você não sabe tudo! Sempre aprendendo!

Espero que sirva!

 

21/02/2013 Development / css

.elemento {
display:inline-block;
*display:inline; /* IE7 */
zoom:1
}

Espero que ajude!

Após realizar a prova 70-480 comecei a estudar para a 70-486

Vamos lá! Quem quiser estudar também, segue um link que eu estou usando como referência.

http://www.bloggedbychris.com/2012/11/06/microsoft-exam-70-486-study-guide/

https://docs.google.com/document/d/1iZ8RS6VuB0GFO2BQdYxkmywK1ZBn75fzzGm9F5s82l0/edit#

Espero que ajude!

 

02/02/2013 Development / java script

Fiz esse scriptinho mais pra saber mesmo qual seria o grau de dificuldade em implementa-lo.

É interessante você dar ao usuário o poder de selecionar vários ao mesmo tempo e como o shift já é um padrão, vamos colocar em prática!

 

<input type="checkbox" name="ch" value="1"/>
<input type="checkbox" name="ch" value="2"/>
<input type="checkbox" name="ch" value="3"/>
<input type="checkbox" name="ch" value="4"/>
<input type="checkbox" name="ch" value="5"/>
<input type="checkbox" name="ch" value="6"/>
<input type="checkbox" name="ch" value="7"/>
<input type="checkbox" name="ch" value="8"/>

$().ready(function(){
 $("input").on("click", function(e){
  if(e.shiftKey){
   $('input:checked').prevAll().attr("checked", "checked");
  }
 })
});

http://jsfiddle.net/6gTCk/

Espero que sirva!

 

Esse ano já cumpri umas das metas! Vamos que vamos, devagar e sempre! Obrigado Senhor.

 

28/01/2013 Development / asp3

Em um dos sistemas que venho trabalhando, transformei as imagens que são feito uploads em formato binário e na hora de fazer a leitura, criei um handler que transforma os binários em imagem.

Porem, percebi que isso está deixando o sistema lento e para fazer um testículo, transformei novamente todas as imagens que eram destaque para o formato jpg novamente.

Eis o código

//*************************************

<%
Server.ScriptTimeout = 9000
sql = "select * from tabMedia where booDestaque = 1"
openConnection()
set rs = server.createobject("adodb.recordset")
rs.open sql,conexao,3,3
Dim caminho : caminho = server.MapPath("uploadsFiles/")
while rs.eof = false

'***********************************************************************************************************
'***********************************************************************************************************
Dim objFSO
Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
Dim objTextStream
Set objTextStream = objFSO.CreateTextFile(caminho & "/" & rs("idMedia") & ".jpg", True)
'Display the contents of the text file
objTextStream.WriteLine BinaryToString(rs("binario"))
'Close the file and clean up
objTextStream.Close
Set objTextStream = Nothing
Set objFSO = Nothing


rs.movenext
wend

 

 '*********************************************************************************************
 'Transforma Binario em String
 '*********************************************************************************************
    Function BinaryToString(Binary)
      Const adTypeText = 2
      Const adTypeBinary = 1
     
      Dim BinaryStream
      Set BinaryStream = Server.CreateObject("ADODB.Stream")
     
        BinaryStream.Type = adTypeBinary
        BinaryStream.Open
        BinaryStream.Write Binary
        BinaryStream.Position = 0
        BinaryStream.Type = adTypeText
        BinaryStream.CharSet = "ISO-8859-1"
       
        'Save binary data To disk
        'BinaryStream.SaveToFile FileName, adSaveCreateOverWrite
     
      BinaryToString = BinaryStream.ReadText
    End Function

 

Espero que sirva!

 

15/01/2013 Development / java script

Função para o browser te auto-localizar!!!

function success(position) {
    var s = document.querySelector('#status');

    if (s.className == 'success') {
        return;
    }

    s.innerHTML = "Você foi localizado!";
    s.className = 'success';

    var mapcanvas = document.createElement('div');
        mapcanvas.id = 'mapcanvas';
        mapcanvas.style.height = '400px';
        mapcanvas.style.width = '560px';

    document.querySelector('article').appendChild(mapcanvas);

    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"Você está aqui!"
    });

}

function error(msg) {
    var s = document.querySelector('#status');
        s.innerHTML = typeof msg == 'string' ? msg : "falhou";
        s.className = 'fail';
}

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    error('Seu navegador não suporta <b style="color:black;background-color:#ffff66">Geolocalização</b>!');
}

 

10/01/2013 Development / java script

Estudando como os sliders são feitos, eu comecei a refatorar um código de um plugin chamado jMask.

A principio eu cheguei nessa solução:

(function ($) {
    $.fn.jMask = function (options) {

        var $this = $(this);
        var pic = $this.find("IMG");
        var tot = pic.length-1;
        var num = tot;

        setInterval(function () {

            var $active = $this.find("IMG.active");
            if ($active.length == 0) $active = $this.find("img:last");
            var $next = $active.next().length ? $active.next() : $this.find("img:first");

            $this.animate({ height: $next.height() }, 1000, function () {

                $active.addClass('last-active');
                $next.css({ opacity: 0.0 }).addClass('active').animate({ opacity: 1.0 }, 1000, function () {
                    $active.removeClass('active last-active');
                });
            });
        }, 5000);
    }

})(jQuery);

Nesse cenário, pegamos todas as imagens que estiver dentro do container e vamos apenas fazendo um next, last, first...Filé neh!!!

Mas por uma questão de performance e deixar o código mais injuto, pensei na seguinte implementação:

(function ($) {
    $.fn.jMask = function (options) {

        var $this = $(this);
        var pic = $this.find("IMG");
        var tot = pic.length-1;
        var num = tot;

        setInterval(function () {

            num = (num || tot);
            $this.animate({ opacity: 0 }, 'slow', function () {
                $this.css({ "background-image": "url('" + pic.eq(num--).attr("src") + "')" }).animate({ opacity: 1 });
            });

        }, 5000);
    }

})(jQuery);

O css fica mais ou menos assim:

        .slideshow {
            text-align:center;
            z-index: 11;
            overflow:hidden;
            display:block;
            height: 250px;
            width:100%;
            background-position: center top;
            background-repeat: no-repeat;
        }

        .slideshow IMG
        {
            text-align: center;
            margin: 0 auto;
            display: none;
            overflow:hidden;
        }

$(".slideshow").jMask();

Espero que sirva!

 

06/01/2013 Development / java script

<div id="map-canvas">
<div id="map" style="width:100%;height:300px;"></div>
</div>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
    scrollwheel: true,
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions );

var address = 'Hugo Panasco Alvim';
geocoder.geocode(
    { 'address': address},
    function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
           
            marker = new google.maps.Marker({
                draggable: true,
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert('Localização não encontrada.');
        }
    }
);

 

12/12/2012 Development / css

Agora SIIIIIIM!

<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

width:100%;
padding: 5px;
border:1px solid blue;
}
div input
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
padding: 5px;
width:100%;
border:1px solid red;
}
</style>
</head>
<body>

<div class="container">
<input type="text">
</div>

</body>
</html>

 

23/06/2013 Development / sinacor

Prefixo das Tabelas

TSC = Clientes
TCC = Conta Corrente
TTS = Tesouraria
TOR = Ordens Bolsa
TBO = Faturamento Bolsa
TCA = Controle de Acesso
TMF = Faturamento de BM&F
TCF = Custodia
TGE = Controle de Empresas
TBT = Faturamento de BTC
 Parte Cadastral

TSCCLIGER = Cliente
TSCCLIBOL = Bolsa
TSCCLICC =Conta Corrente
TSCCLICUS = Custodia
TSCCLICTA = Controle de Ações
TSCCLISWA = Swap
TSCCLIBMF  = BM&F
Controle de Fechamento

TORDATMOV = Controla a parte de ordens da bolsa ( Fechamento )
TBOPARAM = Faturamento de Bolsa
TCFPARAMETRO = Custodia
TCCPARAM = Conta Corrente
TTSPARAM = Tesouraria
TBTPARAMETRO=Faturamento BTC (Aluguel de ações)
TSCPARM
Tabelas Importantes:

tordmega_e = Erros
torhub_txt = Pacotes
torsinl_ofer = sinal
tgesinst e tgesist = versão do banco de dados
tormovd = movimento
tornegd = negocios

 

23/06/2013 Development / sinacor

Há um código para negociar no HB e que identifica a data de vencimento de um contrato futuro. Os contratos de mini-índice começam pelas letras WIN  seguidas da letra do mês e ano de vencimento, já os de mini-dólar começam pelas letras WDO seguidas da letra do mês e ano de vencimento.

Em resumo, o código do mini-índice Bovespa é: WIN + Mês + Ano. Dólar Comercial: WDO + Mês + Ano.

Vencimentos: F JAN – G FEV – H MAR – J ABR – K MAI – M JUN – N JUL – Q AGO – U SET – V OUT – X NOV – Z DEZ

O mini-índice Ibovespa tem os seguintes meses de vencimento:
G (Fevereiro), J (Abril), M (Junho), Q (Agosto), V (Outubro) e Z (Dezembro).

Exémplo: O código de negociação WINZ11, portanto, corresponde ao minicontrato Ibovespa com vencimento em dezembro de 2011. WING12 – vencimento em Fevereiro de 2012. WDOZ13 – minicontrato de Dólar, vencimento em Dezembro de 2013.

Você pode operar contratos de vencimentos posteriores, mas quanto mais perto do mês que está pra vencer, maior a volatividade do mesmo.

 

21/11/2012 Development / java script

<html ng-app>
    <head>
        <title>Lista de compras</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js" type="text/javascript"></script>
        <script src="Scripts/angular-ui-0.3.1/build/angular-ui.js" type="text/javascript"></script>


        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
       
        <style type="text/css">
            .negative { color: white; background: red}
            .positive { color: white; background: green}
         td { font-family: Arial; font-size: 11px; width: 50px; text-align: center }
        </style>

    </head>
    <body>
   
    <h1>Grid de Cotações utilizando AngularJS</h1>
    <div ng-controller="GridModel">
        <table border="1" cellspacing="0" cellpadding="7">
            <tr>
                <td></td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td></td>
            </tr>
            <tr ng-repeat="item in itens">
                <td><input type="text" value="{{ item.price }}" /></td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td ng-click="removeItem()"><i class="icon-remove"></i></td>
            </tr>
        </table>

        <input type="text" id="cotacaotxtStock" />
        <button type="button" ng-click="addItem()">Adicionar Ativo</button>
        <button type="button" ng-click="removeItem()">Remover Ativo</button>
    </div>

        <script>

            var change = ['+', '-', '='];

            function getTime() {
                var now = new Date();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
                timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
                timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
                timeValue += (hours >= 12) ? " PM" : " AM";
                return timeValue.toString();
            };

            function Quote(stock) {

                this.stock = stock;
                this.volume;
                this.date;
                this.time;
                this.change;
                this.sales;
                this.price;
            };

            var initialStockData = [];
            var arrStocks = ['PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4'];
            for (var x in arrStocks) {
                initialStockData.push(new Quote(arrStocks[x]));
            }

            function GridModel($scope) {
                $scope.itens = initialStockData;

                $scope.addItem = function () {
                    $scope.itens.push(new Quote(document.getElementById('txtStock').value));
                };

                $scope.removeItem = function () {
                    $scope.itens.pop();
                };

                $scope.update = function () {

                    var items = $scope.itens;
                    var len = items.length;

                    var rnd = Math.floor(Math.random() * len);

                    var stock = items[rnd];
                    stock.sales = (Math.floor(Math.random() * 50));
                    stock.price = (Math.floor(Math.random() * 90) - 30);
                    stock.change = (change[Math.floor(Math.random() * change.length)]);
                    stock.time = getTime();

                    $scope.$apply();

                };

                $scope.showCssPriceMajor = function($scope) {
                    return ($scope.price > 30 ? true : false);
                };

                $scope.showCssPriceMenor = function ($scope) {
                    return ($scope.price < 0 ? true : false);
                };


                var that = this;
                setInterval(function () { $scope.update() }, 1);

            };
        </script>

    </body>
</html>

 

08/11/2012 Development / java script

        var a = { doStuff: function () { alert(this.name) }, name: "a" };
        var b = { name: "b" };
        var c = a.doStuff.bind(b);

Gostei do bind!


 

05/11/2012 Development / css
Mto foda! http://line25.com/wp-content/uploads/2012/responsive/demo/index.html
31/10/2012 Development / java script

Agora que eu estou estudando pra tirar a certificação 70-480 da Microsoft, resolvi voltar a estudar e me interar sobre html5, css3 e javascript. Não quero abandonar a area web.

Então vamos as novidades! Que tal um upload com barra de progresso? Agora é possível nativamente. Vamos ao código.

        function fileSelected() {
            var file = document.getElementById('fileToUpload').files[0];
            if (file) {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
            }
        }

        function uploadFile() {
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "Default3.aspx");
            xhr.send(fd);
        }

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }

        function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            alert(evt.target.responseText);
        }

        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }

        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }

  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload" />
    </div>
    <div id="progressNumber"></div>
  </form>

//***************************************
ASPNET
//***************************************
        //Capture File From Post
        HttpContext context = HttpContext.Current;
        HttpPostedFile file = context.Request.Files["fileToUpload"];

        //Optional: Convert to File to binary if you need to forward it to a video encoding service like Panda Stream
        //BinaryReader b = new BinaryReader(file.InputStream);
        //byte[] binData = b.ReadBytes(file.ContentLength);
        //b.Close();

        //Or just save it locally
        file.SaveAs("C:/teste.png");

        string result = "File Saved Successfully";

        context.Response.ContentType = "text/plain";
        context.Response.Write(result);


 

31/10/2012 Development / java script

Alguns estudos com o angular - Primeira impressão!

<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head runat="server">
    <script src="Scripts/angular-1.1.0/angular.js" type="text/javascript"></script>
    <title></title>
    <script>

        function Lista($scope) {
            $scope.items = [
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor" },
            { 'text': "Este é o texto", 'value': "Este é o valor"}];
        }
    </script>
</head>
<body ng-controller="Lista">
   
    <input type="text" ng-model="name" />
    <div>{{name}}</div>

    <ul>
        <li ng-repeat="item in items">
        {{item.text}}
        </li>
    </ul>

</body>
</html>

 

25/10/2012 Development / macetes

            decimal d = 0;
            if (pTraders.Key != null)
            {
                var Traders = pTraders.Value.ToString().Split(';').Select(x => decimal.TryParse(x, out d) ? d : 0).ToArray();
                expr = expr.And(x => Traders.Contains(x.CodigoOperador.Value));        // Dos traders selecionados
            }

<img id='ajaxLoaderImg' src='@(Url.Content("~/content/themes/ims/ajax-loader-big.gif"))'

 

18/10/2012 Development / macetes

CTRL + ALT seleciona a bagaça toda na horizontal e vertical. To colocando aqui só pra não esquecer mesmo!

 

10/10/2012 Development / iis

Só pra deixar registrado o que eu perdi e ganhei 1 dia de trabalho.

Não deixe em hipótese alguma marcado "verifiy that files exists"

Espero realmente que você não precise deste post ;-)

 

08/10/2012 Development / asp.net

Vou colocar 2 soluções que fazem a mesma coisa.

A primeira é uma maneira mais tradicional e mais didática de ler. Usando ForEach, a segunda usando Linq.

public string ParseQueryString(params KeyValuePair<string, object>[] parameters)
        {

            ArrayList sb = new ArrayList();
           
            foreach (var key in parameters){
                sb.Add(key.Key + "=" + key.Value);
            }
            return String.Join("&", sb.ToArray());

Ok! Funciona perfeiramente, percorre a lista KeyValuePair e vai adicionando a chave e o valor num array e depois fazemos o join!

A segunda utilizando Linq - Ajuda do brotherzaço - Vinícius Rosa!

return string.Join("&", parameters.Select(x => string.Concat(x.Key,"=", x.Value.ToString())));

A cada iteração do x, ele concatena a key e o valor no próprio x, retornando assim uma lista e depois fazemos o join!

Eu prefiro a segunda pelo tamanho da escrita do código, mas a primeira fica mais fácil caso alguém venha fazer manutenção no código.

É isso, espero que sirva!

 

05/10/2012 Development / asp.net

System.IO.TextReader file = new StreamReader("C:/Projetos/IMS2/branches/ep.382/src/Web/Content/Documents/RelatorioBMFContracts.aspx");
var reader = file.ReadToEnd();

Só pra não esquecer!


 

02/10/2012 Development / links

Ótima fonte de referência

http://www.csharp-examples.net/

 

02/10/2012 Development / asp.net

Eu conheço 2 maneiras de pegar apenas os números de uma string. A primeira é usando TryParse e a segunda usando Regex.

1) TryParse:

decimal sohNumero;

if (Decimal.TryParse(stringVerificada, out sohNumero))

Nesse caso, caso parse seja executado, sohNumero recebe o valor.

2) string sohNumero = new Regex(@"\D", RegexOptions.Compiled).Replace(stringVerificada, string.Empty);
                if (!string.IsNullOrEmpty(sohNumero))

Eu particularmente acho que a segunda opção é mais segura! Mas fica a critério de cada um ;-)

Espero que sirva!

 

21/09/2012 Development / java script

<style type="text/css">#ui-themeswitcher{position:absolute;top:0.5em;right:130px}</style>
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
$("<div id='ui-themeswitcher'></div>").appendTo("#accordion").themeswitcher();

Usei esse template no esquema dos accordions que pode abrir todos os panels ao mesmo tempo.

        $("#accordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
          .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .hover(function () { $(this).toggleClass("ui-state-hover"); })
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
            .click(function () {
                $(this)
                .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
                .next().toggleClass("ui-accordion-content-active").slideToggle();
                return false;
            })
            .next()
              .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
              .hide();

 

21/09/2012 Development / telerik

Alguns métodos de atualização dos grids da telerik

$("#GridGrupo").data("tGrid").rebind();

$('#GridGrupo').data('tGrid').ajaxRequest();

$('#GridGrupo').data('tGrid').dataItem(row);

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#ClientSideObject

 

21/09/2012 Development / asp.net

Esse post é em homenagem a meu amigo Vitinho ArcoVerde, mais conhecido como Telerik Man!!!! Que tem me ensinado e me passado mtos jumps the cats!

Action Result Descrição Exemplo
ViewResult Retorna uma View return View();
return View(“NomeDaView”, objeto-Model);
PartialViewResult Retorna uma partial View, que pode ser inserida dentro de outra View return PartialView();
return PartialView(“NomeDaPartialView”, objetoModel);
RedirectResult Redireciona para uma URL específica return Redirect(“http://www.site.com.br”);
RedirectToRouteResult Redireciona para outra action return RedirectToAction(“OutraAction”, “Outro-Controller”);
return RedirectTo-Route(“NomeDaRota”);
ContentResult Retorna texto, contenttype header opcional return Content(“Texto”,“textnplain”);
JsonResult Retorna um objeto no formato JSON return Json(objeto);
JavaScriptResult Retorna código Javascript que pode ser executado no cliente return JavaScript(“$(’#divResultText’).html(’JavaScript Passed’);”);
FileResult Retorna dados binários (arquivo em disco, por exemplo) return File(@“c:nrelatorio.pdf”, “applicationnpdf”);
EmptyResult Retorna um valor que é utilizado quando a action precisa retornar valor nulo return new EmptyResult();
20/09/2012 Development / html5

Hoje vou postar um exemplo de como usar o input type="color"

<h2>HTML5 Color Picker + Javascript Tutorialh2>
Choose Color 1: <input type="color" name="color1" id="color1" onchange="alert(this.value)" /><br /><br />
Choose Color 2: <input type="color" name="color2" id="color2" /><br /><br />
<input type="button" id="btn" value="Submit" />

function processData(c1,c2) {
    var cv1 = document.getElementById(c1).value;
    var cv2 = document.getElementById(c2).value;
    alert(cv1+" - "+cv2);
}


$().ready(function(){
    $("#btn").click(function(){ processData('color1','color2'); });
});​

http://jsfiddle.net/Phfaz/

 

20/09/2012 Development / asp.net
Comando Razor WebForm
Bloco de Código @{ int x = 123; string y = "Olá Mundo.";} <% int x = 123; string nome = "Felipe Huggler"; %> 
Expressão (HTML) @model.Message <%= model.Message %>
Expressão @Html.Raw(model.Message)  
Combinado Texto com códigos @foreach(var item in items) { <span>@item.Prop</span>} <% foreach(var item in items) { %><span><%= item.Prop %></span><% } %> 
Mesclando Códigos com tags HTML @if (foo) { @: Plain Texto e @editora.Name } <% if (foo) { %> Plain Text e <%= editora.Name %> <% } %>
Endereço de email Olá sidnei@gmail.com Razor reconhece o formato de e-mail básico e não é inteligente o suficiente para tratar o @ como um delimitador de código
Expressões explícitas ISBN@(isbnNumber) Neste caso, é preciso ser explícito sobre a expressão usando parênteses.
Encapsulando @ In Razor, you use the
@@foo to display the value
of foo
@ @ @ transforma em um único na resposta
Comentários do lado do Servidor @*
Esse e o lado do servidor
Com múltiplos comentários
*@
 
Mesclando expressões e textos Olá @titulo. @nome. Olá . .
18/09/2012 Development / asp.net

Essa é uma boa referencia para normalização de campos das tabelas

            var dic = new Dictionary<string, string>();
            dic.Add("Cd", "Codigo");
            dic.Add("Cod", "Codigo");
            dic.Add("Cli", "Cliente");
            dic.Add("Dt", "Data");
            dic.Add("Dc", "DebitoCredito");
            dic.Add("Ds", "Descricao");
            dic.Add("Dg", "Digito");
            dic.Add("Dv", "Digito");
            dic.Add("Ft", "Fator");
            dic.Add("Fat", "Fator");
            dic.Add("Fm", "Formato");
            dic.Add("Hh", "Hora");
            dic.Add("Hr", "Hora");
            dic.Add("Id", "Id");
            dic.Add("Im", "Imagem");
            dic.Add("Nm", "Nome");
            dic.Add("Nr", "Numero");
            dic.Add("Num", "Numero");
            dic.Add("Pc", "Percentual");
            dic.Add("Pz", "Prazo");
            dic.Add("Pr", "Preco");
            dic.Add("Prec", "Preco");
            dic.Add("Pu", "PrecoUnitario");
            dic.Add("Qt", "Quantidade");
            dic.Add("Qtd", "Quantidade");
            dic.Add("Qtde", "Quantidade");
            dic.Add("Sq", "Sequencia");
            dic.Add("Sg", "Sigla");
            dic.Add("Bl", "Status");
            dic.Add("In", "Status");
            dic.Add("St", "Status");
            dic.Add("Tg", "Tag");
            dic.Add("Tx", "Taxa");
            dic.Add("Tm", "Time");
            dic.Add("Tp", "Tipo");
            dic.Add("Vl", "Valor");

 

17/09/2012 Development / html5

De vez enquando eu fuço as novas tags do html5 para saber em qual pé estão essas novas tags. Hoje eu pesquisei pelo input type="range"

Segue um exemplo de como utiliza-lo.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 11 | Developer's Blog</title>
<meta charset="utf-8">
<style>
#rounded-example{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;   
    background-color:#CCC;   
    padding:20px;
    font-size:14px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    box-shadow: 5px 5px 5px #888;
    -moz-box-shadow:5px 5px 5px #888;
    -webkit-box-shadow:5px 5px 5px #888;
    width:300px;
   
    }
</style>

</head>
 
  <body>
 
  <div id="rounded-example">
  This div can be rounded by you!<br><br>

  Value: <span id="rounded-border-value"></span>
  </div>
 
  <p><input type="range" onchange="changeRounded(event)" value="0" max="50" min="0" id="rounded-border"></p>
  <script>
     function changeRounded() {
              var el = document.getElementById('rounded-example');

              var borderVal = document.getElementById('rounded-border').value;
              document.getElementById('rounded-border-value').innerHTML = borderVal;

              el.style.borderRadius = borderVal + 'px';
            }

    </script>  

  </body> 
 
</html>

 

13/09/2012 Development / java script

$(':checked').map(function(){return this.value}).get();

$('input:checkbox').map(function() {
   return { name: this.name, value: this.checked ? this.value : "false" };
 });

var searializedObj = {}
$("form input:checkbox").each(function(){
searializedObj[this.name] = this.checked;
});

 

Jump the cat!

 

03/09/2012 Development / java script

De todas as maneiras que eu pesquisei sobre compressão de arquivos, a mais simples e rápida foi utilizando YuiCompressor.

Basicamente você vai precisar:

  1. Instalar o Java
  2. Instalar o pacote YuiCompressor
  3. Rodar uma Bat

Instalando o Java - Eu baixei a última versão Java JDK 7

Pacote http://developer.yahoo.com/yui/compressor/

Rodar a Bat

@echo off

copy /b "C:\FaceBrooker\Core\js\jquery\jquery.min.js"+"C:\FaceBrooker\Core\js\jquery\jquery-ui.min.js"+"C:\FaceBrooker\js\jquery\jquery.colorbox.js"+"C:\FaceBrooker\Core\js\jquery\jquery.mask.js"+"C:\FaceBrooker\Core\js\jquery\jquery.meio.mask.min.js"+"C:\Pessoal\AplicacoesASP\001 - SISTEMAS\000 - SIO\Core\js\jquery\jquery.tmpl.js"+"C:\FaceBrooker\Core\js\jquery\jquery.ui.dropdownchecklist-1.4-min.js"+"C:\FaceBrooker\Core\js\funcoes.js" "C:\FaceBrooker\Core\js\jscript.js"

cd C:\yuicompressor-2.4.7\build\

java -jar yuicompressor-2.4.7.jar "C:\FaceBrooker\Core\js\jscript.js" -o "C:\FaceBrooker\Core\js\jscript-min.js"

del /F /Q "C:\FaceBrooker\Core\js\jscript.js"

pause

 

02/09/2012 Development / asp3

Essa funçãozinha retorna a data e hora da modificação do arquivo. Isso é usada pra controle de cache! No caso, usei uma expressão regular pra trazer apenas os números, sem a barra da data / e os 2 : das horas/min/seg

<%
function getDateLastModified(file)

Set objER            = New RegExp
    objER.IgnoreCase    = True
    objER.Global        = True
    objER.Pattern        = "\D+"

dim fs,f
set fs=Server.CreateObject("Scripting.FileSystemObject")
set f=fs.GetFile(file)
getDateLastModified = objER.Replace(f.DateLastModified, "")
Set objER            = Nothing
set f=nothing
set fs=nothing
end function
%>

 

29/08/2012 Development / Errors

O erro acontece por uma simples falha de configuração do meu IIS.
 
Resumindo o caso no Pool de Aplicativos, o DefaultAppPool estava com a versão do framework 4.0, e eu estamos trabalhando com VS 2008 com o 3.5.

Só alterar a versão do Framework dentro do DefaultAppPool para a versão 2.0. Este pool era o que estava configurado no meu webapp.


 

29/08/2012 Development / Errors

%windir%\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis -pef "connectionStrings" PathCompletodoDiretoriodoWeb.Config

 

15/08/2012 Development / java script

this.sortById = function () {
             this.items.sort(function (a, b) {
                 if (sortAsc)
                     return a.id() > b.id() ? -1 : 1;
                 else
                     return a.id() < b.id() ? -1 : 1;
             });
 
             sortAsc = !sortAsc;
         };

 

13/08/2012 Development / java script

function resizeGrid() {
    var gridElement = $("#grid");
    var dataArea = gridElement.find(".k-grid-content");
    var newHeight = gridElement.parent().innerHeight() - 2;
    var diff = gridElement.innerHeight() - dataArea.innerHeight();
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
}

$(window).resize(function(){
    resizeGrid();
});

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    dataBound: resizeGrid,
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "ShipName",
        "ShipCity"
    ]
});​

http://jsfiddle.net/dimodi/4eNu4/33/

http://jsfiddle.net/4eNu4/118/

 

08/08/2012 Development / asp.net

Apenas um exemplo pra manter na mente.

        string[] names = { "Burke", "Connor", "Frank", "Everett", "Albert", "George", "Harris", "David" };

        IEnumerable query = from s in names
                                    where s.Length == 5
                                    orderby s
                                    select s.ToUpper();

        foreach (string item in query) {
            Response.Write(item);
        }

        IEnumerable querys = names
                                        .Where(s => s.Length > 5)
                                        .OrderBy(s => s)
                                        .Select(s => s.ToUpper());

 //****************************************************

string[] names = { "Albert", "Burke", "Connor", "David",
                   "Everett", "Frank", "George", "Harris"};

// agrupar pelo tamanho da string
var groups = names.GroupBy(s => s.Length);

foreach (IGrouping group in groups) {
    Console.WriteLine("Strings de tamanho {0}", group.Key);

    foreach (string value in group)
        Console.WriteLine("  {0}", value);
}

System.Collections.IList q = names.Where(x => x.Length > 1).Select(x => x.ToUpper()).ToList();   

Mais referências no link - http://msdn.microsoft.com/en-us/library/bb308959.aspx

 

01/08/2012 Development / asp.net

Esse problema ocorre porque um cliente faz uma requisição HTTP enviando o método POST para uma página HTML estática. Páginas estáticas HTML não suportam o método POST.

 

01/08/2012 Development / java script

Do que eu tenho lido e estudado sobre backbone me parece que é bem promissor a tecnologia.

Uma das coisas que eu gostei foi a parte do events e de atachar os binds de mudança de valores.

var Grid = Backbone.View.extend({

 events : {
  "click #addStock " : "newStock",
  "click .removeStock" : "removeStock"
 }

});

var Grid = Backbone.Model.extend({

 defaults : { stock : ''},

 initialize: function () {

  this.bind("change:stock", function () {

  var name = this.get("stock");

  alert("Você mudou o nome ou valor do Ativo para: " + name);

 }),

 updateStock: function( name ){

  this.set({ 'stock': name });
 
 }
});

Acho que dá pra entender que é bem interessante e fácil fazer uma classe.

Bora pra frente estudar galera!


 

28/07/2012 Development / links

http://www.dpriver.com/pp/sqlformat.htm

Ex: SELECT top 20 venda, aluguel, cod, referencia, n_vagas, quartos, bairro, format(valor,'R$ ##,###,###') as valor, txtCategoria, cod_tipo, (select count(*) from tabMedia B where B.codImovel = A.cod) as totalFotos FROM tabImovel A inner join tabCategoria on A.cod_tipo = tabCategoria.idCategoria where (destaque = 1 or lancamento = 1) and publicar = 1 and flagExcluir = 0 and A.cod in (select tabMedia.codImovel from tabMedia) ORDER BY referencia

Gostei!

 

18/07/2012 Development / java script

Como fazer um grid em 30 segundos com knockout!

        <div data-bind="foreach: items">
            <p>First name: <input data-bind="value: name" /></p>
            <p>Last name: <input data-bind="value: sales" /></p>
            <h2>Hello, <span data-bind="text: price"> </span>!</h2>
            <hr size="1" />
        </div>

        <button type="button" data-bind="click: addItem">Add</button>
        <button type="button" data-bind="click: removeItem">Remove</button>
        <script>
            var GridModel = function (items) {
                this.items = ko.observableArray(items);

                this.addItem = function () {
                    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                };

                this.removeItem = function () {
                    this.items.pop();
                };
            };


            var initialData = [
             { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
             { name: "Speedy Coyote", sales: 89, price: 190.00 },
             { name: "Furious Lizard", sales: 152, price: 25.00 },
             { name: "Indifferent Monkey", sales: 1, price: 99.95 },
             { name: "Brooding Dragon", sales: 0, price: 6350 },
             { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
             { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];

            ko.applyBindings(new GridModel(initialData));
        </script>

Espero que sirva!

 

15/07/2012 Development / java script

Funçãozinha pra formatar Dimdim!

function formatCurrency(num){
    num = num.toString().replace(/\$|\,/g, '');
    if (isNaN(num))
        num = '0';
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    cents = num % 100;
    num = Math.floor(num / 100).toString();
    if (cents < 10)
        cents = '0' + cents;
    for (i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++){
        num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
    }
    return (((sign) ? '' : '-') + 'R$' + num + '.' + cents);
}

 

10/07/2012 Development / iis
Você recebe o erro 401.1 quando navega em um site que usa a Autenticação Integrada e que está hospedado no IIS 5.1 ou em uma versão mais recente.

http://support.microsoft.com/kb/896861/pt-br

Espero que ajude!

 

27/06/2012 Development / css

É engraçado, mas as vezes você tem o seguinte código.

<div><img></div>

Digamos que essa div tenha um fundo vermelho...A div vai ficar um tequinho maior que a imagem...Não sei por cargas d´aguas, mas fica...

Então para solucionar basta colocar na imagem um style="display: block"

Espero que sirva!

 

07/06/2012 Development / ferramentas

Essa semana eu fiquei curioso em saber qual o limite de dados enviados via método get. Então só pra constar mesmo segundo a documentação sobre o Internet Explorer até a versão 5.5, ele não aceita mais que 2086 caracteres em uma URL. Mas nas especificações do protocolo HTTP, o método GET é marcado para suportar apenas 2048 caracteres.

Eu sei, é coisa de NERD né, mas queria saber mesmo, rsrs

 

 

12/05/2012 Development / java script

Ahhhhhhhh que isso! Sério mesmo? Screenshot com javascript? Kaaaaô!

Né não neguinho! Agora com canvas é possível sim ;-) - Existe um projeto chamado html2canvas do meu amigo Nick - https://github.com/niklasvh/html2canvas

Vou postar um exemplo rapidinho de como é fácil implementar. Depois é só você pode soltar a imaginação e fazer um sistema de feedback com o print do erro, enviar via ajax o binario, enfim!

            $('body').html2canvas();
            var queue = html2canvas.Parse();
            var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
            var img = canvas.toDataURL()

            function writeConsole(content) {
                top.consoleRef = window.open('', 'myconsole',
                  'width=350,height=250'
                   + ',menubar=0'
                   + ',toolbar=1'
                   + ',status=0'
                   + ',scrollbars=1'
                   + ',resizable=1')
                top.consoleRef.document.writeln(
                  '<html><head><title>Console</title></head>'
                   + '<body bgcolor=white onLoad="self.focus()">'
                   + content
                   + '</body></html>'
                 )
                top.consoleRef.document.close()
            };

            writeConsole("<img src='" + img + "'><p>");

Espero que sirva!

 

10/05/2012 Development / java script

Um exemplozinho mais prático para mostrar como funciona web worker, as novas threads em javascript.

Quer experimentar: Execute um loop muito grande e verá que o navegador trava até o loop ser finalizado:
var result = 0;
 
for ( var x = 0; x &lt; 10000000; x++){
result++
}
 
alert( result );

E como resolver se preciso de um loop extenso ou qualquer outro item que esteja travando a interface?
Existem algumas técnicas para amenisar esse travamento utilizando setTimeout ou setInterval mas isso não vem ao caso pois a noite é da estrela Web Worker.
Aí você me pergunta: Mas então o que é Web Worker e o que ele faz?

var worker = new Worker( 'path/to/script.js' );
 
worker.addEventListener('message', function(e){
alert( e.data );
}, false );
 
worker.postMessage(); // Inicia o worker

Script.js

this.addEventListener('message',function( e ){
 
var result = 0;
 
for ( var x = 0; x &lt; 10000000; x++){
result++
}
 
this.postMessage( result );
 
this.close();
 
}, false );

Para testar clique aqui - http://alantavares.com.br/exemplos/javascript/webworker/

Post reaproveitado de http://alantavares.com.br/

Espero que sirva!

 

10/05/2012 Development / java script

Já que eu falo tanto de performance e boas práticas, nada mais justo que eu aplicar essa parada na prática, e o melhor lugar pra fazer isso é aqui, no meu site mesmo.

Como que funcionava antes: Eu fazia uma requisição pra uma pagina e essa página já me retornava o html renderizado. Feio né!

Além de demorar, é excroto mesmo!

Como funciona agora:

Eu faço uma requisição e a resposta é um json, ainda esta vindo como texto, mas em breve será json parseado mesmo ;-)

Eu criei um template e assim que ele retorna é executado um merge entre o template e o json e aplicado na DIV.

Além disso, deixei a consulta do ajax em cache, ou seja, realiza apenas 1 vez e deixo o resultado na memória.

Bem rapidinho e fácil de dar manutenção.

 

10/05/2012 Development / ferramentas

Essa semana eu comecei a ler o livro do Steve Souders - Even Faster Web Sites.

Steve trabalha na google na equipe de performance. Ele criou o YSlow, que é uma extensão para analizar performance no FireBug e é professor em conferencias de performance pelo Mundo.

No livro ele fala pelo menos de basicamente 14 itens;

  1. Faça poucas requisições Http;
  2. Use content Delivery Network;
  3. Adicione Header Expires;
  4. Gzip Componentes;
  5. Insira Css no topo;
  6. Insira Js no final;
  7. Não use Css Expression;
  8. Use Js e Css Externo;
  9. Reduza DNS Lookups;
  10. Minifica Javascript e Css;
  11. Não use Redirect;
  12. Remova script duplicados ou mais de um script;
  13. Configura E-tags
  14. Faça Ajax cacheavel;

Eu vou tentar falar de cada item, mas queria fazer um resumão pra não ter que ficar perdendo tempo e falando de pouquinho em pouquinho. Até o próximo Post sobre!

 

10/04/2012 Development / java script

SCRIPT438: O objeto não oferece suporte à propriedade ou método 'createContextualFragment'

Se você recebe essa mensagem, eis a solução:

if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {
    Range.prototype.createContextualFragment = function(html) {
        var frag = document.createDocumentFragment(),
        div = document.createElement("div");
        frag.appendChild(div);
        div.outerHTML = html;
        return frag;
    };
}

Espero que sirva!

 

10/04/2012 Development / css

Que tal você fazer os botões igual do google, bootstrap, gmail e outros? Maneiro né! Então vamos lá. Lets Gooooo!

Fiz uma página de exemplo - só clicar e conferir.

Espero que sirva

06/04/2012 Development / java script

Extender métodos no javascript é muito fácil e muito útil para coisas que são corriqueiras. Exemplo: métodos trim, capitalize, bold, reverse e métodos que podem ser especificos de uma classe Utils.js dentro do seu projeto

Por exemplo, se a gente fosse fazer uma extensão para deixar uma string sempre com a primeira letra em maiuscula.

var string = "yes";

if(!String.prototype.capitalize)
{
    String.prototype.capitalize = function()
    {
        return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
    }
}

Tranquilo né! Só que temos uma inconveniente nesse código.

for(i in string) console.log(i + ":" + string[i]);

Resultado:

1) y
2) e
3) s
4) function ....

Nesse caso, imagina que você tenha que fazer um for, teria que ficar validando se é realmente string ou function, estranho né!

A solução: Vamos usar o Object.defineProperty

Ele incrementa ou altera um método ao objeto passado. Mais detalhes - https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/defineProperty

if(!String.prototype.capitalize)
{
    Object.defineProperty(String.prototype, 'capitalize',
    {
       value: function()
       {
           return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
       },
       enumerable: false
    });
}

alert(string.capitalize());

for(i in string) console.log(i + ":" + string[i]);

Resultado:

1) y
2) e
3) s

Espero que sirva!

 

05/04/2012 Development / java script

Dando continuidade aos exemplos...Vamos supor que a gente queira atualizar de 1 em 1 segundos a página do cliente. Ex: A gente ficar varrendo um arquivo txt, ou só gerando um Date.toLocaleTimeString() ;-)

Novamente a parte do server. É muito importante termos esse conhecimento que quase tudo rola em torno disso. Levantar o server e depois consumir. É uma receita de bolo, com o tempo você acostuma. É como se fosse escrever um confirm("blabla")...prompt("tche...tche..re..tche...tche..tche")...e assim por diante

var http = require('http'), fs = require('fs');

//Escrevendo várias vezes no response (fazer com o curl para ver melhor)
var server = http.createServer(function(request, response)
{
 switch(request.url)
 {
  case '/':
   fs.readFile(__dirname + '/index.html', function (err, data){
    if (err) {
     response.writeHead(500, {"Content-Type":"text/html"});
     return response.end('Error loading index.html');
    } else {
     response.writeHead(200, {"Content-Type":"text/html"});
     response.end(data);
    }
   });
  break;
  case '/stream':
   response.writeHead(200, {"Content-Type":"text/json"});

   setInterval(function(){ response.write((new Date()).toLocaleTimeString()); }, 1000);

   /*
   file = __dirname + '/arquivo.txt';
   fs.watch(file, function(curr, prev){
    fs.readFile(file, function (err, dados){
     response.write(dados);
    });
   });
   */
  break;
 }
}).listen(8181); // Temos nosso server na porta 8181

Agora vamos consumir

var io = require('socket.io').listen(server); // Aqui eu digo que vou consumir esse server usando socket.io

// Requisição client para buscar o stream, e envia via socket
var options = {
  host: 'localhost',
  port: 8181,
  path: '/stream',
  method: 'GET'
};
var reqStream = http.request(options, function(res)
{
 if(res.statusCode==200)
 {
  res.setEncoding('utf8');
  res.on('data', function (chunk){
   io.sockets.emit('update_dados', { dados: chunk });
  });

  res.on('end', function(){
   io.sockets.emit('close_dados');
  });

 } else {
  io.sockets.emit('close_dados');
 }
});
reqStream.end();

Agora só fazer a parte /* Cliente - index.html */

<html>
  <head>
    <title>Dashboard</title>
 <script src="/socket.io/socket.io.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script>
  $(document).ready(function(){

   socket = io.connect();

   socket.on('update_dados', function(json){
    $("#div_dados").html(json.dados);
   });

   socket.on('close_dados', function(){
    $("#div_dados").html('Fim da Transmissao!');
   });
  });

 </script>
  </head>
  <body>
 <h2>DASHBOARD</h2>
 <p id="div_dados"></p>
  </body>
</html>

 

05/04/2012 Development / java script

Vou tentar explicar bem direitinho porque esse lance de node parece fácil, mas tem uns macetes!

Primeiro nós temos que levantar, subir o nosso servidor que será responsável por receber e emitir  as mensagens para todos os usuários conectados, certo?

/* Server.js */
/* é um exemplo simples, só para base de estudo */

var io = require('socket.io').listen(8000); // aqui eu digo que vou subir na porta 8000

// abre a conexão socket
io.sockets.on('connection', function (socket) {

 // recebo mensagem do cliente - "data" são os dados que o usuário enviou
 //**********************************************************************************
 socket.on('chat', function (data) {
 //**********************************************************************************

  //Envia para todos os usuários que assinaram o handler "chat" 
  socket.broadcast.emit('chat', {
   msg : data.msg,
   msgr : data.user
  });
 });
});

Molezinha né! para ver realmente se está funcionando http://localhost:8000 - Shooow

Agora a parte do nosso Html ou seja, o

/* Cliente */

<html>
   <head>
      <script src="http://localhost:8000/socket.io/socket.io.js"></script>
      <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script>
         var name = '';
         var socket = io.connect('http://localhost:8000');
        
         $(document).ready(function(){

            while (name == '') {
               name = prompt("Qual seu nome?","");
            }

            $("button").click(function(){
           
  var value = $("input#msg").val();              
  $("p#log").html('Enviei a mensagem: ' + value);
              

        // envio mensagem para o servidor 
               //**********************************************************************************
  socket.emit('chat', {'msg' : value, 'user' : name});
               //**********************************************************************************

              
               $("p#data_recieved").append("<br />\r\n" + name + ': ' + value);
              
               // limpa a caixa de texto
               $("input#msg").val('');
            });
           
           
            // vou enviar o nome do usuario para o servidor  
            socket.emit('register', name );
         });
        
         // Handler quando eu receber uma mensagem do servidor
         socket.on('chat', function (data) {
            $("p#data_recieved").append("<br />\r\n" + data.msgr + ': ' + data.msg);
            $("p#log").html('Recebi a mensagem: ' + data.msg);
         });
      </script>
   </head>
   <body>
      <input type="text" id="msg"></input><button>Click me</button>
      <p id="log"></p>
      <p id="data_recieved"></p>
   </body>
</html>

Com isso, você já pode fazer um eskema de chat...deixar os dados em memória quando for a primeira vez que o usuário entrar, fazer um eskema de jogos, leilão...só viajar nas idéias!

 

 

02/04/2012 Development / css

Eu comecei a fazer uma engenharia reversa em cima do css do site globo.com pra estudar e entender como as janelas transparentes eram desenvolvidas.

A primeira coisa que eu descobri, foi que eles utilizam um sprite - http://s.glbimg.com/jo/g1/media/header_g1/img/sprite_menu.png

Depois foi separar e deixar somente a carcaça do box. E o box, é super bem dividido mesmo. Com 4 cantos e uma meiuca.

<div class="window">
 <div class="window-border">
  <div class="menu-top-e"></div>
  <div class="menu-top-d"></div>

  <div class="content-bg">
   <div class="content-bg2">
    <div class="conteudo-subitens">
     Conteúdo da janela
    </div>
   </div>
  </div>
  <div class="menu-footer-e"></div>
  <div class="menu-footer-d"></div>
 </div>
</div>

E por fim, separar apenas o css...

.window{left:50px;position:absolute;top:25px; width: 800px} /* aqui você pode sobeescrever e deixar um width e height automatico */
.window-borders {border:1px solid red }

.menu-top-e,
.menu-footer-e,
.menu-top-d,
.menu-footer-d{background-image:url('sprite_menu.png');background-repeat:no-repeat}

.menu-top-e,
.menu-footer-e{position:absolute;left:0px;height:8px;width:8px;font-size:1px;overflow:hidden}

.menu-footer-d,
.menu-top-d{height:8px;margin-left:8px;font-size:1px;overflow:hidden}

.menu-top-e{top:0px;background-position:left 0px}
.menu-top-d{background-position:right 0}
.menu-footer-e{bottom:0px;background-position:0 -855px}
.menu-footer-d{background-position:right -855px}

.content-bg,
.content-bg2{overflow:hidden;background: url('sprite_menu.png');background-repeat:repeat;width:100%}

.content-bg{background-position:0px -8px}
.content-bg2{background-position:right -8px}
.conteudo-subitens{color:#929292;font-size:15px;padding:15px}

Só pra não perder o costume, fiz uma firulinha de leve!!!

Tae - olha o resultado - http://www.felipehuggler.com/felipehuggler/testes/janelaglobocom/

Espero que sirva!

 

28/03/2012 Development / java script

Esse código é muito útil, quando você quer pegar a posição exata do elemento;

var el = element, pos = {x: 0, y: 0};
while ( el ) {
    pos.x += el.offsetLeft;
    pos.y += el.offsetTop;
    el = el.offsetParent;
}

ou  $("#" + objectId).offset().left...eu ainda prefiro o primeiro!

 

23/03/2012 Development / asp3

Salve, salve pra quem estiver lendo esse post! Vou falar um pouco sobre a experiência que estou tendo atualmente na criação de grids.

No projeto de reformulação do SIO eu comecei a mexer nessa parte de grids, que inicialmente era feita através de uma classe em Asp que simplismente retorna uma tabela com todos os dados e metodos que eu queria que o meu grid tivesse, ou seja, era uma verdadeira meleca, e até então eu achava a coisa ais linda da terra :-|

Com funcionava?

Set tbl = new WMTable()
tbl.ColNames = Array("Lj.", "Ref","Vagas")
tbl.ColAlign = Array("left", "left", "left")
tbl.ColWidth = Array("60", "60", "80")
tbl.ColFields = Array("txtLoja","referencia","txtCategoria")
tbl.ColText Array("  :txtLoja:","  :referencia:","  :txtCategoria:")
tbl.ImageAsc = "img/sort_asc.gif”
tbl.ImageDesc = "img/sort_desc.gif”
tbl.ControlID = "cod"
tbl.ConnectionString = Application("conexao")
tbl.Source = SQL
tbl.Paginate = True
tbl.PageSize = 100
tbl.JsFunction = "wmTable(':qString:');"
tbl.Create("tblImovel")
Set tbl = Nothing

e ele retorna uma tabela e eu simplismente dava $(algumacoisa).html(retorno)...óoooooooooooooh que blz! Esse retorno era em base 77kb!

Até que funcionava mesmo, só que nos padrões de desenvolvimento e, sobretudo em relação a desempenho, performance isso não é legal né! O certo é só retorna os  dados e pronto!

Então vamos partir pra outro modelo, que tal ExtJS!!!!

Achei uma classe na internet chamada ASPJSON, que você passa um objeto conexao e um sql e ele retorna a parada toda em json.


Fields : [
{ name: 'foto', type: 'string' },
{ name: 'destaque', type: 'string' },
{ name: 'lancamento', type: 'string' },
{ name: 'publicar', type: 'string' },
{ name: 'n_vagas', type: 'string' },
{ name: 'quartos', type: 'string' },
{ name: 'cidade', type: 'string' }],
columns:
[{ header: 'Loja', dataIndex: 'txtLoja' },
{ header: 'Ref', dataIndex: 'referencia' },
{header: 'Tipo', dataIndex: 'txtCategoria' },
{ header: 'Cidade', dataIndex: 'cidade' } ]

Supomos que a gente queira gerar um grid de grid({'url' : 'minhaUrl.asp', 'fields' : fields, 'columns' : columns, 'renderTo' : document.body});

Função que grã o grid

grid = function(options) {

    var store = new Ext.data.JsonStore({
        url: options.url,
        autoLoad: true,
        fields: options.fields
    });

    var grid = Ext.getCmp('griPanel_' + options.renderTo);
    if (grid) {
        grid.store
        grid.getView().refresh();
    }

    var grid = new Ext.grid.GridPanel({
        //renderTo: options.renderTo,
        region: center,
        store: store,
        id:'griPanel_' + options.renderTo,
        columns: options.columns,
        container: options.renderTo,

        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Visualizando {0} - {1} de {2}',
            emptyMsg: "Nenhum registro"
            //plugins: new Ext.ux.SlidingPager(),
            /*items: [
            '-', {
            pressed: true,
            enableToggle: true,
            //text: 'Show Preview',
            //cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed) {
            var view = grid.getView();
            view.showPreview = pressed;
            view.refresh();
            }
            }]*/
        })

    })

    var el = Ext.get(options.renderTo);
    var panel = new Ext.Panel({
        renderTo: options.renderTo,
        border: false,
        plugins: [new Ext.ux.plugins.FitToParent(el)],
        layout: 'fit',
        items: grid
    });
};

...Melzinho na chupeta!!!! Esse retorno é em base 10kb

Apesar de eu gostar bastante desse modelo, eu ainda acho que ExtJs é muito lento, porém é bonito pra caramba, mas tem que saber usar as paradas, encaixar as caixas e isso é complicadinho.

Então um modelo que eu particularmente venho usando é o MVC...A gente cria o modelo dos dados do grid e depois faz um merge com json, ou seja, você modelo a sua tabela do seu jeito que você quiser totalmente.

Então pra isso vamos utilizar o jQuery.tmpl() ou jQuery Template

Laudo.prototype.grid = function(args) {

    var that = this;
    var instanceId = that.instanceId;
    var template = ["<tr>",
                        "<td>${txtLoja}</td>",
                        "<td>${referencia}</td>",
                        "<td>${txtCategoria}</td>",
                        "<td>${cod}</td>",
                        "<td>${endereco}</td>",
                        "<td>${bairro}</td>",
                        "<td>${valor}</td>",
                        "<td>${number}</td>",
                        "<td>${foto2}</td>",
                        "<td>${fotoss}</td>",
                        "<td>${foto}</td>",
                        "<td>${destaque}</td>",
                        "<td>${lancamento}</td>",
                        "<td>${publicar}</td>",
                        "<td>${n_vagas}</td>",
                        "<td>${quartos}</td>",
                        "<td>${cidade}</td>",
                    "</tr>"].join("");

    var theader = ["<table>",
                        "<thead>",
                            "<tr>",
                                "<td>Loja</td>",
                                "<td>Ref</td>",
                                "<td>Tipo</td>",
                                "<td>Cód</td>",
                                "<td>Endereço</td>",
                                "<td>Bairro</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                                "<td>Loja</td>",
                            "</tr>",
                        "</thead>",
                        "<tbody></tbody>",
                    "</table>"].join("");

   _.Execute({ 'acao': 'gridLaudo', 'data': args, 'callback': function(resp) {

            var data = eval('(' + resp + ')'); //eu sei que isso é feio mas é só exemplo mesmo ;-)
            var tbody = $("#gridLaudo_" + instanceId).html(theader);
            jQuery.tmpl(template, data).appendTo("#gridLaudo_" + instanceId + " tbody");
        }
    });
Esse retorno é em base 7kb!

Espero que sirva!


 

19/03/2012 Development / css

Hack compativel com todos esses browsers! Lembrando, use realmente somente quando necessário ;-)

@media screen and (-webkit-min-device-pixel-ratio:0){
p { margin: 8px; border: 1px solid red }
}

 

 

16/03/2012 Development / css

Essas paradas de incompatilidade de browser é foda. Comecei a refazer todo o meu sistema de gerenciamente de laudos e uma parte que eu estou mexendo agora é na construção dinamica dos grids.

Ocorre que pra deixar o grid com as colunas todas marcadas e tal, estou usando o css clássico td { border-right: 1px solid red }...blz

A ultima coluna eu não quero que fique marcada...então td:last-child { border: none }...shooooooooow ;-)

E no IE8 my friend ? Ae que esta, essa sintaxe do last-child é CSS3, ou seja, IE8 caga molinho! Mais mole que coco de passarinho.

Então vamos fazer uma coisa pra amenizar pelo menos IE6 e IE7, Se é que alguem usa isso ainda. Vamos fazer um hack!

.datagrid td { h: expression(this.nextSibling==null ? this.style.borderRight = 'none' : '');  /* IE6 || IE7 */ }

Nesse caso, temos que habilitar o modo de compatibilidade

<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
 <![endif]-->

E rezar pra funcionar, rs!!!!

Espero que sirva ;-)

 

 

12/03/2012 Development / java script

Comecei a pensar como eu faria um sistema multi-idiomas em javascript usando knockout. Segue a ideia. Mas acho que talvez posteriormente eu usario template mesmo.

http://felipehuggler.com/knockout/index2.htm

 

29/02/2012 Development / java script

Brincando um pouco com o knockout! Achei rápido e tal, mas usar jquery e jquery.tmpl, puts...fudeu! Eu particularmente prefiro fazer toda a estrutura MVC. Mas pra quem estiver realmente afim de usar, segue um exemplo facil!

http://felipehuggler.com/knockout/

 

27/02/2012 Development / java script

Tive que fazer um hack pra forçar o carregamento do browser utilizando htmlfile.

               var d = 'dominio.com.br';
                c = new ActiveXObject("htmlfile");
                c.open();
                c.write("<html><head><title>PublisherWeb<\/title><\/head><body>");
                c.write("<script>document.domain = '" + d + "';<\/s" + "cript>");
                c.write("<\/body><\/html>");
                c.close();

                var div = c.createElement("div");
                c.body.appendChild(div);
                div.innerHTML = "<iframe src='" + url + "' id='Streammer'></iframe>";
                c.parentWindow.TratarMensagemPublicada = TratarMensagemPublicada;

                /* isso é um hack para forçar o carregamento do script */
                setInterval(function () { var __x = ((c) && (typeof c.parentWindow == "object")); }, 1);
                c.documentElement.document.getElementById('Streammer').document.attachEvent("onreadystatechange", function () { alert('carregou') });
                _this._iFramePub = c;

 

08/06/2012 Development / java script
  • <script type="text/javascript" charset="iso-8859-1" src="data:text/javascript;base64,....
  • <img alt="" src="data:image/jpeg;base64,....
  • <link href="data:text/css;base64,....
  • img {background: url('data:image/png;base64,....

 

07/02/2012 Development / java script

Comecei a dar uma olhada como funciona o LightStreamer, e a primeira impressão que tive está send muito boa. O Fórum funciona muito bem, a instalação é bem confiável, sobre tudo porque você precisa passar o MAC Address da sua máquina pra receber o ClientId, ou seja, se você passar um inválido não vai nem conseguir testar.

Eles oferecem uma porção de Demos - http://www.lightstreamer.com/demos.htm

Basicamente estou criando os grids e analizando a performance, comparando oque vale mais a pena, ter um publicador próprio, um feito em nodejs ou lighstreamer. Até final de semana termino meus estudos e faço um post das considerações finais.

 

07/02/2012 Development / java script

Acabei de colocar o sistema de chat em teste. Segue video!!

http://www.felipehuggler.com/videos/nodejs.avi

 

06/02/2012 Development / java script

Essa semana eu comecei a colocar em prática após vários dias de estudos um novo projeto pessoal que será um homebroker utilizando nodejs e knockout.

Achei interessante utilizar nodejs, pelo fato de toda conexão socket ser efetuada através do próprio javascript e knockout pelas notificações utilizando o formato de template em json.

Como o html a gente não ter como fugir mesmo, é bem melhor ter um centralizador de eventos nas classes dos próprios controles, assim eu não preciso repassar os eventos até a chamada final que faria o tratamento de encerramento.

Basicamente a cada classe criada, eu percorro os handlers e chamo os metodos ko.applyBindings(json) e todos os meus controles html´s serão atualizados. "isso na teroria né" e se for isso mesmo, o bichinho vai ficar extraordianariamente rápido e até um pouco sem graça, porque não tem o que programar :-|

A parte de Aspnet, vai ficar tudo em MVC aspnet 4.0

  • 1 imagem
  • 1 css
  • 1 javascript
  • ambos compactados em base64 e com controle de versão

Caso alguem queira uma cópia do projeto, só enviar um email para mim - felipe@felipehuggler.com  - Assunto: Projeto HomeBroker

Imaginemos que o setInterval seja um publicador de mensagens em nodejs ou em lighstreamer, dojo, websocket, eventSource, enfim...um publicador!

<script type='text/javascript' src='knockout-2.0.0.js'></script>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='jquery.tmpl.js'></script>
<script>
$().ready(function(){
 
 var nome = ['PETR4', 'CESP6', 'VALE5'];
 var idade = [60.00, 43.20, 32.30];
 
 function getNome(){
  return nome[parseInt(Math.random() * (nome.length), 10)];
 }
 
 function getIdade(){
  return idade[parseInt(Math.random() * (idade.length), 10)];
 } 
 
 var model = {
  nome : function(){ return getNome() },
  idade : function(){ return getIdade() }
 }
 
 function init(){
  setInterval(function(){
    ko.applyBindings(new ViewModel(model.nome(), getIdade()));
  }, 2000);
 }
 
 init();
 
 var ViewModel = function(first, last) {
  this.firstName = ko.observable(first);
  this.lastName = ko.observable(last);
  
  this.fullName = ko.computed(function() {
   return this.firstName() + " " + this.lastName();
   }, this);
  };
  
//  ko.applyBindings(new ViewModel("Planet", "Earth"));
});
</script>
</head>

<body>
<p>
Ativo Name: <input data-bind="value: firstName" /></p>
<p>Preço: <input data-bind="value: lastName" /></p>
<h2><span data-bind="text: fullName"> </span>.</h2> 

 

02/02/2012 Development / java script

Tem pessoas que estão com um conhecimento muito avassalador sobre essas tecnologias...Só tenho a agradecer essas feras e repassar o conhecimento!

http://www.designadaptavel.com.br/artigos/mobile-first-vs-desktop-first

 

31/01/2012 Development / java script

Parece que a Microsoft vem com tudo realmente quando a questão é novas apps para Web. No Windows 8 foi inserido um namespace chamado Windows.UI.Web e através dele o browser manipulará eventos de conexão, desconexão, ativar o namespace, etc... Tentei rodar uma aplicação mas bati cabeça até descobrir que precisava ter o Windows Developer Preview instalado, nada nada, 4Gb :-|

E só pra apimentar um pouquinho esse post, já vi caras de C# e C++ da Microsoft, discutindo bravamente o porque de tantos desenvolvedores estarem partindo pra JavaScript. O fato é que essas novas implementações darão acesso ao WinRT e os programadores terão acesso a recurso de sistemas via Web. Sem falar que a própria linguagem javascript termina com ;...ou seja, linguagem de cabra macho! rsrsr

A natureza dinâmica, a facilidade de callbacks, as toneladas de código disponível para um desenvolvedor e as comunidades, fazem dessa linguagem se tornar cada vez mais procurada.

Penso que quando esses montros de C#, C++ realmente cairem de cabeça pro mundo Web, vai ser fantástico, os caras vão atingir um novo patamar.

Eu comecei a fazer um Homebroker puxando todos os dados lá de fora, negócio é animalesco!

Pra quem quiser ir pesquisando sobre isso, dá uma olhada nessas url´s

 

 

16/12/2011 Development / java script

Meu publicador de mensagens HelloWorld, heheheh!"

var a = 0;
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('Hello World\n');


setInterval(function(){
  console.log((a++) + 'Hello World\n');
  res.write('Hello World\n');

}, 2000);

}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

 

16/12/2011 Development / java script

Este é um modelo que eu venho utilizando bastante em minhas estruturas e chamadas de classes.

Eu deixo de capturar os parametros nos argumentos e capturo atraves do invoke da classe via call; Ex: Ao inves deu fazer:

function Animal(nome, idade){
alert(nome + ' - ' + idade);
}

ou

function Animal(){
alert(arguments[0] + ' - ' + arguments[1])
}

eu faço

function Animal(){
alert(this.nome + " - " + this.idade)
}

Mas huggler, voce está louco? nome e idade nesse caso estão vazios!!! Sim, até o momento da chamada.

Animal.call({"nome" : "Huggler", "idade" : "77"});

Espero que sirva!

 

 

12/12/2011 Development / java script

Centralizar as chamadas dos métodos em um controller e ao mesmo tempo passar os parametros para as respectivas funções. Achei que ficou simples e bem rápido. Espero que sirva

function one(arguments){
 alert(arguments[0]);
}
function two(){
 alert('two');
}
function tree(){
 alert('tree');
}


var methods = {

 'one' : one,
 'two' : two,
 'tree' : tree
 
};

function request(method){
 methods[method].call(this, arguments)
}


request("one", "item", "item2");
request("two");
request("tree");

 

 

03/12/2011 Development / java script

É isso mesmo, desenvolvimento de aplicações para smartTv. Cansei de programar pensando naquelas pessoas com a bundinha sentada na frente de um pc, abrindo um IE 7 e achando que tudo tem que funcionar 100%. Negócio agora é neguinho tirar o escorpião do bolso e avançar com a tecnologia. Por isso vou postar um exemplo facil de como começar com o desenvolvimento. Vamos lá.

Primeiro deve se fazer o download do SDK da samsung - http://www.samsungdforum.com/.

Basicamente as páginas rodadas num Samsung Internet@TV são compostas de HTML +  CSS  e Javascript a diferença é que o browser interpreta uma linguagem chamada MAPLE - Marku Engine Plataform Embedded Systems - HTML4 e CSS2.

Hello world!

$MANAGER_WIDGET/Common/API/Widget.js - é a library que dá interatividade e recursos para se mexer nas funcionalidades;

body {
    margin: 0;
    padding: 0;
    background-color: transparent;
 }
#welcome {
   position: absolute;
   left: 50px;
   top: 50px;
   width: 500px;
   height: 50px;
   background-color: #AFAFAF;
   color: #99FFFF;
   font-size: 30px;
   text-align: center;
}

Quase sempre o javascript criado é o Main.js

var Main = {
}
var widgetAPI = new Common.API.Widget(); // Cria o módulo Common

Main.onLoad = function () {
 widgetAPI.sendReadyEvent(); // Envia as mensagens para Application Manager
}

Basicamente é isso meus amigos!!! Aconselho a todos a estudarem essa nova tecnologia, creio que será uma oprtunidade incrivel num futuro próximo.


 

17/11/2011 Development / css

É esse códigozinho!!!! Espero que sirva

::-webkit-scrollbar{width:10px;height:3px;}::-webkit-scrollbar-button:start:decrement::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}::-webkit-scrollbar-thumb:vertical{height:100px; background-color:#000000;-webkit-border-radius:px;}::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#000000;-webkit-border-radius:px;}

Funciona no Safari e Chrome

 

10/11/2011 Development / java script

Agora sim tá ficando interessante!!!

        <script type="text/javascript">

            function Initialize() {
                if (window.EventSource == undefined) {
                    alert("Seu Browser não suporta Server Side Events.");
                    return;
                }

                var source = new EventSource('httpPublisher.aspx');
                var doc = document;
                var pub = doc.getElementById('PublishMessages');
               
                source.onopen = function(event) {
                    pub.innerHTML += "<font color='green'>Conectado</font><br>";
                };

                source.onerror = function(event) {
                    if (event.eventPhase == EventSource.CLOSED) {
                        pub.innerHTML += "<font color='red'>Desconectado</font><br>";
                    }
                };

                source.onmessage = function(event) {
                    pub.innerHTML += event.data + '<br>';
                };
            }
        </script>
        <div id="PublishMessages"></div>
        <button onclick="Initialize()">Iniciar Conexão</button>

/* httpPublisher.aspx */

        DateTime startDate = DateTime.Now;
        Response.ContentType = "text/event-stream";

        while (startDate.AddMinutes(1) > DateTime.Now)
        {
            Response.Write(string.Format("data: {0}\n\n", DateTime.Now.ToString()));
            Response.Flush();

            System.Threading.Thread.Sleep(1000);
        }
        Response.Close();

Espero que sirva!

 

29/10/2011 Development / java script

Imagine a seguinte situação: Você tem um publicador de mensagens que fica chamando varios metodos, e esses metodos escrevem as mensagens tratadas na tela.

function RecebePublicacao(msg){
if(msg = tal){
printX(msg)
}

if(msg = tal){
printY(msg)
}

if(msg = tal){
printZ(msg)
}
}

Oque acontece nesse cenario? Se a maquina do cliente for um 386, o IE 7, 8...vai peidar...porque a engine de javascript, consume muito recurso pra printar os objetos na tela :-(

//**********************************************************

Uma maneira de solucionar esse problema. ;-)

var arrayCotacao, arrayPublicacao, arrGeral = [];
function RecebePublicacao(msg){
if(msg = tal){
arrayCotacao.push(msg)
}

if(msg = tal){
arrayPublicacao.push(msg)
}

if(msg = tal){
arrayGeral.push(msg)
}
}

function trataCotacao(){
if(arrCotacao.lenght>0){
var msg = arrCotacao.shift();
$handleEvent("Cotacao", msg)
}
}
function trataPublicacao(){
...
}
function trataGeral(){
...
}

setInterval(trataCotacao, 1)
setInterval(trataPublicacao, 1)
setInterval(trataGeral, 1)

Dessa maneira o browser cadencia os processos, e deixa mais leve a aplicação. Espero que sirva!

 

26/10/2011 Development / java script

Fiz esse scriptzinho só de exemplo para manipulação de feeds rss em javascript utilizando a api do google ajax. Até um tempo atrás isso não era possivel, devido ao crossDomain dos websites. Espero que sirva.

var RssItens = [
        {
            'Title' : 'Uol',
            'Url': 'http://rss.esporte.uol.com.br/ultimas/index.xml',
            'Selected' : false
        },
        {
            'Title': 'InfoMoney',
            'Url': 'http://www.infomoney.com.br/petr4/rss',
            'Selected': true
        },
        {
            'Title': 'Globo',
            'Url': 'http://oglobo.globo.com/rss/plantaotecnologia.xml',
            'Selected': false
        }];

        function Rss() {
            this.rss = RssItens;
            this.load();
        };
        Rss.prototype.load = function() {
            var div = "";
            for (var x = 0; x < RssItens.length; x++) {
                div = document.createElement("div");
                div.innerHTML = "<b>" + RssItens[x].Title + "</b>";
                if (RssItens[x].Selected) {
                    div.className = "selected";
                    this.oRss = RssItens[x];
                }
                $(div).click(function() { $Rss.setRss($(this)); });
                document.getElementById("tabs").appendChild(div);
            }
            this.loadRss();
        };

        Rss.prototype.loadRss = function() {
            var item = this.getRss().Url;
            var script = document.createElement("script");
            var url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q='+ item +'&callback=processResults';
            script.src = url;
            document.body.appendChild(script);
        };

        Rss.prototype.setRss = function(oRss) {
            for (var x = 0; x < RssItens.length; x++) {
                if (RssItens[x].Title.toString() == oRss.text()) {
                    RssItens[x].Selected = true;
                    this.oRss = RssItens[x];
                } else {
                    RssItens[x].Selected = false;
                }
            }

            $("#tabs div").attr("class", "");
            oRss.attr("class", "selected");

            this.loadRss();
        };
        Rss.prototype.getRss = function() {
            return this.oRss;
        };

        function processResults(result) {
            document.getElementById('news').innerHTML = "";
            var len = result.responseData.feed.entries.length;
            var entries = [];
            for (var x = 0; x < len; x++) {
                entries.push(result.responseData.feed.entries[x].title + '<br>');
            };
            document.getElementById('news').innerHTML = entries.join("");
        };
        var $Rss = new Rss();

    <style>
    .selected { border:1px solid red; }
    div { width: 100px; float:left; border:1px solid blue; margin-right: 2px; padding: 3px; }
    .tabs { width: 100%;  }
    .both { clear: both; border: none}
    .news { width:100% }
    </style>
    <div id="tabs" class="tabs"></div>
    <div class="both"></div>
    <div id="news" class="news"></div>

 

27/09/2011 Development / css

#teste {
color: #CCC; /* outros cinza */
color /*\**/: #C00\9; /* hack para o ie 8 vermelho, não pode tirar o \9 do final */
*color: #03C; /* hack para o ie 7 azul */
_color: #3C0; /* hack para o ie 6 verde */
width: 100px;
height: 100px;
}
Apenas ( _color: #3C0; /* hack para o ie 6 verde */ ) com esse harck o IE8, e IE7 reconhece.

Se der erro, colocar os hacks na ordem crescente (ie6, 7, 8)!!! Espero que sirva!

 

13/09/2011 Development / java script

Um exemplo bem básico de como trabalhar com threading no javascript e não fazer o browser peidar!!!

<button onclick="sayHI()">Say HI</button>
<button onclick="unknownCmd()">Send unknown command</button>
<button onclick="stop()">Stop worker</button>
<output id="result"></output>

<script>
  function sayHI() {
    worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
  }

  function stop() {
    // Calling worker.terminate() from this script would also stop the worker.
    worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
  }

  function unknownCmd() {
    worker.postMessage({'cmd': 'foobard', 'msg': '???'});
  }

  var worker = new Worker('doWork2.js');

  worker.addEventListener('message', function(e) {
    document.getElementById('result').textContent = e.data;
  }, false);
</script>

self.addEventListener('message', function(e) {
  var data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg + '. (buttons will no longer work)');
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);

 

08/09/2011 Development / java script

var animals = ["aligator", "bat", "cow"];
var bad = document.getElementById("bad");
for (var i = 0; i < animals.length; i++) {
  var animal = animals[i];
  var input = document.createElement("input");
  input.type = "button";
  input.value = animal;
  input.style.marginLeft = "5px";
  input.onclick = function() {alert(animal);};
  bad.appendChild(input);
}

Oque vai acontecer com esse código??? Ao clicar em qualquer um dos botões, vai aparecer um alert com a palavra "cow", porque a variavel animal no final estará setada como "cow", Simples né.

Como reverter isso?

var animals = ["aligator", "bat", "cow"];
var good = document.getElementById("good");
for (var i = 0; i < animals.length; i++) {
  var animal = animals[i];
  var input = document.createElement("input");
  input.type = "button";
  input.value = animal;
  input.style.marginLeft = "5px";
  input.onclick = (function(animal) {return function() {alert(animal);};})(animal);
  good.appendChild(input);
}

Agora fizemos uma clousure! No momento da atribuição do valor da variavel, estamos setando uma função que assim que chamada, vai nos retornar o valor da variavel no momento em que ela foi setada.

 

26/08/2011 Development / java script

Esse foi o patter que eu escolhi para o gerenciamento dos eventos dentro do HomeBroker da Xp Investimentos

/* Gerenciador de eventos */
/***************************************************************************/
var $Event = {};
(function(s){

    var events = {};

        /* Aciona um evento */
        s.handleEvent = function() {

            var evt = arguments[0];
            var handlers = events[evt];
            var handler;

            if (!handlers || handlers.length == 0) {
                return false;
            }

            var len = handlers ? handlers.length : 0;
            var args = [];
            var i = arguments.length - 1;

            for (var x = 0; x < i; x++) {
                args[x] = arguments[x + 1];
            }

            while (len--) {
                handler = handlers[len];
                handler.func.apply(handler.ctx, args);
            }
        };

        /* Adiciona um evento */
        s.addHandler = function(evt, func, ctx) {

            if (!events[evt]) {
                events[evt] = [];
            }

            events[evt].push({'func' : func, 'ctx' : ctx});
        };

        /* Remove um evento */
        s.removeHandler = function(evt, cb, ctx) {
           
            var handlers = events[evt];
            var handler;

            if (!handlers || handlers.length == 0) {
                return false;
            }

            var len = handlers.length;

            while(len--){
                handler = handlers[len];

                if(handler){
                    if (ctx) {
                        if (cb) {
                            if (handler.ctx == ctx && handler.func == cb) {
                                handlers.splice(len, 1);
                            }
                        } else {
                            handlers.splice(len, 1);
                        }
                    }else{
                        handlers.splice(len, 1);
                    }
                }
            }
        };
})($Event);

 

14/08/2011 Development / java script
Mas vezes, eu estou checando a conclusão que usar clousures, métodos dentro de métodos é a maneira mais eficaz quando se algo mais performatico em javascript. Esse exemplo abaixo mostra exatamente isso. Ao inves de chamar 100 a rotina e fazer o browser dar aquela travada, é melhor invocar de tanto em tanto milessimos de segundos e ter o resultado bem mais rapido. Fica a Dica, espero que ajude! function process() { var above = 0, below = 0; for(var i=0; i<1000000; i++) { if(Math.random() * 2 > 1) { above ++; } else { below ++; } } } function test1() { var result1 = document.getElementById('result1'); var start = new Date().getTime(); for(var i=0; i<100; i++) { result1.value = 'time=' + (new Date().getTime() - start) + ' [i=' + i + ']'; process(); } result1.value = 'time=' + (new Date().getTime() - start) + ' [done]'; } function test2() { var result2 = document.getElementById('result2'); var start = new Date().getTime(); var i = 0, limit = 100, busy = false; var processor = setInterval(function() { if(!busy) { busy = true; result2.value = 'time=' + (new Date().getTime() - start) + ' [i=' + i + ']'; process(); if(++i == limit) { clearInterval(processor); result2.value = 'time=' + (new Date().getTime() - start) + ' [done]'; } busy = false; } }, 100); }
20/07/2011 Development / java script

A medida que você vai digitando, o textarea vai se redimensionando.

<textarea rows="1" style="height: 23px; overflow: hidden" name="descricao" cols="71" onpropertychange="this.style.posHeight=this.scrollHeight"></textarea>

 

20/07/2011 Development / java script

2 horas da manha, fazendo funcaozinha de data! Aiaiai

Espero que sirva pra alguém!

function calendar(data){
 this.data = new Date(data.split('/')[2], data.split('/')[1], data.split('/')[0]);
};

calendar.prototype = {

 addDay : function(d){
  this.data.setDate(this.data.getDate() + parseInt(d))
 },
 
 addMonth : function(m){
  this.data.setMonth(this.data.getMonth() + parseInt(m))
 },
 
 addYear : function(y){
  this.data.setFullYear(this.data.getFullYear() + parseInt(y)) 
 },
 
 toString : function(){
  return this.data.getDate() + "/" + this.data.getMonth() + "/" + this.data.getFullYear();
 }
}

var data = new calendar('10/10/2011');
data.addDay(2);
data.addMonth(4);
data.addYear(4);
alert(data.toString())

 

20/07/2011 Development / java script

Eu sempre esqueço esse pulo do gato. Então vou deixar aqui registrado.

var dropdowm = '<select onchange="somaData(this.value, \''+ campo + '\')">' +

Espero que eu mesmo use, hehehe


 

15/07/2011 Development / java script

Venho estudando há um bom tempo como receber as publicações de mensagens de um canal de comunicação criado através de um ActiveXObject("htmlfile"). Eis a solução:

            if (window.ActiveXObject) {
                var dom = 'xpi.com.br';
                var c = new ActiveXObject("htmlfile");
                c.open();
                c.write("<html><head><title>f<\/title><\/head><body>");
                c.write("<script>document.domain = '" + dom + "'<\/s" + "cript>");
                c.write("<\/body><\/html>");
                c.close();
                c.div = c.createElement("div");
                c.appendChild(c.div);
                c.parentWindow.TratarMensagemPublicada = TratarMensagemPublicada;  // make the
                c.div.innerHTML = "<iframe id='ifr' src='" + urlPublisher + "' id='Streammer'><\/iframe>";
                setInterval(function () { }, 10000);
            } else {

                iframe = document.createElement("iframe");
                iframe.src = urlPublisher;
                iframe.id = "Streammer";
                iframe.name = "Streammer";
                iframe.style.width = "100%";
                iframe.style.height = "50px";
                iframe.style.display = (debug ? "block" : "none");
                iframe.style.position = "absolute";
                iframe.style.top = "0px";
                iframe.style.left = "0px";

                _this._iFramePub = iframe;
                body.appendChild(iframe);
            }

05/07/2011 Development / java script

Apenas um exemplo de como eu venho construindo meus códigos.

function People() {
    this.Name;
    this.Age;
}

People.prototype = {

    /* get and set */
    MyName: function(name) {
        return name ? this.Name = name : this.Name;
    }
}

var p = new People();
alert(p.MyName('Felipe'));
alert(p.MyName());
15/06/2011 Development / java script

No desenvolvimento é comum encontrarmos uma lógica de programação do tipo:

var dr = document.readyState;

if(dr == "loaded"){
/* todo */
}

Esse if funciona perfeitamente, mas que tal implementarmos um if, 400% mais performático?

2 maneiras:

Se você sabe exatamente o valor que quer comparar com sua variavél, use:

var variavel = document.readyState;

if(/loaded/.test(varaivel)){
/* todo */
}

Agora se você quer comparar uma variavel com outra variavel, use:

var v0 = document.readyState;
var v1 = new RegExp(v0)
var v2 = valorDifinidoemOutraVariavel;

if(/v1/.test(v2)){
/* todo */
}

 

05/06/2011 Development / java script

Estava procurando uma maneira de implementar os gráficos no novo HomeBroker da Xp Investimentos. E um&nbsp; projeto que me chamou bastante a atenção foi o http://visifire.com

Muito simples a implementação e agora estou estudando como manipular os dados e eventos.

Meu primeiro exemplo, tentei simular uma cotação em tempo real. Goooo!

Depois de baixar os arquivos no site - Utilize na mesma pasta oa arquivos (SL.Visifire.Charts.xap e Visifire.js)

No site http://visifire.com/silverlight_wpf_charts_gauges_designer.php, você escolhe o template e ele gera o script html.

Coloque o script <SCRIPT type=text/javascript src="Visifire.js"></SCRIPT>

    <div id="VisifireChart0" >
       
        <script type="text/javascript" >


            var chart;

            function update() {
                var series = chart.Series[0];

                for (var i = 0; i < series.DataPoints.length; i++) {
                    series.DataPoints[i].AxisXLabel = Math.round(Math.random() * 10);
                    series.DataPoints[i].YValue = Math.round(Math.random() * 10);
                }

                setTimeout(arguments.callee, 1000);
            }

            // Create Visifire object
            var vChart = new Visifire('SL.Visifire.Charts.xap', "MyChart", 500, 300);
           
            // Chart Data XML
             var chartXml = '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme3" AnimationEnabled="True" Bevel="True" View3D="False">'
                       + '     <vc:Chart.Titles>'
                       + '         <vc:Title Text="Athens 2004 Olympics" FontSize="14"/>'
                       + '     </vc:Chart.Titles>'
                       + '     <vc:Chart.Series>'
                       + '         <vc:DataSeries RenderAs="Column" LabelEnabled="True">'
                       + '             <vc:DataSeries.DataPoints>'
                       + '                 <vc:DataPoint AxisXLabel="USA" YValue="35"/>'
                       + '                 <vc:DataPoint AxisXLabel="China" YValue="32"/>'
                       + '                 <vc:DataPoint AxisXLabel="Russia" YValue="27"/>'
                       + '                 <vc:DataPoint AxisXLabel="Australia" YValue="17"/>'
                       + '                 <vc:DataPoint AxisXLabel="Japan" YValue="16"/>'
                       + '             </vc:DataSeries.DataPoints>'
                       + '         </vc:DataSeries>'
                       + '     </vc:Chart.Series>'
                       + ' </vc:Chart>';
           
                    // Set Chart Data file Uri
            vChart.setDataXml(chartXml);

            vChart.loaded = function (args) {
                chart = args[0];
                update();
            };
           
            // Render chart
            vChart.render("VisifireChart0");

        </script>
       
    </div>


http://www.felipehuggler.com/felipehuggler/testes/grafico/

 

05/04/2011 Development / java script

Uma maneira simples para não ter que ficar escrevendo prototype

    Function.prototype.newMethod = function(methodName, func) {
        this.prototype[methodName] = func;
        return this;
    };

    var Pessoa = function() { }
    .newMethod('fala', function() {
        alert('Falando'); return this;
    })
    .newMethod('escuta', function() {
        alert('Escutando'); return this;
    })
    .newMethod('anda', function() {
        alert('andando'); return this;
    });

    var p = new Pessoa();
    p.fala();
    p.escuta();
    p.anda();

 

26/03/2011 Development / java script

Eu só tinha conhecimento do AjaxPro, uma DLL que registrada na página, acessa os métodos behind Code via Javascript.

Estudando em casa, acabei descobrindo que o script manager do Visual Studio, também oferece essa funcionalidade.

Vamos lá!

Primeiro insera o controle scriptManager na página

    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="maganger" EnablePageMethods="true"></asp:ScriptManager>
    </form>
    <button onclick="getPeople()">chamarMetodo</button>

Agora o javascript que fará o acesso aos métodos

        function getPeople() {
            PageMethods.getPeople("", callbackSucess, callbackError);
        }

        function callbackSucess(retorno) {
            alert(retorno[0].Nome);
        };

        function callbackError(retorno) {};

Agora vamos fazer o método n behind Code

    [WebMethod]
    [ScriptMethod(ResponseFormat= ResponseFormat.Json)]
    public static IList<Pessoa> getPeople(string txt)
    {
        IList<Pessoa> pessoa = new List<Pessoa>();
        for (int x = 0; x <= 5; x++)
        {
            Pessoa p = new Pessoa();
            p.Idade = "Idade " + x;
            p.Nome = "Pessoa " + x;
            pessoa.Add(p);
        }

        return pessoa;
    }


    public class Pessoa {
        public string Nome { get; set; }
        public string Idade { get; set; }
    }

É necessário registrar os seguintes namespaces:

using System.Web.Services;
using System.Web.Script.Services;
using System.Collections;

É isso, espero que seja útil!

 

15/02/2011 Development / java script

Essa dica aqui é um baita pulo do gato!

Quando estamos trabalhando com prototype usamos a seguinte sintaxe.

function Classe(){};
Classe.prototype.Metodo1 = function(){};
Classe.prototype.Metodo2 = function(){}

Quando fazemos uma chamada a um WebMethod que está registrado no servidor, fazemos: Namespace.Pagina.WebMetodo(arg1, arg2, fnCallback)

fnCallback é o método que tratará a resposta do WebMetodo. Acontece que se chamarmos WebMetodo(args1, args2, this.Metodo1)...this.Metodo1 perderá a herança de this da Classe original, o this agora é a resposta do webMetodo.

Para fazermos a chamada corretamente, devemos fazer:

Namespace.Pagina.WebMetodo(args1, args2, this.Metodo1.bind(this));

Espero que sirva.

 

08/02/2011 Development / java script

Criei esse plugin que eh rapidnho e dah uma enganada legal na aplicacao. Quem quiser eh soh mandar bala. Naum coloquei todos os eventos, mas podem ser passados por parametros e isso fica a criterio de quem quiser implementar. ;-)

$.fn.comboBox = function(options) {

    function combo(cbo) {

        var $dv = jQuery('

').addClass("cboBox");
        var $sp = jQuery('');
        var selected = cbo.find(":selected:first");

        if (selected.length == 0) {
            selected = cbo.find("option:first");
        }

        $sp.html(selected.html());

        cbo.css('opacity', 0).wrap($dv).before($sp); /*este eh o segredo*/

        /* handlers */
        /**********************/
        cbo.bind(
            { "change.uniform": function() {
                $sp.text(cbo.find(":selected").html());
            },
                "focus.uniform": function() { },
                "blur.uniform": function() { },
                "mousedown.uniform touchbegin.uniform": function() { },
                "mouseup.uniform touchend.uniform": function() { },
                "click.uniform touchend.uniform": function() { },
                "mouseenter.uniform": function() { },
                "mouseleave.uniform": function() { },
                "keyup.uniform": function() {
                    $sp.text(cbo.find(":selected").html());
                }
            });
    };

    return this.each(function() {
        combo(jQuery(this));
    });
}

div.cboBox { border: 1px solid gray; background: black; color: gray; background: url('seta.gif') no-repeat right; }
div.cboBox span { position:absolute; margin: 2px 0px 0px 3px }
div.cboBox span, select {font-family: Arial; font-size: 11px}

Demo

 

01/02/2011 Development / java script

        var profile = [{
            pagina: 'pagina1',
            thema: 'thema1',
            id: new Date().getDate(),
            perfil: 1,
            widgets: [{}],
            using: true
        }];
       
        function Controller() {
            this.oProfile = [];
        };

        Controller.prototype.loadprofile = function(p) {
            this.oProfile = p;
        };


    Controller.prototype.saveProfile = function() {

        var pagina = 'novapagina';

        /*if (pagina == getPage(pagina)) {
            alert('pagina jã existe');
            return false;
        }*/

        var o = {
            'pagina': pagina,
            'thema': 'thema2',
            'id': new Date().getDate(),
            'perfil': '2',
            'widgets': this.fullWidgets(),
            using: false

        }

        this.oProfile.push(o);
        var p = this.oProfile;
        alert(jQuery.toJSON(p));
    }
   
    /* retorna todos os wifgets da pagina atual */
    Controller.prototype.fullWidgets = function() {
        var widgets = [{ 'type': 'book' }, { 'type': 'book' }, { 'type': 'book' }, { 'type': 'book'}];
        return widgets;
    }

    var hb = new Controller();
    hb.loadprofile(profile);
    hb.saveProfile();

 

18/01/2011 Development / java script

Trabalhando em cima das resizes das janelas do novo home broker da Xp Investimentos, tive a seguinte idéia:

// JSCRIPT

jQuery(document).ready(function() {
var hr = null;
$("div .drag").live('mousedown', function(e) { hr = { y: e.pageY, p: $(this).parent(), ph: $(this).parent().height() }; e.preventDefault(); });

$(document)
.mousemove(function(e){ if (hr) { hr.p.height(hr.ph + (e.pageY - hr.y)); } e.preventDefault(); })
.mouseup(function(e){ hr = null; e.preventDefault(); /* Poderia chamar algum evento qualquer */ });
});

// HTML

<div class="full">Texto<div class="drag">div>div>
<div class="full">Texto<div class="drag">div>div>
<div class="full">Texto<div class="drag">div>div>

// ESTILO CSS

div.drag { background-color: #DDD; bottom:0px; position:absolute; width:100%; margin-top:-2px; cursor: n-resize; height: 2px;}
div.full   { border:1px solid red; position: relative; float:left; width: 250px; margin:5px}

 

14/01/2011 Development / iis

Procure o script adsutil.vbs (localizado na c:\inetpub\AdminScripts) e execute via command

adsutil set w3svc/MaxConnections 40

 

13/01/2011 Development / java script

No projeto que eu estou trabalhando atualmente, a idéia é deixar todos os templates previamente formatados para apenas receber um bloco de Json, que fará a inject no html.

Pensei em usar o jquery Template ou o jsTemplate do Google. Mas foi ai que eu comecei a pensar em como ficaria uma implementação simples usando expressão regular. O resultado é script abaixo.

    var json = { Nome : 'Felipe Huggler', idade : '27', cidade : 'Curitiba'};
    var html = "
  • @{Nome}
  • @{idade}
  • @{cidade}
"; var View = { inject: function(json, template) { var pattern = /\@\{(\w*)\}/g; var html = template.replace(pattern, function(key) { return json[key.slice(2, -1)]; }) return html; } }; alert(View.inject(json, html));
05/01/2011 Development / java script

A primeira forma de eliminarmos a repetição de trabalho é utilizando carregamento tardio. Carregamento tardio siginifica que nenhum trabalho será feito até que sua informação seja necessária.

Ex: Função sem carregamento tardio.

function alertaUsuario(msg){
if browser == IE
alert(msg)
else
console(msg)
}

Não tem lógica, ficarmos chegando toda hora se o browser é IE ou FF, é inimaginavel que o usuário troque de browser estando na mesma página, não é?

Agora com carregamento tardio.

function alertaUsuario(msg){
if (browser == IE){
alertUsuario = function(msg){
alert(msg)
}}
else{
alertUsuario = function(msg){
console(msg)}}}

Ou seja, apenas sobrescrevemos o código ;-)

 

25/12/2010 Development / java script

Abri minha garrafa de black label, 12 anos e comecei a matutar, o porque do travamento no IE quando ocorre grandes atualizações em lote.

Fiz essas funçõeszinha pra gerar e atualizar os Boxes.

    .box { width: 125px; height: 125px; padding:5px; border: 2px solid red; margin: 5px; float: left }

        function RegistrarAssinatura() {
            $.each(ativos, function(chave, key) {
                $("
").prependTo("body"); }) }; var box; function TratarMensagemPublicada(s) { var m = s.split("#"); var acao = m[0] var ativo = m[1]; var valor = m[2]; //if (acao.toString() == 'PUBQUT') { if (box) box.css("background", ""); box = $("#Box[ativo='" + ativo + "']"); box.css("background", "yellow").html("Ativo: " + ativo + "
Valor: R$" + valor + ",00
").find("#lblVolume").text("Volume: " + valor); //} }; var ativos = ['PETR4', 'CESP6', 'BBDC4', 'MMXM3', 'LLXL3', 'GOAU4', 'USIM5', 'ITUB4', 'VALE5', 'OGX3', 'NETC4', 'OSXB3', 'BBAS3', 'OGXP3', 'BVMF3', 'BOVA11', 'CCR03', 'HAGA4', 'ALLL3', 'BBRK3', 'MILK11', 'IDNT3', 'EVEN3', 'ICFK11', 'WING11', 'RAPT4', 'CESP6', 'LLIS3', 'USIM5']; var msg = ['PUBQUT', 'PUBBOK', 'ASWQUT']; function HttpPublisher() { var m = msg[parseInt(Math.random() * msg.length)] + "#" + ativos[parseInt(Math.random() * ativos.length)]+ "#" + parseInt(Math.random() * 1000, 10); top.TratarMensagemPublicada(m); setTimeout("HttpPublisher()", 1); }; RegistrarAssinatura(); HttpPublisher();

Parece que está tudo OK! Só falta testar Segunda-feira na empresa. ;-)

 

20/12/2010 Development / java script
Use o método AddHandler para adicionar um manipulador de eventos DOM o elemento que expõe o evento. O parâmetro eventName não deve incluir o "on " prefixo. Por exemplo, especificar "clique"em vez de "onclick".
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", processEventInfo);
    var myArray = ['altKey', 'button', 'charCode', 'clientX', 'clientY',
                   'ctrlKey', 'offsetX', 'offsetY', 'screenX', 'screenY', 
                   'shiftKey', 'target', 'type'];

    function processEventInfo(eventElement) {
        var result = '';
        for (var i = 0, l = myArray.length; i < l; i++) {
            var arrayVal = myArray[i];
            if (typeof(arrayVal) !== 'undefined') {
                // Example: eventElement.clientX
                result += arrayVal + " = " + eval("eventElement." + arrayVal) + '
'; } } $get('Label2').innerHTML = result; }
08/12/2010 Development / java script
    function Protect() {
        this.arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        this.arrsenha = [];
        this.vSenhaOk = true;
    };

    Protect.prototype.makeRandom = function() {
        for (var j, x, i = this.arr.length; i; j = parseInt(Math.random() * i), x = this.arr[--i], this.arr[i] = this.arr[j], this.arr[j] = x);
        return this.arr;
    };

    Protect.prototype.makeButtons = function() {

        this.makeRandom();

        for (var b = 0; b < 10; b += 2) {
            var btn = document.createElement("button");
            btn.setAttribute("value", this.arr[b] + " ou " + this.arr[b + 1]);
            var p = this.arrsenha;
            btn.onclick = function() { p.push(this.value.toString().replace(" ou ", "")) }
            document.getElementById('teclado').appendChild(btn);
        }

        this.makePass();
    };

    Protect.prototype.makePass = function() {
        document.getElementById('senha').value = (this.makeRandom()).toString().substring(0, 7).replace(",", "").replace(",", "").replace(",", "");
    };

    Protect.prototype.checkPass = function() {
        var vUserPassword = document.getElementById('senha').value;
        if (this.arrsenha.length > 0) {
            for (var i = 0; i < this.arrsenha.length; i++) {
                if (vUserPassword.substr(i, 1) != this.arrsenha[i].substr(0, 1) && vUserPassword.substr(i, 1) != this.arrsenha[i].substr(1, 1)) {
                    this.vSenhaOk = false;
                    break;
                }
            }
            alert('Sua senha está: ' + this.vSenhaOk);
        }
    };

    var pass = new Protect();
    pass.makeButtons();
30/11/2010 Development / ferramentas

Atualizei o plugin Syntax Highlighter em meu site. Agora é um plugin do jQuery. Vamos ver se atenta a necessidade.

Mais detalhes em: http://www.steamdev.com/snippet/

 

29/11/2010 Development / ferramentas

Atendimento online  hoje é sinônimo de responsabilidade com o cliente. Pensando nisso, resolvi buscar na net uma solução alternativa aos serviços de chat pagos, e encontrei uma ferramenta da Microsoft que possibilita inserir um sistema de chat no seu site utilizando o MSN. Vamos ver abaixo os passos que dever ser seguidos para que isso seja possível.

Para que isso seja possível você deverá ter um Passport, ou seja, uma conta no Hotmail.

  1. Acesse o site http://settings.messenger.live.com/applications/WebSettings.aspx
  2. Faça o login com o seu Passport
  3. Marque o checkbox “permitir que as pessoas vejam o seu status do Messenger em sites e enviem mensagens para você”. Se essa opção não for marcada, seu status será sempre OFFLINE.
  4. Clique em “Salvar”
  5. Clique na guia “Criar HTML” e escolha suas preferências visuais e funcionais.
  6. Copie o HTML que será gerado e cole na página que quiser.

Feito isso seu sistema de Atendimento Online está pronto para ser utilizado. ;-)

 

30/11/2010 Development / java script

Eu sou extremamente apaixonado em procurar coisas novas, aprender, e dividir o pouco conhecimento que tenho. Essa semana eu tava analizando meu site e o eskema que eu coloco os fontes não é legal! Procurei um plugin que mostrasse de forma mais profissional os códigos e acabei encontrando o SyntaxHighlighter.

Pra instalar é bem tranquilo. Basta baixar os arquivos css#js e chamar a função SyntaxHighlighter.all()

E pra chamar o código na página:

function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
22/11/2010 Development / asp.net

Surgiu uma situação no trabalho, que precisava ler um arquivo txt, no qual as colunas estavam delimitadas pelo controle TAB.

Segue o código de exemplo:

        Dim delimiter As Char = ControlChars.Tab
        Dim delimitedText() As String

        Dim file As New System.IO.FileInfo(filepath)
        If file.Exists Then

            Dim doc As New StreamReader(filepath)
            While doc.Peek >= 0
                delimitedText = doc.ReadLine().Split(delimiter)

                'DADOS BÁSICOS DO PROCESSO
                '*************************************************************************
                If delimitedText(0) = "2" Then
                    c.ExecuteNonQuery("INSERT INTO TABELA (CMP1, CMP2, CMP3) VALUES ('" & delimitedText(1) & "','" & delimitedText(2) & "','" & Convert.ToDateTime(DateTime.ParseExact(delimitedText(4), "ddMMyyyy", System.Globalization.CultureInfo.CurrentCulture)).ToString("dd/MM/yyyy") & "')")
                End If

            End While

        End If

 

22/11/2010 Development / asp.net

Dim doc As StreamReader = File.OpenText(filepath)
While doc.Peek >= 0
    MsgBox(doc.ReadLine())
End While

 

17/11/2010 Development / java script

Só funciona no IE!

        var myArray = new Array("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday");
        var collection = new Enumerator(myArray);
       
        for( collection.moveFirst(); !collection.atEnd(); collection.moveNext() )
        {
            document.write( collection.item() + "<br />");
        }

 

02/12/2010 Development / java script
function Animal(type) {
    if (type == "cat") {
        this.__proto__ = Cat.prototype;
    } else if (type == "dog") 04.{
        this.__proto__ = Dog.prototype;
    } else if (type == "fish") 06.{
        this.__proto__ = Fish.prototype;
    }
}
Animal.prototype.say = function() {
    alert("This animal can't speak!");
}
function Cat() {
    // init cat
}
Cat.prototype = new Animal();
Cat.prototype.say = function() {
   alert("Meow!");
}
function Dog() {
    // init dog
}
Dog.prototype = new Animal();
Dog.prototype.say = function() {
    alert("Bark!");
}
function Fish() {
    // init fish
}
Fish.prototype = new Animal();
var newAnimal = new Animal("dog");
newAnimal.say();
17/11/2010 Development / java script

Agora é possível usar instruções SQL no HTML5.

Segue o link - http://dev.w3.org/html5/webdatabase/

 

09/11/2010 Development / asp.net

Convert.ToDateTime(data).ToString("yyyy-MM-dd")

 

08/11/2010 Development / css

Fiz essa classe genérica, que serve tanto para menu na horizontal quanto vertical. Espero que sirva!

.dropdown                 {clear: left;}
.dropdown > ul            {padding: 7px 0;overflow: hidden;z-index: 100;}
.dropdown ul li           {display: inline;float: left;white-space: nowrap;}
.dropdown ul li a         {display: block;float: left;padding: 3px 5px;font-size: 8.5pt;color: blue;margin-right: 2px;height: 14px;text-decoration: none;}
.dropdown ul li ul        {display: none;z-index: 101;position:absolute;min-width: 120px;background: #fff;border: 1px solid #CCC;margin-top: 20px;padding: 2px;}
.dropdown ul li ul li     {display: block;float: none;}
.dropdown ul li ul li a   {float: none;margin: 0;padding: 5px;#width: 120px;height: auto;}
.dropdown ul li ul li ul  {margin: -27px 0 0 121px;}

<DIV class=dropdown><BR>
<UL><BR>
<LI><A href="#">ATENDIMENTO</A><BR>
<UL><BR>
<LI><A href="#">CADASTRO</A><BR>
<LI><A href="#">GERAR REGISTRO</A><BR>
<LI><A href="#">GERAR CARTÃO</A><BR>
<LI><A href="#">ENCAMINHAMENTOS</A><BR>
<LI><A href="#">ESTATÍSTICA DE CADASTRO</A><BR>
<LI><A href="#">ESTATÍSTICA DE ATENDIMENTO</A><BR></LI></UL><BR><BR>
<LI><A href="#">FATURAMENTO</A><BR>
<UL><BR>
<LI><A href="#">RELATÓRIOS</A><BR>
<LI><A href="#">LISTAGEM DE ATENDIMENTO</A><BR>
<LI><A href="#">PROCEDIMENTOS</A><BR>
<LI><A href="#">ESPECIALIDADES</A><BR>
<LI><A href="#">PROGRAMAS</A><BR>
<LI><A href="#">DIÁRIOS BAMS</A><BR>
<LI><A href="#">ESTATÍSTICA</A><BR></LI></UL><BR><BR></LI></UL><BR></DIV>

 $(document).ready(function(){
  $('.dropdown li').hover(
   function() { $('> ul', this).css('display', 'block'); },
   function() { $('> ul', this).css('display', 'none'); });
 });

 

04/11/2010 Development / ferramentas

Salve, salve!

Dando continuidade ao Projeto SIO, hoje vou falar um pouco da arquitetura do sistema, divisao das classes, estrutura das pastas, padrao das telas, imagens, etc...

Agora que o projeto esta todo em AspNet, nao existe mais aquele lance de include file, graaaacas a Deus, a partir de qualquer localidade do arquivo.aspx eh possivel instanciar uma classe sem a necessidade de ficar embutindo a mesma no codigo. ;-)

A divisao das pastas ficou da seguinte maneira

Toda parte de Login, Logoff, Contrucao de Tela, Menu, esta localizada na Index.aspx e todas as requisicoes de grids, autocomplete, publicacao de mensagens fica na _autoExec.aspx

Os modulos ficam na pasta Modulos, e as imagens, css, libs, ficam na pasta Core, alem disso, uma pasta chamada appCode com as classes de Conexao, Grid e Negocios.

Todas as janelas, todos os grids, todos os alertas, tem o mesmo padrao de layout, isso faz com que o sistema tenha uma identidade semantica, o usuario assim que ve uma nova tela, sabe que os botoes de salvar estarao em baixo, os icones de fechar, maximizar no topo, as paginacoes no rodape, os avisos com cores em destaque mas naum mto chamativas.

To terminando a parte de compatibilidade com os Browsers IE, CHROME, FF, SAFARI.

Bom eh isso, caso alguem queira uma copia do sistema, para fazer sua propria implementacao e tal, pode me encaminhar um email que eu envio os fontes e a documentacao. ;-)

 

 

29/10/2010 Development / java script

Quando a requisição demora mais que o tempo default de resposta. o AjaxPro retorna um erro. Segue abaixo o tratamento.

    if (typeof AjaxPro != "undefined" && AjaxPro !== null) {
        AjaxPro.timeoutPeriod = 600000;
        AjaxPro.onTimeout = function(b, res) {
            alert('Ocorreu um problema de comunicação com o servidor!');
        }
    }

 

27/10/2010 Development / java script

Duas maneiras de escrever classes. Eu venho utilizando bastante a primeira, mas de um tempo pra cá vou começar a dar mais enfase na segunda maneira, achei que fica mais organizado o código.

function Pessoa(){
    this.pessoas = [];
};
Pessoa.prototype.getNome = function(){
    return this.nome;
};
Pessoa.prototype.setNome = function(nome){
    this.nome = nome;
};
Pessoa.prototype.addPessoa = function(nome, idade, cod){
    var obj = {};
    obj.idade = idade;
    obj.nome = nome;
    obj.codEmpresa = cod;
    this.pessoas.push(obj);
};

function Empresa(){
    this.empresas = [];
};
Empresa.prototype = new Pessoa();
Empresa.prototype.addEmpresa = function(nome, cod){
    var obj = {};
    obj.nome = nome;
    obj.cod = cod;
    this.empresas.push(obj);
};
Empresa.prototype.funcionarios = function(cod){
    var func = [];
    for(var x = 0; x        if(this.pessoas[x].codEmpresa == cod){
            func.push(this.pessoas[x]);
        }
    }
    return func;
};

var Pessoa = {
    Class : function(){
        //get e setter ao mesmo tempo
        this.nome = function(n){ return n ? nome = n : nome; }
        this.idade = function(i){return i ? idade = i : idade;}
        this.codEmpresa = function(cd){return cd ? codEmpresa = cd : cd;}
        this.pessoas = [];
       
        this.addPessoa = function(nome, idade, cod){
            var obj = {};
            obj.idade = idade;
            obj.nome = nome;
            obj.codEmpresa = cod;
            this.pessoas.push(obj)
        }
           
        this.funcionarios = function(cod){
            var func = [];
            for(var x = 0; x                if(this.pessoas[x].codEmpresa == cod){
                    func.push(this.pessoas[x]);
                }
            }
            return func;
        }
    } //Fim da Class
};


var Empresa = {
    Class : function(){
        Pessoa.Class.apply(this); //Aplique Pessoa.Class na classe Empresa
        this.empresas = [];
       
        this.addEmpresa = function(nome, cod){
            var obj = {};
            obj.nome = nome;
            obj.cod = cod;
            this.empresas.push(obj);
        }
       
        this.funcionarios = function(cod){
            var func = [];
            for(var x = 0; x                if(this.pessoas[x].codEmpresa == cod){
                    func.push(this.pessoas[x]);
                }
            }
            return func;
        }
    } //Fim da Class
};


var e = new Empresa.Class();
e.addEmpresa('Xurupitas Inc', 10);
e.addPessoa('Huggler', 20, 10);
e.addPessoa('Hugo Tostes', 90, 10);
e.addPessoa('Luis Claudinho', 28, 10);

e.addEmpresa('Microsoft', 12);
e.addPessoa('Jack Bower', 20, 12);
e.addPessoa('Sandra Bullock', 90, 12);
e.addPessoa('Tais Araujo', 28, 12);

alert(e.funcionarios(10));

// ******************************************************

Trocando idéia com o Eduardo [ http://javiani.wordpress.com/ ], ele mandou a seguinte implementação:

var Interface = {
abstract :function(constructor){
if( this.constructor == constructor )
throw new Error(‘Classe abstrata não pode ser instanciada’)
}
}

var Organizacao = {

Class :function(){

Interface.abstract.apply( this, [Organizacao.Class] )

var data = { empresas :[], funcionarios :[] }

this.add = function(){
return this.add[ arguments.length ].apply( this, arguments )
}

this.add[2] = function(nome, codigo){
data.empresas.push({ nome :nome, codigo :codigo })
}

this.add[3] = function(nome, idade, codigo){
data.funcionarios.push({ nome :nome, idade :idade, codigo :codigo })
}

function get(type, codigo){
var ret = []
var search_for = data[ type ]
for(var i = 0; i < search_for.length; i++)
if( search_for[i].codigo == codigo)
ret.push(search_for[i])
return ret
}

this.get_funcionario = function(id){
return get('funcionarios', id)
}

this.get_empresa = function(id){
return get('empresas', id)
}

}

}

var Empresa = {
Class :function(){
Organizacao.Class.apply( this )

// Outros métodos
}
}

var e = new Empresa.Class

e.add('Google Inc', 10)
e.add('Felipe Huggler', 20, 10)
e.add('Hugo Tostes', 90, 10)
e.add('Luis Claudinho', 28, 10)
e.add('Microsoft', 12)
e.add('Jack Bower', 20, 12)
e.add('Sandra Bullock', 90, 12)
e.add('Tais Araujo', 28, 12);

console.log(e.get_funcionario(10));
console.log(e.get_empresa(10)); 

15/10/2010 Development / java script

Cara, programacao eh uma parada foda mesmo, to aki em casa 2:30 da manha, viajando num componentezinho de dropdown em jquery. Mas pq? Pq eu fiquei encucado em saber como o viado do programador, rsrsrsr...manipula o dropdowm quando o cara clicava em outros elementos, objetos na pagina.

Queria saber se ele colocava handlers, fazia alguma assinatura e ficava chegando de tempo em tempo, ateh que eu descobri o pulo do gato, e que pulo, um verdadeiro salto, rsrsrsrs

Na verdade, ele mantem o dropdowm, mas ele esconde o select, deixando apenas as options, e o evento o browser mesmo manipula.

Vamos ao exemplo, fiz sem CSS mesmo, basta clicar em cima do numero pra ver o resultado

// JAVASCRIPT

$().ready(function() {

$("#meuSelect").cboHuggler();

});

$.fn.cboHuggler = function(options) {

function combo(elem) {

var $el = $(elem);

alert($el.attr("id"));

var divTag = $('<div />'),

spanTag = $('<span />');

var selected = elem.find(":selected:first");

if (selected.length == 0) {

selected = elem.find("option:first");

}

spanTag.html(selected.html());

elem.css('opacity', 0);

elem.wrap(divTag);

elem.before(spanTag);

divTag = elem.parent("div");

spanTag = elem.siblings("span");

// handlers

elem.bind({

"change.uniform": function() {

spanTag.text(elem.find(":selected").html());

},

"focus.uniform": function() {

},

"blur.uniform": function() {

},

"mousedown.uniform touchbegin.uniform": function() {

},

"mouseup.uniform touchend.uniform": function() {

},

"click.uniform touchend.uniform": function() {

},

"mouseenter.uniform": function() {

},

"mouseleave.uniform": function() {

},

"keyup.uniform": function() {

spanTag.text(elem.find(":selected").html());

}

});

}

return this.each(function() {

var elem = $(this);

combo(elem);

})

}

// HTML

<select id="meuSelect">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

Bom, espero que sirva de exemplo!

 

13/10/2010 Development / asp3

Devolve um valor a indicar qual o tipo de variável que estamos a usar.
MeuCheck = VarType(300) ' Devolve 2.
MeuCheck = VarType(#10/19/62#) ' Devolve 7.
MeuCheck = VarType("VBScript") ' Devolve 8.

Os valores acima devolvidos são representativos de :
0 -> Empty (uninitialized)
1 -> Null (no valid data)
2 -> Integer
3 -> Long integer
4 -> Single-precision floating-point number
5 -> Double-precision floating-point number
6 -> Currency
7 -> Date
8 -> String
9 -> Automation object
10 -> Error
11 -> Boolean
12 -> Variant (used only with arrays of Variants)
13 -> A data-access object
17 -> Byte
8192 -> Array

Ainda temos os casos de adicao de tipos. Exemplo:

VbByte(17)+VbArray(8192) = 8209

8192 + 2 = 8194

Fiz esse post, porque estava fazendo uma aplicacao que guardava dados Binarios em uma Session e quando eu fazia response.BinaryWrite estava dando xabu!!! Pra voce saber se existe dados binarios dentro de uma variavel, eu fiz o seguinte if(varType(Session("meuId"))) = 8209 :-)...Plaaaay!

Espero que sirva de ajuda!

 

07/10/2010 Development / java script

Entaum, varios amigos ficam com essa duvida, de quando usar o tal this, oque que eh o this, quem inventou o this?

this eh uma referencia ao objeto que esta chamando o metodo!

Exemplo rapidinho:

// Extendendo a funcao ao objeto String
String.prototype.hello = function(){
 alert(this);
}

Duas maneiras de chamar o metodo:

var x = "teste";
x.hello(); ou "este eh o this".hello();

Eh isso, Abraaaaco ;-)

 

30/09/2010 Development / java script

Imports
// http://code.jquery.com/jquery.js
// jquery.tmpl.js

<SCRIPT>

    var data = [{ stock: "PETR4", id: 1, value: "R$40,00" }, { stock: "CESP6", id: 2, value: "R$50,00" }, { stock: "ITAU4", id: 3, value: "R$60,00"}];

    function update() {
        $("ul").html("");
        $("#Template").tmpl($.shuffle(data)).appendTo("ul");
    }

    jQuery(function(){
        setInterval("update()", 1000)
    });

    // Extendo a funcao para jQuery * Realiza um random do Array
    $.shuffle = function(arr) {
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    }

</SCRIPT>

<ul></ul>

<script id="Template" type="text/html">
    <li><a href="${id}">${stock}</a> - ${value}</li>
<script>

 

28/09/2010 Development / java script

Cara, eu axo mto loooko, essas paradas de inovacao em termo de tecnologia. Jquery por exemplo, "fazer mais, escrevendo menos", Iraado!

LinqToSQL, outra maneira de escrever SQL e tem o mesmo resultado, foooda!

JavaScript Template eh a mesma coisa, vc escreve um template HTML e atraves de um JSON ele preenche automaticamente esse template. Qual a vantagem? naum precisamos ficar varrendo o JSON, ele se encaixa automaticamente! ;-)

Usando o metodo tradicional temos:

var clientData = [ { name: "Rey Bango", id: 1 },{ name: "Mark Goldberg", id: 2 },{ name: "Jen Statford", id: 3 }];

for(var i=0; i<client.name.length; i++) { temp += "<li><a href='clients/"+client.id[i]+"'>" + client.name[i] + "</a></li>"; }

Com JsTemplate:

<script id="clientTemplate" type="text/html"> 
<li><a href="clients/${id}">${name}</a></li>
</script>

Fazendo a chamada:

$("#clientTemplate").tmpl(clientData).appendTo( "ul" );

Aqui esta a pagina no projeto: http://github.com/nje/jquery-tmpl


 

16/09/2010 Development / asp3

O problema: Um cliente solicitou que determinados arquivos nao poderiam ser baixados pelo usuario diretamente atraves da URL do browser. Ex: Um documento Word, o usuario clica com o botao direito no link e Salvar como. 

O desafio: Criar um mecanismo que bloqueasse o download, mas ao mesmo tempo, o usuario tivesse acesso ao conteudo.

A solucao: Assim que o administrador do sistema faz o upload do arquivo para a aplicacao, o arquivo fica salvo no banco de dados em formato binario, e o arquivo original eh excluido do servidor. Quando solicitado o conteudo, o script leh o formato binario e atraves do content-type setado, o registro eh visualizado.

Mas dae, tuh fica pensando, grande merda, hehehehe...o binario esta no temporario da maquina do cara, ou no caso de uma imagem, soh dar um print na tela neh...CLARO, exatamente! Mas o fato eh que os arquivos estavam sendo linkados em outra pagina, de outro site, e agora os arquivos tem nome randomicos, ou seja, naum existem, soh acessando a pagina mesmo ;-)

Segue o script abaixo!

'*************************************************************
'TRANFORMANDO O ARQUIVO NO FORMATO BINARIO
'DECLARANDO VARIAVEIS
Dim ObjStr
Dim ds_addr_imagem
Dim varBuffer
Dim Ors
Dim oConn

'CRIANDO O OBJETO "STREAM"
Set ObjStr = Server.CreateObject("ADODB.Stream")

'INDICANDO O ENDEREÇO DA IMAGEM
ds_addr_imagem = Server.MapPath("17910-rs.jpg")

'INDICA O TIPO DE DADO QUE O OBJETO DEVERÁ LER
ObjStr.Type = 1'‘AdBinary – Binário

'ABRE O OBJETO
ObjStr.Open

'LE INFORMAÇÕES DO ARQUIVO
ObjStr.LoadFromFile ds_addr_imagem

'DECARREGA INFORMAÇÕES NA VARIAVEL
varBuffer = ObjStr.Read

'DESTROI O OBJETO "STREAM"
objStr.Close
Set ObjStr = nothing

'*************************************************************
'MOSTRANDO O ARQUIVO COM OUTRO NOME
Response.Buffer = True
Response.ContentType = "image/gif"
Response.AddHeader "Content-Disposition", "inline; filename =" & getRandom() & ".gif"
Response.CacheControl = "public"

Response.BinaryWrite varBuffer 

Espero que ajude!

 

31/08/2010 Development / asp.net

Tava fazendo um exemplo aki em casa, de como um webService responder um Objeto JSON direto pra pagina.

A parte de serializacao dos dados para o formato javascript, foi tranquilo, atraves da classe JavaScriptSerializer().Serialize(objeto);

Oque eu achei um pouco estranho, foi que mesmo retornando um objeto Javascript eh necessario realizar o parse do Json, usando o eval(resposta).

Segue um exemplo do WebService e a chamada usando jQuery.

WebService
//*****************************************************

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Web.Services.Protocols;

namespace WebService1
{
    public class Employee
    {
        public string Name { get; set; }
        public string Company { get; set; }
        public string Address { get; set; }
        public string Phone { get; set; }
        public string Country { get; set; }
    }
   
    /// <summary>
    /// Service1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class Service1 : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string HelloWorld()
        {
            return "{'resposta' : 'Hello World'}".ToString();
        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string TestJSON()
        {
            Employee[] e = new Employee[2];
            e[0] = new Employee();
            e[0].Name = "Bill Gates";
            e[0].Company = "Microsoft";
            e[0].Address = "Sillicon Valley";
            e[0].Phone = "1234567890";
            e[0].Country = "US";
            e[1] = new Employee();
            e[1].Name = "Eike Batista";
            e[1].Company = "OGX";
            e[1].Address = "Brasil";
            e[1].Phone = "1234567890";
            e[1].Country = "BR";
            return new JavaScriptSerializer().Serialize(e);
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
        public Employee[] TestXML()
        {
            Employee[] e = new Employee[2];
            e[0] = new Employee();
            e[0].Name = "Bill Gates";
            e[0].Company = "Microsoft";
            e[0].Address = "Sillicon Valley";
            e[0].Phone = "1234567890";
            e[0].Country = "US";
            e[1] = new Employee();
            e[1].Name = "Eike Batista";
            e[1].Company = "OGX";
            e[1].Address = "Brasil";
            e[1].Phone = "1234567890";
            e[1].Country = "BR";
            return e;
        }

    }
}

JavaScript
//*****************************************************

        function testJson() {
            $.ajax({
                type: "POST",
                url: "http://localhost:50385/Service1.asmx/TestJSON",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {

                    $("#jsonResponse").html(msg['d']);
                    var data = eval('(' + msg['d'] + ')');
                    var t = "<table border=1> <tr>" +
                    "<td> <strong>Name</strong></td> <td> " +
                    "<strong>Company</strong></td> <td> " +
                    "<strong>Address</strong></td> <td> " +
                    "<strong>Phone</strong></td> <td> " +
                    "<strong>Country</strong></td> </tr> ";
                    jQuery.each(data, function(rec) {
                        t = t + " <tr> <td> " + this.Name + "</td> <td> " +
                    this.Company + "</td> <td> " + this.Address +
                    "</td> <td> " + this.Phone + "</td> <td> " + this.Country + "</td> </tr> ";
                    });

                    t = t + " </table> ";
                    $("#jsonDiv").html(t);
                },
                error: function(msg) {

                }

            });
        };
       
       
        function testXml() {
            $.ajax({
                type: "POST",
                url: "http://localhost:50385/Service1.asmx/TestXML",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "xml",
                success: function(msg) {
                    alert(msg);
                }
            });
        };

OBSERVACAO:

Nao sei o porque, mas tive que navegar pelas propriedades da resposta e ver que o eval soh funciona com msg['d']. Realmente naum sei da onde apareceu esta propriedade 'd', mas tah funcionando, entaum eh isso que interessa ;-)...Bom eh isso, Bons Estudos galera!

 

31/08/2010 Development / java script

Assim como o XmlHttpRequest, webSocket eh um componente acessível por Javascript disponível em todo browser que implementa HTML 5. Já existe no Google Chrome 4.x, no Safari/WebKit e no Firefox 3.7.

Com o WebSocket é possível abrir uma conexão HTTP, mantê-la aberta, ?escutar? seu stream por novas mensagens e reagir a elas via javascript e inclusive enviar novos dados (como uma nova mensagem), tudo na mesma conexão, sem precisar passar pelo peso da rotina de abrir conexão, enviar/receber dados, fechar conexão e repetir daqui a alguns segundos. Ou seja, a vantagem é diminuir a quantidade enorme de conexões batendo no servidor para uma ordem de grandeza menos.

Obviamente vai demorar um bom tempo para aparecer no IE, mas relaxa, existe uma alternativa muito interessante chamada Web-Socket.js. Ela simula a mesma API do WebSocket padrão (e no Chrome ela nem se ativa), mas usa um pequeno Flash como ponte para criar a conexão HTTP permanente, com os mesmos eventos.

Interessante neh, ficou curioso? Entaum vambora!


O construtor: WebSocket

O WebSocket (url, protocolo) construtor leva um ou dois argumentos. O primeiro argumento, URL, especifica a URL para o qual deseja se conectar. A, segundo o protocolo, se presente, especifica um sub-protocolo que o servidor deve oferecer suporte para a conexão seja bem sucedida.

Quando o WebSocket() é invocado, executa as seguintes etapas:

  1.  Parse da url, para obter host, porta, nome do recurso, e seguro. Se falhar a conexao, lancara um SYNTAX_ERR.
  2. Se a conexao falhar devido bloqueio do acesso a porta, lancara um SECURITY_ERR. Por exemplo porta 80 ou porta 443.
  3. Se o protocolo estiver presente, contém a seqüência de caracteres com pontos de código Unicode, então lance um SYNTAX_ERR.
  4. Deixe origem ser a serialização ASCII da origem do script que invocou o WebSocket () construtor, convertida em minúsculas ASCII.

Retorna uma nova WebSocket objeto, e prosseguir com estas etapas em segundo plano (sem bloquear scripts).

Estabelecer uma conexão Socket Web para um host host, na porta da porta (se foi especificado), de origem, com a bandeira seguro, com o nome do recurso como o nome do recurso, e com o protocolo como o protocolo (se houver).


bufferedAmount:

O atributo bufferedAmount deve retornar o número de bytes que foram enfileiradas, mas ainda não foi enviada.

readyState:

O atributo readyState representa o estado da conexão. Pode ter os seguintes valores:

CONNECTING (valor numérico 0)
A conexão ainda não foi estabelecida.

OPEN (valor numérico 1)
A Web Socket conexão é estabelecida e comunicação é possível.

CLOSED (valor numérico 2)
A conexão foi fechada ou não pôde ser aberto.

Quando o objeto é criado a sua readyState deve ser definida para (0)


send:

O metodo send(dados) transmite dados usando a conexão. Se o readyState atributo é CONNECTING, deve lancar um INVALID_STATE_ERR.
O método deve retornar true se a conexão ainda está estabelecida (e os dados foram enviados com sucesso ou em fila), ou falso se a conexão é fechada.


close:

O metodo close() deve fechar a conexão WebSocket, se houver, e mudar o readyState do valor do atributo para CLOSED(2). Se a conexão já está fechada, ele deve fazer nada.


Manipuladores de evento:

onopen:
Quando a conexao eh estabelecida, nesse momento o agente altera o readyState para OPEN(1)

onmessage:
QUando uma mensagem eh recebida, o agente usa a interface MessageEvent. Verifica se a conexao esta ativa e encaminha os dados.

onerror:
Quando uma conexao WebSocket eh detectada um erro.

onclose:
QUando o socket eh fechada. O agente altera o readyState para CLOSED(2), e em seguida lanca para o evento.

//*******************************************

INTERFACE:

[Constructor(in DOMString url, in optional DOMString protocols)]
[Constructor(in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
  readonly attribute DOMString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
           attribute Function onopen;
           attribute Function onmessage;
           attribute Function onerror;
           attribute Function onclose;
  readonly attribute DOMString protocol;
  void send(in DOMString data);
  void close();
};
WebSocket implements EventTarget

//*******************************************


Vamos ao exemplo:

Javascript bem simples

        var sock;
        function connectToServer() {
            try {
                sock = new WebSocket("ws://localhost:8181/websock");
                sock.onopen = sockOpen;
                sock.onerror = sockError;
                sock.onclose = sockClosed;
                sock.onmessage = sockMessage;
            } catch (e) {
                log("error:" + e);
            }
        }

        function sockOpen() {
            log("connected");
        }

        function sockError(error, p2) {
            log("socket error!");
        }

        function sockClosed() {
            log("socket closed");
        }

        function sockMessage(event) {
            log("Received message: " + event.data);
        }

        function log(msg) {
            var txtLog = document.getElementById("log");
            txtLog.value += "\r\n" + msg;
        }

Coloquei um video de demonstrando a aplicacao rodando na minha maquina. Eh isso galera, bons estudos!!!

 

17/08/2010 Development / java script

Escrevo este post apenas para me comprometer a escrever sobre estes assuntos. E uma forma de me sentir cobrado, motivado ao mesmo tempo. ;-)

Soh aguardar!!! Abraaaaaaco

 

09/08/2010 Development / asp.net

Você pode adicionar um diretório virtual, mudando o arquivo ApplicationHost.config

É uma maneira muito mais rápida doque ficar adicionando 1 a 1 no IIS.

C:\Windows\System32\inetsrv\config\applicationHost.config

 

04/08/2010 Development / java script

Dica do nosso amigo Bruno Souza "Marronete" ;-)

Pessoal, Segue uma dica para quem tiver problema com safari/Chrome e Microsoft Ajax. Esses browsers não são reconhecidos como “SAFARI”, logo, o controltoolkit não consegue reconhecer o browser e dá um erro de javascript que não pode carregar o js. Para isso existe esse hack abaixo que adiciona a extensão “WebKit” para ser reconhecido pelo js da Microsoft.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/Safari3AjaxHack.js" />
    </Scripts>
</asp:ScriptManager>

The file can exist in any folder in your site, but as kshakir says, it should contain this code:

Sys.Browser.WebKit = {}; //Safari 3 is considered WebKit
if( navigator.userAgent.indexOf( 'WebKit/' ) > -1 )
{
  Sys.Browser.agent = Sys.Browser.WebKit;
  Sys.Browser.version = parseFloat( navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
  Sys.Browser.name = 'WebKit';
}

Microsoft and the AjaxControlToolkit project managers tell me they want to fix this bug in the toolkit, so eventually this hack will (hopefully) no longer be necessary. But in the meantime, this solution solves the problem with AjaxControlToolkit scripts not being loaded properly during partial updates.

 

Oooooooh Moooçaaaaaaada!!!

Passei na MCTS!!!

A certificação MCTS (Microsoft Certified Technology Specialist) pertence à nova geração de certificações Microsoft. Os candidatos à certificação MCTS .NET Framework 3.5, ASP.NET Applications são professionais que utilizam o Visual Studio 2008 com o Microsoft .NET Framework 3.5, ou estão se preparando para utilizar estas tecnologias em um futuro próximo. Esta certificação é especificamente voltada para aqueles profissionais de TI que desenvolvem aplicativos Web que serão executados sobre a plataforma ASP.NET e hospedados no Internet Information Server.

Ela serve de base para as demais certificações MS.

Aqueles que desejam fazer a prova...postei aqui no blog os arquivos do simulado, resumo e pdfs do 70-536...Dica: Faça muitas vezes o simulado, 80% da prova está ali.

Abraaaaaaço e Boa Sorte!!!

 

16/06/2010 Development / java script

Ooooooooooooh Mooooooooooçaaada!!!!

Taeó, um exemplo rapidinho de criar variáveis js em tempo de execução.

for(var x = 10; x>0; x--){
     window['variavel_'+x] = x;
}

Parece bobo né, mas talvez um dia você irá precisar!!!

 

13/06/2010 Development / asp3

Depois de bater muito a cabeça tentando fazer em .net, utilizando WebService, decidi fazer em asp normal mesmo.

Function CalculaSedex(Local,Peso)

if Local = "" or Peso = "" or Peso = 0 then
    
CalculaSedex = 0
    
exit function
end if

'CONSTANTES
Dim url, nCdServico, sCepOrigem, sCepDestino, nVlPeso, CdFormato, nVlComprimento, nVlAltura, nVlLargura, sCdMaoPropria, sCdAvisoRecebimento, nVlDiametro, nVlDeclarado, StrRetorno

nCdServico = "41106"
sCepOrigem = "22631020"
sCepDestino = Local
nVlPeso = Peso
CdFormato = 1
'Formato caixa/pacote, 2 Formato rolo/prisma
nVlComprimento = 0
nVlAltura = 0
nVlLargura = 0
sCdMaoPropria =
"N"
sCdAvisoRecebimento = "N"
nVlDiametro = 0
nVlDeclarado = 0
StrRetorno =
"xml"
url = "http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?
nCdEmpresa=99&
sDsSenha=99&
sCepOrigem="
&sCepOrigem&"&
sCepDestino="
&sCepDestino&"&
nVlPeso="
&Peso&"&
nCdFormato=1&
nVlComprimento=16&
nVlAltura=2&
nVlLargura=12&
sCdMaoPropria=N&
nVlValorDeclarado=0&
sCdAvisoRecebimento=N&
nCdServico="
&nCdServico&"&
nVlDiametro=0&StrRetorno=xml"

Set xmlHttp = Server.CreateObject("MSXML2.ServerXMLHTTP.6.0")
Set xmlResult = Server.CreateObject("MSXML2.DomDocument.3.0")

xmlHttp.open "GET", url, true
xmlHttp.Send()
xmlHttp.waitForResponse 4
xmlHttp.waitForResponse 200
xmlResult.loadXML(xmlHttp.ResponseText)

if xmlHttp.ResponseText <> "" or resultado <> "-2" then
     valor = xmlResult.SelectNodes("//Valor").item(0).Text
end if

set xmlHttp = nothing
set xmlResult = nothing

'RETORNO
CalculaSedex = valor

End Function

Caso queira saber todos os parâmetros de retorno // response.write xmlHttp.ResponseText

 

11/06/2010 Development / java script
O código que não utilize eval executa cerca de 95% mais rápido que o original no Opera 9, Firefox e Internet Explorer, e cerca de 85% mais rápido no Safari.

function Teste(){
 alert('TESTE');
}

function fn(oString) {
  eval(oString)();
}

function _fn(oString) {
 this[oString]();
 //oString();
}

_fn("Teste");

 

11/06/2010 Development / links

Artigo mostrando técnicas de desenvolvimento para melhorar a performance da aplicação

http://dev.opera.com/articles/view/efficient-javascript/?page=1

 

 

Estou estudando pra segunda chance da certificação 70-536 da MS.

Na primeira tentativa era preciso tirar 700, ma acabei tirando apenas 580.

Foi bom, porque deu pra ver o grau de dificuldade da prova.

Dessa vez, to focando mais no simulado, baixei o Visual CertExam Manager e alguns simulados.

Estou colocando pra download.

AGORA VAI!!!!

 

11/06/2010 Development / java script

Alguns links para se aprender.

Pra testar o regexpal
  1. Você pode testar o  regexpal.com da seguinte forma:
  2. Visite o site regexpal.com
  3. Digite no primeiro campo a expressão regular: [0-9]
  4. No segundo campo digite: Brasil descoberto em 1500
  5. Observe que o número 1500 ficou marcado já que [0-9] localiza todos os números de 0 a 9.
  6. Se no lugar de [0-9] você colocar [a-z] marcará todas as letras minúsculas que existem entre a e z.

 

26/05/2010 Development / java script

funçãozinha pra mandar mensagem customizada pro usuário:

var nome  = "Felipe";
var login   = "huggler";
var senha = "senha";
 
alert("Prezado @nome@, Seu login é: @login@ * Sua senha é: @senha@".replace(/@([^@]+)@/g, function(a, variavel){
  return "<" + eval(variavel) + ">";
}));

 

26/05/2010 Development / html

Situação: Uma div com position absolute sobre um elemento <object> o elemento object vai ficar por cima da DIV.

Nathanael Ferreira, achou o pulo do gato.

Usar a propriedade wmode="opaque"

 

18/05/2010 Development / ferramentas

Iniciei os preparativos para a reestruturação do ServiceDesk.

Definitivamente decidi usar EXTJS. A tela principal está baseada nela, então não vou ficar pegando biblioteca daqui, e dali e eu sei que depois vai virar uma gororóba só.

Todos os módulos estão divididos em pastas, e cada módulo contém 1 arquivo.js, toda a montagem do módulo é provida por esse .js

1 arquivo.aspx é responsável pelo retorno dos dados e autenticação

Todos os grids são em extjs + json

Segue as primeiras imagens do sistema.

 

12/05/2010 Development / java script

As vezes quando se espera uma resposta de uma função, fica complicado passar junto dessa respostas os parametros que foram passados anteriormente. Dá uma olhada nesse exemplo.

var mapstrings = ["url1","url2","url3"] ;
 
function getcallback(iteration, point) {
    if (!point) {
        if (mapstrings[iteration]) {
            geocoder.getLatLng(mapstrings[iteration], 
                function(point) { getcallback(iteration+1, point) ; } );
        }
        return ;
    }
    map.setCenter(point, 13);
    map.setZoom(7);
    map.addOverlay(new GMarker(point));
}; 
 
getcallback(0);

 

03/05/2010 Development / java script

Se você tiver uma situação onde mtas funções chamem a mesma função e você quer quais são essas funções, coloque dentro da função.

alert(arguments.callee.caller.toString());

Simplezinho mais ajuda mto!!!

 

19/04/2010 Development / flex

Segue o código.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()" width="300" height="138" >
<mx:Script>
<![CDATA[
//Aqui começa o código action Script
import flash.external.*;
import mx.controls.Alert;
import mx.collections.ArrayCollection;

[Bindable] public var medalsAC:Array = new Array();

public function initApp():void{
if (ExternalInterface.available){
ExternalInterface.addCallback(
"update", update);
}
}

public function update(list:Array):void {
medalsAC = list;
}

]]>
</mx:Script>

<mx:Style source="grafico.css" />

<!-- EFEITO DO GRÁFICO -->
<mx:Stroke id="espaco" alpha="0" weight="2"/>
<!-- Gráfico de Colunas -->
<mx:ColumnChart id="column" height="136" width="298" showDataTips="false" dataProvider="{medalsAC}">
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:horizontalAxis>

<mx:CategoryAxis categoryField="Count"/> <!-- barra horizontal debaixo -->
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries yField="QtyAskOrders" styleName="ColumnSeries" stroke="{espaco}" />
<mx:ColumnSeries yField="QtyBidOrders" styleName="ColumnSeries" stroke="{espaco}" />
</mx:series>
</mx:ColumnChart>
</mx:Application>

15/03/2010 Development / asp.net

Essa classe é nativa do framework .Net

Essa classe tem 3 métodos interessantes:

  • Add

    Interlocked.Add(Counter.Count, 10) 'Adiciona 10 ao contador

  • Increment

    Interlocked.Increment(Counter.Count) 'Incrementa o contador

  • Decrement

    Interlocked.Decrement(Counter.Count) 'Decrementa o contado

Achei interessante porque você sai um pouco da rotina de fazer sempre a mesma coisa... count = count + 1, ou, count += 1

03/03/2010 Development / java script

Se servir pra vc, show de bola!!!

function getNumberExtension(n){
var arrNumber = new Array();
 arrNumber[0] = "Zero";
 arrNumber[1] = "Um";
 arrNumber[2] = "Dois";
 arrNumber[3] = "Três";
 arrNumber[4] = "Quatro";
 arrNumber[5] = "Cinco";
 arrNumber[6] = "Seis";
 arrNumber[7] = "Sete";
 arrNumber[8] = "Oito";
 arrNumber[9] = "Nove";

 for(var x = 0; x< n.length; x++){
 var _n = (arrNumber[n.charAt(x)] == undefined) ? n.charAt(x) : arrNumber[n.charAt(x)];
  document.write(_n + " ");
 }
}

getNumberExtension("9998-7732");

 

22/02/2010 Development / java script

Hoje a tarde acabei de fazer a prova para certificação JavaScript da W3Schools. Acertei 58 de 70, não foi excelente neh mas tá valendo ;-)

 

20/02/2010 Development / java script

Depois de fazer a tal provinha de Js, fiquei curioso por saber como seria a certificação. "Oque não faz algumas cervejas na mente de um cidadão retartado", rsrsrsrsrsr. Pois bem, paguei a muther fucker certification e tô pra ver qual vai ser, bateu aquele friozinho na barriga, por isso vale a pena dar uma recapitulada, além do mais, a prova é acompanhada por um supervisor, caso aprovado, ele lança a assinatura, então, que tal ter nada mais nada menos doque a assinatura de um coordenador pica das arabias ;-)...Bruno Lemos na área!!!

Segue o link http://www.w3schools.com/jsref/default.asp

Vamu que vamu!!!

 

19/02/2010 Development / java script

Ajudando um amigo aqui no trabalho a serializar um Objeto Java em Json, fiquei curioso em saber como seria em AspNet. Segue exemplo.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim serializar As JavaScriptSerializer = New JavaScriptSerializer()
Dim pessoa As IList(Of Pessoa) = New List(Of Pessoa)
For x As Integer = 0 To 5
Dim p As New Pessoa
p.Idade = 10
p.Nome =
"Felipe " & x
pessoa.Add(p)
Next

TextBox1.Text = serializar.Serialize(pessoa).ToString()
End Sub

Public Class Pessoa

Private _idade As String
Private _nome As String

Public Property Idade() As String
Get
Return _idade
End Get
Set(ByVal value As String)
_idade = value
End Set
End Property

Public Property Nome() As String
Get
Return _nome
End Get
Set(ByVal value As String)
_nome = value
End Set
End Property

'*** Construtor
'Public Sub New(ByVal nome, ByVal idade)
' _idade = idade
' _nome = nome
'End Sub

End Class

 

18/02/2010 Development / java script

Script simplezinho mas que ajuda muuuuuito!!!

function ConcatJson(o1, o2) {
 for (var key in o2) {
  o1[key] = o2[key];
 }
 return o1;
}

var favdata = {
            title: 'Favorite Things',
            favs: ['raindrops', 'whiskers', 'mittens']
        };

var fData = {teste : '123'}

var output = {};
output = ConcatJson(favdata , fData );

alert(output.favs[0]);

 

12/02/2010 Development / java script

Para base de estudos!!!

var xmlHttp;
function webService(){
this.codCliente = '100';
this.token;
this.urlWebService = 'http://www.endereco.com.br/WebService.asmx';
this.soapRequest = '<?xml version="1.0" encoding="utf-8"?>' +
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd=http://www.w3.org/2001/XMLSchema xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' +
'<soap:Body>' +
'<TRANSFER_SetData xmlns="http://www.namespace.com.br">' +
'<data>' + this.codCliente + '</data>' +
'</TRANSFER_SetData>' +
'</soap:Body>' +
'</soap:Envelope>';
};

webService.prototype.setCliente = function(codCliente) {
this.codCliente = codCliente;
};

webService.prototype.SoapCall = function() {
xmlHttp =
new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open(
"post", this.urlWebService, true);
xmlHttp.setRequestHeader(
"Content-Type", "text/xml; charset=utf-8");
xmlHttp.setRequestHeader(
"SOAPAction", http://www.namespace.com.br/TRANSFER_SetData);
xmlHttp.onreadystatechange =
this.doUpdate;
xmlHttp.send(
this.soapRequest);
return false;
};

webService.prototype.doUpdate = function() {
//debugger;
if (xmlHttp.readyState == 4) {
var responseXMLResult = xmlHttp.responseXML;
this.token = responseXMLResult.lastChild.nodeTypedValue;
resposta.innerText =
this.token;
}
};

var ws = new webService();
ws.SoapCall();

 

09/02/2010 Development / java script

function Msg()
{
 this.message = "Método";
}

Msg.prototype.toString = function()
{
 return "[Sobrescrevendo <" + this.message + ">]";
}


Msg.prototype.toUpperCase = function(msg)
{
 return msg + " * javascript";
}
 
var m = new Msg();
alert(m.toUpperCase(m));
alert(m.toUpperCase(m).toUpperCase());

08/02/2010 Development / asp.net

Structure Pessoa

Private nome As String
Private idade As Integer
Private sexo As Sexualidade

Enum
Sexualidade
Masculino
Feminino
End Enum

Public Sub New(ByVal _nome As String, ByVal _idade As Integer, ByVal _sexo As Sexualidade)
nome = _nome
idade = _idade
sexo = _sexo
End Sub

Public Overloads Overrides Function ToString() As String
  
Return nome & " - " & idade.ToString() & " - " & sexo.ToString()
End Function

End Structure

Dim p As Pessoa = New Pessoa("Felipe Huggler", 26, Pessoa.Sexualidade.Masculino)
Response.Write(p)

05/02/2010 Development / links

Segue um link mto bom que encontrei sobre Javascript. Vale a pena estudar e estudar!!!

http://peter.michaux.ca/articles/transitioning-from-java-classes-to-javascript-prototypes

 

Yes brother!!! Matrícula realizada com sucesso, agora só mandar bala nos estudos!!!

MCTS Self-Paced Training Kit Exame 70-536 .NET Framework 2.0.Application Development Foundation

Procurei o material de estudo e acabei encontrado o livro e o testing em pdf. ;-)

TestKing Exam 70-536 - MS.NET Framework 2.0 - Application Development Foundation

  1. Baixar o livro
  2. Baixar o teste

Alguns links 

 

04/02/2010 Development / java script

Um exemplo bem básico de como tabular os dados pra deixar uma mensagem um pouco melhor.

var msg = "";
var obj = []

function Pessoa(){
 this.id;
 this.nome;
 this.idade;
 this.sexo
}

for(var i = 0; i<5; i++){
 var o = new Pessoa();
 o.id    = i;
 o.nome  = 'huggler'+i;
 o.idade = 'idade'+i;
 o.sexo  = 'sexo'+i;
 obj.push(o);
}

for(var x = 0; x<obj.length; x++){
 p = obj[x];
 msg += p.id+ "\t"+ p.nome+"\t"+ p.idade + "\t" + p.sexo + "\n";
}

alert(msg);

04/02/2010 Development / java script

Exemplo simples de como invocar o método através de assinaturas. Nesse caso, só irá funcionar no IE.

var Core = {};
Core.start = function(fn){
 Core.addEventListener(window, "load", fn.init);
};

Core.addEventListener = function(element, type, listener){
 listener.call(element, event);
};
 
var minhafuncao = {
 init : function(){
  minhafuncao.close();
 },
 
 close: function(){
  alert('closed');
 }
}

var minhafuncao2 = {
 init : function(){
  alert('oi');
 }
}

Core.start(minhafuncao);
Core.start(minhafuncao2);

04/02/2010 Development / java script

Sabemos que pra tudo na vida há uma solução. No desenvolvimento eu não penso diferente, acredito que há sempre uma forma de se chegar ao objetivo e mais..que existem várias formas se alcançar o mesmo resultado.

Abaixo, duas maneiras de criar um anterior e próximo varrendo uma list.

  1. Na primeira, usando nextSibling, firstChild, previousSibling...eu particularmente não sou muito fã de usar esses métodos.
  2. Na segunda, lendo um Array, que na minha opinião é mais rápido e mais fácil de trabalhar.

Esse exemplos são somente com demonstração mesmo e para estudos de como utilizar esse comandos.

// Primeiro Case **********************************

var dados = document.getElementById('list');
var name  = document.getElementById('nome');
var cont  = 0;
function anterior(){
 name.innerText = dados.childNodes[cont].previousSibling.innerText;
 cont--;
}

function proximo(){
 name.innerText = dados.childNodes[cont].nextSibling.innerText;
 cont++;
}

function init(){
 name.innerText = dados.firstChild.innerText;
}

init();

// Segundo Case **********************************

var data = document.getElementById('list').getElementsByTagName('li');
var num  = 0;
function ant(){
 alert(data[--num].innerText);
}

function prox(){
 alert(data[num++].innerText);
}

// html *********************************

<ul id="list">
 <li>Alec</li>
 <li>Daniel</li>
 <li>William</li>
 <li>Hugo</li>
</ul>

<span id="nome"></span><p>
<button onclick="anterior()">Previous</button><button onclick="proximo()">Next</button><p>
<button onclick="ant()">Previous</button><button onclick="prox()">Next</button>

13/01/2010 Development / java script

Resumidamente o conceito de ServerPush é: Abrir um canal de comunicação http e ficar recebendo os dados da aplicação sem efetuar posts. Essa tecnologia foi introduzida em 1996 por PointCast e Marimba e em 1997 Microsoft e NetScape aplicaram esse canal dentro de seus Browsers. Para mais detalhes http://en.wikipedia.org/wiki/Push_technology#HTTP_server_push

Vou demonstrar como desenvolver este mecanismo de comunicação utilizando JSP e Javascript.

Nosso exemplo terá 3 páginas:

  1. Index.jsp
  2. Display.jsp
  3. Streamer.jsp

Index.jsp
Nessa página criaremos os frames [display.jsp e streamer.jsp] e os tratamentos javascript para as mensagens que chegarão.

A página display.jsp vai conter nossos objetos que serão atualizados. Ex: Grids, Divs, Tabelas, ou pode ser também uma página em branco, se for apenas printar a mensagem recebida.

A página Streamer.jsp irá conter a regra de negócio. O grande lance aqui é a possibilidade de utilizar a "Thread.sleep" do Jsp...Nesse exemplo estamos apenas printando de tempo em tempo um contador, mas um implementação siginificativa seria a ida em um banco de dados resgatando os últimos cadastrados, as melhores ofertas de compra, etc...

Finalizando:

Quando a aplicação estiver rodando, o streamer.jsp enviará o conteúdo para a função push localizada no Index.jsp.

O push pegará o conteúdo e jogará no frame "display". Podemos também acessar através do button que chamará a função SendEvent que enviará para o tratarMensagemPublicada a mensagem digitada no input. Nesse caso o tratarMensagemPublicada fará um Split na mensagem e de acordo com as condições encaminhará a mensagem para os devidos métodos.

Faça o download do Exemplo

13/01/2010 Development / asp.net

Segue código abaixo:

Endereço do webService - http://www.webservicex.net/stockquote.asmx?WSDL

Imports System.Xml
Imports System.Data
Imports System.IO

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim stock As New stockQuote.StockQuote
Dim result As String
Dim xmlReader As System.Xml.XmlTextReader
Dim DS As New DataSet

result = stock.GetQuote(TextBox1.Text)

xmlReader =
New System.Xml.XmlTextReader(result.ToString, System.Xml.XmlNodeType.Document, Nothing)
xmlReader.ReadOuterXml()

DS.ReadXml(xmlReader)
GridView1.DataSource = DS
GridView1.DataBind()

End Sub
End
Class

13/01/2010 Development / java script

Para quem quiser um teclado virtual, pode iniciar as alterações partindo desse aki.

www.felipehuggler.com/testes/teclado/

Att,
Huggler

13/01/2010 Development / asp.net

O que é Generics
O conceito geral é bem simples. Trata-se de classes, structs, interface e métodos que não possui um tipo de dados fixo para trabalharmos. Ao invés disso ela é definida com um tipo genérico onde quem defini o seu tipo seré o desenvolvedor no momento de utilizá-la.

Com essa classe abaixo fica complicado trabalhar com tipos de dados, porque? Porque o tipo já está definido. No caso Object.

Public Class Manipulacao
     Dim _valor As Object
     Public Property Valor() As Object 
          Get
               Return _valor
          End Get
          Set
               _valor = value
          End Set
     End Property
End Class

 

Implementando o Generics

Public Class Manipulacao(Of T)
Dim _valor As T
Public Property Valor() As T

Get
Return _valor
End Get

Set
(ByVal value As T)
_valor = value
End Set

End
Property
End
Class

No momento da chamada, instânciamos um new da Classe e setamos o tipo!!!

Dim v As New Manipulacao(Of String)
v.Valor =
"sapato"

Dim s As New Manipulacao(Of Integer)
v.Valor = 50

13/01/2010 Development / java script

A ídeia é ter um método com o mesmo nome, porém, executando funções distintas, através do recebimento de seus parâmetros!!!

// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
     var old = object[ name ];
     if ( old )
         object[ name ] = function(){
             if ( fn.length == arguments.length )
                 return fn.apply( this, arguments );
             else if ( typeof old == 'function' )
                 return old.apply( this, arguments );
         };
     else
         object[ name ] = fn;
}

// A configuração dos métodos

function Users(){

  addMethod(this, "find", function(){
   alert('Todos os usuários');
  });

  addMethod(this, "find", function(name){
    alert('O nome é ' + name);
  });

  addMethod(this, "find", function(first, last){
    alert('O nome é ' + first + ' sobrenome ' + last);

  });
}

// Aplicando os métodos

var users = new Users();
users.find();                          // Pesquisa todos usuários
users.find("John");                  // Pesquisa pelo Nome
users.find("John", "Resig");       // Pesquisa pelo Nome e Sobrenome
users.find("John", "E", "Resig"); // Não retorna nada

20/01/2010 Development / asp.net

Depois de ver o site rodar, compilar bunitinho e colocar em producao, apresenta-se o seguinte ERRO no componente.

ADODB Version = 7.0.3300

Solucão:

Copie a pasta Local C:\program files\Microsoft.NET\Primary Interop Assemblies\ para o mesmo endereco no servidor.

Execute a linha de comando no MS-DOS

"C:\Windows\Microsoft.NET\Framework\v1.1.4322\GACUtil.Exe"   /i   "C:\program files\Microsoft.NET\Primary Interop Assemblies\adodb.dll"

Depois um iisreset...Só pra lembrar, ;-)

14/01/2010 Development / iis

Se você já projetou seu web site com o arquivo Global.asa, você pode querer saber porque ele não funciona adequadamente.

Para resolver este problema, basta configurar o caminho onde o arquivo Global.asa reside, como um aplicativo.

Se o caminho já foi configurado como um diretório virtual, você pode simplesmente clique direito no diretório virtual direita e escolha 'Convert to Application'

 

14/01/2010 Development / iis
  1. Clique em Default Web Site ou no Site que você queira;
  2. Duplo clique no icone ASP;
  3. Abra a guia "Propriedades de Depuração";
  4. Coloque TRUE para Enviar Erros ao Navegador;
  5. Deixe a Mensagem de Erro de Script em branco;
  6. Na opção, do lado direito no topo... clique em APLICAR
26/08/2009 Development / java script

Manipular um JSON bem tranquilo.

Ex: var obj = { 'nome' : 'felipe huggler', 'idade' : 'idade da pedra' };
alert(obj.nome);

A tarefa transformar um Array em um Objeto JSON...

var objArray = new Array();
function Pessoa(nome){
this.nome = nome;
}

objArray.push(new Pessoa('Felipe'));
objArray.push(new Pessoa('Huggler'));

O grande lance aqui...Baixar a biblioteca JSON2.js e usar o mtodozinho JSON.stringify(objeto))

alert(JSON.stringify(objArray))

18/08/2009 Development / asp.net

Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Imports System.Globalization

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim strConexao As String = "Data Source=.\SQLEXPRESS;....."
Dim sSql As String = "SELECT Count(Nome) AS Total FROM Clientes; SELECT Nome, Email FROM Clientes"
Dim conn As SqlConnection = New SqlConnection(strConexao)

Dim r As SqlDataReader
Dim cmd As SqlCommand = New SqlCommand(sSql, conn)
cmd.CommandType = CommandType.Text

conn.Open()

r = cmd.ExecuteReader(CommandBehavior.CloseConnection)
r.Read()

Dim t As Integer = r.GetOrdinal("Total")
Response.Write(
"Total de Registros: " & r.GetInt32(t))

'****************** AQUI PASSA PRO PROXIMO SELECT

r.NextResult()

If (r.HasRows) Then
Dim nome As String = r.GetOrdinal("Nome")
Dim email As String = r.GetOrdinal("Email")

Response.Write("<table><tr><td><b>Nome</b></td><td><b>E-mail</b></td></tr>")

Dim ci As CultureInfo = New CultureInfo("pt-BR")
While (r.Read())
Response.Write(
"<tr><td>" + r.GetString(nome) + "</td><td>" + r.GetString(email) + "</td></tr>")
End While

Response.Write("</table>")
End If

If Not (r.IsClosed) Then
r.Close()
End If

End Sub

'****************** FIM

17/08/2009 Development / asp.net

    Public Property Nome() As String
        Get
// return nome por exemplo
        End Get
        Set(ByVal value As String)
// nome = value
        End Set
    End Property

22/07/2009 Development / java script

    var palavra = "<a href=':empresa:'>:dado:"
    palavra.replace(/:[^:]*:/g, function(g){ alert(g) });

;-)

22/07/2009 Development / asp3

Quem já trabalha com expressão regular, meus parabéns!!!!

Segue uma funçãozinha que eu fiz pra poupar os replaces vindo do Banco.

<%
    Dim palavra
    palavra = "<a href='pagina.asp?id=:id:'>:empresa:</a>"
   
    Function MyReplace(ByVal str)
        Set regEx = New RegExp
        regEx.Pattern = ":[^:]+:"
        regEx.IgnoreCase = True
        regEx.Global = True                               
       
        Retorno    = RegEx.Replace(str, "teste")
       
        MyReplace = Retorno
       
        Set regEx = Nothing
    End Function
    
    response.write MyReplace(palavra) 'Modo de usar ;-)
%>

31/07/2009 Development / XPath

Use a função position() do XPath para selecionar um determinado nó.

<xsl:value-of select="count(data/Quotes/profiles/item[position()=6]/columns/item)"/>

31/07/2009 Development / asp.net

Colocando em Cache um RSS de outro Site.

Dim xDoc As New XmlDocument
Dim xnl As XmlNodeList

If Cache.Get("XMLDATA") Is Nothing Then
xDoc.Load(urlNews)
Cache.Insert("XMLDATA", xDoc, Nothing, DateTime.Now.AddSeconds(40), TimeSpan.Zero)
End If

xDoc = Cache.Get("XMLDATA")
xnl = xDoc.SelectNodes("//item")

Agora só varrer os nós !!!

03/08/2009 Development / java script

MacMenu = function(container)
{
UL = $('<ul>');
this.setItem = function(refMenu, subMenu, titulo, href){
if(subMenu == ''){
LI = $('<li>');
LI.append(LI.text(titulo));
UL.append(LI);
_UL = $('<ul>').attr("id", refMenu);
LI.append(_UL);
return false;
}
_LI = $('<li>');
_LI.append(_LI.text(titulo));
_UL.append(_LI);
}
$("#"+container).append(UL);}
$(document).ready(function(){
$('#menu li').hover(function() { $('ul', this).css('display', 'block'); },function() { $('ul', this).css('display', 'none'); });
});

// Pra usar
var menu = new MacMenu('menu');
menu.setItem('root1','','Menu','link');
menu.setItem('root1.1','root1','Sub1','link');
menu.setItem('root1.2','root1','Sub2','link');
menu.setItem('root1.3','root1','Sub3','link');
menu.setItem('root2','','Menu2','link');
menu.setItem('root2.1','root2','Sub1','link');
menu.setItem('root2.2','root2','Sub1.1','link');
menu.setItem('root2.3','root3','Sub3','link');
menu.setItem('root3','','Menu3','link');
menu.setItem('root3.1','root3','Sub1','link');
menu.setItem('root3.2','root3','Sub2','link');
menu.setItem('root3.3','root3','Sub3','link');


// CSS
#menu ul{
list-style:none;
margin: 0px;
padding: 0;
display: block;
}

#menu li{
background: #99cc66;
border-bottom: 1px solid white;
color: white;
padding: 0px;
width: 150px;
display: block;
text-align: right;
font-family: Arial;
font-size: 11px;
float: left
}

#menu li ul{
text-decoration: none;
color: white;
display: none;
padding: 0px;
}

20/05/2009 Development / java script

Nos sistemas atuais estamos utilizando mtas janelas com drag-drop, janela Modal, sendo assim, não havendo mais necessidade de abrir os antigos pop-ups.

Num passado não mto distante quando vc fazia um sistema e tinha lah, o formulário para usuário selecionar o cliente, provavelmente ao lado, teria a opção de incluir um novo cliente, caso o mesmo não estivesse na combo. O usuário clicava, cadastrava o cliente e através do "opener" vc populava a combo com o novo registro.

Nesse novo cenário, é possível que exista mais de um módulo no sistema com a combo de cliente, então quando o usuário clica para cadastrar um novo cliente, o ideial é que todas as combos se atualizem.

Segue o código abaixo.

function populaCombo(objName, value, text)
{
    cont++;
    $('select[name="'+ objName +'"]').prepend('<option value="'+ cont +'">'+ cont +'</option>');
    $('option:first', 'select[name="'+ objName +'"]').attr("selected","selected");

}

Abraaaaaaço!!!

01/04/2009 Development / asp.net

Exemplo fácil e rápido !!!!

        Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("Conexao").ConnectionString())
        Dim sql As SqlCommand = New SqlCommand("Insert into table ( campo1, campo2 ) Values ( 'valor1','valor2' ) select @@identity", con)

        Dim codID As Integer

        con.Open()
        codID = sql.ExecuteScalar()

        lblResultado.Text = "Shoooow de Boleta !!!"

Obs: select @@identity [ recupera o valor baseado na chave primária ]

06/03/2009 Development / asp.net

Se você quer gravar Logs em determinadas chaves no Event Viewer, precisará habilitar as permissões.

Digamos que sua chave seja eCommerce

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Eventlog\Application\eCommerce]

Clique com o botão direito sobre a chave e permita as opções de escrita.

06/08/2009 Development / java script

Essa semana surgiu uma situação aqui na empresa onde precisamos verificar se o link que a gente tava chamando realmente existia e se nele estava tudo correto. Primeiro fizemos em asp.net

Dim SiteExists As Boolean = True
Dim URL_Object As New System.Uri(url)
Dim URL_WebRequest As System.Net.HttpWebRequest
Dim URL_WebResponse As System.Net.HttpWebResponse

Try
URL_WebRequest = System.Net.WebRequest.Create(URL_Object)
URL_WebRequest.Timeout = 4000
URL_WebRequest.AllowAutoRedirect = True
URL_WebRequest.MaximumAutomaticRedirections = 3
URL_WebResponse = URL_WebRequest.GetResponse
SiteExists = True
URL_WebResponse.Close()
Catch ex As Exception
SiteExists = False
End Try

If SiteExists Then
Return True
Else
Return False
End If

ou seja, retorna um true ou false do link.

Dentro da tal aplicação ocorria um postBack, e nessa hora nós não tinhamos mais como saber se a aplicação estava ON ou OFF... Então sugerimos ao analista que colocasse essa tal verificação também na página deles. Mas, eis que surge a situação: E se após o carregamento da página, o cliente desse um postBack e nessa hora o servidor ja está fora...iria aparecer na tela um 404 not found bonito. Então sugerimos que antes de ocorrer o postBack o desenvolvedor checasse via Javascript se o servidor esta respondendo.

Primeiro, eu fiz um script rapidinho, procurei na internet os objetos XMLHttpRequest e mandei pra ele. Ficou mais ou menos assim.

var request = false;

try{ request = new XMLHttpRequest();}
catch(ee){
try{request = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){
try{request = new ActiveXObject("Microsoft.XMLHTTP");}
catch(E){request = false;}}}

if (!request){ alert("Erro na inicialização do objeto XMLHttpRequest!"); }

function getCustomerInfo() {
var url = document.getElementById("url").value;
request.open("GET", url, false);
request.onreadystatechange = updatePage;
request.send(null); }

function updatePage() {
if (request.readyState == 4){
if (request.status == 200){
alert('OK A PAGINA ESTA ATIVA... O STATUS EH: ' + request.status)}
else{
alert("EITA.....A PAGINA ESTA FORA: O Status da página eh: " + request.status);}
}}

O codigo acima chega se o endereo da url que esta num input é valido ou não

Tudo bem, tudo legal...mas depois eu comecei a pesquisar como seria essa parada com o tal do Jquery ehhhhhh:

$.ajax({
    url: 'teste.asp',
    type: 'POST',
    data: {nome: "felipe", ts: 2},
    timeout: 1000,
    error: function(e){
        alert("error:" + e.message);
    },
    success: function(xml){
        alert(xml);}
    });

23/01/2009 Development / ferramentas

Essa semana terminamos o aplicativo financeiro CMA Mobile 1.0

Trata-se de uma ferramenta de compra e venda de ações via celular. Foi desenvolvido utilizando tecnologia .net

Aproveitei e fiz uma páginazinha de demonstração. [ www.felipehuggler.com/mobile ]

02/12/2008 Development / asp.net

2 coisas:

  1. Habilitar acesso anonimo
  2. Utilizar o codigo abaixo

Dim objWS as object = new webService.Service
objWS.PreAuthenticate = True
objWS.Credentials = System.Net.CredentialCache.DefaultCredentials

Jah era !!!!

29/10/2008 Development / asp.net

Essa é mais um códigozinho rapidinho pra quem precisar. É chatinho fazer essas coisas porque você tem que estar ligado em todas as propriedades, parametros, sintaxe do XmlDocument, emfim...segue abaixo um exemplo.

Dim XMLCONTAS As New XmlDocument
XMLCONTAS.LoadXml("<dados><Nome>Felipe Huggler</Nome><Idade>25</Idade></dados>")

Dim xmlNO As XmlNodeList = XMLCONTAS.SelectNodes("//Contas")
Dim xm As XmlNode

For i As Integer = 0 To xmlNO.Count - 1
xmlNO(i).ChildNodes().Item(1).InnerText
Next

Fácil né!!!!

15/10/2008 Development / asp.net

Aqui no trabalho, uma hora ou outra os desenvolvedores de C++ pedem pra gente colocar o Home Broker pra rodar direto na máquina deles. Nosso ambiente, por ter o Visual Studio já vem todo configurado, bastando somente atualizar o framework e tudo rodar legal. Mas na máquina dos caras, sempre é uma batalha. Uma rotina que é tiro e queda pra rodar logo na primeira, é reinstalar o framework.

C:\WINDOWS\Microsoft.NET\Framework\ versao \aspnet_reg.exe -i

25/09/2008 Development / asp3

Projeto: FH
Classe : Controles


' Importe as referencias
' ******************************************************
' * Microsoft Scripting Runtime
' * Microsoft Active Server Pages


' Cole o código abaixo
' ******************************************************
Private oAttributes
    Private sQuery
    Private objCombo
   
    Private Sub Class_Initialize()
        Set oAttributes = CreateObject("Scripting.Dictionary")
    End Sub

    Public Property Let setAttribute(attributeName, attributeValue)
        oAttributes.Add attributeName, attributeValue
    End Property
   
    Public Property Let SQL(query)
        sQuery = query
    End Property

    Public Function Create()
       
        objCombo = "<select"
       
        For Each sKey In oAttributes
            objCombo = objCombo & Space(1) & sKey & "=""" & oAttributes(sKey) & """"
        Next
        objCombo = objCombo & ">" & vbCrLf
       
        objCombo = objCombo & "<option>" & sQuery & "</option>"
       
        objCombo = objCombo & "</select>"
       
        Create = objCombo
       
    End Function

 

Clique em File e depois Make FH.dll
Procure salvar esta dll na pasta System32 e depois registre-a.
Pronto!!!!

Agora na página.asp

<%
Set oCombo = Server.CreateObject("FH.Controles")
oCombo.setAttribute("class") = "cssCombo"
oCombo.setAttribute("onchange") = "suaFunction()"
response.write oCombo.Create
%>

24/09/2008 Development / asp3

Segue um exemplo de como chamar desenvolver uma classe para gerar uma combo. Esse exemplo também pode ser aplicado em uma dll, assim basta somente invocar a dll passando os parametros e atributos.

<%
Class FHCombo
 
 Private oAttributes
 Private sQuery
 
 Private Sub Class_Initialize()
  Set oAttributes = Server.CreateObject("Scripting.Dictionary")
 End Sub 

 Public Property Let setAttribute( attributeName, attributeValue )
  oAttributes.Add attributeName, attributeValue
 End Property
 

 Public Property Let SQL( query )
  sQuery = query
 End Property


 Public Sub Create
  
  response.write "<select"
  
  For Each sKey In oAttributes
   Response.Write Space(1) & sKey & "="""& oAttributes(sKey) &""""
  Next
  response.Write ">" & vbCrLf
  
  response.write "<option>" & sQuery & "</option>"
  
  response.write "</select>"
  
 End Sub

End Class


Set cb = new FHCombo
cb.setAttribute("class") = "cssCombo"
cb.setAttribute("onchange") = "alerta()"
cb.SQL = "Select * from dados"
cb.Create
%>

18/09/2008 Development / ferramentas

web development helper é uma extensão gratuita para o navegador Internet Explorer que fornece um conjunto de ferramentas e utilidades para o desenvolvedor web, especialmente desenvolvedores ASP.NET Ajax. A ferramenta oferece recursos como um DOM inspector, detecção de fluxo de dados HTTP, diagnóstico e script e imediata janela.

web development helper funciona com IE6 +, e requer o. NET Framework 2,0 ou maior a ser instalados na máquina.

Uma vez instalada, a ferramenta pode ser ativada usando o comando Ferramentas | Desenvolvimento Web Helper. Você também pode personalizar a barra de ferramentas do navegador para adicionar um botão para facilitar o uso desse comando. Clicando no menu comando ou navegador botão abra a janela do console da ferramenta e um conjunto de comandos.

Características:

  • DOM permite visualizar todos os elementos, selecionandos elementos, ou elementos de correspondência ou de um ID CSS classe, seus atributos e estilos.
  • Capturando uma captura de tela da página atual.
  • Visualizando informações das páginas, tais como metadados, tags, e recursos ligados a ela.

Características de Redes:

  • Monitora pedidos HTTP (e HTTPS) iniciados pelo navegador ou scripts Ajax.
  • Visualiza pedidos e respostas mais detalhadas.
  • Habilidade de filtrar os tipos de URLs para log.

Características de Scripting:

  • Captura erros detalhados de script para ver (e fazer) a chamada correta da pilha de erro de scripts.
  • Um script console para fornecer a funcionalidade de traços dos scripts usando a API window.debugService script.
  • De imediato uma janela para escrever e executar o script.
  • Um script class browser para navegar classes definido no script (classes escrito especificamente para o Ajax ou ASP.NET Script # padrão).

ASP.NET Características:

  • Visualizar a página no estado em bruto, decodificado, analisando as formas, para entender o que está sendo gerada em vista o estado (esp. útil para controlar desenvolvimento).
  • Ver itens armazenados por aplicações em cache, e a capacidade de removê-los para fins de teste.
  • Ver trace as informações, e escondê-lo a partir da página, de modo que não fique no caminho da sua página layout.
     
    Sem dúvida uma ferramenta muito útil - faça o download [ http://www.felipehuggler.com/ferramentas/WebDevHelper.zip ]
18/09/2008 Development / asp.net

Temas e Skins é bem legal. Tem um monte de exemplo ai na Net, então resumindo, a parada funciona assim:

- Abrir Visual Studio
- New Theme
- New Skin

Faça o skin orientado aos objetos

Na página existem algumas maneiras de chamar o Skin.

Através do :

<%@ Page Theme="SEUTEMA" Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

ou via code behind

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs)
Theme = "Azul"
End Sub

18/09/2008 Development / asp.net

Mto bom e muito tranquilo de fazer!!!!

Iniciando as declarações no arquivo web.config

<configuration>
  <system.web>
    <authentication mode="Forms">
      <forms loginUrl="login.aspx" protection="All" timeout="30">
        <credentials passwordFormat="Clear">
          <user name="devhood" password="password"/>
          <user name="someguy" password="password"/>
        </credentials>
      </forms>
    </authentication>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>

  <location path="admin/">
    <system.web>
      <authorization>
        <allow users="devhood" />
        <deny users="someguy" />
      </authorization>
    </system.web>
  </location>
  <location path="usersonly/">
    <system.web>
      <authorization>
        <deny users="?" />
      </authorization>
    </system.web>
  </location>
  <location path="public/">
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
  </location>
</configuration>

Autenticação: Existe 4 tipos Windows|Forms|Passport|None

  • Forms: Esta tag indica o modo de autenticação de formulários e irá especificar as coisas como loginUrl, o tipo de proteção e o tempo limite de inatividade.
    • loginUrl: Quando um usuário não tem poderes para acessar perspectivas páginas, o usuário será enviada para este URL.
    • protection: Há quatro (4) tipos de proteção modos, All | none | Encryption|Validation.
    • timeout: Este é um valor inteiro indicando o número de minutos um cookie do usuário será válida para a autenticação. Após este período de inatividade, o usuário será forçado a re-autenticar.
    • credential: Esta é uma seção opcional se você quiser especificar o nome de usuário/senha em combinações aqui. As credenciais também tem um atributo chamado passwordFormat. Suas opções para a senha formato são: Clear|SHA1|MD5.
    • user: Esta é também uma tag opcional. Esta tag é bastante simples, atributo para o nome de usuário e senha para atribuir a senha.
    • authorization: Agora que temos nosso tipo especificado e a autenticação de contas de usuários, temos que especificar o modo como a autenticação vai ser aplicada ao nosso site. Nós usamos a authorization para isso. A autorização é inserida entre a system.web. No exemplo acima, vemos que a autorização  contém o <allow>. Isto irá permitir especificar os utilizadores que têm acesso ao site. E há também uma tag <deny> que irá especificar quais usuários estão negado o acesso. O formato dos usuários atributos é bem simples. É apenas uma vírgula delimitado por lista nomes de utilizador (ou seja, os usuários = "jsmith, jdoe, blá"). Há também dois valores especiais que podem ser utilizadas no atributo usuários. O primeiro é o * (asterisco). Esta é utilizada para designar "todos os acessos". Portanto, o exemplo acima permite o acesso a todos os usuários. A segunda é a ? (ponto de interrogação). Esta é utilizada para designar "anónimo" usuários. Você pode usar esse recurso para negar acesso anônimo que irá força para autenticar os usuários antes de entrar em algumas páginas Web.
    • location: Agora o que acontece quando nós queremos algumas partes do site a ser protegido e de outros a não ser protegido? ASP.NET usa <locations>.  Que é o caminho para aplicar um conjunto diferente de regras de segurança. No interior da tag, temos a tag system.web mais uma vez. A autorização é colocado dentro da tag system.web (tal como o uso de no primeiro <authorization>).

<html>
<head>
    <title>Login</title>
    <script language="C#" runat="server">
        void Login_Click(Object sender, EventArgs e) {
            if (FormsAuthentication.Authenticate(username.Text, password.Text))
                FormsAuthentication.RedirectFromLoginPage(username.Text, true);
            else
                status.InnerHtml += "Invalid Login";
        }
       
    </script>
</head>
<body>
    <p class=title>Login</p>
    <span id="status" class="text" runat="Server"/>
    <form runat="server">
    Username: <asp:textbox id=username cssclass="text" runat="Server"/><br />
    Password: <asp:textbox id=password textmode=Password cssclass="text" runat="Server"/><br />
    <asp:button id=login_button onclick="Login_Click" text="  Login  " cssclass="button" runat="Server"/>
    </form>
</body>
</html>

FormsAuthentication.Authenticate
O único botão de login na página da web chama o método Login_Click quando clicado. Neste método, usamos o FormsAuthentication.Authenticate (nome de usuário, senha) para obter ASP.NET para verificar as credenciais do usuário. Os parâmetros para este método é bastante simples e ele retorna apenas um valor booleano.
 
ou acesso através do Banco
 
void Login_Click(Object sender, EventArgs e) {
    String sHashedPassword = FormsAuthentication.HashPasswordForStoringInConfigFile(password.Text,"MD5");
    String sqlStmt = "Select username from Users where username='" + UserName.Text + "' and password='" + sHashedPassword + "'";
    SqlConnection sqlConn = new SqlConnection("server=localhost;uid=sa;pwd=password;database=master;");
    SqlCommand sqlCmd = new SqlCommand(sqlStmt, sqlConn);
    sqlCmd.Connection.Open();
    SqlDataReader sqlReader = sqlCmd.ExecuteReader(CommandBehavior.CloseConnection);

    if (sqlReader.Read())
        FormsAuthentication.RedirectFromLoginPage(username.Text, true);
    else
        status.InnerHtml += "Invalid Login";
}

18/09/2008 Development / asp.net

Public Class utils

Dim ha As HttpApplication = HttpContext.Current.ApplicationInstance
ha.Response.Write("Olá Mundo")

End Class

13/05/2008 Development / asp.net
If (DateTime.Compare(dt1, dt2) < 0) Then
{
                    Console.WriteLine("segunda data é maior")
}
else if (DateTime.Compare(dt1, dt2) == 0)
{
                    Console.WriteLine("segunda data é igual a primeira data")
}
                Else
{
                    Console.WriteLine("segunda data é menor")
}
10/05/2008 Development / asp3

Essa é uma função pra quem quer fazer um menu estilo arvore, bem rapidinho sem ter que ficar pensando mto.

O banco fica da seguinte maneira

idMenu - autonumeração
txtCategoria - text
codSubcategoria - Numero (Aqui vem a referencia do idMenu)

  sub geraMenu(cod)
    set rs = Server.CreateObject("Adodb.RecordSet")
    SQL = "Select * from tabMenu where codSubCategoria = "&cod
    rs.open sql, conexao,3,3
   
    while rs.eof = false
        response.write rs("txtCategoria") & "<br>"
        geraMenu(rs("idMenu"))
    rs.movenext
    wend
   
    rs.close
    set rs = nothing
  end sub
 
  call geraMenu(0)

18/09/2008 Development / asp.net

Essa semana uma nova tarefa foi designada a nossa equipe aqui na empresa. O objetivo era permitir o download de um arquivo no formato xls "Excel" sendo que nele deveria conter os registros de um grid populado em Tempo Real.

Desafio: Capturar os dados, jogar para uma página e fazer o download.

As Idéias: Inúmeras soluções foram tentadas, criamos um iframe, jogamos os dados para o iframe, depois submetemos o form do iframe, afim do coding-behind fazer o download do arquivo. Essa ideia era boa, mas tinha um inconveniente, que o Internet Explorer abre uma aba abaixo da toolbar alertando se o usuário quer realmente fazer o download, acontece, que nosso sistema tem um evento "onbeforeonload" que abre uma janela de fim de sessão, ou seja, quando o usuário clicasse em fazer o download, a tela se atualizaria e a janela de fim de sessão abriria.

Solução: Capturar os dados, envia-los via AJAX para uma página utilizando metodo POST, essa pagina quarda os dados numa Session, apos o onreadstate, abrir uma janela popup com o download do arquivo.

Segue os Script abaixo.

function handleResponse() {
        var strDados = document.getElementById('uwtCotacoes_div0').innerHTML;
        var strUrl = "testeFrame.aspx";
        var strParam = "acao=gravar&dados=" + escape(strDados);

        $.ajax({
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                type: "POST",
                url: strUrl,
                data: strParam,
                error: function() {
                        alert('Erro no documento');
                },
                success: function(data) {
                        window.open('testeFrame.aspx?acao=salvar', 'novajanela');
                }
        });
}

Aqui o código da pagina testeFrame.aspx coloque isso no evento PageLoad

Dim acao = Request("acao")

If acao.ToString = "gravar" Then
     Session("FormCotacao") = Server.HtmlDecode(Request.Form("dados"))
Else
     Response.ClearContent()
     Response.Charset = String.Empty
     Response.Write(Session("FormCotacao"))
     HttpContext.Current.Response.ContentType = "application/vnd.ms-excel"
     HttpContext.Current.Response.AddHeader("content-disposition", "attachment;filename=documento.xls")
     HttpContext.Current.Response.Charset = "utf-8"
     Response.End()
End If

04/05/2008 Development / asp.net
Dim text As New StreamWriter(Server.MapPath("doc.txt",True)
text.WriteLine(Session("dados"))
text.Flush()
text.Close()

Facil né!!!!

04/05/2008 Development / asp.net

<globalization enableClientBasedCulture="false" requestEncoding="utf-8" responseEncoding="iso-8859-1" fileEncoding="iso-8859-1" responseHeaderEncoding="iso-8859-1" resourceProviderFactoryType="string" enableBestFitResponseEncoding="true" culture="pt-BR" uiCulture="pt-BR"/>

04/05/2008 Development / asp.net

Imports System.Data

Dim con As New OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;User ID=Admin;Password=;Data Source=" & Server.MapPath("dados.mdb"))
Dim cmd As New OleDb.OleDbCommand("SELECT nome FROM TABELA", con)
Dim dr As OleDb.OleDbDataReader

con.Open()
dr = cmd.ExecuteReader

While dr.Read
Response.Write(dr.GetString(0) & "")
End While

con.Close()
con = Nothing
cmd = Nothing
dr = Nothing

18/09/2008 Development / asp.net

Resgatar Valores

<configuration>
<appSettings>
<add key="appConexao" value="Provider=SQLOLEDB.1;Persist Security Info=False; User ID=sa;Initial Catalog=Artigos;Data Source=dbICARO" />
</appSettings>
</configuration>

Dim strConexao As String = System.Configuration.ConfigurationSettings.AppSettings("appConexao")

Customizando e definindo páginas de Erros

<configuration>
<system.web>
<customErrors mode="On" defaultRedirect="frmErro.aspx">
<error statusCode="404" redirect="frmNaoEncontrada.aspx" />
</customErrors>
</system.web>
</configuration>

26/03/2008 Development / asp.net

Para trafegar dados em HTML no asp.net use

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="parent.WebForm1" validateRequest=false%> 

20/09/2008 Development / asp.net

Para dar permissão em Imagens, Script, arquivos que estão em outras pastas e que você só pode acessar quando logado, use o código abaixo.

<location path="Library" >
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>

25/08/2009 Development / ado

Dessa maneira você recebe Serializado os dados de um recordset.

getRows: Devolve os dados tipo um Array de linhas e colunas

getString: Devolve os dados serializados de acordo com seus parametros

A Sintaxe é:

Set str = objRs.GetString(formato,qtdedeReg,delimitadorColuna,delimitadorlinhas,valoresNulos)

Onde:

  1. Formato: Usa-se o valor 2 para dizer como será a formatação dos registros é Opcional
  2. qtdedeRegistros: É um inteiro representando a quantidade de registros que queremos
  3. delimitadordeColuna: É o caracter que delimitará as colunas
  4. delimitadordeLinhas: É o caracter que delimitará as quebras de linhas
  5. StringparavaloresNulos: É uma string caso algum registro venha em branco

Exemplo Simples:

Digamos que eu faça um select de 2 campos da tabela - select id, setor from contatos
objRetorno = rs.GetString(2,,"#","||","Valor Nulo")

Os dados virão da seguinte maneira:

449#Desenvolvimento||459#Diretoria||460#Vendas Governo||461#Técnico||465#Secretaria

18/09/2008 Development / java script

//*************************************************************
// Função para gerar números randômicos
//*************************************************************
function gera_random(n) {
        var ranNum = Math.round(Math.random() * n);
        return ranNum;
}

//*************************************************************
// Função para retornar o resto da divisao entre números (mod)
//*************************************************************
function mod(dividendo, divisor) {
        return Math.round(dividendo - (Math.floor(dividendo / divisor) * divisor));
}

//*************************************************************
// Função que gera números de CPF válidos
//*************************************************************
function cpf() {
        var n = 9;
        var n1 = gera_random(n);
        var n2 = gera_random(n);
        var n3 = gera_random(n);
        var n4 = gera_random(n);
        var n5 = gera_random(n);
        var n6 = gera_random(n);
        var n7 = gera_random(n);
        var n8 = gera_random(n);
        var n9 = gera_random(n);
        var d1 = n9 * 2 + n8 * 3 + n7 * 4 + n6 * 5 + n5 * 6 + n4 * 7 + n3 * 8 + n2 * 9 + n1 * 10;
        d1 = 11 - (mod(d1, 11));
        if (d1 >= 10) d1 = 0;
        var d2 = d1 * 2 + n9 * 3 + n8 * 4 + n7 * 5 + n6 * 6 + n5 * 7 + n4 * 8 + n3 * 9 + n2 * 10 + n1 * 11;
        d2 = 11 - (mod(d2, 11));
        if (d2 >= 10) d2 = 0;
        return '' + n1 + n2 + n3 + '.' + n4 + n5 + n6 + '.' + n7 + n8 + n9 + '-' + d1 + d2;
}

//*************************************************************
// Função que gera números de CNPJ válidos
//*************************************************************
function cnpj() {
        var n = 9;
        var n1 = gera_random(n);
        var n2 = gera_random(n);
        var n3 = gera_random(n);
        var n4 = gera_random(n);
        var n5 = gera_random(n);
        var n6 = gera_random(n);
        var n7 = gera_random(n);
        var n8 = gera_random(n);
        var n9 = 0; //gera_random(n);
        var n10 = 0; //gera_random(n);
        var n11 = 0; //gera_random(n);
        var n12 = 1; //gera_random(n); 
        var d1 = n12 * 2 + n11 * 3 + n10 * 4 + n9 * 5 + n8 * 6 + n7 * 7 + n6 * 8 + n5 * 9 + n4 * 2 + n3 * 3 + n2 * 4 + n1 * 5;
        d1 = 11 - (mod(d1, 11));
        if (d1 >= 10) d1 = 0;
        var d2 = d1 * 2 + n12 * 3 + n11 * 4 + n10 * 5 + n9 * 6 + n8 * 7 + n7 * 8 + n6 * 9 + n5 * 2 + n4 * 3 + n3 * 4 + n2 * 5 + n1 * 6;
        d2 = 11 - (mod(d2, 11));
        if (d2 >= 10) d2 = 0;
        return '' + n1 + n2 + '.' + n3 + n4 + n5 + '.' + n6 + n7 + n8 + '/' + n9 + n10 + n11 + n12 + '-' + d1 + d2;
}

//*************************************************************
// Função para escolher qual função chamar de acordo com a chamada
//*************************************************************
function faz() {
        if (document.form1.tipo[0].checked) document.form1.numero.value = cpf();
        else document.form1.numero.value = cnpj();
}