Salesforce Na Prática #8 - Projeto Imobiliária - Aplicando SLDS à página do visual force - Parte 1

e a galera eu posso não aqui para o jessé a gente começa mais um vídeo nossa série na prática meramente que agradecer a todos os nossos 330 inscritos aí tá muita força para gente continuar lançando os conteúdos aí beleza então vamos lá que hoje a nossa missão aí é bem interessante o trabalho é olá pessoal tudo na sala hoje é pegar a nossa página né que nós criamos nossa visão falsa e peixe está nesse formato e nós vamos aplicar nela o estilo né do lighting que o slds para ela ficar dessa forma aqui ó beleza

é a mesma página a mesma vp tá nós vamos deixar ela do jeito que tá aqui tal do jeito ela tá desse jeito hoje e aí nós vamos na sua mãe ela nesse formato com estilos mais adequados né é nem mais suave que a forma de leitura né bem interessante que a gente vê que que esse essa página aqui pela sua mão nessa nova bem simples tá então é para ti aprender mais um recurso interessante dos seus sócios que o slds beleza bom então vou voltar para o código e tente começar a aplicar o slds

na nossa página para ficar nesse formato aqui beleza então vamos lá é bom pessoal aqui no código uma das primeiras coisas para gente começar a trabalhar com esse e desce é o seguinte ele é praticamente muito parecido com úlcera e tal conceito pelo menos é muito parecido com bootstrap tá quem trabalhou como se escreve aí vai baixar muito tranquilo trabalhar com e serv de esse beleza que é muito parecido então por exemplo eu tenho um botão aqui para me avisar aos peixes né mas esse botão que é o comando de botão apliques aqui ó eu

vou brincar aí numa classe né e dentro dessa página vai ter uma chamada para o sts que a gente vai fazer agora tá e aí quando opta que uma classe nesse botão aqui ele vai pegar o adoecer ds né todas as configurações de botão pré-configuradas então não preciso ficar fazendo você ss aqui configurando o botão ao botão esse vai ser essa desse tamanho não preciso porque já vai estar definido isso lá no slds tá outro dia que importante é interessante que você veja a documentação da eu vou deixar aí na descrição do vídeo beleza é

só você entrar lá tudo que você precisar fazer com ss tem lá é imagens mostrando qual o efeito que acontece né como sincera esse tipo de elemento tá então não deixe de conferir ainda descrição aí da página a documentação da sls beleza então a primeira coisa a gente vai começar a fazer aqui para trabalhar com esse abs eu vou fazer o seguinte eu vou colar com o sakis style só deixar mais limpo para gente aqui tá eu ver o seguinte eu vou fazer uma tag aqui tá aqui vai falar para essa página minha que é

agora ela tem o slds é incluído vou excluir ou ssds dessa página faça uma página partir de agora eu posso usar elementos né clds aqui dentro dessa página como eu faço isso eu vou fazer aqui a pics tá api-sl desse tá bom faço isso aqui tá do que um dessa forma que fecha aqui agora eu acabei de falar para mim visualforce page que ela como usar comandos vai ser lds beleza deixa um comentário aqui ó chamada para o slb está que os seus fosse lightning design system beleza que é o sistema né designer né da

light não era seus tá bom beleza pessoal então esse é o primeiro é a primeira coisa que a gente vai fazer aqui na nossa página né eu falei agora que ela está incluída né o ss que tem essa página poder usar parâmetros do sms beleza outra coisa importante nós temos uma dica conteúdo né então se eu for lá para a ela aqui ó tudo tá dentro dela tá então que ela diz conteúdo beleza é eu tenho uma tag html chamado center que vai colocar toda de conteúdo estiver dentro agir conteúdo sertanejo centralizado tá e eu

tenho advil informe onde está tudo na formulário beleza tudo me falar meus cantos né no botão lado command button todas as coisas que eu em que estágio inicial lá naquela renderizando me avisou após pista dentro tá de form1 tá então é o seguinte eu vou colocar aqui uma corrente máxima cresce tá bom tá bom vou colocar com slds estou tá quem eu quis dizer aqui ó tá falando assim pressa pressa pressa pegue pressa gibi ó essa dele vai ter por classe a slds escova o que que eu tô falando que o escopo do slds vai

estar incluído dentro dessa dica então eu posso chamar aqui de cara qualquer coisa qualquer colocar tipo de qualquer classe aqui que seja é de série de sb beleza que vai funcionar porque eu já atribuir a classe principal aqui dentro da minha div principal beleza então esse essa dib tem um escopo no sls tá então você fizer eu fiz uma chamada aqui em cima do ss falei que essa classe ela tem um escopo do esse essa dívida eu escolhi do ssds e agora eu posso trabalhar com o e aqui tá isso aqui é muito simples algo

tranquilo conversar o seguinte o que que nós vamos fazer agora nossa primeira ação aqui depois de colocar essa diviac forma em um né para com esse corpo do sls e já atribui aqui é chamada da utilização do sms para essa página eu vejo o seguinte primeira coisa que nós vamos alterar né pra gente entender aqui de começo é o botão salvar tá se a gente for analisar óculos feijó aqui na visual após ibge o botão salvar ele tá um pouco diferente olha só e não tá igual né a gente fez com o comando de culto

normal seu zap costumam debuter essa forma sem estilo nenhum só o botão mesmo agora seu usar o srds né seu atribuir-se ls eu posso deixar ele dessa forma olha só né mas passa o mouse aparece em branco né o terço beleza muito legal né então como é que eu faço isso aí que vai para o lugar então vocês precisam utilizar a documentação e se eu fosse é muito importante saber utilizar e as coisas beleza então olha só aqui ó na documentação para slds elas lightning design system né eu posso encontrar o que eu quero então

eu posso vir aqui ó a componente muito muito sabe oponentes e que eu vou e button só olha que legal ao clicar em botão aqui olha que a gente já viu o botão aqui olha aqui ó estilo naquele botãozinho lá de salvar tá vendo ele já tá aqui ó se implicar aqui em show gold olha que interessante já mostra para mim aqui o botão de susto tão né cálcio dos esse botão tá botão de sucesso né ok enviar salvar é tão que eu tenho a classe e ssds ó que vai deixar esse botão dessa forma

aqui ó olha que legal eu tenho a classe dele aqui ó né então eu posso em atribuir essa forma o botão lá na minha visão após pilha só que não precisa de uma tribo dessa forma por quê porque eu já criei lá no meu código o apex button eu não preciso falar com o código aqui todo para que eu queria fazer dessa forma eu teria que alterar me controlo é porque eu diria que usar provavelmente usar java script aqui tá então eu posso só mudar a classe do meu botão lá dentro da mesma isofoz então

vem aqui eu vou copiar isso aqui olha só que interessa eu peço só isso aqui ó vou colocar isso aqui contra você né e agora vou lá no meu código ó ó e aqui no meu código do botão de coco dinheiro comando botão aqui eu vou vir aqui e vou fazer o seguinte ó é se eu quiser colocar aqui o clécio tá ele não vai dar certo beleza porque não existe o progresso para pula de button mas existe o que ó style né vou ver aqui de novo um abrir por aqui tá aqui ó styleclass

olha que interessante ó uma classe de estilo seu clicar aqui e colar aquele texto que eu roubei lado meu nome é a documentação o sls button essa esse botão success né que que vai acontecer vão controlar esse aqui tá nem o controle esse bom vou esperar salvar salvo vamos lá na página eu vou aqui na minha página aqui ó carregou olha que interessante olha como é que é fácil ó eu botão salvar já tá estiloso não está mais o jeito né que estava antes né olha que interessante o resto tá tudo normal mas que o

botão de salvar como incluir né o styleclass lá com a classe aqui ó né doença lsd trata de botão né e que colocou aqui o estilo do botão do sucesso e não vai ficar aquela foto se eu trocar aqui eu colocar o botão que por exemplo a vou mudar só para gente ver aqui ó pega esse deves eu tive aqui ó né e esse aqui ó não fala com vermelho que ele é mais nesse outro botão esse aqui ó ele é mais vai ficar mais melhor pra gente ver aqui ó eu contra você vou lá

no pode vim aqui no código odeia a classe de estar em inglês aqui ó eu coloquei desse motivo beleza vou dar um control s e olha que interessante pessoal não pode mudou o outro lá na página já mudou aqui tá vendo aqui ó olha como é que é simples é muito fácil então quê que eu desse essa você virar amigo aqui na documentação tudo você vai encontrar aqui na documentação então que ela tem acordeon né aquele tipo de menos que salsinha você clica nele ele vai expandir o lápis ah tá então o que acontece é

muito tranquilo é só você vir aqui na documentação você acha tudo aqui ó tá vai ter um kit vai usar só os cards tá é que queria esses carros assim ó tá nós vamos usar eles para poder criar nossa quadrada que todo aqui da nossa página aqui beleza então vamos voltar lá então para nós fizemos cosmo e deixar o botão de salvar como é verde mesmo né não é só vir aqui de novo no botão aqui ó botões tá e aí eu vou mostrar o código aqui beleza e vou copiar aqui o success button tá

aqui ó que eu a cla é deixa ele desse jeito voltar no código aqui no cosmo vou pegar e mudar que o estilo da classe aqui vou colocar o ss botão um suco vocês tá não dá o contato aqui na minha página já vai estar né aqui botão salvar da forma que eu quero beleza muito legal é muito fácil a gente trabalhar com sl de beleza bom pessoal então aqui nós já tinha nos nossos botão né agora que a gente deixa ela ela é melhor ainda nosso nossa página vamos a seguinte nós queremos deixar dessa

forma né então tá vendo que eu vou quadrado aqui ó que é um card né tem um card aqui tá bom tem aqui uma tabela né dentro do que eu tenho uma tabela que dentro tá e como é que a gente faz isso ó vindo aqui na minha documentação em cards aqui ó tá eu tenho o código tu olha que interessante é muito simples a hora que você tem que interessante aqui tá o exemplo né a cão né que me botam de mim esse é o rio aqui só que a gente vai pegar esse tudo

não eu vou deixar dessa forma né eu não preciso colocar esse camisinha não precisa colocar o botão né então vamos alguns parâmetros mas vou mostrar para vocês o corte só precisa entender e aqui é o que que eu vou utilizar a nossa página olha só o ártico né que faz aquele quadrado né o pagar no branco que eu esse esse card da promoção então que o artigo eu vou ter que o cabeçalho tá o cabeçario vai terminar aqui bom só que tudo faz parte do cabeçalho onde vai ter que ir aqui no botão de a

pontos né para criar a conta vai ter o ícone tá é só que aí eu tenho conteúdo aqui eu rodapé aqui tá vamos lá no nosso pode ficar mais fácil teria como é que funciona isso aqui bom vamos lá ó é bom pessoal aqui no meu código e eu vou pegar aqui eu vou começar a alterar esse corte olha só que interessante nós temos aqui depois da diva informe um zé eu vou ter que o início do formulário tá é obrigatório que o formulário que se não não vai funcionar o meu shampoozinho por ti aqui

tá é igual tem o html mesma forma tá então eu não posso excluir o app form da eu tenho que contar até que se forma só que o peixe bloco aqui ó eu não vou precisar dele tá mas antes de eu escolhi ele nós vamos fazer o seguinte aqui ó antes do forma e eu vou dar uma inteira aqui e eu vou começar a declarar à tarde artículo né aqui ó vou escrever ártico né ou ser cresce no e aí eu vou colocar slds card tá bom que é é slds que é o isso aqui

né vamos fazer aquele quadrado de rio branco a só pra gente ver como é que funciona e aqui ó tá algumas em três aqui o teste bom e vou dar um contra oeste a gente ver como que ficou lá dentro da nossa visual for speed beleza só vou colar vem para que ficou olha só pessoal não sei se vocês tão conseguindo reparar aqui ó mas eu tenho um quadradinho de biquininho em cima aqui do meu peixe block que tá montando esse quadrado aqui ó a gente olha ele tá funcionando beleza só que ainda tá bem

simples eu preciso colocar mais coisas né eu tenho cabeçalho eu tenho conteúdo eu tenho rodapé beleza então vamos lá pra gente poder montar tô aqui dentro do artigo o meu seguinte olha só né é mentira de teste eu vou seguinte vou copiar que o absorve tudo tá a pessoa muito tudo morrer cortar o a pessoa me tudo e vou colar dentro do ártico aqui ó beleza tudo é o controlar e vou dar um irritado beleza tranquilo vou tirar aqui o excesso de espaços de dentro do artigo ao todo eu tenho meu form tá beleza não

contra o s vão ver como ficou na nossa página bom pessoal né olhando aqui na nossa página parece que não mudou nada né mas na verdade mudou sim tá deixa eu ter uma pequena diferença vir aqui visualmente falando aqui que um pouco complexo de visualizar porque ela é bronca né e o poder branco mas não tem problema tá vamo continuar inteira vamos voltar ao código e aqui no código é só vou começar agora tirar as coisas que eu não vou usar mais tá por exemplo o peixe vop tá então de cara já vou aqui selecione

pedir blog esculpe e brotar aqui embaixo também vou excluir o peixe block beleza então agora eu tenho a minha tag de mensagem e tenho a minha tabela né meu grid que tá os campos sabe e tem o meu botão tá bom ou não control s é recomendável tá pessoal sempre onde você para fazer essas alterações aqui não controle vai lá na visão após pedir ele pede ficou tá pra você entender melhor onde que é um dois três quatro beleza então vamos lá na página meu filho bom já notamos que a página mudou um pouco tá

bem nem esquisitinho assim né olha só mudou um pouco tá tudo dentro do quadrado aqui ó que o meu artigo esse quadradinho que todo é um artigo beleza vamos voltar para o pote então nós aprendemos com o artigo ele tem o cabeçalho e ele tem um conteúdo e ele tem um rodapé beleza então nós vamos a seguinte agora nós vamos criar dívida que vai ser o cabeçario beleza eu tirei excesso de espaço aqui mal e aqui embaixo do artigo do artigo aqui eu vou escrever a minha diva que vai ser a jimmy do meu cabeçalho

tá então vim aqui ó div tá bom você ver cresce e vou colocar river né parece que a minha passe sds sds é card tá bom e aí eu coloco o seu underline underline bom dia de bom que aí sim tá vem aqui e fecha aqui beleza então isso aqui é minha classe cabeçalho tá do meu artigo tá beleza bom então eu vou colocar aqui o que que eu quero no cabeçario tá dentro do meu cabeçalho né e vou colocar aquele tenso né de cadastro de ouro para isso uma coisa interessante eu vou usar aquela

ph2 tá beleza os h2 beleza e eu vou atribuir uma classe ou hbo isso que é o cress vou colocar aqui cressi sl ds ds card tá que é o nosso artigo né e o qualquer corrido e kaito tá beleza isso aqui eu tô dizendo para mim meu a minha tv h2 que ela vai ter a classe de títulos de cartão é o título do artigo tá então colocar aqui dentro faz seguir o estilo de cabeçalho o título de cabeça ar beleza tô precisa encontrar aquela treta html o espanto tá e vou colocar aqui o

beleza que o bebê tá e vou colocar teu cadastro cadastro de imóveis tá bom beleza ou não contra o s tá e vamos ver como é que ficou a nossa página então tá bom vamos ver só a nossa página agora eu já tenho aqui ó cadastro de imóveis olha que legal hein já tá quase ficando parecida com que ou fiz aqui tá bem igual né né então olha só interessante cadastro de imóveis tá bom então olha aqui vamos voltar para o código ó vamos divulgar esse aqui da forma bem simples eu vou não controlar aqui

né alto shift-tab para poder ir em tá tudo certinho e eu tenho aqui ó a classe artigo né ajuda elemento artigo né artigo tá e eu tenho ele é um cartão e aquele quadradinho lá não é um card tá e aí eu tenho no card eu tenho um cabeçalho conteúdo de roda p e eu acabei de fazer o cabeçario de vídeo é esse cabeçario tá o cabeçalho nada do meu cartão né o meu artigo vai ser é isso aqui ó de látex o cadastro de imóvel beleza agora falta o que eu colocar o meu conteúdo

beleza então é só não conteúdo eu vou colocar todo esse formulário né todo formulário tá aqui coloco sair aqui ó o a flexform né que é tudo aquele como os botões é tudo que tá dentro do formulário ele tá dentro do artigo beleza nós já temos aqui o cabeçalho né e agora nós vamos criar uma div e vai receber todo formulário beleza então vamos lá aquela div tá uma beleza cria uma div e aí eu vou pegar nessa dividir descola o saco só pra gente poder ficar sempre vendo né porque já fazendo eu vou colocar

uma classe nessa diga aqui ó classe ela vai ter um monte de classe têm interesse vocês vão aprender como coloca mais uma classe dentro de o bem para as coisas aqui dentro com a pics tá usando ele avisou a voz peixes então aqui ó primeira classe que eu vou colocar nela slde assim sl e assim tá tarde e é o cartão net todas a intensidade tá aí pelo menos a maioria delas vai ter esses carne aqui né porque na verdade cometeu caixa pessoal vai ser só o cabeçalho ou conteúdo que essa a gente vai fazendo

roda tá mas o mato então vai ter mais cedo de tarde e aí vou colocar aqui ó é que essa classe vai ser o bode tá beleza porque é seu bora que é o corpo o corpo do meu ativo essa classe né então vai ter o carro de voz agora beleza eu tenho colocar mais algumas classes aqui dentro tá e aí para mim colocar mais uma classe dentro esse de tudo é uma classe né que tudo uma clássica mim colocar mais uma classe aqui dentro eu vou usar espaço olha que simples agora eu declaro a

outra classe beleza você tem espaço né claro outra para cima tá fazendo aqui quando for utilizar essa visualforce page o seu sócio entender que essa de aqui ó e ela vai usar essa classe vai usar essa classe me usar e assim plantas que não quiser beleza sendo que nenhuma delas é é tenha elementos mesmo home nessas coisas todas para não colapsar né para não dar ele na verdade tá bom mais uma segunda classe que eu vou colocar aqui ó eu ir embora então vou colocar com slds se lds opá sds tarde bom olá pessoal isso

aqui é a segunda classe que eu coloquei aqui é que acontece para mim usar de né de conteúdo aqui dentro do meu artigo eu vou colocar é mais uma declaração o que que é para uma seguinte ó essa classe vai usar né o vai ser incluída nela todos os elementos de um corpo de artigo né então ela vai usar todo o estilo de um corpo do artigo do ir embora ali beleza então se você é eu acredito se eu tirar essa classe também que não vai empatar tanto nesse exemplo ele tá fazendo não tá mas

eu gosto lembrando pessoal você não precisa saber se cabeça tá lá na documentação copia e cola dentro seu pode tá não precisa inventar a roda beleza então a continuar aqui agora a outra classe que eu vou colocar a última classe vai ser a praça de controle do formulário porque eu colocar dentro dessa clássico de nessa dividir esse formulário aí eu vou arrastar esse vamos lá para dentro então acontece eu preciso colocar aqui é uma classe e dentro do meu no meu conteúdo aqui que faz o controle de formular ele vai poder vai daqui tá o

meu formulário é os estilos e os seus ossos utilizem formulário beleza então eu vou colocar tu slds tá é forme beleza forma e até lá element control lá mostrou bom isso que é isso mesmo e fecho aqui a minha declaração é pastor tenho três classes a classe slk de bori aí nem mori tá e tem uma forma element control tá bom muito interessante tá eu comprei três classes dentro da minha diva que advil conteúdo acho colocar aqui um arco e comentário aqui só conteúdo que o dobro do artigo né eu e o meu cardigã né

beleza tá e aqui essa aqui é a give cabeçalho tá saber sabe né e o pato ah tá bom beleza tá então já tinha meu cabeçalho e tinha que medir conteúdo tá bom beleza então tem conteúdo e tenha cabeçalho aqui tá teve cabeçario de conteúdo agora o meu conteúdo todo aqui do arpex forma eu vou jogar happy também conteúdo então vem aqui de cara copiou tudo aqui ó copiou tudo né recorta aqui e colo aqui dentro beleza então meu a pessoa está dentro da medir conteúdos eu acabei de criar tá toma contra o água dá

um chitabe poder ninguém tá tudo aqui para mim vou ver se então beleza aqui ó né de conteúdo div cabeçario tá e aí vamos a 1 contra o oeste e vamos ver como é que tá ficando lá na nossa página beleza vamos ver sol então aqui ó né parece não mudou muita coisa já mas já mudou um pouquinho tá de ser uma diferença a nossa página parece um tecido um pouquinho diferente né mas ainda não está tão expressivas mudanças ainda que nós fizemos né então vamos voltar para o pode continuar mudando bom pessoal agora é

o seguinte a gente já fez né então cabeçalho a colocando um cadinho conteúdo tá e aí nós temos nosso formulário né e nós sabemos que dentro do aprendiz pneu rígido tá montando aquela tabelinha né não adianta colocando nossos nossos multi aqui né nossos campos sabe só que nós vamos mudar esse aqui nós vamos usar mais o painel grid tá de cara já vou escolher o pneu grid aqui tá aqui ó exclui ele e vim aqui embaixo tirei beleza ou não contra o s tá aí lá na minha página vamos ver como é que ficou olha

só que bagunça você viu pessoal olha que bagunça na página tá tudo bagunçado eles eu tiro pneumático pneumático organizarmos campos aqui ó então ele bagunçou tudo que eu vou fazer agora eu vou organizar esses campos de novo não ela tá bem a dessa forma nós se tem uma tabela ó né então eu vou organizar e se tem uma tabela tá só que nós vamos usar a tabela no estilo do slds tá na forma conhecer 10 faz se eu vim aqui na documentação e eu vim aqui ó procurar aqui tabelas tá aqui eu consigo achar então

e data teimoso a como que é as tabelas aqui olha que interessante com o estilo né do seu sócio olha que legal é do jeitinho que tá aqui você tá dela né ela tem um cabeçalho e tem os campos só que aqui tem mais né mas colunas e linhas né mas aí eu poderia vir que hora que tem show cold tá aqui o código né tabela cabeçalho da tabela fipe rede né quem se me colocar aqui na quando você mexendo com a contar ela que o cabeçario bom aí eu uso aquelas clássicas ea isolado daniele

né que é o trt h né olha que bacana tá é o mesmo estilo aqui ó o corpo da tabela tebori tá mas aí vamos vai imprimir implementar essa tabela lá nosso posto tá bom ó