Foros del Web » Programando para Internet » Python »

wxGlade - Layout 1 barra de herramientas + 2 paneles

Estas en el tema de wxGlade - Layout 1 barra de herramientas + 2 paneles en el foro de Python en Foros del Web. Buenas, no logro encontrar ningún tutorial que muestre como crear en wxGlade lo siguiente: -------------------------------------------------- BARRA DE HERRAMIENTAS con iconos --------------------------------------------------- PANEL CON CONTROLES --------------------------------------------------- ...
  #1 (permalink)  
Antiguo 13/12/2012, 13:37
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
wxGlade - Layout 1 barra de herramientas + 2 paneles

Buenas, no logro encontrar ningún tutorial que muestre como crear en wxGlade lo siguiente:

--------------------------------------------------
BARRA DE HERRAMIENTAS con iconos
---------------------------------------------------

PANEL CON CONTROLES


---------------------------------------------------

El tema es que preciso que la barra de herramientas superior no cambie, pero al pulsar en determinados iconos el Panel de controles si cambie y muestre diferentes contenidos.

Supongo que al escribir el código cada Panel es una clase como muestran en este ejemplo
http://www.blog.pythonlibrary.org/2010/06/16/wxpython-how-to-switch-between-panels/
donde en lugar de cambiar de panel via un icono lo hace via el menú

pero no me doy cuenta como armar eso en wxGlade

1) Agrego un Frame a la aplicación
2) Indico que ese Frame tiene Toolbar
3) Luego qué agrego a la zona donde quiero que se gestionen dos paneles con botones diferentes?
  #2 (permalink)  
Antiguo 14/12/2012, 20:16
 
Fecha de Ingreso: enero-2012
Ubicación: Buenos Aires
Mensajes: 745
Antigüedad: 12 años, 11 meses
Puntos: 35
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Barra de herramientas = Tool bar = wxToolBar. Fijate que está disponible en wxGlade.

  #3 (permalink)  
Antiguo 15/12/2012, 21:53
Avatar de razpeitia
Moderador
 
Fecha de Ingreso: marzo-2005
Ubicación: Monterrey, México
Mensajes: 7.321
Antigüedad: 19 años, 9 meses
Puntos: 1360
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Ok, no entendí nada.

De pura casualidad lo que quieres no son tabs?
  #4 (permalink)  
Antiguo 17/12/2012, 07:16
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Cita:
Iniciado por carbon Ver Mensaje
Barra de herramientas = Tool bar = wxToolBar. Fijate que está disponible en wxGlade.

Si, la barra de herramientas la puedo hacer sin problema, pero lo que quiero es que debajo de la barra de herramientas se coloque un panel con determinadas opciones, y al hacer clic en algún icono de la barra de herramientas pueda esconder el panel anterior y mostrar otro nuevo.

Es lo que en las páginas de Internet se resolvía con Frames, es decir, arriba un menú de opciones y al hacer clic en algunas de ellas el menú se mantiene pero la ventana inferior cambia.

Creo que se resuelve con paneles pero no se como hacer en wxGlade para definir dos paneles que ocuparán en teoría la misma zona de pantalla pero solo una estará activo a la vez.
  #5 (permalink)  
Antiguo 17/12/2012, 07:18
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Cita:
Iniciado por razpeitia Ver Mensaje
Ok, no entendí nada.

De pura casualidad lo que quieres no son tabs?
Hola razpeitia preferiría solucionarlo con barra de herramientas de iconos arriba y panel de controles abajo, asi puedo usar iconos cosa que con los tabs no puedo.

La herramientas la puedo hacer sin problema, pero lo que quiero es que debajo de la barra de herramientas se coloque un panel con determinadas opciones, y al hacer clic en algún icono de la barra de herramientas pueda esconder el panel anterior y mostrar otro nuevo.

Es lo que en las páginas de Internet se resolvía con Frames, es decir, arriba un menú de opciones y al hacer clic en algunas de ellas el menú se mantiene pero la ventana inferior cambia.

Creo que se resuelve con paneles pero no se como hacer en wxGlade para definir dos paneles que ocuparán en teoría la misma zona de pantalla pero solo una estará activo a la vez.
  #6 (permalink)  
Antiguo 17/12/2012, 07:20
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Lo que busco es algo como esto:

http://www.blog.pythonlibrary.org/2010/06/16/wxpython-how-to-switch-between-panels/

pero en lugar de tener un menú arriba y cambiar de paneles por el menú me gustaría que fuera con una barra de herramientas con iconos.

Allí está explicado como crear los paneles y cambiar de uno a otro, pero no me doy cuenta en wxGlade como defino dos paneles que ocupan en teoría la misma ubicación.

Será que debo hacer solo un panel a la vez en wxGlade y copiar el código manualmente para gestionarlo en Python?
  #7 (permalink)  
Antiguo 18/12/2012, 16:06
Avatar de razpeitia
Moderador
 
Fecha de Ingreso: marzo-2005
Ubicación: Monterrey, México
Mensajes: 7.321
Antigüedad: 19 años, 9 meses
Puntos: 1360
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Básicamente lo que haces es crear 2 paneles en el mismo frame.

Ocultas un panel y muestras el otro.

El botón de switch lo único que hace es hacer cambiar el orden.
  #8 (permalink)  
Antiguo 19/12/2012, 05:10
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Cita:
Iniciado por razpeitia Ver Mensaje
Básicamente lo que haces es crear 2 paneles en el mismo frame.

Ocultas un panel y muestras el otro.

El botón de switch lo único que hace es hacer cambiar el orden.
Correcto gracias. Lo que no me doy cuenta es como ensamblar las partes.

Es decir, un Frame, ese Frame con una Toolbar (ya lo tengo) y debajo de la Toolbar el panel activo.

Actualmente me queda el panel por fuera del frame, o sea como una ventana superpuesta.

Una de las cosas que me está complicando en Python, y creo que le pasa a muchos, es que la información está fragmentada, dispersa, hay que aprender varias tecnologías diferentes y no directamente relacionadas con Python en algunos casos.
  #9 (permalink)  
Antiguo 19/12/2012, 06:45
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Lo que no logro en wxGlade es definir 2 paneles que en teoría tienen la misma jerarquía, ocupan el mismo espacio pero uno solo está visible a la vez.

Es decir, si agrego un panel más a esta configuración:

http://postimage.org/image/iwm7xoa2d/

el Panel 2 queda siendo "hijo" del Panel 1...

Les dejo un archivo comprimido con todos los archivos e iconos del ejemplo por si a alguien les sirve para este u otro caso:

http://www.filedropper.com/prueba2paneles_1
  #10 (permalink)  
Antiguo 19/12/2012, 11:45
Avatar de razpeitia
Moderador
 
Fecha de Ingreso: marzo-2005
Ubicación: Monterrey, México
Mensajes: 7.321
Antigüedad: 19 años, 9 meses
Puntos: 1360
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Código XML:
Ver original
  1. <?xml version="1.0"?>
  2. <!-- generated by wxGlade 0.6.4 on Wed Dec 19 11:36:00 2012 -->
  3.  
  4. <application path="/home/raz/glade/temp.py" name="" class="" option="0" language="python" top_window="frame_1" encoding="UTF-8" use_gettext="0" overwrite="0" use_new_namespace="1" for_version="2.8" is_template="0" indent_amount="4" indent_symbol="space" source_extension=".cpp" header_extension=".h">
  5.     <object class="MyFrame" name="frame_1" base="EditFrame">
  6.         <style>wxDEFAULT_FRAME_STYLE</style>
  7.         <title>frame_1</title>
  8.         <size>300, 300</size>
  9.         <object class="wxBoxSizer" name="sizer_1" base="EditBoxSizer">
  10.             <orient>wxVERTICAL</orient>
  11.             <object class="sizeritem">
  12.                 <flag>wxEXPAND</flag>
  13.                 <border>0</border>
  14.                 <option>1</option>
  15.                 <object class="wxPanel" name="panel_1" base="EditPanel">
  16.                     <style>wxTAB_TRAVERSAL</style>
  17.                     <object class="wxBoxSizer" name="sizer_2" base="EditBoxSizer">
  18.                         <orient>wxVERTICAL</orient>
  19.                         <object class="sizeritem">
  20.                             <border>0</border>
  21.                             <option>0</option>
  22.                             <object class="wxTextCtrl" name="text_ctrl_1" base="EditTextCtrl">
  23.                             </object>
  24.                         </object>
  25.                     </object>
  26.                 </object>
  27.             </object>
  28.             <object class="sizeritem">
  29.                 <flag>wxEXPAND</flag>
  30.                 <border>0</border>
  31.                 <option>1</option>
  32.                 <object class="wxPanel" name="panel_2" base="EditPanel">
  33.                     <style>wxTAB_TRAVERSAL</style>
  34.                     <hidden>1</hidden>
  35.                     <object class="wxBoxSizer" name="sizer_3" base="EditBoxSizer">
  36.                         <orient>wxVERTICAL</orient>
  37.                         <object class="sizeritem">
  38.                             <border>0</border>
  39.                             <option>0</option>
  40.                             <object class="wxCheckBox" name="checkbox_1" base="EditCheckBox">
  41.                                 <label>checkbox_1</label>
  42.                             </object>
  43.                         </object>
  44.                     </object>
  45.                 </object>
  46.             </object>
  47.             <object class="sizeritem">
  48.                 <border>0</border>
  49.                 <option>0</option>
  50.                 <object class="wxButton" name="button_1" base="EditButton">
  51.                     <label>Switch</label>
  52.                     <events>
  53.                         <handler event="EVT_BUTTON">OnClick</handler>
  54.                     </events>
  55.                 </object>
  56.             </object>
  57.         </object>
  58.     </object>
  59. </application>

Una vez generado el código pon este código dentro de OnClick
Código Python:
Ver original
  1. def OnClick(self, event):  # wxGlade: MyFrame.<event_handler>
  2.     if self.panel_1.IsShown():
  3.         self.panel_1.Hide()
  4.         self.panel_2.Show()
  5.     else:
  6.         self.panel_1.Show()
  7.         self.panel_2.Hide()
  8.     self.Layout()
  9.     event.Skip()

Quedándote en total así:
Código Python:
Ver original
  1. #!/usr/bin/env python
  2. # -*- coding: utf-8 -*-
  3. # generated by wxGlade 0.6.4 on Wed Dec 19 11:21:44 2012
  4.  
  5. import wx
  6.  
  7. # begin wxGlade: extracode
  8. # end wxGlade
  9.  
  10.  
  11. class MyFrame(wx.Frame):
  12.     def __init__(self, *args, **kwds):
  13.         # begin wxGlade: MyFrame.__init__
  14.         kwds["style"] = wx.DEFAULT_FRAME_STYLE
  15.         wx.Frame.__init__(self, *args, **kwds)
  16.         self.panel_1 = wx.Panel(self, -1)
  17.         self.text_ctrl_1 = wx.TextCtrl(self.panel_1, -1, "")
  18.         self.panel_2 = wx.Panel(self, -1)
  19.         self.checkbox_1 = wx.CheckBox(self.panel_2, -1, "checkbox_1")
  20.         self.button_1 = wx.Button(self, -1, "Switch")
  21.  
  22.         self.__set_properties()
  23.         self.__do_layout()
  24.  
  25.         self.Bind(wx.EVT_BUTTON, self.OnClick, self.button_1)
  26.         # end wxGlade
  27.  
  28.     def __set_properties(self):
  29.         # begin wxGlade: MyFrame.__set_properties
  30.         self.SetTitle("frame_1")
  31.         self.SetSize((300, 300))
  32.         self.panel_2.Hide()
  33.         # end wxGlade
  34.  
  35.     def __do_layout(self):
  36.         # begin wxGlade: MyFrame.__do_layout
  37.         sizer_1 = wx.BoxSizer(wx.VERTICAL)
  38.         sizer_3 = wx.BoxSizer(wx.VERTICAL)
  39.         sizer_2 = wx.BoxSizer(wx.VERTICAL)
  40.         sizer_2.Add(self.text_ctrl_1, 0, 0, 0)
  41.         self.panel_1.SetSizer(sizer_2)
  42.         sizer_1.Add(self.panel_1, 1, wx.EXPAND, 0)
  43.         sizer_3.Add(self.checkbox_1, 0, 0, 0)
  44.         self.panel_2.SetSizer(sizer_3)
  45.         sizer_1.Add(self.panel_2, 1, wx.EXPAND, 0)
  46.         sizer_1.Add(self.button_1, 0, 0, 0)
  47.         self.SetSizer(sizer_1)
  48.         self.Layout()
  49.         # end wxGlade
  50.  
  51.     def OnClick(self, event):  # wxGlade: MyFrame.<event_handler>
  52.         if self.panel_1.IsShown():
  53.             self.panel_1.Hide()
  54.             self.panel_2.Show()
  55.         else:
  56.             self.panel_1.Show()
  57.             self.panel_2.Hide()
  58.         self.Layout()
  59.         event.Skip()
  60.  
  61. # end of class MyFrame
  62. if __name__ == "__main__":
  63.     app = wx.PySimpleApp(0)
  64.     wx.InitAllImageHandlers()
  65.     frame_1 = MyFrame(None, -1, "")
  66.     app.SetTopWindow(frame_1)
  67.     frame_1.Show()
  68.     app.MainLoop()

Última edición por razpeitia; 20/12/2012 a las 13:28
  #11 (permalink)  
Antiguo 20/12/2012, 05:27
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Cita:
Iniciado por razpeitia Ver Mensaje
[HIGHLIGHT="XML"]


Quedándote en total así:
Excelente!!

Es justo lo que buscaba, muchas gracias, espero el código le sirva a otros también.

Te cuento que uso Chrome y la opción copiar código no funciona, es decir, me dice que el código fue copiado pero en realidad no, porque no me permite pegarlo en ningún editor.

Tengo que usar la opción de ver el código original, seleccionar todo, copiar y pegarlo en Python y luego estar borrando los espacios en blanco que dan error de sintaxis en cada línea.

Aviso por si es algún problema del foro.
  #12 (permalink)  
Antiguo 15/01/2013, 05:04
 
Fecha de Ingreso: noviembre-2012
Mensajes: 111
Antigüedad: 12 años, 1 mes
Puntos: 6
Respuesta: wxGlade - Layout 1 barra de herramientas + 2 paneles

Navegando por allí encontré otro ejemplo de barra de herramientas con botones y cambio de paneles.

Lo pego acá por si a alguien le sirve de referencia.

Ya que estamos, en este nuevo ejemplo el programador opta por "destruir" el panel que deja de estar activo. Más allá de que en algunos casos podría no ser necesario (por ejemplo si volvemos a llamar a un botón de la toolbar queremos que el panel vuelva en el mismo estado en que lo dejamos) supongo que se hace por un tema de ahorro de memoria no? es decir, no dejar abiertas cosas que ya no usamos?

Código Python:
Ver original
  1. import wx
  2.  
  3. ID_RED = wx.NewId()
  4. ID_BLUE = wx.NewId()
  5.  
  6. class MyFrame(wx.Frame):
  7.     def __init__(self, parent):
  8.         wx.Frame.__init__(self, parent, title="Test")
  9.  
  10.         # Attributes
  11.         self.panel = MainPanel(self)
  12.  
  13.         # Setup
  14.         toolbar = wx.ToolBar(self)
  15.         bmp = wx.ArtProvider.GetBitmap(wx.ART_INFORMATION, wx.ART_TOOLBAR)
  16.         toolbar.AddTool(ID_RED, bmp, shortHelpString="Red Panel")
  17.         toolbar.AddTool(ID_BLUE, bmp, shortHelpString="Blue Panel")
  18.         toolbar.Realize()
  19.         self.SetToolBar(toolbar)
  20.  
  21.         # Event Handlers
  22.         self.Bind(wx.EVT_TOOL, self.OnTool, id=ID_RED)
  23.         self.Bind(wx.EVT_TOOL, self.OnTool, id=ID_BLUE)
  24.  
  25.     def OnTool(self, evt):
  26.         e_id = evt.GetId()
  27.         if e_id == ID_RED:
  28.             self.panel.SetPanel("RED")
  29.         elif e_id == ID_BLUE:
  30.             self.panel.SetPanel("BLUE")
  31.         else:
  32.             evt.Skip()
  33.  
  34. class MainPanel(wx.Panel):
  35.     def __init__(self, parent):
  36.         wx.Panel.__init__(self, parent)
  37.  
  38.         # Attributes
  39.         self.sizer = wx.BoxSizer()
  40.         self.panel = wx.Panel(self)
  41.  
  42.         # Setup
  43.         self.panel.SetBackgroundColour(wx.BLACK)
  44.         self.sizer.Add(self.panel, 1, wx.EXPAND)
  45.         self.SetSizer(self.sizer)
  46.  
  47.     def SetPanel(self, ptype):
  48.         if ptype == "RED":
  49.             newpanel = wx.Panel(self)
  50.             newpanel.SetBackgroundColour(wx.RED)
  51.             self.sizer.Replace(self.panel, newpanel)
  52.             self.panel.Destroy()
  53.             self.panel = newpanel
  54.             self.Layout()
  55.         elif ptype == "BLUE":
  56.             newpanel = wx.Panel(self)
  57.             newpanel.SetBackgroundColour(wx.BLUE)
  58.             self.sizer.Replace(self.panel, newpanel)
  59.             self.panel.Destroy()
  60.             self.panel = newpanel
  61.             self.Layout()
  62.         else:
  63.             pass
  64.  
  65. if __name__ == '__main__':
  66.     app = wx.App(False)
  67.     frame = MyFrame(None)
  68.     frame.Show()
  69.     app.MainLoop()

Etiquetas: wxpython
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:00.