AulaOO#11 - GUI Java Swing

Olá pessoal meu nome é Zé Rui nós estamos na disciplina de orientação objetos e na aula de hoje nós vamos estudar as interfaces gráficas usando o Java swing vamos pra nossa aula [Música] então [Música] Então pessoal Começando aqui até agora vocês viram comigo todos os exercícios e exemplos em sala de aula usando o console Isso significa que nós preenchi os nossos produtos lá naquela telinha preta e aí logo de cara eu quero que você entenda o seguinte que essa aula que nós vamos te ensinar a criar as interfaces gráficas a interface gráfico isso tem que

ficar muito Claro na sua cabeça desde já ela nada mais é do que uma camada a mais que vai ter no seu projeto ou seja uma camada responsável por entrar os seus dados e que você vai imprimir os seus dados também que é o o local onde você vai conversar com o seu usuário Beleza então nós vamos sair desse modelo de console para este modelo de tela ou seja fica uma algo muito mais amigável áv e algo muito mais fácil pro nosso cliente final concordam comigo então Olha só eu vou te mostrar como que nós

vamos criar uma telinha igual a essa aqui de antemão eu já te falo que nós temos aqui uma tela aqui nós temos uma etiqueta de texto aqui alguns botões aqui algumas caixinhas de texto né assim e assim por diante cada um desses elementos tem um nome aqui que são os componentes tá tá então dentro da camada de visualização dessa camada de interface gráfica nós trabalhamos com o que nós chamamos de componentes O componente botão o componente caixa de texto O componente etiqueta e assim por diante tá a biblioteca que nós vamos utilizar para fazer isso

é o Java swing E aí eu deixo aqui para você exatamente a documentação oficial do fornecedor por quê porque vai que você tá lá program esse botãozinho aqui ó e precisa de alguma ficou em dúvida em alguma funcionalidade nós temos que ser autodidata né e maduros o suficiente para ter o hábito bom de ir até a documentação daquela biblioteca e fazer as nossas devidas consultas de forma eficiente porque a gente vai direto no fornecedor e verifica as nossas dúvidas lá tá joia Então vamos acessar aqui para você ver então aqui eu tô T dentro da

documentação oficial e nós temos tudo que o pacote swing tem para nos oferecer então tem aqui em cima as interfaces Aqui nós temos as classes que podem ser utilizadas E aí principalmente você tem que entender que cada componente na realidade um botão uma etiqueta uma caixinha de texto ela é uma classe por isso até que tá aqui dentro ó da do sumário aqui de classes ó então se eu chegar aqui ó como que funciona um J Button como que funciona um jframe que eu vou te mostrar como que funciona um J Label que é a

etiqueta né E aí basta você clicar aqui ó só de você já Identificar qual é o componente você já tem aqui Um breve Uma Breve descrição do que que ele faz Então olha só é uma área para mostrar o quê um pequeno texto uma imagem ou os dois então você já sabe que se você precisar de mostrar um texto na tela como por exemplo aqui ó esse cara aqui é um texto eu vou usar o componente J Label certo se eu quiser colocar segundo a minha documentação uma imagem também para aparecer eu não vou ter

o componente e j image Pelo menos pode até ter aqui ó mas ele tá dizendo que o J Label também permite que eu coloque uma imagem para aparecer tá então por que que eu quero te mostrar isso aqui desde já Porque a partir de agora nós estamos cada vez mais caminhando a nossa disciplina e aí a sua maturidade de programador vai só aumentando e um programador maduro é aquele que tem o hábito de ir à documentação oficial e tirar suas dúvidas lá normalmente aqui vai ter exemplos ó então se eu entrar aqui no jlab aqui

vai vir uma descrição muito mais completa né do que que ele faz vai ter toda a descrição do componente e aí a gente chega aqui embaixo ó exatamente nos métodos que esse componente permite que são as funções que ele tem então por exemplo ó se eu quiser pegar o texto que tá digitado eu vou usar esse comando aqui ó get text ó lá retorna o texto da string que eh o Lab Está apresentando né fazendo o display lá então por exemplo se eu quero colocar um texto para aparecer Possivelmente vai ser o set text vamos

procurar aqui embaixo Aqui ó exatamente ó lá define uma linha simples de texto do componente que será apresentado Então pessoal a documentação é onde tem tudo Tem qualquer problema Vá a documentação não tem viés não tem meias palavras é o fornecedor te contando como que isso faz beleza e aí se você quiser entrar dentro do método para ver um pouco mais de informação tem muita coisa bacana beleza pessoal então dito isso nós podemos retornar pro nosso slide e partir pra nossa prática que é exatamente construir essa tela aqui para nós agregarmos ao nosso sistema beleza

vamos lá então vou direto pro net Beans aqui pra gente começar isso então pessoal tô aqui dentro do netbeans e estou com o projeto C de produto aberto é o projeto que nós viamos fazendo em alguns exercícios anteriores também como eu tô fazendo uma lista de produtos eu vou então criar o meu gerenciador de produtos que que esse gerenciador tem nós conversamos muito aí nas últimas aulas que ele tem uma lista de produtos beleza a partir daí Olha como que a nossa programação fica muito mais simples e limpa que é o que nós estamos fazendo

des das últimas aulas aí então eu crio aqui ó um gerenciador de produtos adicionei o produto arroz o produto feijão o produto macarrão o leite e assim por diante daí em diante eu simplesmente brinquei com as funcionalidades então por exemplo eu vou procurar um produto que tem o código 002 então eu vou chamar gerenciador buscar produto ele me traz o produto eu primo na tela se ele não for nulo por que que eu tô te mostrando isso aqui pessoal porque tem que ficar claro que a construção da sua interface gráfica ela é uma camada a

mais ao invés de nós fazermos agora A entrada de dados ou manipular o nosso gerenciador via função M nós vamos fazer via interface gráfica que é essa daqui certo então se eu tiver que adicionar alguém eu vou usar o botão novo novo mas o gerenciador a funcionalidade já está pronta Independente se eu tô usando tela bonita ou tela preta concorda comigo essa é a sacada que você tem que ter Antes de iniciar nesse mundo aqui das interfaces gráficas por quê porque hoje nós estamos construindo Vamos Construir daqui a pouquinho a interface gráfica para um sistema

desktop Mas você poderia criar uma interface gráfica na web usando por exemplo HTML CSS e a sua S melhor a sua classe gerenciador de produtos tá prontinha funcionando Independente se é na tela preta se é aqui ou se é via numa página da internet entenderam isso aqui é o ponto chave para que a gente siga em frente então retornando para cá eu agora eu nem vou usar isso aqui mais essa função Main vai sumir mas eu vou deixar ela aí no momento certo a gente mexe com ela tá então o que que eu vou fazer

aqui agora pessoal eu não tô te dizendo que é uma camada nova Então vamos começar aqui e vamos aprender cada detalhe dela eu vou criar então um novo pacote aqui ó chamado Java package e eu vou chamar ele de Gui ou senão mais paraa frente nós vamos ver que esse pacote vai chamar vai ser chamado de View ou seja de uma interface gráfica mesmo a camada de visualização Tá mas isso nós vamos conversar lá na hora que chegar no mvc Por enquanto eu tô dando a aula sobre como criar a interface gráfica eu vou usar

o Gu mesmo tá então crie aqui o meu pacote Gu e aí aqui dentro eu vou criar a minha telinha Então olha só clico com botão direito até agora vocês usaram só o javac agora nós vamos pedir ele para criar uma frame pra gente uma jframe que é uma telinha em branco então cria para mim uma classe computador do tipo jframe então ó eu vou criar ela é a nossa classe formulário de cadastro de produtos não é então nós vamos padronizar os nossos nomes chamado FR de frame que é o nome de classe F maiúsculo

CAD produto Beleza então se a gente tiver criando a tela de cadastro de animais Então vai ser FR CAD animal tá sempre com esse prefixo FR Beleza então eu vou finalizar aqui vocês vão ver o que vai acontecer olha aí ó ele criou para mim uma telinha já prontinha aqui para mim tanto é que se eu quiser agora visualizar ela não sei se tá vendo aqui tem um olhinho aqui você clicar nele lá abriu para mim a telinha sem nada dentro então ele criou a primeira tela você aí sem nenhum componente dentro dela tá então

agora eu tenho na mão uma telinha em branco para mim fazer o que eu quiser como se fosse uma tela de um artia né Agora eu vou simplesmente colocar os componentes que eu quero para chegar no meu resultado final Então vamos olhar aqui ó se eu quero produzir essa tela eu vou ter que então pegar o quê uma etiqueta de texto e colocar ali então vamos lá ó eu vou então ter que colocar uma etiqueta de texto aqui encher aqui de botões e assim por diante Zé Rui Onde estão esses componentes Onde estão esses componentes

estão aqui do lado direito aqui ó na paleta de componentes perceba que tem uma infinidade de componentes ó componentes de menu componentes de controle de contêiner componente de janela componente de filtro sendo bem sincero eu acho que eu não usei Nem metade ainda até porque as aplicações mais tradicionais fazem uso sempre das mesmas coisas né botões tabelas caixa de texto enfim e assim por diante que é exatamente o que eu vou te ensinar então qualquer componente que você precisar vai estar aqui beleza pelo menos os tradicionais tá Então olha que legal pessoal eu estou no

modo design o modo design não tem nada de codificação é um modo só de puxa e arrasta componente ó quer ver ó se eu quiser colocar um botão nessa tela eu clico nele aqui e puxo para cá ó minha telinha agora tem um botão quer ver ele aqui no olhinho ó lá ficou um botãozinho que se eu apertar funciona normalmente não tem programação nenhuma dentro dele ainda mas ele já funciona aqui ó ele já tá aqui já tá sendo renderizado e etc Então esse é o modo design ou seja o que você tá vendo É

como se fosse um preview Aqui também tá E aí aonde tá o código dessa tela o código dessa tela está no modo sece Beleza então se eu clicar aqui eu chego na minha classe Olha lá classe frk de produto e aí tem tudo aqui ó eu e você não fizemos nada disso ele fez automático quando a gente clicou aqui ó e pediu uma nova e for beleza ele foi lá e criou pra gente se eu quiser voltar para ver a telinha bonitinha eu vou pro modo design de novo e aí pessoal eu vou sempre ficar

movimentando entre o sece e o design a medida que for necessário tá joia Então olha só eu vou então montar aquela telinha eu vou apagar isso aqui eu simplesmente cliquei em cima e apertei D vou pegar uma etiqueta de texto que é um componente jlabel minha dica Já vá falando os nomes certos até para você já ia acostumando e na hora de procurar aqui tá E olha só eu pego esse componente eu ponho ele aonde que eu quiser na minha tela se alguém aí já trabalhou com CSS vindo da do mundo web aí sabe que

eu tenho duas formas de fazer isso aqui eu posso simplesmente arrastar e colocar na posição que eu quiser ou vi no modo sece aqui e falar olha fica na altura 300 pixels para baixo 200 Pixel paraa esquerda e assim por diante Qual é a melhor forma aqui você decide eu gosto mais até por questão de início aqui a trabalhar com arrastar e colocar mesmo tá Então nesse caso aqui ele vai ser a minha etiqueta de título né então vou colocar nesse cantinho aqui ó e vou puxar o tamanho dele ó beleza Olha só como que

é simples a medida que eu for fazendo pega no seu computador e vai fazendo aí também tá Então olha só coloquei o meu componente de título aqui em cima duas coisas aqui primeiro eu tenho aqui o texto que tá escrito jlabel 1 e o nome dessa variável também ela vem já com esse mesmo nome tá o J Label 1 Então vamos lá como que eu mudo o texto desse dessa etiqueta aqui gente por isso existe aqui ó o que nós chamamos de propriedades ou seja cada componente dessa paleta de componentes aqui em cima ó que

eu tenho a infinidade cada um deles tem um conjunto de propriedades infinito aqui né Não vou falar infinito não mas tem um montão aqui que dá para você ir customizando então por exemplo se eu quero mudar o texto que tá escrito aqui Você concorda comigo que eu vou procurar a funcionalidade né a propriedade texto Então tá aqui ó até já achei ela aqui ó propriedade text eu vou mudar para cadastro Opa escrevi errado aqui cadastro de produtos na hora que eu dei enter Olha lá que legal já mudou ali Então pessoal o que eu preciso

fazer dentro do netbeans para construir a minha interface gráfica é algo muito simples eu escolho o meu componente e vou customizando esse componente isso é a criação de uma interface gráfica aqui no Java usando Java swing por isso essa biblioteca é muito bem Aceita é claro que hoje em dia já tem o Java FX as coisas já estão evoluindo mas ainda assim tem muito sistema legado muito sistema bacana Aí rodando em Java swing tá então isso é feito por causa da sua simplicidade por isso é bem aceito Seguindo aqui então nós temos agora que Zé

Rui essa tela tá essa fonte tá pequena então eu te pergunto aonde vai tá a possibilidade de mudar a fonte pessoal vai tá exatamente aqui ó no caixotinho de propriedades então eu vou procurar aqui alguma coisa relacionada com fontes já achei aqui ó então se eu clicar aqui ó ele vai abrir para mim eu posso mudar o tamanho por exemplo colocar tamanho 24 posso mudar a fonte para qualquer uma que eu quiser posso colocar Vou colocar aqui ó 24 e beleza Olha lá já tá ficando mais interessante para se o título não é agora eu

preciso colocar isso no centro eu preciso centralizar esse texto onde você vai nas propriedades procurar alguma coisa desse tipo ó tem aqui o vertical alignment e nós vamos procurar o horizontal tá aqui ó já achei ó vou colocar Centralizado na hora que eu setar aqui já foi para lá ó já tá Centralizado Então pessoal até aqui a gente dá uma paradinha e recapitula dentro da ideia de interface gráfica O que que a gente tem uma coleção de componentes nós puxamos O componente para onde a gente quer na nossa tela e esse componente de acordo com

as propriedades dele e aí a segunda coisa que eu tenho para te falar sobre qualquer componente é que ele tem propriedades e tem também eventos então por exemplo vamos supor aqui ó que eu quero na hora que eu passar o mouse aqui em cima dessa etiqueta ela mudar a cor por exemplo para Azul pode pode você consegue perceber que isso é um evento Ou seja quando tiver passando tiver entrando desse dentro desse componente eu vou disparar uma ação que é mudar por exemplo a cor dele então eu vou te ensinar mais paraa frente mas por

hora eu quero te mostrar ó que dentro desse caixotinho aqui ó eu tenho as propriedades do componente J Label ele fica até marcado aqui e os eventos que estão Associados a esse componente também esse cara de passar o mouse vai ser esse esse esse evento aqui ó o mouse por exemplo enter Ou seja quando eu tiver entrando Quando eu tiver saindo vai fazer outra coisa eu posso mudar a cor quando entra para azul e quando sai eu posso mudar para amarelo um exemplo bobo tá é só a gente vir aqui e fazer essa programação tá

então que que você aprendeu agora que você coloca o componente você muda as propriedades desse componente por exemplo aqui deixa eu mudar essa cor aqui ó para Azul então eu vou vir aqui ou posso mudar o fundo também tá ou background ou foreign Ground eu vou mudar aqui o foreign Ground ó Então vou colocar Azul Olha lá já ficou azulzinho ficou feio demais né mas tudo bem é o que sei lá alguém me pediu eu vou lá e faço tá mas não tem dificuldade em fazer isso concorda vamos continuar a produção da nossa tela aqui

vou voltar que esse azul tá até doendo as vistas né então vamos colocar aqui agora uma coleção de botões certo então vou vir aqui ó J Button ó olha ele faz até o alinhamento ali para você tá E aí eu vou colocar o botão aqui ó eu quero botar o botão novo e ele veio com o nome J Button 1 então o que que eu tenho que fazer selecionar o componente vi na propriedade que eu quero no texto aqui e vai ser o novo certo posso ter também agora o botão editar Então vou vir aqui

criar um novo J Button coloco esse cara aqui seleciono ele mudo do texto aqui para editar e assim sucessivamente beleza só que agora pessoal a gente tem que prestar atenção no seguinte Olha só pra nossa classe frame C produtos Olha o que eu falei eu falei classe por quê Porque eu te mostrei no início ele é uma classe e nessa classe Quais atributos tem dentro dela Ah Zé Rui não sei que atributos são esses dá uma olhadinha aqui no design ó ela tem três atributos ela tem um J Label ela tem um botão novo e

um botão editar Mas cadê ele normalmente ele coloca lá embaixo Aqui ó declaração de variáveis que são o quem o J Button 1 o J Button 2 e o J Label 1 então esses caras aqui tanto é quees estão privados são os atributos da classe formulário cadastro de produto Então pessoal fiquem atentos a isso por que uma tela nada mais é do que um objeto que é uma classe no caso aqui a classe de cadastro de produto dentro dela tem outros objetos que são os componentes J Label J Button jtext área jtext Field e um

monte de componentes que tem aqui ó OK agora esses nomes aqui tão legais J Button 1 J Button 2 não a gente viu exaustivamente que nome de variável deve ser nomes intuitivos certo então nós vamos padronizar esses nomes tá assim que a gente cria o componente eu vou arrumar esse nome dele de acordo com o que ele faz então por exemplo aqui ó essa variável chama botão novo certo então nós vamos clicar aqui em cima dele ó Edit Ou seja eu vou trocar o nome da variável eu posso vir tanto por aqui e altera aqui

ó para btn novo ou senão eu posso selecionar o meu objeto e vir aqui na aba code aí Aqui tem tudo que é relacionado ao código ó então por exemplo se eu quiser mudar para btn novo w eu mudei Eu particularmente ó deixar aqui vou vou alterar aqui eu prefiro muito mais clicar com o botão direito aqui e vir direto na opção de trocar nome de variável tá E aí falo da padronização de nomes todo botão você vai colocar btn novo ok então vou fechar aqui e pronto olha por que a gente precisa nomear esses

caras porque se eu vier aqui no sece agora eu sei que esse elemento aqui que era o J Button 1 se refere ao botão novo fica muito mais intuitivo na hora que eu tiver programando concorda comigo quem é esse J Button do se você tiver olhando só aqui você não sabe que ele é o botão editar então é melhor você vira aqui e mudar o nome dele para btn editar consequentemente Olha aqui que aconteceu ele mudou aqui para btn novo certo então só falta aqui a gente mudar o nome do Label Então vou colocar aqui

ó trocar o nome dele normalmente são as três primeiras consoantes tá do componente então lbl título tá que eu vou batizar esse cara aqui fica muito mais intuitivo agora porque olha só se eu tiver agora é vamos fazer uma mudança aqui no evento editar ó quando eu clicar nesse quando eu passar o mouse nesse nessa etiqueta aqui eu quero mudar a cor desse editar aqui será que tem jeito Olha que legal eu vou vir então no componente que eu quero no evento quando o mouse entrar então deve ser on Mouse enter tá aqui basta você

clicar aqui ó ele vai lá pra programação Ou seja que que você quer fazer aqui agora Z olha lá o nome do método ó lbl título Mouse enter Ou seja quando o mouse entrar aqui eu posso programar o que eu quiser eu quero então trocar a cor do botão novo e se a gente não tivesse usado o nome hein como que a gente ia falar é J Button é um ou é o dois agora não tem isso tem um nome de variável bem definida então btn editar que eu falei né editar ó lá Ele até

fica com colorido se você não lembrar também é só você fazer aqui ó btn cont control espaço ele te mostra os dois eu quero editar E aí eu quero trocar a cor dele como que faz esse componente nada mais é do que uma classe se é uma classe Eu quero mudar o n a cor dele Eu vou fazer o quê set color paraa cor que eu quiser certo só que você vai ver que não tem o set color ó set Na verdade eu quero mundo dele então set background exatamente ó e eu vou passar uma

cor que eu quiser por exemplo aqui ó color ponto Blue feito isso nós podemos executar para ver se isso realmente funciona Olha que legal vou rodar aqui então Run file Olha só agora eu falei o seguinte ó meu mouse tá subindo aqui você tá vendo né na hora que Ah lá encostei aqui ele mudou para Azul Então essa programação foi disparada nesse momento aqui ó eu posso fazer também quando o mouse Sair Voltar pra cor tradicional ou mudar para qualquer outra cor ó basta então o que que eu tenho que fazer eu tenho que vir

aqui no design clico no editar ó eu já tô no lugar errado tá vendo É eu quero vincular mudança de cor desse cara para quando eu sair desse componente aqui tá então eu ten que vi tanto é que lá ó eu fiz no componente lbl título Então na hora que eu sair dele então vou procurar aqui o evento Mouse Exit Então esse cara aqui ó ó ele vai abrir para mim eu vou fazer a mesma coisa até copiar aqui ó vai ser btn editar set background por exemplo vou colocar aqui qual cor que tem aqui

eh sei lá Grey beleza peguei aqui uma cor própria aí deles aí então Ó vou executar por aqui e agora ó na hora que eu chegar aqui mudou para azul na hora que eu saí mudou para cinza chegou para Azul saiu cinza então perceba pessoal que para você criar suas interfaces gráficas você tem que agora fazer o quê tem que brincar com isso aqui praticar colocar um componente tirar um componente tentar montar do jeito que o seu cliente pede no caso aqui o jeito que o professor pediu né que é exatamente criar essa tela dessa

forma e aí a gente segue a em frente beleza Vamos Construir esse cara aqui para você ver que legal que vai ficar então Ó vou colocar mais três botões 1 2 3 esse é pro editar cancelar excluir salvar então esse aqui é pro cancelar então vou trocar o nome dele já aqui ó para btn cancelar perceba que eu mudei o nome Ó tanto é que você pode ver aqui bem pertinho de mim aqui ó mudou esse cara aqui ó se eu selecionar esse cara a o nome feio dele ó J Button 2 tá não dá

nem para entender nada e agora eu vou mudar o texto dele então na propriedade texto é o cancelar mudou esse aqui agora vai ser o excluir então vou mudar o nome da variável btn excluir e agora eu vou vir aqui Editar o texto ou por aqui ou por aqui tá até legal que dá para fazer por aqui também ó você clica aqui Edit text ele já vai permitir você escrever direto aqui tá só falta agora o botão salvar e eu vou colocar ele aqui ó Então vou trocar o texto primeiro desse salvar e vou trocar

o nome da variável para btn salvar tá caminhando né tá ficando legal aí beleza gente sempre que possível vai arrumando esse cara aí beleza só que você vai ver que isso aqui é muito enjoado de fazer de ficar ajustando um por um então por isso eu vou te ensinar um negócio bem legal que é o jpanel que é exatamente um painel né que você vai incorporar as coisas ali dentro que é com contêiner ó então tanto é que você vem aqui no Java swing containers e pega aqui ó uma caixinha Então olha só que legal

ó eu vou colocar ela do tamanho que eu quiser do jeito que eu quero eu tô movimentando só o mouse e vou puxar todos esses botões para dentro dele tá então ó Coloca ele aqui ó ó lá el tá dentro do componente agora você pode ver até pela árvore aqui ó que se eu arrastar o componente ó lá o contêiner tá arrastando todos os botões também beleza Vamos mudar o nome desse pel PR P botões então é o painel que tem os botões Beleza então agora ó vou encostar ele aqui em cima no título Opa

tá vendo tem que tomar cuidado porque a posição às vezes estraga muito fácil então vou diminuir aqui o tamanho dele aqui oid que eu poderia est Trocando tudo por aqui também tá gente aqui ó se eu vier aqui ó é horizontal size vertical size tudo eu posso fazer por aqui mas eu prefiro fazer no olho aqui agora eu quero te mostrar uma coisa bem legal ó que se eu rodar por aqui você vai conseguir ver ó ó se eu aumentei Olha lá que aconteceu tá vendo ele ó vamos fazer um um uma modificação de tamanho

aqui ó não ficou legal tá vendo esse cara devia tá meio que Centralizado acompanhando Então é isso que eu vou te ensinar agora ó eu vou primeiro encostar esse cara aqui E esse cara aqui para ficar uma interface Zinha pelo menos amigável perceba que na hora que eu encosto aqui ele automaticamente ligou essa setinha do lado aqui ó se você passar o mouse é o a dimensionamento horizontal né então ou seja se essa telinha crescer ou diminuir isso cresce junto com ele aqui que seria esse cara aqui ó se você Trocasse isso aqui de cor

você conseguiria ver isso melhor ó vamos trocar aqui o background só para você enxergar vou colocar um Amarelinho aqui ó olha agora ó agora que eu faço isso ó ó ó lá ele me acompanha tá vendo se eu tirar esse al dimensionamento olha agora ó ó lá viu ele ficou preso do lado de cá mas o lado de lá não alto dimensionou então ele não faz a telinha bonitinha Eu particularmente gosto sempre de usar o alto dimensionamento aqui e aí pessoal tem um negócio ruim aqui ainda ó por qu esse cara ele tá meio que

preso ali esses botões não tão padronizados então no Java tem um negócio chamado layout eu posso setar o layout desse cara aqui o que que é o layout é a forma como ele vai colocar um componente dentro do outro tá então isso aqui é bem legal você clica o botão direito e faz aqui ó set layout eu posso pegar qualquer um desses caras aqui ele normalmente vem com o padrão o free design né significa o qu Se eu colocar esse cara aqui ele vai ficar aqui ó independente do que eu faço ele fica exatamente com

essa diferença aqui agora eu vou tá o layout para ele ser por exemplo aqui ó o box layout ou Flow layout são os que eu mais gosto aqui vamos usar o flow layout ó olha só ele meio que coloca ele no estilo fluxo né então esse tamanho aqui agora fica bem mais legal ó olha só se eu fizer um al dimensionamento Ó lá ele tá sempre no meio ele recalcula fica um negócio bem bacana Aí aí você pode configurar ele também você vim aqui ó no flow layout perceba que ele é um Flow layout desse

painel com esses botões então se você clicar aqui ó você tem as propriedades dele que é o GAP horizontal o gap gap vertical então por exemplo se eu aumentar esse cara aqui para 15 Olha o que que vai acontecer o espaço entre um e outro vai aumentar ó ó lá viu foi para 15 pixels tá então eu vou deixar cinco mesmo só para você ver que é possível movimentar isso tudo se você quiser o alinhamento sempre à esquerda é só você trocar aqui ó eu troco aqui para left então todos os botões vão estar sempre

ali eu prefiro colocar ele Centralizado é só questão de gosto tá E só a tela vai tomando forma Beleza agora o que nos falta para ficar igual a telinha pedida é criar os campos né então aqui eu vou de novo ó criar um painel para colocar todo mundo dentro e vou precisar de uma etiqueta de um campo de texto uma etiqueta outro campo de texto Então vamos fazer isso aqui agora ó Então vou pegar um outro painel aqui que é um contêiner né vou trazer para cá que é um contêiner vou dimensionar ele aqui do

tamanho que eu quero Tá e agora eu vou adicionar os campos de texto e as suas etiquetas Então vou colocar aqui a primeira etiqueta que é o código código dois pontos agora o componente novo aqui que você não conhece até agora que vai ser o ou text área ou o text Field que é exatamente esse cara aqui ó Olha é um campo de texto e aí o código eu posso dimensionar do tamanho que eu quiser vamos mudar o nome dessa variável aqui para lbl code e esse aqui nós vamos chamar de campo de texto tem

gente que faz TXT assim ó Faria TXT código eu gosto mais do Edit tá edt código aí a gente vai padronizar o nome dessa forma beleza e eu vou limpar o conteúdo dele ó só vir aqui e apagar tá tudo que eu tô fazendo aqui direto eu poderia est vindo aqui no campo text limpando e vice-versa agora eu vou fazer a mesma coisa com o nome o custo e o preço funciona cont control Z aqui Professor funciona você fizer control c aqui cont control V á Ele criou também aqui para você só que você tem

que tomar cuidado né tem que lá e trocar os nomes agora esse aqui é o lbl nome e aí eu vou trocar o texto dele para nome vou fazer desse outro jeito aqui para você não esquecer essa aqui é a caixinha de texto eu vou mudar ela para edt nome ou seja um campo de edição nome e aí eu vou espichar ele aqui né como diz os mineiros colocar ele grandão aqui pra gente não se perder que que falta agora falta o preço e o custo Então vou copiar [Música] des tá pode P cedía Pode

pôr tudo porque isso aqui é um texto tá se você quiser padronizar aqui com o tamanho posicionamento aqui perceba que ele alinha para você fica um negócio bem legal e como nós estamos usando um contêiner ó se eu precisar de arrastar arrasta tudo ao mesmo tempo tá a gente liga aqui o horizontal redimensionamento também que é sempre bom e agora para ficar igual só falta aqui eu colocar aquela texti área né onde vai ter a impressão de todos os meus produtos da minha listinha Então vou vir aqui ó pegar o tex área encostar ele aqui

no cantinho para ficar bonitinho e vou colocar ele aqui no tamanho certo esse aqui eu faço um horizontal e um vertical rable né ou seja um redimensionamento aí tá tem que trocar esse nome também eu vou chamar ele de edt por mais que é uma texti é um componente diferente também é um campo de texto só que ele é mais é largo né que cabe mais texto aí então é o edt listagem por exemplo que é onde vai ter a listagem de todos os meus produtos tá então assim ó vou voltar Esso aqui tirar esse

amarelo que tá bem feio então venho aqui resetar pro defo e agora a minha telinha dá para eu ver aqui ó tá ficando legal ó tá vendo ó os botõezinhos aceit apertar e etc se eu rodar ela de novo ó Run file ela já vai tá funcionando como a gente viu ó ó lá continua do mesmo jeito né chegou aqui o evento editar muda mudar e a minha telinha tá funcionando ó se eu quiser colocar aqui o código 002 nome arroz custo r$ 1 preço r$ 2 e assim nós vamos pra frente aí fazendo todas

as nossas telinhas Beleza agora pessoal pra gente fechar a nossa aula eu vou te ensinar como colocar imagem dentro de cada um desses botões aqui até porque é assim que nos foi pedido né então vamos lá primeira coisa aqui é você saber que nós estamos num projeto maven se estamos num projeto maven pra gente adicionar uma imagem essa imagem tem que tá dentro do nosso projeto E aí a gente chegar aqui fal Ah então beleza vou criar aqui um pacote aqui ó Java package imagens beleza e trago as minhas imagens para cá só que não

no maven não vai funcionar assim no maven tudo que é relacionado a código Fica num lugar só tudo que fica relacionado a PDF imagens arquivo de help e etc qualquer outra coisa vai ter que est numa pasta separado dentro do maven também então para isso eu vou até apagar esse pacote aqui por quê Porque pacote pessoal remete a ideia de código fonte Java beleza imagem não é código fonte Tá então vamos lá pessoal muita atenção aqui ó eu vou vir aqui em cima do meu projeto clicar com o botão direito e pedir não um Java

package mas uma nova folder o seu Possivelmente não vai tá aí porque você nunca usou Então você vai vir aqui em er lá embaixo tem também od e lá embaixo Aqui tem O folder tá muita atenção aqui agora essa pasta a gente chama ela sempre de cces beleza e aonde que ela vai ser colocada ela vai ser colocada dentro da pasta sece dentro do Main E aí é esse o lugar que ele vai fazer para você tá então vou apertar aqui em finish e ele criou a minha pasta resarce aqui para mim perceba que ele

saiu fora aqui do pacote principal e foi para um od seces e aqui dentro pessoal você pode criar vários pacotes como por exemplo aqui ó PD se o seu projeto tem um PDF imagens que eu vou fazer aqui agora New images Então vou colocar aqui ó Beleza vai criando aqui e agora eu trago as minhas imagens e coloco aqui dentro tá Para que aí sim eu consiga fazer o referenciamento por meio do meu código que tá aqui ó beleza que é esse cara aqui como que eu coloco essa as minhas imagens aqui dentro pessoal aí

é simplesmente igual mexer com pasta tá o meu projeto aqui Eu vou acessar ele lá no meu diretório e vou achar essa pasta aqui colocar as imagens que eu quero tá joia então ó tô aqui dentro da minha pasta do meu projeto perceba que agora dentro de sece dentro de m tem a pasta resar ó lá tem a images e a PDF Tá e agora eu vou simplesmente copiar as imagens que eu quiser aqui para dentro tá então eu tenho as minhas imagens salvas aqui ó ó lá aqui é o editar excluir pesquisar Ctrl C

aqui e vou colar aqui ó tá então agora se eu voltar pro netbeans tá aqui ó tem as minhas imagens todas aqui então fechou aí agora agora pessoal é muito simples dado que eu tenho a minha imagem dentro do meu projeto eu venho aqui no botão novo e vou procurar a propriedade ícone dela ó então vou clicar aqui ó Tá na pasta imagens e eu vou selecionar o novo ó lá ó olha só que legal ficou bacaninha né vou aqui no editar ícone já tá selecionado ali mas tem que selecionar de novo senão ele dá

um pau doido aqui editar Pronto coloquei lá também e assim sucessivamente para os demais tá pronto coloquei em todo mundo aí você viu que a altura dele ali já foi automaticamente setada porque tá tudo dentro do Flow layout tá joé então fica bem legal aí e a nossa telinha tá praticamente pronta aqui do jeito que nos foi pedido beleza Beleza agora uma última coisa aqui que é extremamente importante é você perceber isso aqui ó você consegue ver aí que tem um triangulo Zinho Verde aqui no meu formulário cadastro produto e nós estamos rodando ele aqui

ó via direto Run file Isso não é legal né ó lá ó ficou bem bacaninha agora tem as imagens Tá bonitinho beleza só que isso aqui não tá legal a gente ficar rodando dessa forma Por que que tá rodando dessa forma e por que que tem esse tri ângulo aqui porque dentro da nossa classe formulário ele tem um método Main lá dentro Eu vou te mostrar aqui agora ó aqui ó ele já criou para você um método Main na hora que você criou o formulário se eu criar um novo formulário aqui ó só para você

ver Qualquer que seja o nome Ó lá é lá ele também tem o triangulinho e ele já tem o método M dentro dele ó e aí nós não vamos rodar a nossa tela desse jeito aqui ó tá errado a execução do nosso projeto tem que partir sempre da nossa função M então primeira coisa vou apagar esse frame aqui que eu não vou usar e eu vou vir em cada um deles que tiver eu vou apagar essa função M aqui tá porque eu não vou precisar mais dela beleza e aí perceba que nem tem mais o

triangulinho verde aqui não tem opção de Run file vou vir aqui agora na minha função M vou apagar isso tudo aqui apagar tudo mesmo tá apaguei aqui e agora pessoal o que que eu faço eu simplesmente vou chamar a minha função cadastro de produto por meio da função Main então simplesmente a a cadastro de produto é uma classe não é então ó frame CAD produto Então vou chamar de tela vou fazer aqui ó New frame CAD produto certo e agora o que que eu faço tela ponto seta a visibilidade dela para true set visible true

que automaticamente Olha o que que vai acontecer agora ó eu não tenho jeito mais de rodar por aqui eu tenho que rodar o projeto normal posso até clicar aqui em cima já de novo ó Então na hora que eu rodar ele vai vir aqui ó e vai construir bonitinho pra gente tá então eu posso apertar qualquer um botão não vai fazer nada nós vamos ver nas próximas aulas mas já tá tudo funcionando eu posso colocar aqui um texto aqui dentro outro texto aqui dentro e assim sucessivamente aí beleza pessoal então por aqui você vê que

a partir de agora nós temos uma camada a mais no nosso projeto que é a camada Gu de interface e ela vai ficar responsável por a medida que a gente fizer isso aqui ó chamar quem o gerenciador para salvar para excluir para editar igualzinho a tela de console fazia chamava gerenciador para salvar para editar e para cancelar Beleza então a gente finaliza por aqui se você gostou dessa aula dá um joinha pra gente compartilha com seus colegas e não deixe de treinar isso aqui Valeu pessoal