Perché la mia interfaccia utente perde la formattazione quando viene eseguito in-browser o eseguito sul mio computer (Java Swing)?

Question

Per la mia classe CSE 205 (Java programming 2), dobbiamo progettare una semplice applet GUI. Ho una certa familiarità con Swing, l'ho usato per alcuni dei miei progetti in anticipo. Ho progettato il programma con pochi problemi, e sembra perfetto sul mio computer quando viene eseguito da Eclipse:

Ma quando ho avuto modo di inviare online, dove si corre in del browser, l'interfaccia utente ottiene gravemente demente, tornando di nuovo a difetto:

mi sono abituato ad usare il GridBagLayout grazie alla sua semplicità. Questo è quello che sto usando qui. Le classi CreatePanel e SelectPanel (come si vede nella prima immagine) entrambe estendono JPanel (come da mio professore). Ho impostato ogni utilizzo:

this.setLayout(new GridBagLayout()); 

E ed i componenti ad ogni secondo:

//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); 
     } 

Qualcuno ha qualche idea di quello che potrebbe essere in corso? Considerando che più della metà del mio tempo è stato dedicato all'ottimizzazione dei layout, mi piacerebbe una soluzione semplice. Posso pubblicare più codice se necessario. Grazie per eventuali suggerimenti.

--EDIT--

Va bene che ho fatto un po 'di gioco intorno sulla base di @ MadProgrammer suggerimenti. Penso di aver ristretto il punto in cui il problema è.

Questo è il codice che sto usando per impostare la dimensione della JTextField alla destra dell'etichetta "Inserire un tipo di animali domestici:

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

Ora se cambio il codice a qualsiasi altra cosa, come l'impostazione del numero di colonne:

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

ottengo un'interfaccia utente che sembra identico a quello quando ho inviala online Qualcosa a che fare con l'impostazione del numero di colonne sembra essere l'avvitamento in su questo aiuta a restringere verso il basso per.. chiunque?

Answer 1

Non c'è davvero abbastanza codice per accertare l'intera estensione del problema, ma alcune idee potrebbero aiutare.

GridBagLayout vorrà provare e ottenere i suoi componenti da disporre in base alle dimensioni preferite se possibile. Se non può, vedrà invece la dimensione minima.

Assicurarsi di creare i componenti di testo con le colonne (e nel caso dell'area di testo) righe. Questo stabilirà automaticamente la dimensione preferita dei componenti in base a una serie di fattori importanti.

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); 

     } 

    } 

} 

Purtroppo, ad un certo punto, tutto quello che raggiungerà un punto che non è semplicemente possibile mantenere il layout e le cose sia il collasso o semplicemente appaiono ritagliato.

In questi casi, è possibile posizionare l'intero contenitore all'interno di uno JScrollPane, ma in questo caso considererei lo scenario peggiore.