Tại sao giao diện người dùng của tôi bị mất định dạng khi chạy trong trình duyệt so với chạy trên máy tính của tôi (Java Swing)?

Question

Đối với lớp CSE 205 (Java programming 2) của tôi, chúng ta phải thiết kế một applet GUI thực sự đơn giản. Tôi khá quen thuộc với Swing, đã sử dụng nó cho một vài dự án của riêng tôi trước khi bàn tay. Tôi đã thiết kế chương trình với vài vấn đề, và có vẻ hoàn hảo trên máy tính của tôi khi chạy từ Eclipse:

Nhưng khi tôi đã nộp nó trực tuyến, nơi mà nó chạy trong trình duyệt, giao diện người dùng được nghiêm trọng điên, trở lại để mặc định:

tôi đã quen với việc sử dụng GridBagLayout do đó là sự đơn giản. Đó là những gì tôi đang sử dụng ở đây. Các lớp CreatePanel và SelectPanel (như được thấy trong hình ảnh đầu tiên) đều mở rộng JPanel (theo giáo sư của tôi). Tôi đặt từng sử dụng:

this.setLayout(new GridBagLayout()); 

Và và các thành phần với nhau theo:

//Call the method addItem() to add the create button to the panel 
addItem(this, createB,0,2,2,1,defaultInset,GridBagConstraints.CENTER); 



//------- 
    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int[] inset, int align) 
     { 
      GridBagConstraints gc = new GridBagConstraints(); 
      gc.gridx = x; 
      gc.gridy = y; 
      gc.gridwidth = width; 
      gc.gridheight = height; 
      gc.weightx = 0; 
      gc.weighty = 0; 
      gc.insets = new Insets(inset[0],inset[1],inset[2],inset[3]); 
      gc.anchor = align; 
      gc.fill = GridBagConstraints.NONE; 
      p.add(c, gc); 
     } 

Bất cứ ai có bất cứ ý tưởng về những gì có thể xảy ra? Xem xét hơn một nửa thời gian của tôi đã được dành cho việc bố trí nhìn đúng, tôi rất thích một sửa chữa đơn giản. Tôi có thể đăng thêm mã nếu cần. Cảm ơn mọi lời đề nghị.

--EDIT--

Được rồi tôi đã thực hiện một chút chơi xung quanh dựa trên đề xuất @ MadProgrammer của. Tôi nghĩ tôi đã thu hẹp lại vấn đề ở đâu.

Đây là mã tôi đang sử dụng để thiết lập kích thước của JTextField ở bên phải của nhãn "Nhập Loại Pet:

petTypeTF = new JTextField(""); 
petTypeTF.setPreferredSize(new Dimension(125, 60)); 

Bây giờ nếu tôi thay đổi mã để bất cứ điều gì khác, như thiết lập các số cột:

petTypeTF = new JTextField("",12); 
petTypeTF.setPreferredSize(new Dimension(125, 60)); 

tôi nhận được một giao diện người dùng trông giống với một trong khi tôi gửi nó trực tuyến một cái gì đó để làm với thiết lập số cột dường như được bắt vít nó lên Điều này giúp thu hẹp nó xuống cho.. ai?

Answer 1

Có thực sự không đủ mã để xác định sự mở rộng đầy đủ của vấn đề, nhưng một vài ý tưởng có thể giúp đỡ.

GridBagLayout sẽ muốn thử và nhận các thành phần của nó được đặt ra dựa trên các kích thước được ưu tiên nếu có thể. Nếu nó không thể nó sẽ xem xét có kích thước tối thiểu để thay thế.

Đảm bảo bạn đang tạo các thành phần văn bản của mình bằng các cột (và trong trường hợp của vùng văn bản). Điều này sẽ thiết lập kích thước ưa thích của các thành phần tự động dựa trên một số yếu tố quan trọng.

public class BadLayout11 { 

    public static void main(String[] args) { 
     new BadLayout11(); 
    } 

    public BadLayout11() { 
     EventQueue.invokeLater(new Runnable() { 
      @Override 
      public void run() { 
       try { 
        UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName()); 
       } catch (Exception ex) { 
       } 

       JTabbedPane pane = new JTabbedPane(); 
       pane.add("Pet List Creation", new TestPane()); 

       JFrame frame = new JFrame("Test"); 
       frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
       frame.add(pane); 
       frame.pack(); 
       frame.setLocationRelativeTo(null); 
       frame.setVisible(true); 

      } 
     }); 
    } 

    public class TestPane extends JPanel { 

     public TestPane() { 

      setLayout(new GridBagLayout()); 

      JPanel fields = new JPanel(new GridBagLayout()); 

      JTextField field = new JTextField(12); 
      JTextArea area = new JTextArea(10, 20); 
      JLabel label = new JLabel("Enter a Pet Type"); 
      JButton button = new JButton("Create a Pet"); 

      GridBagConstraints gbc = new GridBagConstraints(); 
      gbc.gridx = 0; 
      gbc.gridy = 0; 
      gbc.insets = new Insets(2, 2, 2, 2); 
      gbc.anchor = GridBagConstraints.WEST; 

      fields.add(label, gbc); 
      gbc.weightx = 1; 
      gbc.gridx++; 
      fields.add(field, gbc); 

      gbc.fill = GridBagConstraints.NONE; 
      gbc.gridx = 0; 
      gbc.weightx = 0; 
      gbc.gridy++; 
      gbc.gridwidth = 2; 
      gbc.anchor = GridBagConstraints.CENTER; 
      fields.add(button, gbc); 

      gbc = new GridBagConstraints(); 
      gbc.gridx = 0; 
      gbc.gridy = 0; 
      gbc.insets = new Insets(2, 2, 2, 2); 
      gbc.gridheight = GridBagConstraints.REMAINDER; 
      gbc.weightx = 1; 
      gbc.weighty = 1; 
      gbc.fill = GridBagConstraints.BOTH; 
      add(fields, gbc); 
      gbc.gridx++; 
      add(new JScrollPane(area), gbc); 

     } 

    } 

} 

Thật không may, tại một số điểm, tất cả mọi thứ sẽ đến một điểm mà nó chỉ đơn giản là không thể duy trì cách bố trí và mọi thứ sẽ sụp đổ hoặc hoặc đơn giản là xuất hiện cắt bớt.

Trong những trường hợp này, bạn có thể đặt toàn bộ vùng chứa trong một số JScrollPane, nhưng tôi cho rằng trường hợp xấu nhất trong trường hợp này.