• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 237
  • Last Modified:

WxPython form not aligned

Hi everyone...

I'm building a small application that needs the user to enter a small form of data...

It's almost done except the fact that I can't get my input fields of equal width for every row...

What can I do to achieve that?

import wx
import  wx.calendar
from datetime import datetime



DATE_FORMAT = '%d-%m-%Y'

class MyForm(wx.Frame):

    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, title='Pic Portier - Cosmonet', style = wx.DEFAULT_FRAME_STYLE & ~wx.MAXIMIZE_BOX ^ wx.RESIZE_BORDER)

        menuBar = wx.MenuBar()

        filemenu = wx.Menu()
        aboutmenu = wx.Menu()

        filemenu.Append(wx.ID_OPEN, "Ch&oisissez le dossier de travail\tCtrl-O", "Choisissez le dossier")
        filemenu.Append(wx.ID_EXIT, "&Quitter\tCtrl-Q", "Quitter")

        aboutmenu.Append(wx.ID_ABOUT, "Aide de Pic Portier\tF1", "Aide de Pic Portier")
        aboutmenu.Append(wx.ID_ABOUT, "A propos de &Pic Portier\tCtrl-P", "A propos de Pic Portier")

        self.Bind(wx.EVT_MENU, self.closeProgram, id=wx.ID_EXIT)
        self.Bind(wx.EVT_MENU, self.OnFileOpenMenu, id=wx.ID_OPEN)

        menuBar.Append(filemenu, "&Fichier")
        menuBar.Append(aboutmenu, "&Aide")

        self.SetMenuBar(menuBar)

        self.CreateStatusBar()

        # Add a panel so it looks correct on all platforms
        self.panel = wx.Panel(self, wx.ID_ANY)


        title = wx.StaticText(self.panel, wx.ID_ANY, 'Dossier source: ')

        bmp = wx.ArtProvider.GetBitmap(wx.ART_TIP, wx.ART_OTHER, (16, 16))
        self.labelOne = wx.StaticText(self.panel, wx.ID_ANY, 'Chantier')
        self.inputTxtOne = wx.TextCtrl(self.panel, wx.ID_ANY, size=(50, -1))

        self.labelTwo = wx.StaticText(self.panel, wx.ID_ANY, 'Client')
        self.inputTxtTwo = wx.TextCtrl(self.panel, wx.ID_ANY, size=(100, -1))

        self.inputTxtThree = wx.calendar.CalendarCtrl(self.panel, -1, wx.DateTime_Now())
        self.inputTxtThree.Bind(wx.calendar.EVT_CALENDAR, self.OnCalSelected, self.inputTxtThree)

        date_time = self.inputTxtThree.GetDate()
        today_date = wx.DateTime.Format(date_time, DATE_FORMAT)
        self.labelFour = wx.StaticText(self.panel, wx.ID_ANY, 'Date:       '+str(today_date))

        labelFive = wx.StaticText(self.panel, wx.ID_ANY, 'Author')
        self.inputTxtFive = wx.TextCtrl(self.panel, wx.ID_ANY, size=(100, -1))

        labelSix = wx.StaticText(self.panel, wx.ID_ANY, 'Status')
        self.inputTxtSix = wx.TextCtrl(self.panel, wx.ID_ANY, size=(100, -1))

        okBtn = wx.Button(self.panel, wx.ID_ANY, 'OK')
        cancelBtn = wx.Button(self.panel, wx.ID_ANY, 'Cancel')
        self.Bind(wx.EVT_BUTTON, self.onOK, okBtn)
        self.Bind(wx.EVT_BUTTON, self.onCancel, cancelBtn)

        topSizer        = wx.BoxSizer(wx.VERTICAL)
        titleSizer      = wx.BoxSizer(wx.HORIZONTAL)
        inputOneSizer   = wx.BoxSizer(wx.HORIZONTAL)
        inputTwoSizer   = wx.BoxSizer(wx.HORIZONTAL)
        inputThreeSizer = wx.BoxSizer(wx.HORIZONTAL)
        inputFourSizer  = wx.BoxSizer(wx.HORIZONTAL)
        inputFiveSizer  = wx.BoxSizer(wx.HORIZONTAL)
        inputSixSizer  = wx.BoxSizer(wx.HORIZONTAL)
        btnSizer        = wx.BoxSizer(wx.HORIZONTAL)

        titleSizer.Add(title, 0, wx.ALL, 5)

        inputOneSizer.Add(self.labelOne, 0, wx.ALL, 5)

        inputOneSizer.Add(self.inputTxtOne, 1, wx.ALL|wx.EXPAND, 5)

        inputTwoSizer.Add(self.labelTwo, 0, wx.ALL, 5)
        inputTwoSizer.Add(self.inputTxtTwo, 1, wx.ALL|wx.EXPAND, 5)

        inputThreeSizer.Add(self.inputTxtThree, 1, wx.ALL|wx.EXPAND, 5)

        inputFourSizer.Add(self.labelFour, 0, wx.ALL, 5)
        inputFiveSizer.Add(labelFive, 0, wx.ALL, 5)
        inputFiveSizer.Add(self.inputTxtFive, 1, wx.ALL|wx.EXPAND, 5)

        inputSixSizer.Add(labelSix, 0, wx.ALL, 5)
        inputSixSizer.Add(self.inputTxtSix, 1, wx.ALL|wx.EXPAND, 5)


        btnSizer.Add(okBtn, 0, wx.ALL, 5)
        btnSizer.Add(cancelBtn, 0, wx.ALL, 5)

        topSizer.Add(titleSizer, 0, wx.CENTER)
        topSizer.Add(wx.StaticLine(self.panel,), 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputOneSizer, 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputTwoSizer, 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputThreeSizer, 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputFourSizer, 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputFiveSizer, 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(inputSixSizer, 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(wx.StaticLine(self.panel), 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(btnSizer, 0, wx.ALL|wx.CENTER, 5)

        self.panel.SetSizer(topSizer)
        topSizer.Fit(self)

    def OnFileOpenMenu(self, evt):
        # Args below are: parent, question, dialog title, default answer
        dd = wx.DirDialog(None, "Select directory to open", "~/", 0, (10, 10), wx.Size(400, 300))

        # This function returns the button pressed to close the dialog
        ret = dd.ShowModal()

        # Let's check if user clicked OK or pressed ENTER
        if ret == wx.ID_OK:
            wx.MessageBox('You selected: %s\n' % dd.GetPath(), 'Info',
            wx.OK | wx.ICON_INFORMATION)
        # The dialog is not in the screen anymore, but it's still in memory
        #for you to access it's values. remove it from there.
        dd.Destroy()
        return dd.GetPath()


    def OnCalSelected(self, evt):

        print 'OnCalSelected: %s' % evt.GetDate()
        selected_date = wx.DateTime.Format(evt.GetDate(), DATE_FORMAT)

        self.labelFour.SetLabel('Date:       '+selected_date)

    def onOK(self, event):
        # Do something
        print 'onOK handler'

    def onCancel(self, event):
        self.closeProgram()

    def closeProgram(self):
        self.Close()


# Run the program
if __name__ == '__main__':
    app = wx.App()
    frame = MyForm().Show()
    app.MainLoop()

Open in new window

0
ltpitt
Asked:
ltpitt
1 Solution
 
clockwatcherCommented:
You'd typically use one of the grid sizers (either a flexgrid or gridbag).  If you want your top labels to line up with your bottom-- the labels above and below your calendar--  then I'd suggest a gridbag.  If you don't care, then you could go with two separate flexgrids.  

Here's a gridbag example:
import wx
import  wx.calendar
from datetime import datetime



DATE_FORMAT = '%d-%m-%Y'

class MyForm(wx.Frame):

    def __init__(self):
        wx.Frame.__init__(self, None, wx.ID_ANY, title='Pic Portier - Cosmonet') #, style = wx.DEFAULT_FRAME_STYLE & ~wx.MAXIMIZE_BOX ^ wx.RESIZE_BORDER)

        menuBar = wx.MenuBar()

        filemenu = wx.Menu()
        aboutmenu = wx.Menu()

        filemenu.Append(wx.ID_OPEN, "Ch&oisissez le dossier de travail\tCtrl-O", "Choisissez le dossier")
        filemenu.Append(wx.ID_EXIT, "&Quitter\tCtrl-Q", "Quitter")

        aboutmenu.Append(wx.ID_ABOUT, "Aide de Pic Portier\tF1", "Aide de Pic Portier")
        aboutmenu.Append(wx.ID_ABOUT, "A propos de &Pic Portier\tCtrl-P", "A propos de Pic Portier")

        self.Bind(wx.EVT_MENU, self.closeProgram, id=wx.ID_EXIT)
        self.Bind(wx.EVT_MENU, self.OnFileOpenMenu, id=wx.ID_OPEN)

        menuBar.Append(filemenu, "&Fichier")
        menuBar.Append(aboutmenu, "&Aide")

        self.SetMenuBar(menuBar)

        self.CreateStatusBar()

        # Add a panel so it looks correct on all platforms
        self.panel = wx.Panel(self, wx.ID_ANY)
        
        
        title = wx.StaticText(self.panel, wx.ID_ANY, 'Dossier source: ')

        bmp = wx.ArtProvider.GetBitmap(wx.ART_TIP, wx.ART_OTHER, (16, 16))
        self.labelOne = wx.StaticText(self.panel, wx.ID_ANY, 'Chantier')
    
        
        self.inputTxtOne = wx.TextCtrl(self.panel, wx.ID_ANY, size=(50, -1))

        self.labelTwo = wx.StaticText(self.panel, wx.ID_ANY, 'Client')
        self.inputTxtTwo = wx.TextCtrl(self.panel, wx.ID_ANY, size=(100, -1))

        self.inputTxtThree = wx.calendar.CalendarCtrl(self.panel, -1, wx.DateTime_Now())
        self.inputTxtThree.Bind(wx.calendar.EVT_CALENDAR, self.OnCalSelected, self.inputTxtThree)

        date_time = self.inputTxtThree.GetDate()
        today_date = wx.DateTime.Format(date_time, DATE_FORMAT)
        self.labelFour = wx.StaticText(self.panel, wx.ID_ANY, 'Date:       '+str(today_date))

        labelFive = wx.StaticText(self.panel, wx.ID_ANY, 'Author')
        self.inputTxtFive = wx.TextCtrl(self.panel, wx.ID_ANY, size=(100, -1))

        labelSix = wx.StaticText(self.panel, wx.ID_ANY, 'Status')
        self.inputTxtSix = wx.TextCtrl(self.panel, wx.ID_ANY, size=(100, -1))

        okBtn = wx.Button(self.panel, wx.ID_ANY, 'OK')
        cancelBtn = wx.Button(self.panel, wx.ID_ANY, 'Cancel')
        self.Bind(wx.EVT_BUTTON, self.onOK, okBtn)
        self.Bind(wx.EVT_BUTTON, self.onCancel, cancelBtn)

        grid_bag = wx.GridBagSizer(vgap=20, hgap=5)

        topSizer        = wx.BoxSizer(wx.VERTICAL)
        titleSizer      = wx.BoxSizer(wx.HORIZONTAL)
        btnSizer        = wx.BoxSizer(wx.HORIZONTAL)

        titleSizer.Add(title, 0, wx.ALL, 5)


        grid_bag.Add(self.labelOne, (0,0))
        grid_bag.Add(self.inputTxtOne, (0,1), flag=wx.ALL|wx.EXPAND)
        grid_bag.Add(self.labelTwo, (1,0))
        grid_bag.Add(self.inputTxtTwo, (1,1), flag=wx.ALL|wx.EXPAND)
        grid_bag.Add(self.inputTxtThree, (2,0), span=(1,2), flag=wx.ALL|wx.EXPAND)
        grid_bag.Add(self.labelFour, (3,0), span=(1,2))
        grid_bag.Add(labelFive, (4,0))
        grid_bag.Add(self.inputTxtFive, (4,1), flag=wx.ALL|wx.EXPAND)
        grid_bag.Add(labelSix, (5,0))
        grid_bag.Add(self.inputTxtSix, (5,1), flag=wx.ALL|wx.EXPAND)
        grid_bag.AddGrowableCol(1)
        btnSizer.Add(okBtn, 0, wx.ALL, 5)
        btnSizer.Add(cancelBtn, 0, wx.ALL, 5)

        topSizer.Add(titleSizer, 0, wx.CENTER)
        topSizer.Add(wx.StaticLine(self.panel,), 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(grid_bag, 0, wx.ALL|wx.CENTER, 15)
        topSizer.Add(wx.StaticLine(self.panel), 0, wx.ALL|wx.EXPAND, 5)
        topSizer.Add(btnSizer, 0, wx.ALL|wx.CENTER, 5)

        self.panel.SetSizer(topSizer)
        topSizer.Fit(self)

    def OnFileOpenMenu(self, evt):
        # Args below are: parent, question, dialog title, default answer
        dd = wx.DirDialog(None, "Select directory to open", "~/", 0, (10, 10), wx.Size(400, 300))

        # This function returns the button pressed to close the dialog
        ret = dd.ShowModal()

        # Let's check if user clicked OK or pressed ENTER
        if ret == wx.ID_OK:
            wx.MessageBox('You selected: %s\n' % dd.GetPath(), 'Info',
            wx.OK | wx.ICON_INFORMATION)
        # The dialog is not in the screen anymore, but it's still in memory
        #for you to access it's values. remove it from there.
        dd.Destroy()
        return dd.GetPath()


    def OnCalSelected(self, evt):

        print 'OnCalSelected: %s' % evt.GetDate()
        selected_date = wx.DateTime.Format(evt.GetDate(), DATE_FORMAT)

        self.labelFour.SetLabel('Date:       '+selected_date)

    def onOK(self, event):
        # Do something
        print 'onOK handler'

    def onCancel(self, event):
        self.closeProgram()

    def closeProgram(self):
        self.Close()


# Run the program
if __name__ == '__main__':
    app = wx.App()
    frame = MyForm().Show()
    app.MainLoop()

Open in new window

0
 
ltpittAuthor Commented:
Thanks for your kind help and explanation :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now