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

e aí é bom pessoal então depois eu tirei o pneu grid aqui no meu código né tá aquela bagunça ver aqui a nossa mensagem né the window ou quando acontece algo minha e agora eu vou começar a trabalhar minha tabela aqui tava mauzinhos feliz aqui e vou começar a criar a tabela então vou vir aqui colocar top table bom vou fechar aqui tá e vou começar atribuir a classe aqui na tabela para poder falar que essa tabela mais ó tá vendo a qualquer hora essa tabela que vai usar as aquelas configurações dos parâmetros nesse mdf

para tabela beleza então vamos lá vamos colocar que cresce tá bom eu vou colocar o sdl é é seu ds né se esqueça table tá bom e aí eu coloquei já aqui que ela né é uma tabela no estilo é certa é essa tá no estilo dos seus pós pronto agora eu vou colocar aqui as bordas da tabela slds tá bom e nesse estilo né opaco que o hífen e vou de laine aqui e eu colocar aqui é border tá bom dele mesmo que vai seguir o estilo de borda das tabelas também do srds tá

se eu colocar esse aqui ó só ele vai ter um estilo x mas se eu colocar borda aqui ele vai ter um estilo aquelas bordas do gente vítima lá exemplo tá bom você pode ter some coloca uma classe ter uma conta classe desse para ficar mais didático eu vou fazer aqui mais rápido que frente ou perder dentro beleza então vou dar um fechado aqui moto e aí eu criei então é até digitar belas tá agora eu começo a trabalhar então gente um cabeçalho da tabela né o cabeçuda tá vendo essa parte aqui na página olha

só bom aqui na página olha que interessante ó essa parte aqui ó é o terrestre beleza que é o cabeçalho da minha tabela tá bom eu não vou fazer essa parte aqui natal e pense com tá bom vamos lá no código bom então agora estou seguinte eu vou escrever aqui assim ó que rege bom te vejo a que é o cabeçario da minha tabela bom e aí eu vou colocar ter tá bom vou tirar um pouco de vocês então que eu já fiz o meu tr né é da minha tabela ver se minha célula ali

né e aí agora vou fazer o meu minha coluna ali tá então vou vincar vou colocar ph viu e aí dentro desse th aqui eu vou usar uma uma uma tribo diferente qualquer que eu esculpi tá bom aqui ó tá em qualquer coisa tá bom beleza eu tô falando que essa aqui vai só coluna do th para o título beleza então aí aqui dentro que eu a seguinte né eu vou colocar aqui ó tive logo vive tá bom eu vou colocar o kit e ssds da truque bom que eu tô fazendo aqui agora ó então

assim ó eu queria uma tabela né queria ir até que ficou pensar na tabela e tupia na primeira linha e coluna da minha tabela tá e aí eu vou colocar aqui ó dentro de vir com esse aqui verdade com a classe troquei o meu título tá eu vou vir aqui com aplicar título beleza vou colocar aqui ó eu vou escrever assim o título nessa itens tá e bem beleza e aí eu vou colocar agora um texto que vai aparecer para o na tela seu pastor e fiz eu não tenho mais nem tem isso tá bom

e aí vou fechar essa dica mas vamos aqui pra acontecer lá olha só que interessante eu tenho que fechar nossa aqui tá fechado né só vou fechar ela pagar ela aqui vamos testar como que ficou lá na nossa página beleza contra o s olá pessoal olha que interessante aqui na minha página né tá uma bagunça aqui mas apareceu que é primeira linha e primeira coluna né não tem uma borda que mais a primeira linha primeira coluna aqui da minha tabela tá aqui ó apareceu aqui tá vou voltar lá no código aí agora que não pode

eu vou escrever a segunda é coluna da minha da minha do meu título tá coloquei a coluna vai ser sempre com th eu vou vir aqui trocar mais bloquear ah tá bom vou fazer a mesma coisa esculpe tá eu vou colocar ficou bom que me seguir os parâmetros de coluna ó e aí eu vou colocar aqui né igualzinho aqui ó esse aqui ó beleza o pé isso aqui tudo vou colar aqui embaixo bom e aí em vez o título se itens eu vou colocar aqui quantidade tá bom e aí você vê quantidade que é uma

cidade vai aparecer lá da beleza bom vou dar um contra o s volt o espaço aqui tá e aqui tá pronto o meu cabeçalho né da minha tabela beleza vamos ver lá como é que ficou essa olha que interessante eu tenho que ir itens e quantidades beleza show de bola né já vai está começando a voltar aqui a minha tabelinha aqui dos meus itens aqui que vai ficar igualzinho essa daqui ó tá beleza então vamos voltar lá para o posto vamos ver sol agora a gente apresenta o seguinte não é um cabeçalho tá pronto também

tabela tá agora vou começar a montar o corpo da minha tabela então para mim montar o corpo eu vou abrir uma manteiga chamar tebori olha só que interessante eu vou ter bolo aí beleza que é o corpo na minha tabelinha beleza então vamos começar aqui trabalhar com teu boy então aqui agora dentro do meu outro é mole né que vai ser o conteúdo da minha tabela tá eu vou começar a fazer as linhas das colunas né e as células do meu corpo bom então vou lá para o seguinte né vou comer começar aqui com você

e tá vai ser definição na minha linha ali beleza e aí eu vou começar agora declarar as células aqui th tá e aí não dá seguro todo o campo ele tem a lei boo tá que é o nome do campo depois eu canto efetivamente tá então nós vamos fazer a mesma coisa aqui ó então nós vamos colocar aqui o data leible tá bom vai ser eu tomar um acidente que esse essa sim é uma nós ser disney boo lá e eu vou dar o nome para ela aqui ó de quartos tá bom tchau quartos beleza

porque aqui no nosso ali também é quartos né eu apaguei mas é quarto tá bom então vamos começar aqui então quartos tá e vou falar que ele vai seguir esse corpo é que horas que eu pude ir células tá bom vou te como está aqui por causa desculpa eu vou bom e aí só isso vou ok google fechar ele aqui no meu th tá pronto aqui beleza agora dia do meu th eu vou criar aqui uma div hoje vou colocar a lei o beleza então vou fazer o seguinte vou colocar aqui ó div tá aí

ela está cliente slds porque lá slds troquei it ok i o contacto kit bom é e vai ser vai ter o título aqui ó quartos a beleza vou dar um vou fechar aqui pronto agora eu vou resumir que a gente que eu fiz ó eu queria então uma linha e criei aqui uma célula das pressa linha tá mais cedo tipo lei botar para receber o nome né do campo tá acabou não ainda falta a gente fazer aqui é usado pegue que a própria teve chamado liveu tá bom não vai colocar o clécio tá vai ser

slds worm beleza element leio bom quem não quis dizer aqui ó é que eu tô criando uma classe a lei bom né o nome para o campo e vai ser da classe label o ds que controla os elementos de um formulário tá beleza então vou seguinte agora é eu vou fechar aqui minha amigo veja ela aqui tá e agora vou colocar aqui dentro o meu é homem mesmo do meu é meu amigo que é quarto tá aqui quartos moto beleza roupa beleza então controle esse aqui vamos ver como é que ficou na nossa página tá

bom pessoal que nossa página se já consegue notar aqui ó tirando essa bagunça ignora essa bagunça mas aqui embaixo do ipi e já tem amiibo 4ª agora eu coloco colocar o campo aqui do quarto tá aqui dentro aqui da minha da minha outra coluna aqui né da minha linha aqui tá então vamos lá então seguinte psol ele apareceu criar leibo nem eu vou criar agora vou pedir para com pedir bom eu vou criar a outra coluna beleza e aí eu segui a falar aqui esse pires aqui ele vai usar a lei que eu acabei de

criar então você atender aí eu coloco só data livre ou bom e aí qual que é a livro que eu coloquei lá quartos quartos bom e aí eu vou fechar aqui então é leigo beleza me atendeu a verdade né e agora eu vou colocar efetivamente aqui dentro é o meu canto tá aí eu vou no seguinte vou fazer também uma dívida ou fiz a com a lei vontade vi a mesma coisa preste ss tudo cliente é slds são que ó e título aqui vai ser quatro também mesma coisa tá quartos beleza tranquilo agora eu vou

colocar o meu canto agora 15 dentro eu coloco um campo eu posso me simplesmente aqui ó e copiar o campo a mais campo que eu de banheiro realmente ele banheiro que eu apaguei que mexendo eu apaguei o de quatro mas não tem problema vou é né o campo que a gente criou naquelas aulas anteriores igual qualquer dentro dessa classe dentro dessa diga ó porque ele aqui dentro sabe o valor dele não vai ser países a 5 quartos tá que a variável que a gente criou muito tranquilo agora que eu faço aqui ó não terminou mas

vamos seguir vão ver como é que ficou lá vamos ver lá na nossa página como é que tá ficando tá bom nesses espaços ou não não é esse vamos lá na página bom pessoal aqui vocês a podem notar olha só que interessante tem 14 e tem um campo mas indique o nosso exemplo aqui ó olha como é que o campo tá aqui bonitinho lá né e ir lá na nossa página aqui olha como é que tá o campo ele tá certinho do lado da lei bom dele mas ele tá meio feio ainda né porque eu

não aplique nenhum estilo ao meu botão ao meu canto né se você for vir aqui na documentação daqui ó na documentação que alguém pude tatuagem tá vamos ver que imputa o que que e aí e olha só aqui nos campos olha que interessante todos estilos de campo o campo desse jeito com a lei do em cima né um texto aqui gente imprensa errou de não ter explicativo que não sei o que eles comem tá tem vários tipos de input aqui ó o que me interessa que é o seguinte eu quero botão comer o campo fica

parecendo que esse campo aqui ó seu branco bonitinho né sabia aqui ó e clicar aqui para mostrar o código eu vejo a classe aqui ó pouco a classe dos botões e é dos campos slds input então o que que eu faço lá no meu código olha só que faço ó vem aqui no meu código e onde está aqui no input teste né que é o quarto aqui eu vou dar um espaço aqui vou colocar com styleclass olha só olha aqui olha só para dizer que ele tá aqui ó vai estar eu conheci ela está eu

cresce beleza vem aqui está eu class qual que é a classe dos campos então slds muito tipo tá olha que bacana ó beleza ou não contra o s e vamos ver como é que ficou lá meu suporte olha que bacana pessoal olha que interessante o nosso quarto aqui ó agora comenta o campo ficou largando ó show de bola né agora o que que falta repetir a mesma coisa para o resto beleza então vamos lá no colégio aqui no código que essa olha que interessante olha como é que é muito simples vai trabalhar ó vou tirar

esse excesso de espaço aqui ó meu tempo bori né nosso dentro do corpo da minha tabela eu tenho que uma linha que esse é definido pelo te é uma linha tá é que eu vou ter colocar aqui assim ó comentário pra facilitar na hora que vocês tiverem programando minha linha da desta tribo beleza o da tabela beleza opa beleza linha da tabela tá e aqui ó esse aqui debaixo é célula célula célula da linha beleza da linha beleza que ela se ela ah tá e aqui ó é o outra célula da linha beleza vou tranquilo

né nossa célula da linha linha da tabela célula da linha célula da linha cada seu ou vai numa coluna né beleza muito tranquilo né então pior dentro de si tr tudo aqui ó eu tenho uma célula que o label e tem uma célula que é o campo agora que eu faço a mesma coisa por esta beleza eu posso simplesmente copiar aqui ó br.aht.at rtr e aí eu vou aqui ó rolar ela aqui em baixo tá por ela aqui e eu vou montar os dados né no segundo campo era banheiro então vamos a seguinte eu vou

mudar para o nome da lei no para banheiro vírus bom até copiar aqui ó banheiros e aí é aqui ó na ligou para banheiros aqui no título da classe aqui da diva colocar banheiros também né aqui na data liga o pior banho a quarta vou trocar no banheiro não é resumindo aqui ó banheiros e aqui ó né olha aqui o vendo aqui ó não é banheiro aqui em baixo tá vendo eu posso copiar que o vendo aqui ó tudo né do meu campo e coloquei aqui ó né ó beleza ou não contra o s vamos

ver como é que ficou lá nossa página tá bom olha que legal aí pessoal que na página olha aqui ó banheiro quarto olha que top ó tá funcionando direitinho olha que legal né heleno é que eu preciso de agora a mesma coisa para o resto tá bom tá lá só pessoal aqui ó eu vou apagando já fiz o banheiro apaga o banheiro aqui ó do antigo né agora vou passar para sala tá então vou fazer todos aquilo que a gente terminar a gente não vou terminar todos os campos a gente volta sabe e aí o

bug só estou aqui né eu vou salvar aqui né depois eu li todos os campos e todas as lemos tá vamos ver como ficou lá nossa página beleza então pessoal olha que top aqui na nossa página olha ficou já mais bonitinho né olha que interessante que eu apareci mais lei e vamos lado esquerdo e os campos o lado direito olha que top se eu paro mouse aqui ó tá vendo é o está então está quente aqueles títulos é que a gente colocou lá no nossas divisória que interessante aparece o nome aqui ó né deixa eu

falar de coisa inútil colocar isso não é inútil só porque às vezes tem pessoas com necessidades especiais estão usando ali né um sistema e vai usar algum programa que lhe a pela nem às vezes esses problemas procura por esse tipo de coisa sabe porque esses títulos menos né altos da imagem tá então é importante de colocar esse tipo de recurso aí como está está trabalhando tá então é show de bola só faltou o tipo de imóvel com um piquenique né é uma coisa quando é pequenice tá não muda a mesma forma por você fez aqui

o resto vai fazer com piquines tá não muda por mais que tornam srs da documentação existe vários tipos de piquenique para você usar só que aqui não precisa vou colocar ss4 e ssds input também que não tipo de imóvel tomar no código aqui ó né no meu fundo final do meu código aqui eu tenho um campo pequenice tá eu vou colocar ele do mesmo a gente vai colocar os outros tá bom então assim que eu vim aqui ó faça a mesma coisa que os outros corpinho ali pela que ter né ó vou cola que ei

tá só tomei valor né e vem aqui na língua vou colocar título do imóvel né aqui ó né no meio tipo de imóvel tá vou pagar aqui esses detalhezinho aqui tipo de imóvel tá aqui ó é tipo de imóvel também beleza é o nome da lei vou tá aqui ó vou copiar que tipo de moto aqui em cima e vou colar desde pequeno ah tá aqui ó aqui também ó eu tipo de imóvel aqui também tipo do imóvel beleza aí que acontece só que tinha um monte de queixo input pior né é esse tom e

pulso normal né eu não vou usar simples normal vou usar o piquenique eu fizer embaixo apaga esse aqui ó acabou pizza aqui no interior a agulha aqui bom e vem aqui ó vou pagar da noite demora que eu já fiz o leigo ali e aqui ó esse campo aqui toda o piquenique né o teu corpinho ele aqui ó né né eu recortei ele aqui e vou jogar dentro da div aqui ó tá tá bagunçado do controlar shift-tab pronto agora está organizado tá até porque esse comentário vou colocar aqui embaixo que vem saber quem é o

campo piquiri bom show de bola funcionou ainda tá faltando uma coisa olha só vamos lá contra oeste vamos ver como é que ficou lá na página olha só já organizou olha que interessante aqui na minha página já organizou né eu tipo de e aí ó só que ainda não tava muito legal zinho aqui olha ele ainda tá diferente dos outros aqui ó porque falta colocar a classe de inconsistente no meu piquenique se eu vou voltar no código aqui no código vindo select-list aqui eu vou vir aqui dá um espaçozinho aqui né e vou colocar dois

styleclass tá bom e vou colocar esse nds u tá tudo bom e vou dar um contra o s aqui para salvar e vou ver como que ficou lá na minha página tá bom agora aqui na minha página e vocês vão tem que já mudou olha como é que tá mais bonitinho aqui ó tá vendo meu pique lixo tirando aquela bordona né preta que olha que legal mostrando meus campos aqui direitinho né muito legal né o show de morar na pensão já tá aqui direitinho minha página olha só já fiz a minha página tá tudo pronto

lembra bem parecida peça aqui ó por que que não dá 5 porcento igual essa aqui ainda falta eu colocar aqui olha reparem só né é o meu câmpus salvar aqui ó ele tá aqui nessa página super né como rodapé ela tem um um risquinho aqui tá com rosa bebê como que eu faço isso vamos voltar lá no nosso corpo tá então aqui dentro do nosso código nós fizemos vão voltar aqui lembra que nós fizemos ó olha só lado início nós fizemos aquele ártico né que a nossa casa que o ártico nós fizemos o cabeçalho tava

até colapsar o cabeçario né bezerro seu conteúdo que essa dívida aqui ó tá faltando aqui o foguete né que é o rodapé aqui do meu é do meu artigo a então eu cabeça e falta rodapé comercial então aqui agora eu vou colocar aqui vou colocar vive aqui ó div tá e a cla e ela vai ser snds é tarde né que é do ártico e vou colocar aqui footer tá que é rosa p mo super no parque fechar aqui pronto crie então me a div rodapé tá e agora que acontece eu preciso de chocolates aqui

pode conteúdo né câncer o seguinte o botão aqui de saber enviaram como the button tá cadê ele aqui que alguma de button eu só tinha um pouquinho sou na verdade eu espaço então olha só o meu botão aqui dentro de salvar né ele tem que estar dentro do contexto do form beleza então acontece se eu eu quero colocar o botão que salvar dentro food se eu pegar o botão salvar aqui ó é fazer pior se eu pegar o botão salvar aqui e coloquei aqui embaixo alguém tá cresce que ela no footer na ele não vai

funcionar porque ele não tá dentro do contexto no fome beleza e não tá dentro dessa forma tem nos e para isso eu posso pegar o forno para conforme antes da diva aqui né como eu posso entender que é o seguinte oca copiar de futuro aqui todo aí tá aqui na casa do presidente do fome beleza não vai dar eu vou dar que o outro lá né mano shift-tab dependendo da direitinho eu coloquei o fut né dentro do forma beleza vamos control essa e vou ver se como é que ficou lá nossa bom aqui dentro a

nossa página vocês podem notar a diferença que deu aqui olha só tem um espaçozinho maior aqui ó né do fim do meu rei meu formulário no meu botão salvar tá e se eu colocar aqui só clique em salvar a vamos ver que acontece ó deu aquele erro porque nossa vocês lembram que na aula anterior a gente fez uma validação que o campo que eu tipo de imóvel tem que estar preenchido pelo poder salvar um registro beleza ela aparece imagem aqui em cima tudo bonitinho beleza só que ainda falta deixa elas algumas algumas melhorias aqui vamos

montar o nosso bom pessoal que nosso código e o meu sente eu quero aumentar um pouco tá oi nega minha digitar me ajude principal que essa dívida aqui ó forninho tá que tá o fumante ela mais mais larga para isso vocês lembram que a gente fez um estilo que eu em css puro sss não slds não é você acessa normal tá então aqui ó a minha div como lara tá com 300 pixel vou colocar ela com o cliente só meio de 500 pixels aqui ó largura né do identifique ó tá não contra o s olha

só que legal hein agora que na página deu aqui ó então um pouco tá bem parecida com aquela olha só vendo bem crescida né que eu já tá pouco maiorzinho né aqui a gente pode colocar aqui ó os números normais né que a gente vai usar e aí é escolher que é um tipo de imóvel clique em salvar né e aí tá salvo lá dentro do meu seus ossos já criei um registro em frente essa tá pouco tá então show de bola minha parte da legal então é praticamente isso né gente queria fazer vamos ver

o funcionando nossos campos vão criar tem uma casa aqui dessa os dez quartos tá com 10 banheiros dessa sala dessa cozinha tudo dentro beleza o valor vou colocar aqui de 800 mil beleza tipo do imóvel em si uma casa e vou clicar em salvar bom vai aparecer mensagem móvel salvou sucesso né vou usar no nosso nosso nos seus force bom publicar aqui imóveis vou pegar o último registro criado aqui ó lá pro 63 e aqui ó todos os campos preenchidos com bezo tá funcionando show de bola né a nossa página não tenho não deu erro

de bebê cliente né ele tá corretamente nas mexidas no front and não deu erro nenhum no nosso nosso beck and aqui o que né revisa que a nossa página está ok beleza mensagem então essa aplicação bem simples né do ssds obviamente o sms não é só isso tá a gente tá a dama de coisas aqui para gente mexer não é muito grande dá pra fazer muita coisa né visualmente falando nela nós tomou nossas visualforce page dá para você fazer visual após pedir muito bem detalhada com diversos recursos interatividades né é basta estudar né essa essa

documentação para você nem entender direitinho como que vai atribuir a sua isopor se beijos detalhes você tá prendendo ali essa é dessa mesmo todo mundo tranquilo é isso aí na próxima aula a gente vai continuar aí aprendendo novos recursos aí beleza só para isso se você não é inscrito se inscreva e seu joinha ativa o sininho e tamo junto até a próxima pessoal tchau e aí