堆棧內存溢出
  簡體   English   中英

Java-Thymeleaf-HTML：使用切換大小寫的彩色字母：不需要的段落/換行符

[英]Java - Thymeleaf - HTML: Color letters using switch case: Unwanted paragraph/newline

 原文  2018-12-09 14:12:51  8   2    java/ html/ colors/ switch-statement/ thymeleaf

問題描述

我正在研究一個由基因，蛋白質和化驗組成的生物學數據庫。 我想使用Spring Boot和Thymeleaf建立網絡可視化。 每個基因都顯示在頁面上，並帶有名稱，描述和序列。 該序列由字母A，T，G和C組成。我要為這些字母上色（作品）。 但是，每個字母都寫在新行中，而不是在行填滿之前寫文本（然后寫到下一行等）。 在gene.html中，我在定義顏色時使用了小標簽（在出現問題之前和之前嘗試過p），但是使用小標簽並沒有幫助。

希望我提供的代碼片段足夠（如果沒有，請告訴我您需要什么）

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>
        <br/>
        <!-- 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>

        <br/>
        <br/>
        <!--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 個解決方案

解決方案1
 1 已采納  2018-12-09 15:12:32

發生的是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來使其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也是一個內聯元素。

解決方案2
 1  2018-12-09 16:45:25

您可以使用float: left樣式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中添加一個類“ gene”和一個帶有基因字符（例如“ A”）的類。 然后，css具有所有人都通用的基因樣式，以及具有特定特征的char樣式（即顏色）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 整數的Thymeleaf開關案例 Java-通過開關盒功能設置顏色 在 Java 中使用枚舉切換大小寫 使用開關盒的Java計算器 在switch case java中使用數組 在 Java 的開關盒中使用.startsWith 使用iText Java設置段落的背景色 使用 Switch Case 語句編寫程序（使用字母 ABCD 而不是 int） 如何在Java中使用切換大小寫來等同字符？ 在Java中使用數組作為switch case語句
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM