Friday, October 14, 2011

Nexsys: Main Window Ui

If you've made it this far, then you will know that our main window is really dull.  It pops up at random, doesn't load anything and generally is rather unimpressive.

This is where we start actually putting some information into our appliction and make it look like an actual application.


Start Researching and Sketching

When I start out designing an interface for an application, the first thing I do is start sketching out the rough design of what I want.  I think about why I'm creating the application in the first place - if it is a replication or alteration of an existing application, why am I doing it?  What about that original application was unsatisfactory to the point that I need to create my own?  I start with those questions to make sure to address the shortcomings of existing software that I'm going to attempt to make better - it helps think about functionally what your software will need to do.

The next step is to look at the design of existing software and try to understand where the interfaces fail to meet the requirements that I am going for.  Ever wish there was a button here or there, or that you want to do something in 4 fewer clicks?  Once you have decided to go down the road of developing your own software, think about all the things that bothered you about the original version, and make sure to include those in your design goals.

Try to visualize how you would chop up and organize an existing app into smaller classes and components that are reusable.  For reference, I'm looking through the Krusader (Linux), Total Commander (Windows), and muCommander (cross-platform)

The Fine Print: One thing to clarify - these posts are a series of training tutorials to get you introduced to cross-platform desktop application development using PyQt.  The end product of this WILL NOT be a fully featured file browsing system - it won't compete with the above applications, and generally, my answer to the above questions would be: I'm satisfied with the applications I have to the point I wouldn't re-write them.  Were it not a good example to get us into PyQt, I would not write this application.

Create the Base Interface

If you've looked at the above links, you'll have a general idea of the look we're going for with our application.  Generally, I'm thinking that I can group each browsing panel together as a single widget (so the filepath navigation and main browser tree and buttons can all be a single widget).

I'll add those as tabbed widgets to the main window - so I want to have two tab widgets placed in a splitter as my main window.

Each of the applications has a command line list at the bottom of the tool, and some of its common actions across the bottom as buttons, so we'll add those in as well.

The toolbars we can add in later as needed, and we'll go ahead and stub in our menubar and actions.

So for now, we'll start laying out just the main window - leaving the contents for the tab widgets as a secondary widget that we'll add in later.

To start - lets just resize the window in the Designer to a nice starting size (something like 664x410) and then set the window title property for our window.

To edit properties on widgets in Designer, you'll need to have the Property Editor open (which, should by default be a tree on the right hand side of the application).

Select the main window and scroll down to where you see the windowTitle property.  It should be in bold in the list.  When a property appears in bold, that is signifying that it is a custom value for that property, overriding the default.

To edit a property, simply click on the value column next to the property you are wishing to change - it'll provide you with an editor based on the property type (a line edit for text, a spinner for an integer, a check box for a boolean, etc.)

To reset a property to its default value, after you've begun editing it in the value column, there will be a button on the right-hand side.  Clicking that will take off any modifications that you've made - and the property column will no longer be shown in bold.

If you try that on our window, you'll see the windowTitle property go from 'Main Window' to a blank string.

For now though, lets switch this value to read 'Nexsys' (or whatever your application is called).

Create the File Menu

Generally, I start out with my menubar and actions, because they're the easiest, and it starts forcing me to think about what methods I'm going to have to implement in my code by thinking over how I want the user to be able to interact with the application.

If you have worked through the Introduction to Designer tutorial, then you should be familiar with at least the Qt Designer basics - if you aren't, I'd recommend working through those.

The first menu we'll make is the file menu.  We'll do this by typing '&File' in the 'Type here' area on our QMainWindow in Designer.  You'll see this will be rendered as 'File', this is from the '&' symbol.

The reason we're including the '&' symbol in the menu name is to define the hotkey symbol for our menu.  When you develop an application, you should follow the standard shortcut combinations that exist for most applciations.  This will really help your user's experience when using your application by keeping things consistent between applications.

We'll go over defining hotkey shortcuts for particular actions in a little bit, but for now, just know that including '&' next to a letter in your menu item's, this will let Qt use the alt-KEY menu navigation for your menu and your users will thank you for it.  (Note: If you want to display an '&' in your menu item, you have to use '&&')
 - (Second Note: Qt will automatically convert the standards for Mac, so while it is Alt-F for Linux & Windows, it will alter automatically for a Mac - one of the benefits of using Qt's built-in systems vs. building your own.)

Now, in your Object Inspector rename the menu from 'menu_File' to 'ui_file_menu'.  If you're unsure of why we're doing this step, make sure to read through the PyQt Code Style Guidelines posts.


Create the New Text File Action

Next up, lets add the New Text File action.

If you click on the new File menu and then click on the 'Type here' area, type '&New Text File...'

The '&' symbol you are now familiar with, but why did we include the '...' after the menu item?

The general standard is that you want to add '...' after any actions in your menu that will prompt the user for more information after they click them.  So, visually this will be an indicator that the action should come with some more input, and most commonly a way to cancel or quit the action after they select it.

Actions that will occur with no further user input should not contain the '...' at the end (such as a Quit).

Rename this action to 'ui_newfile_act' in the Object Inspector.

Create the Other Actions

The rest of the File menu actions will follow the same logic as the first, so go ahead and just block in these actions in the same way we just created the new text file action:
  1. New &Directory..., rename to ui_newdir_act
  2. New &Link..., rename to ui_newlink_act
  3. &View File, rename to ui_viewfile_act
  4. Edit &File, rename to ui_editfile_act
  5. &Copy, rename to ui_copy_act
  6. &Move, rename to ui_move_act
  7. &Quit, rename to ui_quit_act
Create Separators

If you look at your menu now, it can look a bit long and clunky - there is no visual grouping that you get for each action and it just runs together as a long list.

You are able to use Separators to create visual groups of actions for the user to ease their processing of all the options.  This can be done in Designer by Double-Clicking the Add Separator action at the bottom of your menu.  This will add a separator to the bottom of the menu that you can then drag & drop in-between actions to break them up.

I put separators between the New Link and View File actions, and the Move and Quit actions.

Create Additional Menus and Actions

To finish out, we're going to block in the rest of our menus and actions quickly.  Its all the same process, so I'm going to go over it quickly.

If you need more in-depth help on this, then you should read the Qt documentation - as they are very extensive and well documented (which, can sometimes make it hard to navigate, so at least doing these tutorials in conjunction will help you through the navigation).

Anyway, go ahead and create the following menus and actions:

1. &Edit, rename to ui_edit_menu
  • &Cut to Clipboard, rename ui_boardcut_act
  • &Copy to Clipboard, rename to ui_boardcopy_act
  • &Paste from Clipboard, rename to ui_boardpaste_act
  • &Rename, rename to ui_renamefile_act
  • &Delete, rename to ui_deletefile_act
  • Add Separator
  • &Select All, rename to ui_selectall_act
  • U&nselect All, rename to ui_selectnone_act
  • &Invert Selection, rename to ui_selectinvert_act
  • Add Separator
  • &Properties, rename to ui_fileprops_act
2.  &View, rename to ui_view_menu
  • &Detailed View, rename to ui_viewdetails_act
  • &Brief View, rename to ui_viewbrief_act
  • Add Separator
  • Show &Hidden Files, rename to ui_viewhidden_act
  • Add Separator
  • &Refresh, rename to ui_viewrefresh_act
3.  &Go, rename to ui_go_menu
  • &Back, rename to ui_goback_act
  • &Forward, rename to ui_goforward_act
  • &Up, rename to ui_goup_act
  • &Root, rename to ui_goroot_act
  • &Home, rename to ui_gohome_act
4. &Tools, rename to ui_tools_menu
  • &Search..., rename to ui_search_act
  • &Find in Files..., rename to ui_filefind_act
  • Add Separator
  • Start &Terminal, rename to ui_terminal_act
  • Start Terminal &Here, rename to ui_terminalhere_act
5. &Settings, rename to ui_settings_menu
  • Show &Function Buttons, rename to ui_showfuncs_act
  • Show &Command Line, rename to ui_showcmd_act
  • Show St&atus Bar, rename to ui_showstatus_act
  • Show Tool &Bar, rename to ui_showtools_act
  • Add Separator
  • Configure &Shortcuts, rename to ui_configshortcuts_act
  • Configure &Toolbar, rename to ui_configtools_act
  • Configure &Nexsys, rename to ui_configapp_act
6. &Window, rename to ui_window_menu
  • &New Tab, rename to ui_tabnew_act
  • &Duplicate Current Tab, rename to ui_tabcopy_act
  • &Close Current Tab, rename to ui_tabclose_act
  • N&ext Tab, rename to ui_tabnext_act
  • P&revious Tab, rename to ui_tabprev_act
  • Add Separator
  • Swap &Panels, rename to ui_swappanels_act
  • Swap &Sides, rename to ui_swapsides_act
  • &Vertical Mode, rename to ui_verticalmode_act
7. &Help, rename to ui_help_menu
  • Nexsys &Handbook, rename to ui_helpbook_act
  • Nexsys &SDK, rename to ui_helpsdk_act
  • &About Nexsys, rename to ui_helpabout_act
As you can see - there are a lot of actions and functions that we are going to create for this tool.

Don't be worried though - this is exactly why I picked this example - it will take something that is a large, and complex, application, and show you exactly how easy it is to develop if you take it one step at a time.

At this point, this is what your designer file should generally look like:


And if you run the application as a preview, you can test out how the menu navigation is working that you setup using the '&' symbols.

Coming up Next

Up next, we're going to finish flushing out the components for the main window - and setup some properties on a few of our actions that we're going to need.

No comments:

Post a Comment