Java - Thymeleaf - HTML：使用开关案例的颜色字母：不需要的段落/换行符-Java 学习之路

我正在研究一个由基因，蛋白质和分析组成的生物数据库 . 使用Spring Boot和Thymeleaf，我想 Build 一个Web可视化 . 每个基因都显示在一个页面上，其中包含名称，描述和序列 . 序列由字母A，T，G和C组成 . 我想为那些字母（作品）着色 . 但是，每个字母都写在一个新行中，而不是写入文本，直到行已满（然后到下一行等） . 在gene.html中，我在定义颜色时使用了小标签（之前尝试了p，虽然这是我的问题的原因），但是使用small并没有帮助 .

我希望，我提供的代码片段就足够了（如果没有，请告诉我你需要什么）

gene.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <title>Gene</title>
    <meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
</head>

<body>
<!--import header-->
<header th:include="header"></header>

    <div id="main">
        <!--GeneID as page heading -->
        <h2 th:text="'Gene: '+${identifier}"></h2>
        <!--Gene description -->
        <p th:text="${description}"></p>
        

        <!-- Sequence -->
        <h3 th:text="'Sequence:'"></h3>
        <!-- For each char in sequence-->
        <th:block th:each="char:${sequence}">
            <!--Print the char. Possibility to color encode the bases utilizing switch/case
            <small th:text="${char}"></small> -->
            <div th:switch="${char}">
                <div th:case="'A'">
                    <small  style="color: blue" th:text="${char}"></small>
                </div>
                <div th:case="'T'">
                    <small  style="color: yellow" th:text="${char}"></small>
                </div>
                <div th:case="'C'">
                    <small  style="color: forestgreen" th:text="${char}"></small>
                </div>
                <div th:case="'G'">
                    <small  style="color: red" th:text="${char}"></small>
                </div>
            </div>

        </th:block>

        

        

        <!--Protein encoded by gene -->
        <h3>Protein:</h3>
        <a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
    </div>

</body>
</html>

GeneController.java

package gui.spring.controller;

import db.sample.Gene;
import db.sample.Protein;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.Optional;
import static main.Main.query;

/**
 * @author Miriam Mueller
 * @since 05-12-2018
 * @version 1.0
 * Class to handle view of one Gene. Gene name, description and sequence are shown. The encoded protein is linked.
 */
@Controller
public class GeneController {
    //All calls of localhost:8080/gene get to this controller
    @RequestMapping(value = "/gene", method = RequestMethod.GET)
    public String einGenAnzeigen(Model model, @RequestParam(value="id") String id) {

        model.addAttribute("geneSize",query.getGenes().size());
        model.addAttribute("proteinSize",query.getProteins().size());
        model.addAttribute("assaySize",query.getAssays().size());
        Optional<Gene> gene = query.getGeneByName(id);

        if(gene.isPresent()) {
            // if gene exists
            String description = gene.get().getDesc();
            String[] arraySeq = gene.get().getSequence().split("(?!^)");
            Protein protein = query.getGeneByName(id).get().getProtein();
            model.addAttribute("identifier", gene.get().getIdentifier()); //GenID
            model.addAttribute("sequence",arraySeq); //gene sequence
            model.addAttribute("description",description); //description
            model.addAttribute("protein",protein.getIdentifier()); //encoded protein
        }else{
            // error messages, if no gene with called id exists
            model.addAttribute("gene", "There is no Gene with this ID.");
            model.addAttribute("protein","There is no Gene with this ID.Therefore, no reference protein was found.");
            model.addAttribute("sequence","");
            model.addAttribute("description","");
        }

        // name of html-template
        return "gene";
    }
}

谢谢你的时间和精力:)

2 回答

您可以使用 float: left 的样式来使您的div块按照您想要的方式排列 .

我比在html中管理它们容易得多 . 然后你可以摆脱那个 th:switch 陈述 .

使用以下内容在 resources/static/css/ 中创建 main.css 文件（作为示例）

div.gene {
    border: 1px solid #999;
    float: left;
    height: 14px;
    width: 14px;
    text-align: center;
    font-size: 12px;
}

div.A {
    color: blue;
}

div.T {
    color: yellow;
}

div.C {
    color: forestgreen;
}

div.G {
    color: red;
}

在您的基因html的 <head> 标记内添加以下内容，以便它可以获取css文件

<link rel="stylesheet" href="/css/main.css" />

更改您的gene.html以添加类

更换

<div th:switch="${char}">
        <div th:case="'A'">
            <small  style="color: blue" th:text="${char}"></small>
        </div>
        <div th:case="'T'">
            <small  style="color: yellow" th:text="${char}"></small>
        </div>
        <div th:case="'C'">
            <small  style="color: forestgreen" th:text="${char}"></small>
        </div>
        <div th:case="'G'">
            <small  style="color: red" th:text="${char}"></small>
        </div>
    </div>

同

<div th:class="${'gene ' + char}" th:text="${char}"/>

这将在div中添加一个类'基因'和一个带有基因char的类（例如'A'） . 然后css具有基因的样式，这些样式对于所有人都是共同的，并且char的样式是特定的（即颜色）

回复于 2024-05-21T20:25:43+08:00

发生的事情是 div 元素是block元素，这意味着它们将垂直堆叠而不是水平堆叠 . 例如，当您遍历序列时：

<th:block th:each="char:${sequence}">
        <!--Print the char. Possibility to color encode the bases utilizing switch/case
        <small th:text="${char}"></small> -->
        <div th:switch="${char}">
            <div th:case="'A'">
                <small  style="color: blue" th:text="${char}"></small>
            </div>
            <div th:case="'T'">
                <small  style="color: yellow" th:text="${char}"></small>
            </div>
            <div th:case="'C'">
                <small  style="color: forestgreen" th:text="${char}"></small>
            </div>
            <div th:case="'G'">
                <small  style="color: red" th:text="${char}"></small>
            </div>
        </div>

    </th:block>

每一个 div 都将以新的一行显示 . 您可以通过将这些div上的 display 更改为 inline 或 inline-block 来将它们显示为内联

<div th:case="'A'" style="display:inline-block;">
            <small  style="color: blue" th:text="${char}"></small>
        </div>
        <div th:case="'T'" style="display:inline-block;">
            <small  style="color: yellow" th:text="${char}"></small>
        </div>
        <div th:case="'C'" style="display:inline-block;">
            <small  style="color: forestgreen" th:text="${char}"></small>
        </div>
        <div th:case="'G'" style="display:inline-block;">
            <small  style="color: red" th:text="${char}"></small>
        </div>

或使用其默认显示不是 block 的其他元素，例如 span . 删除 div's 也可以正常工作，因为 small 也是一个内联元素 .

回复于 2024-05-21T20:25:43+08:00

Java - Thymeleaf - HTML：使用开关案例的颜色字母：不需要的段落/换行符

2 回答

相关问题