Проблемы выравнивания при рендеринге поля ввода текста - PullRequest
Новая
       9

Проблемы выравнивания при рендеринге поля ввода текста

0 голосов
/ 07 февраля 2020

У нас есть четыре вкладки. Во всех вкладках имя и фамилия будут одинаковыми. Но при нажатии на вкладку поле thrid изменяется в соответствии с идентификатором / рендерингом вкладки с соответствующими идентификаторами.

Проблема заключается в том, с третьим полем, После нажатия вкладок 2, 3 и 4 Он слегка отходит,

Вкладка 4 для комментариев к опросу имеет область ввода

Как мне получить макет, как показано ниже ?

Ожидаемый результат

Вкладка 1 

            First Name       [_________]                    Last Name [_________]

            Initial Pricing  [_________]

Вкладка 2 

            First Name       [_________]                    Last Name [_________]

            Selling Price    [_________]

Вкладка 3 

            First Name       [_________]                    Last Name [_________]

            Cost Price       [_________]

Вкладка 4 

            First Name       [_________]                    Last Name [_________]

            Survey Comments  [_____________________]

Вот весь код моей страницы x. html

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pe="http://primefaces.org/ui/extensions">
    <style>
.borderClass {
    border-color: #DEEFFF;
    border-width: 2px;
    border-style: solid;
}
</style>
    <h:form>

        <p:panel id="form" styleClass="panelNoBorder">
            <p:fieldset toggleable="true" toggleSpeed="500" legend="Form">

                <p:panelGrid columns="4" styleClass="panelNoBorder">


                    <p:outputLabel value="First Name" />
                    <p:inputText id="FirstName" value="#{javaMB.FirstName}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>


                    <p:outputLabel value="Last Name" />
                    <p:inputText id="LastName" value="#{javaMB.LastName}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>

                    <p:outputLabel value="Initial Pricing"
                        rendered="#{typeMB.tabId eq 1}" />
                    <p:inputText id="InitialPricing" value="#{javaMB.InitialPricing}"
                        maxlength="10" style="width: 20%;" rendered="#{typeMB.tabId eq 1}">
                    </p:inputText>

                    <p:outputLabel value="Selling Price"
                        rendered="#{typeMB.tabId eq 2}" />
                    <p:inputText id="SellingPrice" value="#{javaMB.SellingPrice}"
                        maxlength="10" style="width: 20%;" rendered="#{typeMB.tabId eq 2}">
                    </p:inputText>

                    <p:outputLabel value="Cost Price" rendered="#{typeMB.tabId eq 3}" />
                    <p:inputText id="CostPrice" value="#{javaMB.CostPrice}"
                        maxlength="10" style="width: 20%;" rendered="#{typeMB.tabId eq 3}">
                    </p:inputText>

                    <p:outputLabel value="Survey Comments"
                        rendered="#{typeMB.tabId eq 4}" />
                    <p:inputTextarea id="SurveyComments"
                        value="#{javaMB.SurveyComments}" rows="10" cols="50"
                        style="width: 20%;" rendered="#{typeMB.tabId eq 4}">
                    </p:inputTextarea>
                </p:panelGrid>
            </p:fieldset>
        </p:panel>
    </h:form>
</ui:composition>

Таблица базы данных REF_Page_Type 

CREATE TABLE PROD.REF_Page_Type
(
Page_TYPE_ID            Integer NOT NULL,
DISPLAY_NAME            VARCHAR2(50 BYTE) NOT NULL,
DESCRIPTION             VARCHAR2(200 BYTE)
);

Page_TYPE_ID   DISPLAY_NAME DESCRIPTION
1       Page 1      Page 1
2       Page 2      Page 2
3       Page 3      Page 3
4       Page 4      Page 4

typeMB. java

package blizzard.games.sec.entity;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.NamedQuery;
import javax.persistence.Table;

@Entity
@Table(name = "REF_Page_Type", schema = "PROD")
@NamedQuery(name = "RefPageType.findAll", query = "SELECT r FROM RefPageType 
r")
public class RefPageType implements Serializable {

private static final long serialVersionUID = 1L;

@Id
@Column(name = "Page_TYPE_ID")
private Integer pageTypeId;

@Column(name = "DISPLAY_NAME")
private String name;

@Column(name = "DESCRIPTION")
private String description;

public RefPageType() {
}

public RefPageType(Integer pageTypeId) {
    this.pageTypeId = pageTypeId;
}

public RefPageType(Integer pageTypeId, String name) {
    this.pageTypeId = pageTypeId;
    this.name = name;
}

public Integer getPageTypeId() {
    return pageTypeId;
}

public void setPageTypeId(Integer pageTypeId) {
    this.pageTypeId = pageTypeId;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getDescription() {
    return description;
}

public void setDescription(String description) {
    this.description = description;
}

javaMB. java

package blizzard.games.sec.managedbeans;

import blizzard.games.sec.RefPageType;

import java.awt.event.ActionListener;
import java.io.IOException;
import java.io.Serializable;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.TreeMap;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.application.FacesMessage.Severity;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;
import org.apache.commons.lang3.StringUtils;
import org.primefaces.component.inputtext.InputText;
import org.primefaces.context.RequestContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.event.FlowEvent;
import org.primefaces.event.SelectEvent;
import org.primefaces.model.UploadedFile;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.jsf.FacesContextUtils;

@ManagedBean(name = "javaMB")
@ViewScoped
public class JavaMB  {

private static final long serialVersionUID = 1L;
private static final Logger logger = LoggerFactory
        .getLogger(JavaMB.class);

private String FirstName;
private String LastName;
private String InitialPricing;
private String SellingPrice;
private String CostPrice;
private String SurveyComments;


public String getFirstName() {
    return FirstName;
}
public void setFirstName(String firstName) {
    FirstName = firstName;
}
public String getLastName() {
    return LastName;
}
public void setLastName(String lastName) {
    LastName = lastName;
}
public String getInitialPricing() {
    return InitialPricing;
}
public void setInitialPricing(String initialPricing) {
    InitialPricing = initialPricing;
}
public String getSellingPrice() {
    return SellingPrice;
}
public void setSellingPrice(String sellingPrice) {
    SellingPrice = sellingPrice;
}
public String getCostPrice() {
    return CostPrice;
}
public void setCostPrice(String costPrice) {
    CostPrice = costPrice;
}
public String getSurveyComments() {
    return SurveyComments;
}
public void setSurveyComments(String surveyComments) {
    SurveyComments = surveyComments;
}
}

Фактический выход / ВЫПУСК

Вкладка 1 

            First Name       [_________]                    Last Name [_________]

            Initial Pricing  [_________]

Вкладка 2 

            First Name       [_________]                    Last Name [_________]

                        Selling Price    [_____________]

Вкладка 3 

            First Name       [_________]                    Last Name [_________]

                                    Cost Price       [_________]

Вкладка 4 

            First Name       [_________]                    Last Name [_________]

                                                Survey Comments            [_____________________]

То, что я пробовал, пытался поместить третье поле в столбец, но это был выход из ожидаемого результата.

1 Ответ

0 голосов
/ 08 февраля 2020

Поскольку отсутствует почти все, и большая часть кода просто неправильна, я делаю простой пример, который мне подходит, я добавил две кнопки для переключения между режимами:

pom. xml 

    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>

      <groupId>com.codenotfound</groupId>
      <artifactId>jsf-primefaces-hello-world</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <packaging>jar</packaging>

      <name>jsf-primefaces-hello-world</name>
      <description>JSF PrimeFaces Hello World Example</description>
      <url>https://codenotfound.com/jsf-primefaces-example.html</url>

      <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
      </parent>

      <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <joinfaces.version>3.3.0-rc2</joinfaces.version>
      </properties>

      <dependencyManagement>
        <dependencies>
          <dependency>
            <groupId>org.joinfaces</groupId>
            <artifactId>joinfaces-dependencies</artifactId>
            <version>${joinfaces.version}</version>
            <type>pom</type>
            <scope>import</scope>
          </dependency>
        </dependencies>
      </dependencyManagement>

      <dependencies>
        <dependency>
          <groupId>org.joinfaces</groupId>
          <artifactId>primefaces-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
          <groupId>javax.enterprise</groupId>
          <artifactId>cdi-api</artifactId>
        </dependency>
      </dependencies>

      <build>
        <plugins>
          <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
          </plugin>
        </plugins>
      </build>
    </project>

helloworld.x html

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pe="http://primefaces.org/ui/extensions">

    <h:form>

        <p:panel id="form" styleClass="panelNoBorder">
            <p:fieldset toggleable="true" toggleSpeed="500" legend="Form">

                <p:panelGrid styleClass="panelNoBorder" style="width:100%">

                    <p:row>
                        <p:column style="width: 10%;">
                            <p:outputLabel value="First Name" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="FirstName" value="#{javaMB.firstName}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>


                        <p:column style="width: 10%;">
                            <p:outputLabel value="Last Name" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="LastName" value="#{javaMB.lastName}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>
                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 1}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Initial Pricing" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="InitialPricing" value="#{javaMB.initialPricing}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>

                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 2}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Selling Price" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="SellingPrice" value="#{javaMB.sellingPrice}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>

                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 3}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Cost Price" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="CostPrice" value="#{javaMB.costPrice}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>

                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 4}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Survey Comments" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputTextarea id="SurveyComments"
                                value="#{javaMB.surveyComments}" rows="10" cols="50">
                            </p:inputTextarea>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:fieldset>

            <p:commandButton value="Next" update="form">
                <f:setPropertyActionListener value="#{javaMB.tabId+1}"
                    target="#{javaMB.tabId}"></f:setPropertyActionListener>
            </p:commandButton>
            <p:commandButton value="Reset" update="form">
                <f:setPropertyActionListener value="1" target="#{javaMB.tabId}"></f:setPropertyActionListener>
            </p:commandButton>
        </p:panel>
    </h:form>
</ui:composition>

JavaMB 

package blizzard.games.sec.managedbeans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@ManagedBean(name = "javaMB")
@ViewScoped
public class JavaMB {

    private static final long serialVersionUID = 1L;
    private static final Logger logger = LoggerFactory.getLogger(JavaMB.class);

    private String firstName;
    private String lastName;
    private String initialPricing;
    private String sellingPrice;
    private String costPrice;
    private String surveyComments;
    private int tabId = 1;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getInitialPricing() {
        return initialPricing;
    }

    public void setInitialPricing(String initialPricing) {
        this.initialPricing = initialPricing;
    }

    public String getSellingPrice() {
        return sellingPrice;
    }

    public void setSellingPrice(String sellingPrice) {
        this.sellingPrice = sellingPrice;
    }

    public String getCostPrice() {
        return costPrice;
    }

    public void setCostPrice(String costPrice) {
        this.costPrice = costPrice;
    }

    public String getSurveyComments() {
        return surveyComments;
    }

    public void setSurveyComments(String surveyComments) {
        this.surveyComments = surveyComments;
    }

    public int getTabId() {
        return tabId;
    }

    public void setTabId(int tabId) {
        this.tabId = tabId;
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...