Página detalhe.jsp com layout desconfigurado não seguindo o do curso

Olá, João!

O que acontece quando você tenta acessar:

http://localhost:8080/casadocodigo/resources/css/produtos.css

O código CSS é exibido?

Olá Alexandre. Apresenta o erro 404, porém o arquivo esta no local e o curso não menciona este arquivo, menciona apenas para importar a pasta css e imagens.

O que poderia ser? Desde já obrigado.

Olá, João.

Refiz aqui na minha máquina.

Você chegou a pegar o .zip que está no item Arquivos extras da Aula 10 (URLs amigáveis)?

https://cursos.alura.com.br/course/spring-mvc-1-criando-aplicacoes-web/task/40290

Todos os arquivos que precisamos estão nesse zip.

Perceba que, além de detalhe-limpo.jsp e detalhe-pronto.jsp, há ainda a pasta resources que contém os .css e .svg. Devemos jogar essa pasta em src/main/webapp no nosso projeto. Não esqueça de dar Refresh no projeto do Eclipse.

Outro detalhe: a única página que fica com um layout bonito é a página de detalhes do produto. A listagem de produtos e o cadastro de produtos ficam com aquele layout feio.

http://localhost:8080/casadocodigo/produtos/detalhe/1

Oi, Alexandre.

Segui exatamente o curso, confirmei aqui e peguei os arquivos como informado.

Todas as páginas ficam sem o layout

Fala pessoal, tudo bem ?

João, continua dando 404 ao tentar acessar o css (ou qualquer arquivo estático) ?

Talvez esteja faltando adicionar uma configuração para o Spring liberar o acesso aos estáticos. O que pode estar acontecendo é, como o Spring MVC (DispatcherServlet) foi mapeado pra receber todas as requisições, quando ele recebe uma requisição para /resources/css/algum-arquivo.css ele não acha nada mapeado pra esse endeço (os controllers não mapeiam esse endereço) e devolve um 404.

Tente adicionar esse configuração:

@EnableWebMvc
// outras possiveis annotations
@ComponentScan(basePackages = { "br.com.casadocodigo.loja" })
public class WebAppConfiguration extends WebMvcConfigurerAdapter { // certifique-se que essa herança ocorra

    // métodos anteriores omitidos

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

}

Essa configuração habilita que o Spring MVC repasse ao Servlet Container (tomcat) a responsabilidade de responder os arquivos estáticos (css, js, imagens, etc), antes de devolver o 404 Not Found.

Dê uma olhada se isso ajuda.

Abraços

Rafael, boa noite.

Desde já obrigado por se importar e ajudar.

Segue minha classe

@EnableWebMvc
@ComponentScan(basePackageClasses = {HomeController.class,ProdutoDao.class, FileSaver.class, CarrinhoCompras.class}, basePackages = {"br.com.casadocodigo_smvc.loja"})
@EnableCaching
public class AppWebConfiguration extends WebMvcConfigurerAdapter {

    @Bean
    public InternalResourceViewResolver internalResourceViewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");
        resolver.setSuffix(".jsp");

        //disponibiliza os bean para atributos jsp
        //resolver.setExposeContextBeansAsAttributes(true); 

        //disponibiliza apenas bean informado para atributos jsp
        resolver.setExposedContextBeanNames("carrinhoCompras");

        return resolver;
    }

    @Bean
    public FormattingConversionService mvcConversionService() {
        DefaultFormattingConversionService conversionService = new DefaultFormattingConversionService();
        DateFormatterRegistrar dateFormatterRegistrar = new DateFormatterRegistrar();
        dateFormatterRegistrar.setFormatter(new DateFormatter("dd/MM/yyyy"));
        dateFormatterRegistrar.registerFormatters(conversionService);
        return conversionService;
    }

    @Bean
    public MultipartResolver multipartResolver() {
        return new StandardServletMultipartResolver();
    }

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

    @Bean
    public RestTemplate restTemplate() {
        return new RestTemplate();
    }

    @Bean
    public CacheManager cacheManager() {
        CacheBuilder<Object, Object> builder = CacheBuilder.newBuilder().maximumSize(100).expireAfterAccess(5, TimeUnit.MINUTES);
        GuavaCacheManager guavaCacheManager = new GuavaCacheManager();
        guavaCacheManager.setCacheBuilder(builder);
        return guavaCacheManager;
    }

    @Bean
    public ViewResolver contentNegotiationViewResolver(ContentNegotiationManager manager) {
        List<ViewResolver> viewResolvers = new ArrayList<>();
        viewResolvers.add(internalResourceViewResolver());
        viewResolvers.add(new JsonViewResolver());
        ContentNegotiatingViewResolver resolver = new ContentNegotiatingViewResolver();
        resolver.setViewResolvers(viewResolvers);
        resolver.setContentNegotiationManager(manager);
        return resolver;
    }
}

Acrescentei apenas basePackages = { "br.com.casadocodigo_smvc.loja" } como consta na sua que foi citada, porém, não houve mudanças.

Continuo na batalha para tentar entender o que pode estar ocorrendo.

Obrigado pela ajuda pessoal e peço mais sugestões.

João,

Parece então que os conteúdos estáticos estão habilitados!

Você disse:

Todas as páginas ficam sem o layout

Só quero reforçar que o resultado esperado é apenas para os detalhes de um produto específico.

Exemplo: http://localhost:8080/casadocodigo/produtos/detalhe/1

É preciso usar um id válido.

Todas as outras páginas, a principal, a de cadastro, a de listagem, ficam com o layout feioso!

Oi Alexandre, No curso a home e a página delalhe ficam com layout direitinho. As demais como lista de produtos e cadastro de produtos ficam direitas, pois durante o curso foi acrescentado o menu, etc, etc.

no meu caso, a home e detalhe ficam desconfiguradas, os links e botões funcionam mas o layout fica tenebroso com botão minusculo, sem menu, imagens e tudo linha sobre linha.

Você tem o projeto compartilhado no GitHub?

Seria bacana pra gente poder te ajudar melhor!

Alexandre, Rafael, Obrigado pela ajuda e emprenho em me ajudar.

Fui debugando a app pela ferramenta de desenvolvedor do chrome e observando os arquivos .css que apresentavam erro 404 (arquivos em vermelho).

Confirmava se estavam na pasta webapp\resources\css. os que faltaram eu coloquei utilizando os arquivos do zip da ultima aula. Os que já tinham eu exclui e sem importar pelo Eclipse, substitui direto pela pasta dentro do workspace.

Vai entender! Em fim, mais uma dica para leigos como eu, porém com força de vontade em aprender :D

Bacana, João!

Que bom que você conseguiu! Parabéns!