Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
logiciel:programmation:python:boa:help:boagettingstarted [2020/10/24 16:22] – admin | logiciel:programmation:python:boa:help:boagettingstarted [2022/08/13 22:27] (Version actuelle) – modification externe 127.0.0.1 |
---|
;#; | ;#; |
| |
====== Une visite de l'environnement de développement Boa Constructor ====== | ===== Une visite de l'environnement de développement Boa Constructor ===== |
| |
===== Installation et démarrage de Boa Constructor ===== | ==== Installation et démarrage de Boa Constructor ==== |
| |
Boa s'exécute sur n'importe quelle plate-forme Windows 32 bits ou sur n'importe quelle plate-forme UNIX avec la boîte à outils de fenêtrage GTK+. | Boa s'exécute sur n'importe quelle plate-forme Windows 32 bits ou sur n'importe quelle plate-forme UNIX avec la boîte à outils de fenêtrage GTK+. |
| |
==== Installation sous Windows ==== | === Installation sous Windows === |
| |
* Instructions détaillées sur wxPython.org | * Instructions détaillées sur wxPython.org |
* Lancer le nouveau raccourci pour exécuter l'environnement de développement Boa. | * Lancer le nouveau raccourci pour exécuter l'environnement de développement Boa. |
| |
==== UNIX Installation ==== | === UNIX Installation === |
| |
* Detailed instructions from wxPython.org | * Detailed instructions from wxPython.org |
**//You will now see the tools of the Boa Constructor development environment//** | **//You will now see the tools of the Boa Constructor development environment//** |
| |
{{ :logiciel:programmation:python:boa:help:boa1.png?400 |}} | {{ logiciel:programmation:python:boa:help:boa1.png?400 |}} |
| |
This is divided into three sections/areas: | This is divided into three sections/areas: |
* This section is also used to display e.g. the Debugger or Class Browser | * This section is also used to display e.g. the Debugger or Class Browser |
* It is used to change properties of components and to define events. | * It is used to change properties of components and to define events. |
* [[The Editor Window|Editor/Explorer]] window on the bottom right | * [[fr:logiciel:programmation:python:boa:help:the_editor_window|Editor/Explorer]] window on the bottom right |
* This section has multiple tabs | * This section has multiple tabs |
* Shell - provides access to a Python interpreter, this makes it very easy/confortable to test out small code sections. | * Shell - provides access to a Python interpreter, this makes it very easy/confortable to test out small code sections. |
* Explorer - allows to navigate the file system, gives access to the wxPython demo (via a Plug-in), allows to change your preferences for Boa, and it will have additional tabs, one for each file you are working on | * Explorer - allows to navigate the file system, gives access to the wxPython demo (via a Plug-in), allows to change your preferences for Boa, and it will have additional tabs, one for each file you are working on |
| |
==== Installation from CVS ==== | === Installation from CVS === |
| |
The Boa installation guide on the wxPython wiki page ([[http://wiki.wxpython.org/BoaInstallGuide]]) provides details on how to obtain Boa from CVS | The Boa installation guide on the wxPython wiki page ([[http://wiki.wxpython.org/BoaInstallGuide]]) provides details on how to obtain Boa from CVS |
| |
===== The Palette Window ===== | ==== The Palette Window ==== |
| |
The Palette window is the main window of the Boa Constructor Program. Closing the Palette window will terminate the program. The Palette contains two sections, a toolbar, and a multi-pane notebook. | The Palette window is the main window of the Boa Constructor Program. Closing the Palette window will terminate the program. The Palette contains two sections, a toolbar, and a multi-pane notebook. |
| |
{{ :logiciel:programmation:python:boa:help:boa2.png?400 |Palette Window}} | {{ logiciel:programmation:python:boa:help:boa2.png?400 |Palette Window}} |
| |
The toolbar gives access to the other windows in the Boa Constructor application. You can hold the mouse pointer over the different icons and help tips will appear. These help tips will tell you what the buttons do. | The toolbar gives access to the other windows in the Boa Constructor application. You can hold the mouse pointer over the different icons and help tips will appear. These help tips will tell you what the buttons do. |
In earlier versions there was also a tab for “Dialogs”, to insert the code for e.g. a file dialog you can now use the new “code template” feature. At the place in your code where you want the dialog press “Alt-t” and select from the drop down list. | In earlier versions there was also a tab for “Dialogs”, to insert the code for e.g. a file dialog you can now use the new “code template” feature. At the place in your code where you want the dialog press “Alt-t” and select from the drop down list. |
| |
{{:logiciel:programmation:python:boa:help:wxappicon.png|wx.App Icon}} | {{logiciel:programmation:python:boa:help:wxappicon.png|wx.App Icon}} |
| |
The icon shown above is used to create a new Boa Application (its tool tip is wx.App, refering to the base class it uses). The new application consists of the application source file (App1.py) and the initial frame (Frame1.py). | The icon shown above is used to create a new Boa Application (its tool tip is wx.App, refering to the base class it uses). The new application consists of the application source file (App1.py) and the initial frame (Frame1.py). |
Boa constuctor opens the source code for the new application and the new form in the Editor Window. | Boa constuctor opens the source code for the new application and the new form in the Editor Window. |
| |
==== Toolbar Icons - Application ==== | === Toolbar Icons - Application === |
| |
{{:logiciel:programmation:python:boa:help:toolbarappicons.png|ToolBar Application Icons}} | {{logiciel:programmation:python:boa:help:toolbarappicons.png|ToolBar Application Icons}} |
| |
Clicking the first one will bring the Inspector window to the foreground. | Clicking the first one will bring the Inspector window to the foreground. |
\\ The check box will indicate that a compenent is selected and the text "Nothing selected" will be replaced with e.g. wx.Panel | \\ The check box will indicate that a compenent is selected and the text "Nothing selected" will be replaced with e.g. wx.Panel |
| |
==== Toolbar Icons - Help ==== | === Toolbar Icons - Help === |
| |
{{:logiciel:programmation:python:boa:help:toolbarhelpicons.png|Toolbar Help Icons}} | {{logiciel:programmation:python:boa:help:toolbarhelpicons.png|Toolbar Help Icons}} |
| |
Clicking the first one will bring up Boa help or help for the selected component | Clicking the first one will bring up Boa help or help for the selected component |
\\ Clicking the third one will bring up Python help | \\ Clicking the third one will bring up Python help |
| |
===== The Editor Window ===== | ==== The Editor Window ==== |
| |
The Editor window is one of the three windows which is created when you run Boa Constructor. If you close the Editor Window, you can re-open it from the Palette Window using the {{logiciel:programmation:python:boa:help:editor.jpg|}} Button. | The Editor window is one of the three windows which is created when you run Boa Constructor. If you close the Editor Window, you can re-open it from the Palette Window using the {{logiciel:programmation:python:boa:help:editor.jpg|}} Button. |
* Use one of the options from the 'New' page in the Palette. | * Use one of the options from the 'New' page in the Palette. |
| |
{{ :logiciel:programmation:python:boa:help:boa3.png?400 |Editor - source view}} | {{ logiciel:programmation:python:boa:help:boa3.png?400 |Editor - source view}} |
| |
When a source file is opened, the editor creates a new page for the module. Within that page, the editor creates another notebook to provide alternative views of the file, this depends on the type of file. In this case we show an "App1" and "Frame1", for the Frame1 file three views are shown, 'Source', 'Explore' and 'Events', should you look at the "App1" file you would see 'Application', 'Source' and 'Explore' views. | When a source file is opened, the editor creates a new page for the module. Within that page, the editor creates another notebook to provide alternative views of the file, this depends on the type of file. In this case we show an "App1" and "Frame1", for the Frame1 file three views are shown, 'Source', 'Explore' and 'Events', should you look at the "App1" file you would see 'Application', 'Source' and 'Explore' views. |
The Source View (seen above) shows the source code and allows you to change the source code, unless it has a "blueish" background which indicates that the Frame Designer is open/active for this file. | The Source View (seen above) shows the source code and allows you to change the source code, unless it has a "blueish" background which indicates that the Frame Designer is open/active for this file. |
| |
{{ :logiciel:programmation:python:boa:help:boa3b.png?400 |Editor - Explore view}} | {{ logiciel:programmation:python:boa:help:boa3b.png?400 |Editor - Explore view}} |
The Explore View provides a tree view of the module and the icons shown indicate the following: | The Explore View provides a tree view of the module and the icons shown indicate the following: |
| |
{{:logiciel:programmation:python:boa:help:iconclass.png|Icon - Class}} Classes | {{logiciel:programmation:python:boa:help:iconclass.png|Icon - Class}} Classes |
\\ {{:logiciel:programmation:python:boa:help:iconmethod.png|Icon - Method}} Methods | \\ {{logiciel:programmation:python:boa:help:iconmethod.png|Icon - Method}} Methods |
\\ {{:logiciel:programmation:python:boa:help:iconfunction.png|Icon - Function}} Functions | \\ {{logiciel:programmation:python:boa:help:iconfunction.png|Icon - Function}} Functions |
\\ {{:logiciel:programmation:python:boa:help:iconevent.png|Icon - Event}} Events | \\ {{logiciel:programmation:python:boa:help:iconevent.png|Icon - Event}} Events |
\\ {{:logiciel:programmation:python:boa:help:iconglobal.png|Icon - Global}} Global | \\ {{logiciel:programmation:python:boa:help:iconglobal.png|Icon - Global}} Global |
| |
The 'Explore' Pane shows a Class based view of your source. The methods and attributes of each class in the source are displayed. You can double-click the mouse left button on an attribute or method, and the 'Source' view will display the definition/source code for that item. | The 'Explore' Pane shows a Class based view of your source. The methods and attributes of each class in the source are displayed. You can double-click the mouse left button on an attribute or method, and the 'Source' view will display the definition/source code for that item. |
| |
{{ :logiciel:programmation:python:boa:help:boa3c.png?400 |Editor - Event view}} | {{ logiciel:programmation:python:boa:help:boa3c.png?400 |Editor - Event view}} |
| |
The 'Events' Pane shows a Control based view of the Events you defined using Boa's Inspector. Manually added events outside the Boa generated code will not show here. | The 'Events' Pane shows a Control based view of the Events you defined using Boa's Inspector. Manually added events outside the Boa generated code will not show here. |
</WRAP> | </WRAP> |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarfileicons.png|Editor toolbar - File icons}} | {{logiciel:programmation:python:boa:help:editortoolbarfileicons.png|Editor toolbar - File icons}} |
The icons above allow you to open, close, save, save-as files and Browse forward/backward icons allow you to jump to marked possitions (CTRL-M). | The icons above allow you to open, close, save, save-as files and Browse forward/backward icons allow you to jump to marked possitions (CTRL-M). |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarrunicons.png|Editor toolbar - Run icons}} | {{logiciel:programmation:python:boa:help:editortoolbarrunicons.png|Editor toolbar - Run icons}} |
The icons above let you run the application, run the module or debug the application. | The icons above let you run the application, run the module or debug the application. |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarsourceicons.png|Editor toolbar - source icons}} | {{logiciel:programmation:python:boa:help:editortoolbarsourceicons.png|Editor toolbar - source icons}} |
The icons above let you profile the module, check the source, or start the frame designer (sometimes also refered to as GUI Editor). | The icons above let you profile the module, check the source, or start the frame designer (sometimes also refered to as GUI Editor). |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarcopypasteicons.png|Editor toolbar - copypaste Icons}} | {{logiciel:programmation:python:boa:help:editortoolbarcopypasteicons.png|Editor toolbar - copypaste Icons}} |
The icons above let you Refresh the screen, Undo, Redo, Cut, Copy and Paste. | The icons above let you Refresh the screen, Undo, Redo, Cut, Copy and Paste. |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarsearchicons.png|Editor toolbar - Search icons}} | {{logiciel:programmation:python:boa:help:editortoolbarsearchicons.png|Editor toolbar - Search icons}} |
The icons above let you Find/Replace, Find again, and print the source. | The icons above let you Find/Replace, Find again, and print the source. |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarothersicons.png|Editor toolbar - Other icons}} | {{logiciel:programmation:python:boa:help:editortoolbarothersicons.png|Editor toolbar - Other icons}} |
The icons above let you run to the cursor (in debugger), toggle a breakpoint (you can also use F5), insert module information (Author name etc, this can be customized, see [[#Setting Preferences|Module Info]]), and help. | The icons above let you run to the cursor (in debugger), toggle a breakpoint (you can also use F5), insert module information (Author name etc, this can be customized, see [[#Setting Preferences|Module Info]]), and help. |
| |
* <key>ALT-O</key> (only available with the ErrOutShortcut plug-in) will show the notebook with the Tracebacks, Output, Errors and Tasks tabs or if it is shown will hide it. | * <key>ALT-O</key> (only available with the ErrOutShortcut plug-in) will show the notebook with the Tracebacks, Output, Errors and Tasks tabs or if it is shown will hide it. |
| |
===== The Frame Designer Windows ===== | ==== The Frame Designer Windows ==== |
| |
You access the Frame Designer Window using the frame designer button {{:logiciel:programmation:python:boa:help:designer.jpg|}} on the Editor Window toolbar. The Frame Designer can only be started if the active file is a Form (wx.Panel, wx.Frame etc) or Dialog type file. | You access the Frame Designer Window using the frame designer button {{logiciel:programmation:python:boa:help:designer.jpg|}} on the Editor Window toolbar. The Frame Designer can only be started if the active file is a Form (wx.Panel, wx.Frame etc) or Dialog type file. |
| |
The Designer will display the frame on the screen. The Designer displays the frame as it would appear at runtime. This frame is referred to as the 'Designer'. The Designer also creates two new pages in the Editor. The first one is referred to as the Data View, the second one is the Sizer View. | The Designer will display the frame on the screen. The Designer displays the frame as it would appear at runtime. This frame is referred to as the 'Designer'. The Designer also creates two new pages in the Editor. The first one is referred to as the Data View, the second one is the Sizer View. |
To place the component move the cursor onto the Designer. Click the mouse once in the position where the component is required. Once the component is on the form, it can be moved and resized. You move it by placing the mouse within the component and dragging it. You resize it by dragging one of the eight markers shown on the edge of a selected control. | To place the component move the cursor onto the Designer. Click the mouse once in the position where the component is required. Once the component is on the form, it can be moved and resized. You move it by placing the mouse within the component and dragging it. You resize it by dragging one of the eight markers shown on the edge of a selected control. |
| |
Changes made through the Designer are saved into the applications source code. Changes are saved when you press the Post button {{:logiciel:programmation:python:boa:help:post.jpg|}} There are two Post buttons, one on the Editor's toolbar and one on the Inspector's toolbar. Pressing either will close the Designer and the Data View and generate the source code for the changes. Changes can also be posted by closing the Frame. | Changes made through the Designer are saved into the applications source code. Changes are saved when you press the Post button {{logiciel:programmation:python:boa:help:post.jpg|}} There are two Post buttons, one on the Editor's toolbar and one on the Inspector's toolbar. Pressing either will close the Designer and the Data View and generate the source code for the changes. Changes can also be posted by closing the Frame. |
| |
To Cancel all changes made since opening the Designer, click the Cancel button {{:logiciel:programmation:python:boa:help:cancel.jpg|}} on the Editor or Inspector toolbar. | To Cancel all changes made since opening the Designer, click the Cancel button {{logiciel:programmation:python:boa:help:cancel.jpg|}} on the Editor or Inspector toolbar. |
| |
{{ :logiciel:programmation:python:boa:help:boa4.png?400 |Frame Designer}} | {{ logiciel:programmation:python:boa:help:boa4.png?400 |Frame Designer}} |
| |
The Frame1 titled window above is the Frame Designer window, a wx.Panel (found on the Containers/Layout palette) has been placed in the wx.Frame and into it two wx.Button controls (found on the Buttons palette) have been placed. The button2 control is currently selected and you can see its properties shown in the Inspector window. | The Frame1 titled window above is the Frame Designer window, a wx.Panel (found on the Containers/Layout palette) has been placed in the wx.Frame and into it two wx.Button controls (found on the Buttons palette) have been placed. The button2 control is currently selected and you can see its properties shown in the Inspector window. |
</WRAP> | </WRAP> |
| |
===== The Inspector Window ===== | ==== The Inspector Window ==== |
| |
The Inspector always shows the configuration of the currently selected component. The Inspector contains 4 pages, the Constructor page ('Constr'), the Properties page ('Props'), the Events Page ('Evts') and the Objects Page ('Objs'). | The Inspector always shows the configuration of the currently selected component. The Inspector contains 4 pages, the Constructor page ('Constr'), the Properties page ('Props'), the Events Page ('Evts') and the Objects Page ('Objs'). |
| |
|{{:logiciel:programmation:python:boa:help:boa5.png|Inspector - Constructor}}|The Constructor page allows you to edit properties which are required at object construction time, e.g. the name and style of the component.\\ Look at the wxPython help for the values passed to the constructor for a control. The styles in the manual are of particular importance.\\ Please note that changes to certain constructor parameters only take effect when the control is created.\\ You should change the "Name" property to something which will make sense to someone else or to you in 3 month time!| | |{{logiciel:programmation:python:boa:help:boa5.png|Inspector - Constructor}}|The Constructor page allows you to edit properties which are required at object construction time, e.g. the name and style of the component.\\ Look at the wxPython help for the values passed to the constructor for a control. The styles in the manual are of particular importance.\\ Please note that changes to certain constructor parameters only take effect when the control is created.\\ You should change the "Name" property to something which will make sense to someone else or to you in 3 month time!| |
|{{:logiciel:programmation:python:boa:help:boa5b.png|Inspector - Properties}}|The Properties page gives fine grained control to all properties for this component, e.g. fonts and colours.| | |{{logiciel:programmation:python:boa:help:boa5b.png|Inspector - Properties}}|The Properties page gives fine grained control to all properties for this component, e.g. fonts and colours.| |
|{{:logiciel:programmation:python:boa:help:boa5c.png|Inspector - Events}}|The Events page allows you to select the events which you wish to handle in your code. The events are grouped into logical groups.\\ Creating an event is easy, just click on e.g. "ButtonEvent" and click on "wx.EVT_BUTTON" and Boa will create an "OnButton" event called "OnControlNameButton", obviously you will need to add to the generated source what actions you want to take when a user presses this button.| | |{{logiciel:programmation:python:boa:help:boa5c.png|Inspector - Events}}|The Events page allows you to select the events which you wish to handle in your code. The events are grouped into logical groups.\\ Creating an event is easy, just click on e.g. "ButtonEvent" and click on "wx.EVT_BUTTON" and Boa will create an "OnButton" event called "OnControlNameButton", obviously you will need to add to the generated source what actions you want to take when a user presses this button.| |
|{{:logiciel:programmation:python:boa:help:boa5d.png|Inspector - Objects}}|The Objects page allows you to navigate through your components in an alternative format to the Designer pane. This is particularily useful if you have invisible or overlapping components. Also certain components like the wxStatusBar do not process click events (on MSW) so it has to be selected in the Objects page.| | |{{logiciel:programmation:python:boa:help:boa5d.png|Inspector - Objects}}|The Objects page allows you to navigate through your components in an alternative format to the Designer pane. This is particularily useful if you have invisible or overlapping components. Also certain components like the wxStatusBar do not process click events (on MSW) so it has to be selected in the Objects page.| |
| |
===== Managing the Application ===== | ==== Managing the Application ==== |
| |
When the module being edited is an application, the Editor provides a special Application View. This Application View allows you to easily track the files in your application, and to add new modules, dialogs and other types of files to your application. | When the module being edited is an application, the Editor provides a special Application View. This Application View allows you to easily track the files in your application, and to add new modules, dialogs and other types of files to your application. |
While viewing an Application (any of its views) you may select an item from the 'New' pane in the Palette and it will be added to the Application. | While viewing an Application (any of its views) you may select an item from the 'New' pane in the Palette and it will be added to the Application. |
| |
{{ :logiciel:programmation:python:boa:help:boa6.png?400 |Application}} | {{ logiciel:programmation:python:boa:help:boa6.png?400 |Application}} |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarappicons.png|Editor Toolbar - app icons}} | {{logiciel:programmation:python:boa:help:editortoolbarappicons.png|Editor Toolbar - app icons}} |
| |
The first of the above icons lets you add an existing file to this application. | The first of the above icons lets you add an existing file to this application. |
</WRAP> | </WRAP> |
| |
===== Getting around using Explorer ===== | ==== Getting around using Explorer ==== |
| |
The second page of the Editor notebook contains a page called the Explorer. You use this page to browse various data sources including the filesystem, CVS, Zope, WebDAV, SSH accounts, FTP. | The second page of the Editor notebook contains a page called the Explorer. You use this page to browse various data sources including the filesystem, CVS, Zope, WebDAV, SSH accounts, FTP. |
The python directories are taken from the environment variable PYTHONPATH, and the default locations as compiled into your Python runtime system. | The python directories are taken from the environment variable PYTHONPATH, and the default locations as compiled into your Python runtime system. |
| |
Directories that you use a lot can be added to the Bookmarks section by selecting them and clicking on the Bookmark tool {{:logiciel:programmation:python:boa:help:editortoolbarbookmark.png|Editor Toolbar - Bookmark}} or by using the Edit menu or by right mouse clicking the Directory, note that this item will show next time you start Boa or after you select from the menu Edit/Reload. | Directories that you use a lot can be added to the Bookmarks section by selecting them and clicking on the Bookmark tool {{logiciel:programmation:python:boa:help:editortoolbarbookmark.png|Editor Toolbar - Bookmark}} or by using the Edit menu or by right mouse clicking the Directory, note that this item will show next time you start Boa or after you select from the menu Edit/Reload. |
| |
If you are using Zope, you can access projects in your Zope Server using the Zope option. The default TCP/IP connection information is configured in the Inspector pane or in your Explorer configuration file, Explorer.msw.cfg on Windows or Explorer.gtk.cfg on UNIX. | If you are using Zope, you can access projects in your Zope Server using the Zope option. The default TCP/IP connection information is configured in the Inspector pane or in your Explorer configuration file, Explorer.msw.cfg on Windows or Explorer.gtk.cfg on UNIX. |
| |
{{ :logiciel:programmation:python:boa:help:boa7.png?400 |Explorer}} | {{ logiciel:programmation:python:boa:help:boa7.png?400 |Explorer}} |
| |
It also allows you to access your Preference settings, above the Key bindings are selected in the Explorer and details are shown in the Inspector. | It also allows you to access your Preference settings, above the Key bindings are selected in the Explorer and details are shown in the Inspector. |
</WRAP> | </WRAP> |
| |
===== Using Help ===== | ==== Using Help ==== |
| |
The Boa Constructor environment provides links to different help files from your environment. | The Boa Constructor environment provides links to different help files from your environment. |
Additional help books can be added (see [[#Help books|help books]]). | Additional help books can be added (see [[#Help books|help books]]). |
| |
{{ :logiciel:programmation:python:boa:help:boa8.png |Help - Ctrl-H}} | {{ logiciel:programmation:python:boa:help:boa8.png |Help - Ctrl-H}} |
| |
The easiest and fastes access to help is just about anywhere in Boa via CTRL-H, then key in what you are looking for and Boa will find all references in ALL the helpbooks it knows about (e.g. wxPython, Python etc) and shows it in a display similar to below. | The easiest and fastes access to help is just about anywhere in Boa via CTRL-H, then key in what you are looking for and Boa will find all references in ALL the helpbooks it knows about (e.g. wxPython, Python etc) and shows it in a display similar to below. |
| |
{{ :logiciel:programmation:python:boa:help:boa8b.png?400 |Help - Main}} | {{ logiciel:programmation:python:boa:help:boa8b.png?400 |Help - Main}} |
| |
The help window provides standard HTML based navigation and a search facility. | The help window provides standard HTML based navigation and a search facility. |
* Or mail your question to [[wxPython-users@lists.wxwidgets.org]] if they are not Boa specific | * Or mail your question to [[wxPython-users@lists.wxwidgets.org]] if they are not Boa specific |
| |
====== Tutoriel - Création de notre première application ====== | ===== Tutoriel - Création de notre première application ===== |
| |
Cette section présente un bref tutoriel. Le but de ce tutoriel est de vous familiariser avec l'environnement de développement Boa. Ce tutoriel vous guide étape par étape à travers le processus de construction d'un simple éditeur de texte, appelé Notebook. Après avoir suivi ce tutoriel, vous en saurez pour être efficace avec Boa. | Cette section présente un bref tutoriel. Le but de ce tutoriel est de vous familiariser avec l'environnement de développement Boa. Ce tutoriel vous guide étape par étape à travers le processus de construction d'un simple éditeur de texte, appelé Notebook. Après avoir suivi ce tutoriel, vous en saurez pour être efficace avec Boa. |
* Concevoir vos propres boîtes de dialogue. | * Concevoir vos propres boîtes de dialogue. |
| |
===== Création d'une nouvelle application ===== | ==== Création d'une nouvelle application ==== |
| |
* Choisir un répertoire pour l'application (si nécessaire, le créer) | * Choisir un répertoire pour l'application (si nécessaire, le créer) |
* Créer une nouvelle application avec le bouton de la palette **Nouvelle l'application** ci-dessous :\\ {{:logiciel:programmation:python:boa:help:wxappicon.png|App Icon}} bouton Application - bulle d'aide : **wx.APP** | * Créer une nouvelle application avec le bouton de la palette **Nouvelle l'application** ci-dessous :\\ {{logiciel:programmation:python:boa:help:wxappicon.png|App Icon}} bouton Application - bulle d'aide : **wx.APP** |
| |
{{ :logiciel:programmation:python:boa:help:boa2.png?400 |Palette}} | {{ logiciel:programmation:python:boa:help:boa2.png?400 |Palette}} |
| |
* Enregistrer les fichiers **App1.py** et **Frame1.py** dans le répertoire créé plus haut. Vous pouvez utiliser le bouton <key>Enregistrer</key> de la barre d'outils de l'éditeur. <WRAP center round tip 60%> | * Enregistrer les fichiers **App1.py** et **Frame1.py** dans le répertoire créé plus haut. Vous pouvez utiliser le bouton <key>Enregistrer</key> de la barre d'outils de l'éditeur. <WRAP center round tip 60%> |
* L'application existe, et ne fait qu'afficher un cadre vide. Cliquer sur le bouton <key>Run</key> de la barre d'outils de l'éditeur pour exécuter l'application. | * L'application existe, et ne fait qu'afficher un cadre vide. Cliquer sur le bouton <key>Run</key> de la barre d'outils de l'éditeur pour exécuter l'application. |
| |
{{ :logiciel:programmation:python:boa:help:boa21.png?400 |Editor}} | {{ logiciel:programmation:python:boa:help:boa21.png?400 |Editor}} |
La vue ci-dessus montre dans l'éditeur les deux nouveaux fichiers créés et enregistrés. | La vue ci-dessus montre dans l'éditeur les deux nouveaux fichiers créés et enregistrés. |
| |
{{:logiciel:programmation:python:boa:help:editortoolbarrunicons.png|Run Icons}} | {{logiciel:programmation:python:boa:help:editortoolbarrunicons.png|Run Icons}} |
Un clic sur le bouton <<Démarrer l'application>> (jaune) montre le résultat de la <<programmation>>, c'est à dire juste un cadre vide. | Un clic sur le bouton <<Démarrer l'application>> (jaune) montre le résultat de la <<programmation>>, c'est à dire juste un cadre vide. |
| |
===== Utilisation de l'éditeur graphique pour définir le titre ===== | ==== Utilisation de l'éditeur graphique pour définir le titre ==== |
| |
* Sélectionnerz l'onglet Frame1 dans l'éditeur pour être sûr d'éditer le cadre. | * Sélectionnerz l'onglet Frame1 dans l'éditeur pour être sûr d'éditer le cadre. |
* Démarrer l'éditeur graphique en cliquant sur le bouton {{:logiciel:programmation:python:boa:help:designer.jpg|}} (éditeur graphique) de la barre d'outils de l'éditeur. | * Démarrer l'éditeur graphique en cliquant sur le bouton {{logiciel:programmation:python:boa:help:designer.jpg|}} (éditeur graphique) de la barre d'outils de l'éditeur. |
| |
{{ :logiciel:programmation:python:boa:help:boa22.png?400 |}}Designer}} | {{ logiciel:programmation:python:boa:help:boa22.png?400 |}}Designer}} |
| |
* Le cadre s'affiche comme une zone de dessin (initialement le titre indique <<Frame1>> | * Le cadre s'affiche comme une zone de dessin (initialement le titre indique <<Frame1>> |
* Deux nouveaux volets s'affichent dans l'éditeur : le volet <<Données>> et le volet <<Sizers>>. | * Deux nouveaux volets s'affichent dans l'éditeur : le volet <<Données>> et le volet <<Sizers>>. |
* La fenêtre de l'inspecteur affiche le volet <<Constr>> (constructeur). Ce volet permet de modifier la taille, la position, le style, un nom de variable et le titre d'un composant. Modifier le champ << Titre >>. Donner au cadre le nom << Bloc-Notes >> ; quand on appuie sur <key>retour</key>, le titre de la fenêtre de l'éditeur graphique change. | * La fenêtre de l'inspecteur affiche le volet <<Constr>> (constructeur). Ce volet permet de modifier la taille, la position, le style, un nom de variable et le titre d'un composant. Modifier le champ << Titre >>. Donner au cadre le nom << Bloc-Notes >> ; quand on appuie sur <key>retour</key>, le titre de la fenêtre de l'éditeur graphique change. |
* Il faut enregistrer les modifications avec le bouton <<Valider>> {{:logiciel:programmation:python:boa:help:post.jpg|Post}}, soit sur la barre d'outils de l'inspecteur ou sur celle de l'éditeur. | * Il faut enregistrer les modifications avec le bouton <<Valider>> {{logiciel:programmation:python:boa:help:post.jpg|Post}}, soit sur la barre d'outils de l'inspecteur ou sur celle de l'éditeur. |
* La fenêtre de l'éditeur graphique se ferme. | * La fenêtre de l'éditeur graphique se ferme. |
* Noter que le code source a été mis à jour pour refléter le titre. | * Noter que le code source a été mis à jour pour refléter le titre. |
* L'éditeur indique que le code source est modifié par une astérisque sur les onglets : il faut donc appuyer sur le bouton Enregistrer. | * L'éditeur indique que le code source est modifié par une astérisque sur les onglets : il faut donc appuyer sur le bouton Enregistrer. |
| |
===== Ajouter une barre d'état ===== | ==== Ajouter une barre d'état ==== |
| |
Le premier composant que nous allons ajouter à l'application sera une barre d'état qui indiquera à l'utilisateur ce qui se passe quand le programme s'exécute, donnera des messages d'aide brefs ou d'autres informations. | Le premier composant que nous allons ajouter à l'application sera une barre d'état qui indiquera à l'utilisateur ce qui se passe quand le programme s'exécute, donnera des messages d'aide brefs ou d'autres informations. |
* Sélectionner l'onglet Frame1 dans l'éditeur pour être sûr d'éditer le cadre. | * Sélectionner l'onglet Frame1 dans l'éditeur pour être sûr d'éditer le cadre. |
* Démarrer l'éditeur graphique en cliquant sur le bouton éditeur graphique de la barre d'outils de l'éditeur {{:logiciel:programmation:python:boa:help:designer.jpg|}}. | * Démarrer l'éditeur graphique en cliquant sur le bouton éditeur graphique de la barre d'outils de l'éditeur {{logiciel:programmation:python:boa:help:designer.jpg|}}. |
* Le cadre s'affiche comme une zone de dessin. | * Le cadre s'affiche comme une zone de dessin. |
* Dans la palette, sélectionner l'onglet <<Conteneurs/mise en page>>. Cet onglet contient des composants utilisés avec des cadres, composants dont fait partie la barre d'état. | * Dans la palette, sélectionner l'onglet <<Conteneurs/mise en page>>. Cet onglet contient des composants utilisés avec des cadres, composants dont fait partie la barre d'état. |
* Le bouton changer d'apparence pour indiquer qu'il est pressé. Une case à cocher dans la palette indique le type de composant actuellement sélectionné, ici wx.StatusBar. | * Le bouton changer d'apparence pour indiquer qu'il est pressé. Une case à cocher dans la palette indique le type de composant actuellement sélectionné, ici wx.StatusBar. |
| |
{{ :logiciel:programmation:python:boa:help:boa23.png?400 |Palette - Containers}} | {{ logiciel:programmation:python:boa:help:boa23.png?400 |Palette - Containers}} |
| |
* Déplacer le curseur de la souris sur le cadre de dessin et faire in clic gauche dans la zone de dessin. Cela crée une barre d'état dans le cadre. | * Déplacer le curseur de la souris sur le cadre de dessin et faire in clic gauche dans la zone de dessin. Cela crée une barre d'état dans le cadre. |
* Cliquer sur <<Fields>> pour modifier sa valeur. Le champ affiche un bouton avec **+++**. Cliquer sur le bouton (s'il n'est pas visible, cliquer sur l'extrémité droite de la case). Cela ouvre l'<<éditeur de collection>>. | * Cliquer sur <<Fields>> pour modifier sa valeur. Le champ affiche un bouton avec **+++**. Cliquer sur le bouton (s'il n'est pas visible, cliquer sur l'extrémité droite de la case). Cela ouvre l'<<éditeur de collection>>. |
| |
{{ :logiciel:programmation:python:boa:help:boa23b.png?400 |Inspector - statusbar}} | {{ logiciel:programmation:python:boa:help:boa23b.png?400 |Inspector - statusbar}} |
| |
* L'outil éditeur de collection permet d'ajouter des sous-composantes à des composants. Nous allons ajouter un champ à la barre d'état ((On peut ajouter plusieurs champs)). | * L'outil éditeur de collection permet d'ajouter des sous-composantes à des composants. Nous allons ajouter un champ à la barre d'état ((On peut ajouter plusieurs champs)). |
* Cliquer sur le bouton 'Nouveau' {{:logiciel:programmation:python:boa:help:collectiontoolbarnew.png|Collection Toolbar - New}} de l'éditeur de collection. Ceci crée un nouveau champ dans la barre d'état qui devient le champ en cours de l'inspecteur. | * Cliquer sur le bouton 'Nouveau' {{logiciel:programmation:python:boa:help:collectiontoolbarnew.png|Collection Toolbar - New}} de l'éditeur de collection. Ceci crée un nouveau champ dans la barre d'état qui devient le champ en cours de l'inspecteur. |
* Éditer le champ texte en changeant le nom <<Fields0>> en <<état>>. | * Éditer le champ texte en changeant le nom <<Fields0>> en <<état>>. |
* La barre d'outils de l'éditeur de collection contient un bouton <<Rafraîchir>> {{:logiciel:programmation:python:boa:help:collectiontoolbarrefresh.png|Collection toolbar - Refresh}}. Appuyer sur ce bouton pour voir le changement dans la fenêtre de l'éditeur de collection. | * La barre d'outils de l'éditeur de collection contient un bouton <<Rafraîchir>> {{logiciel:programmation:python:boa:help:collectiontoolbarrefresh.png|Collection toolbar - Refresh}}. Appuyer sur ce bouton pour voir le changement dans la fenêtre de l'éditeur de collection. |
| |
{{ :logiciel:programmation:python:boa:help:boa23c.png?400 |Collection - statusbar}} | {{ logiciel:programmation:python:boa:help:boa23c.png?400 |Collection - statusbar}} |
| |
* Fermer la fenêtre de l'éditeur de collection. Sélectionner la fenêtre de l'éditeur graphique. Cliquer n'importe où dans la zone de dessin pour faire de cadre (Frame1) le composant courant. | * Fermer la fenêtre de l'éditeur de collection. Sélectionner la fenêtre de l'éditeur graphique. Cliquer n'importe où dans la zone de dessin pour faire de cadre (Frame1) le composant courant. |
* Modifier la propriété 'StatusBar'. Le menu déroulant montre notre nouvelle barre d'état ; la sélectionner pour que le cadre gère la barre d'état, c'est à dire qu'il la positionne en bas de l'écran et ajuste sa taille. | * Modifier la propriété 'StatusBar'. Le menu déroulant montre notre nouvelle barre d'état ; la sélectionner pour que le cadre gère la barre d'état, c'est à dire qu'il la positionne en bas de l'écran et ajuste sa taille. |
| |
{{ :logiciel:programmation:python:boa:help:boa23d.png?400 |Inspector - Frame}} | {{ logiciel:programmation:python:boa:help:boa23d.png?400 |Inspector - Frame}} |
| |
* Mettre à jour les modifications du code source à l'aide des boutons Valider {{:logiciel:programmation:python:boa:help:post.jpg|Post}}. | * Mettre à jour les modifications du code source à l'aide des boutons Valider {{logiciel:programmation:python:boa:help:post.jpg|Post}}. |
* Enregistrer les modifications du code source en utilisant le bouton Enregistrer de la barre d'outils de l'éditeur. | * Enregistrer les modifications du code source en utilisant le bouton Enregistrer de la barre d'outils de l'éditeur. |
| |
===== Ajouter une barre de menus ===== | ==== Ajouter une barre de menus ==== |
| |
Nous allons maintenant ajouter une barre de menus à l'application. Une barre de menus est un élément courant des programmes Windows. Notre barre de menu contiendra deux entrées, Fichier et Aide. La sélection d'un de ces menus affiche un menu déroulant. L'utilisateur peut sélectionner une option dans le menu déroulant. | Nous allons maintenant ajouter une barre de menus à l'application. Une barre de menus est un élément courant des programmes Windows. Notre barre de menu contiendra deux entrées, Fichier et Aide. La sélection d'un de ces menus affiche un menu déroulant. L'utilisateur peut sélectionner une option dans le menu déroulant. |
| |
* Sélectionner l'onglet Frame1 dans l'éditeur pour être sûr d'éditer le cadre. | * Sélectionner l'onglet Frame1 dans l'éditeur pour être sûr d'éditer le cadre. |
* Démarrer l'éditeur graphique en cliquant sur le bouton éditeur graphique {{:logiciel:programmation:python:boa:help:designer.jpg|Designer Button}} sur la barre d'outils de l'éditeur. | * Démarrer l'éditeur graphique en cliquant sur le bouton éditeur graphique {{logiciel:programmation:python:boa:help:designer.jpg|Designer Button}} sur la barre d'outils de l'éditeur. |
* L'éditeur graphique ajoute deux volets dans la fenêtre de l'Éditeur : <<Données>> et <<Sizer>>. Dans la palette, sélectionner l'onglet <<Divers (données)>>. Le menu déroulant (wx.Menu) est l'un des composants de cet onglet. | * L'éditeur graphique ajoute deux volets dans la fenêtre de l'Éditeur : <<Données>> et <<Sizer>>. Dans la palette, sélectionner l'onglet <<Divers (données)>>. Le menu déroulant (wx.Menu) est l'un des composants de cet onglet. |
* Survoler les boutons à la souris. ALes bulles d'aide montrent que l'un de ces boutons représente le contrôle wx.Menu ; c'est celui que nous voulons. Cliquer sur ce bouton. | * Survoler les boutons à la souris. ALes bulles d'aide montrent que l'un de ces boutons représente le contrôle wx.Menu ; c'est celui que nous voulons. Cliquer sur ce bouton. |
* Le bouton changer d'apparence pour indiquer qu'il est pressé. La palette contient une case à cocher qui indique le type de composant actuellement sélectionné, ici wx.Menu. | * Le bouton changer d'apparence pour indiquer qu'il est pressé. La palette contient une case à cocher qui indique le type de composant actuellement sélectionné, ici wx.Menu. |
| |
{{ :logiciel:programmation:python:boa:help:boa24.png?400 |Designer - Menu}} | {{ logiciel:programmation:python:boa:help:boa24.png?400 |Designer - Menu}} |
| |
* Faire un clic gauche soit dans l'éditeur, soit dans l'éditeur graphique (attention dans ce cas à cliquer sur la zone Frame1 et non sur la barre d'état). | * Faire un clic gauche soit dans l'éditeur, soit dans l'éditeur graphique (attention dans ce cas à cliquer sur la zone Frame1 et non sur la barre d'état). |
* La barre d'outils de l'éditeur de collection contient un bouton Refresh. Appuyer sur ce bouton pour voir les changements dans la fenêtre de l'éditeur de collection. | * La barre d'outils de l'éditeur de collection contient un bouton Refresh. Appuyer sur ce bouton pour voir les changements dans la fenêtre de l'éditeur de collection. |
| |
{{ :logiciel:programmation:python:boa:help:boa24b.png?400 |Collection - About}} | {{ logiciel:programmation:python:boa:help:boa24b.png?400 |Collection - About}} |
| |
* Dans l'inspecteur, sélectionner le Panneau Événements pour configurer l'action qui se produit lorsque l'élément de menu 'A propos' est sélectionné. Lorsque l'élément de menu 'A propos' est sélectionné, un événement appelé EVT_MENU est généré et envoyé à notre programme. Nous devons ajouter une méthode à notre classe pour gérer cet événement. | * Dans l'inspecteur, sélectionner le Panneau Événements pour configurer l'action qui se produit lorsque l'élément de menu 'A propos' est sélectionné. Lorsque l'élément de menu 'A propos' est sélectionné, un événement appelé EVT_MENU est généré et envoyé à notre programme. Nous devons ajouter une méthode à notre classe pour gérer cet événement. |
| |
|{{ :logiciel:programmation:python:boa:help:boa24c.png?200 |Inspector - Event}}|<WRAP box 60%> | |{{ logiciel:programmation:python:boa:help:boa24c.png?200 |Inspector - Event}}|<WRAP box 60%> |
* Le côté gauche de la fenêtre des événements montre les groupes d'événements disponibles. Pour menuitem, il n'y a que le groupe 'MenuEvent'. Sélectionner ce groupe. | * Le côté gauche de la fenêtre des événements montre les groupes d'événements disponibles. Pour menuitem, il n'y a que le groupe 'MenuEvent'. Sélectionner ce groupe. |
* Le côté droit de la fenêtre d'événements affiche maintenant les événements dans le groupe sélectionné. Pour le menu, il n'y a qu'un seul événement EVT_MENU dans le groupe «MenuEvent». Double-cliquer sur cet événement. | * Le côté droit de la fenêtre d'événements affiche maintenant les événements dans le groupe sélectionné. Pour le menu, il n'y a qu'un seul événement EVT_MENU dans le groupe «MenuEvent». Double-cliquer sur cet événement. |
* Sélectionner le volet Propriétés («Props») dans l'Inspecteur. Modifiez le champ 'MenuBar. C'est un menu pop-up. Sélectionner la nouvelle barre de menu self.menuBar1. Cette propriété définit le menuBar à associer au cadre. | * Sélectionner le volet Propriétés («Props») dans l'Inspecteur. Modifiez le champ 'MenuBar. C'est un menu pop-up. Sélectionner la nouvelle barre de menu self.menuBar1. Cette propriété définit le menuBar à associer au cadre. |
| |
{{ :logiciel:programmation:python:boa:help:boa24d.png?400 |Inspector - Frame}} | {{ logiciel:programmation:python:boa:help:boa24d.png?400 |Inspector - Frame}} |
| |
* Enregistrer les modifications à l'aide d'un bouton Valider pour fermer le concepteur et laisser Boa générer le code source. | * Enregistrer les modifications à l'aide d'un bouton Valider pour fermer le concepteur et laisser Boa générer le code source. |
* Quand on sélectionne une option de menu, le texte d'aide apparaît dans la barre d'état. | * Quand on sélectionne une option de menu, le texte d'aide apparaît dans la barre d'état. |
| |
{{ :logiciel:programmation:python:boa:help:boa24e.png?400 |Frame1}} | {{ logiciel:programmation:python:boa:help:boa24e.png?400 |Frame1}} |
| |
===== Ajout du contrôle texte ===== | ==== Ajout du contrôle texte ==== |
| |
La tâche suivante consiste à ajouter du texte principal contrôle d'édition à notre cadre. Ce contrôle s'appelle wx.TextCtrl. | La tâche suivante consiste à ajouter du texte principal contrôle d'édition à notre cadre. Ce contrôle s'appelle wx.TextCtrl. |
</WRAP> | </WRAP> |
| |
{{ :logiciel:programmation:python:boa:help:boa25.png?400 |Inspector - TextCtrl}} | {{ logiciel:programmation:python:boa:help:boa25.png?400 |Inspector - TextCtrl}} |
| |
* Renommer le champ texte. Le nom par défaut est «textCtrl1». Le renommer en «TextEditor». | * Renommer le champ texte. Le nom par défaut est «textCtrl1». Le renommer en «TextEditor». |
* Exécuter l'application. | * Exécuter l'application. |
| |
{{ :logiciel:programmation:python:boa:help:boa25a.png?400 |TextEditor}} | {{ logiciel:programmation:python:boa:help:boa25a.png?400 |TextEditor}} |
| |
* Le champ éditeur de texte est automatiquement redimensionné à l'espace disponible. | * Le champ éditeur de texte est automatiquement redimensionné à l'espace disponible. |
* Les fonctionnalités couper et coller sont également disponibles par défaut, ainsi que le marquage de bloc. | * Les fonctionnalités couper et coller sont également disponibles par défaut, ainsi que le marquage de bloc. |
| |
===== Ajout des fonctionnalités du Menu Fichier ===== | ==== Ajout des fonctionnalités du Menu Fichier ==== |
| |
La tâche suivante consiste à interagir avec l'utilisateur pour implémenter les fonctionnalités des menu. Des boîtes de dialogue sont utilisées pour saisir l'entrée de l'utilisateur. Ces boîtes de dialogue sont modales, c'est à dire qu'on ne pas utiliser les autres fenêtres de l'application en cours jusqu'à ce que le dialogue soit fermé. | La tâche suivante consiste à interagir avec l'utilisateur pour implémenter les fonctionnalités des menu. Des boîtes de dialogue sont utilisées pour saisir l'entrée de l'utilisateur. Ces boîtes de dialogue sont modales, c'est à dire qu'on ne pas utiliser les autres fenêtres de l'application en cours jusqu'à ce que le dialogue soit fermé. |
* Puis, l'option de menu "Fichier/Enregistrer sous" a été sélectionnée | * Puis, l'option de menu "Fichier/Enregistrer sous" a été sélectionnée |
| |
{{ :logiciel:programmation:python:boa:help:boa26.png?400 |Editor}} | {{ logiciel:programmation:python:boa:help:boa26.png?400 |Editor}} |
| |
===== Créer une fenêtre de dialogue ===== | ==== Créer une fenêtre de dialogue ==== |
| |
Les boîtes de dialogue permettent d'interagir avec l'utilisateur et de récupérer les valeurs entrées. Précédemment, nous avons utilisé la boîte de dialogue pré-construite **wx.FileDialog** ; nous allons maintenant développer notre propre boîte de dialogue pour l'option de menu **A propos**. | Les boîtes de dialogue permettent d'interagir avec l'utilisateur et de récupérer les valeurs entrées. Précédemment, nous avons utilisé la boîte de dialogue pré-construite **wx.FileDialog** ; nous allons maintenant développer notre propre boîte de dialogue pour l'option de menu **A propos**. |
</WRAP>Quitter l'application et revenir à Boa. | </WRAP>Quitter l'application et revenir à Boa. |
* Nous allons maintenant ajouter des champs à la boîte de dialogue. Pour cet exercice, nous utilisons un fichier bitmap appelé **Boa.jpg**. On peut aussi en créer un à l'aide d'un utilitaire comme paint. Copier le bitmap dans le répertoire de l'application. | * Nous allons maintenant ajouter des champs à la boîte de dialogue. Pour cet exercice, nous utilisons un fichier bitmap appelé **Boa.jpg**. On peut aussi en créer un à l'aide d'un utilitaire comme paint. Copier le bitmap dans le répertoire de l'application. |
* Sélectionner le volet **Dialog1.py**. Démarrer l'éditeur graphique en cliquant sur le bouton {{:logiciel:programmation:python:boa:help:designer.jpg|Designer}}. | * Sélectionner le volet **Dialog1.py**. Démarrer l'éditeur graphique en cliquant sur le bouton {{logiciel:programmation:python:boa:help:designer.jpg|Designer}}. |
* Nous allons d'abord ajouter une étiquette à la boîte de dialogue. Dans la palette, volet **Composants de base**, sélectionner le contrôle **wx.StaticText**. Cliquer dans l'éditeur graphique pour créer le contrôle. | * Nous allons d'abord ajouter une étiquette à la boîte de dialogue. Dans la palette, volet **Composants de base**, sélectionner le contrôle **wx.StaticText**. Cliquer dans l'éditeur graphique pour créer le contrôle. |
* Dans l'inspecteur, mettre la valeur du champ **Label** à "Bloc-Notes - Simple éditeur de texte". Notez que l'étiquette s'agrandit dans l'éditeur graphique pour accueillir le texte. | * Dans l'inspecteur, mettre la valeur du champ **Label** à "Bloc-Notes - Simple éditeur de texte". Notez que l'étiquette s'agrandit dans l'éditeur graphique pour accueillir le texte. |
Lancer l'application. Le nouveau dialogue devrait ressembler à ceci : | Lancer l'application. Le nouveau dialogue devrait ressembler à ceci : |
| |
{{ :logiciel:programmation:python:boa:help:boa27.png?400 |About Dialog}} | {{ logiciel:programmation:python:boa:help:boa27.png?400 |About Dialog}} |
| |
**Félicitations: Vous avez construit votre première application en utilisant Boa constructeur. Votre éditeur est terminé. Dans ce tutoriel, vous avez utilisé les composants de base de Boa.** | **Félicitations: Vous avez construit votre première application en utilisant Boa constructeur. Votre éditeur est terminé. Dans ce tutoriel, vous avez utilisé les composants de base de Boa.** |
* Concevoir vos propres boîtes de dialogue. | * Concevoir vos propres boîtes de dialogue. |
| |
===== Creating an application window using sizers ===== | ==== Creating an application window using sizers ==== |
| |
Sizers are a great way to ensure that your GUI layout is nice and clean. They come in especially handy when you do not know exactly how much space a control needs and/or should be allowed to use, this can be the case when you internationalize your application (I18N) or for such controls as lists or grids where you like to give as much space as possible to them (or maybe as little as practical). | Sizers are a great way to ensure that your GUI layout is nice and clean. They come in especially handy when you do not know exactly how much space a control needs and/or should be allowed to use, this can be the case when you internationalize your application (I18N) or for such controls as lists or grids where you like to give as much space as possible to them (or maybe as little as practical). |
* Select from the menu Edit the option Add module runner. This will add some code to your file so you can run it without having to have a separate wx.App file. | * Select from the menu Edit the option Add module runner. This will add some code to your file so you can run it without having to have a separate wx.App file. |
* Save the file and you can run this application, you will see just Frame1 in the title bar and a grey background. | * Save the file and you can run this application, you will see just Frame1 in the title bar and a grey background. |
* Select the AddressEntry pane. Start the Designer by clicking on the button {{:logiciel:programmation:python:boa:help:designer.jpg|Designer}}. | * Select the AddressEntry pane. Start the Designer by clicking on the button {{logiciel:programmation:python:boa:help:designer.jpg|Designer}}. |
* On the palette, select the 'Containers/Layout' pane. Click on the wx.Panel button to select it and click anywhere within the AddressEntry frame. This will drop the panel onto your frame. | * On the palette, select the 'Containers/Layout' pane. Click on the wx.Panel button to select it and click anywhere within the AddressEntry frame. This will drop the panel onto your frame. |
* On the same palette pane click on the wx.BoxSizer button to select it and click anywhere on the wx.Panel you just added to your frame. You should see a yellow line around your panel. | * On the same palette pane click on the wx.BoxSizer button to select it and click anywhere on the wx.Panel you just added to your frame. You should see a yellow line around your panel. |
* From the "Basic Controls" Palette pane select the wx.StaticText control and drop it onto the top left red area and to the right of it drop a wx.TextCtrl and then repeat this until your Designer screen and the fgsFields collection editor look something along these lines. | * From the "Basic Controls" Palette pane select the wx.StaticText control and drop it onto the top left red area and to the right of it drop a wx.TextCtrl and then repeat this until your Designer screen and the fgsFields collection editor look something along these lines. |
| |
{{ :logiciel:programmation:python:boa:help:boa28.png?400 |Designer and Collection Editor}} | {{ logiciel:programmation:python:boa:help:boa28.png?400 |Designer and Collection Editor}} |
| |
* Make sure to rename the controls to names which make sense (i.e. firstName, lastName, address, postalCode, city and country). | * Make sure to rename the controls to names which make sense (i.e. firstName, lastName, address, postalCode, city and country). |
* So, now you should see something like this in the Designer. | * So, now you should see something like this in the Designer. |
| |
{{ :logiciel:programmation:python:boa:help:boa28b.png?400 |Address entry form 1}} | {{ logiciel:programmation:python:boa:help:boa28b.png?400 |Address entry form 1}} |
| |
* If you run it at this point and resize the window you can see the sizers at work. | * If you run it at this point and resize the window you can see the sizers at work. |
* When you run the application you should see something along these lines. | * When you run the application you should see something along these lines. |
| |
{{ :logiciel:programmation:python:boa:help:boa28c.png?400 |Address entry form}} | {{ logiciel:programmation:python:boa:help:boa28c.png?400 |Address entry form}} |
| |
* We will also need some buttons for this, so we can add, delete, save and close this form. | * We will also need some buttons for this, so we can add, delete, save and close this form. |
* Repeat this for the others but name them delete, save and close and use the appropriate wx.ID_ entries (having access to the stock button ID's is new in Boa 0.6.0, it will only work if you blank the label.) | * Repeat this for the others but name them delete, save and close and use the appropriate wx.ID_ entries (having access to the stock button ID's is new in Boa 0.6.0, it will only work if you blank the label.) |
| |
{{ :logiciel:programmation:python:boa:help:boa28d.png?400 |Address form final}} | {{ logiciel:programmation:python:boa:help:boa28d.png?400 |Address form final}} |
| |
* You should now see something like the above when you run it. | * You should now see something like the above when you run it. |
For coding guide lines you might also want to consult the wxPython style guide [[http://wiki.wxpython.org/index.cgi/wxPython_Style_Guide]]. | For coding guide lines you might also want to consult the wxPython style guide [[http://wiki.wxpython.org/index.cgi/wxPython_Style_Guide]]. |
| |
====== Other Useful Items ====== | ===== Other Useful Items ===== |
| |
===== Setting Preferences ===== | ==== Setting Preferences ==== |
| |
The Boa Constructor tool provides a number of features which can be customised by you. | The Boa Constructor tool provides a number of features which can be customised by you. |
Most of the customization settings can be set by using the Editor Explorer View. Click on Preferences and it shows you something similar to the image below. | Most of the customization settings can be set by using the Editor Explorer View. Click on Preferences and it shows you something similar to the image below. |
| |
{{ :logiciel:programmation:python:boa:help:boa31.png?400 |Preferences}} | {{ logiciel:programmation:python:boa:help:boa31.png?400 |Preferences}} |
| |
To change settings double click on either 'General', 'Platform specific' or 'Key bindings' and the properties of each will be shown in the Inspector as shown below: | To change settings double click on either 'General', 'Platform specific' or 'Key bindings' and the properties of each will be shown in the Inspector as shown below: |
| |
| {{:logiciel:programmation:python:boa:help:boa31b.png|General}} | {{:logiciel:programmation:python:boa:help:boa31c.png|Platform}} | {{:logiciel:programmation:python:boa:help:boa31d.png|Key bindings}} | | | {{logiciel:programmation:python:boa:help:boa31b.png|General}} | {{logiciel:programmation:python:boa:help:boa31c.png|Platform}} | {{logiciel:programmation:python:boa:help:boa31d.png|Key bindings}} | |
| |
==== Help books ==== | === Help books === |
| |
Boa by default includs its help books and the ones for wxPython and Python. | Boa by default includs its help books and the ones for wxPython and Python. |
However if you like to add others you can do so by selecting Preferences/Help Books and right mouse click in the right pane of the Explorer. Select 'Add new Item' and browse to find the '.hpp' file. | However if you like to add others you can do so by selecting Preferences/Help Books and right mouse click in the right pane of the Explorer. Select 'Add new Item' and browse to find the '.hpp' file. |
| |
{{ :logiciel:programmation:python:boa:help:boa31e.png?400 |Help book}} | {{ logiciel:programmation:python:boa:help:boa31e.png?400 |Help book}} |
| |
==== Bookmarks ==== | === Bookmarks === |
| |
If you like to add additional bookmarks just right mouse click on the folder you like to add within the Explorer. | If you like to add additional bookmarks just right mouse click on the folder you like to add within the Explorer. |
| |
==== Transport ==== | === Transport === |
| |
Adding additional transports works similar to the bookmarks, select the transport type on the left hand side of the Explorer view, e.g. 'Zope' and then right mouse click in the right hand side and select 'New' and then complete the information in the Inspector. | Adding additional transports works similar to the bookmarks, select the transport type on the left hand side of the Explorer view, e.g. 'Zope' and then right mouse click in the right hand side and select 'New' and then complete the information in the Inspector. |
| |
{{ :logiciel:programmation:python:boa:help:boa31f.png?400 |Transport}} | {{ logiciel:programmation:python:boa:help:boa31f.png?400 |Transport}} |
| |
==== Module Info ==== | === Module Info === |
| |
You might want to change the following section in the file 'prefs.rc' stored in your user preference directory, on a Windows system this is by default in 'driveletter:\Documents and Settings\username\.boa-constructor'. | You might want to change the following section in the file 'prefs.rc' stored in your user preference directory, on a Windows system this is by default in 'driveletter:\Documents and Settings\username\.boa-constructor'. |
* Commented the 'Preferences.staticInfoPrefs' line as I don't need it | * Commented the 'Preferences.staticInfoPrefs' line as I don't need it |
| |
After restarting Boa and clicking on the button {{:logiciel:programmation:python:boa:help:editortoolbaraddmodulinfo.png|Module Info}} Boa will insert the following into the selected file (in this case Frame1.py). | After restarting Boa and clicking on the button {{logiciel:programmation:python:boa:help:editortoolbaraddmodulinfo.png|Module Info}} Boa will insert the following into the selected file (in this case Frame1.py). |
| |
<code> | <code> |