current position:Home>Python application software development tool - tkinterdesigner v1.0 5.1 release!

Python application software development tool - tkinterdesigner v1.0 5.1 release!

2022-01-29 13:52:52 Huoyun cave red boy

  Flint town network undertaking engine , Research and development of tool products , Those in need Email or QQ contact .

                        2021 Years. , learn Python Write software , Still in the handwriting interface ? Still packing ? Still confused about the future ?

Today I'd like to introduce you to a new friend :TKinterDesigner 

                    Focus on Tkinter Desktop application software development , Make everything simple !

TKinterDesigner Instructions

Author Honghaier
Version V1.5.1
Last Update Date 2021-07-07
Twitter: [email protected]_game
Email: [email protected]
QQ  Group 100180960

Official website :www.tkinterdesigner.com

GitHub: https://github.com/honghaier-game/TKinterDesigner.git

B Stop video tutorial :《TKinterDesigner》 From entry to mastery Section 1 _ Bili, Bili _bilibili
 

TKinterDesigner What is it? ?

Tkinterdesigner It's based on python Development tools , Used for development based on tkinter Interface python Application project . But the biggest difference between it and other types of development tools is , It provides a complete development process , at present python There is no shortage of development IDE, What is lacking is a reasonable and scientific development process , What is missing is the auxiliary tools to deal with a large number of module directions .Tkinterdesigner It's a set Python Solutions for application software development , Including from project creation to interface design , And then to the overall development process of event logic editing and debugging, running to packaging and publishing , And the resource platform and developer ecology established on this basis .

TKinterDesigner What is the development process of ?

TKinterDesigner What are the functions ?

Tkinterdesigner v1.5.1 The version includes the following ten main functions :

  1. project management : Create and open a project .

  2. file management : Create interface 、 Creating files and importing project resources .

  3. Interface design : What you see is what you get by dragging Tkinter Interface .

  4. Control settings : Set the basic properties of the control .

  5. Variable binding : by Tkinter Control binding custom variable .

  6. Event response : by Tkinter Controls the mapping between events and functions .

  7. Logic writing : The logic code of event function .

  8. Debugging operation : call Python Command debugging 、 Run the project .

  9. packaged applications : call Python Command to package a project exe.

  10. Custom module import : Import and call custom module .

TKinterDesigner start-up :

double-click TKinterDesigner Program , You can see a console interface ( Be careful : If not installed Python, Please install Python 3.x, If it is already installed but not installed Python Add the installation directory to the system Path, The pop-up menu for setting the current needs will pop up Python The installation directory is used for runtime calls Python command ), On this page , You can select the language in the upper right corner as needed , Five languages are currently available : English , Simplified Chinese , Traditional Chinese , Japanese , Korean . Here we choose simplified Chinese , If our current version is not the latest version , We can see the prompt of the latest version , Click to open the download page of the latest version .

It is used offline by default , If you need to use membership and export functions , You can click on the GUEST Icon to log in .

TKinterDesigner Sign up and log in :

Click on Guest Icon , You will see a login interface as follows .

Enter your account and password and click ” Sign in “ Button to log in , If you don't have an account , You can click on the ” register ?“ Enter the registration interface with text , Fill in “ account number ",” password “, Click... After email and other information “ register “ Button , After successful registration, you will automatically log in . If you don't want to register , You can also click ” Offline Use “.

After successful login , You will enter the project management page , The login name... Will be displayed here , You will have more membership interests , For example, display “ Component Market ” and “ Skin Market ”, And can be exported directly EXE Program .

TKinterDesigner Functional specifications :

1. project management :

The project management page provides options for 5 Tabs :

(1) New projects :

Five template examples are provided , Including blank interface items 、 Dialog project 、 Single document project 、 Multi document projects and web crawlers . You just need to select the appropriate item , Click on “ determine ” You can complete the establishment of the project . If you need to change the project path , You can click “ alternate path ” Make changes .

<1>." Empty interface " project

If we choose an empty interface , And then click “ determine ”.

We choose ” Dialog box “ project , And then click “ determine ”. In this main design interface , We can see that its layout is : (1) Top main menu : Including the main menu items of the software , It's divided into "TKinterDesigner"、" edit "、" View "、" help " Four items , among "TKinterDesigner" The most important thing is to have " Set up " term , In the setting item , We can TKinterDesigner Some of the options are set , Let me briefly introduce .

First of all “ Common settings ”, There are four options under it :

  • Python Catalog : Yes, I will Python Set the directory to the system Path Users of , It needs to be set correctly here to run and publish normally .

  • Color scheme : Provide dark and light color schemes for users to choose , Default dark , It may be expanded as needed in the future .

  • Language : Provide simplified Chinese , Traditional Chinese , English , Japanese , Korean supports five languages , Follow up and expand as needed .

  • Border transparent color value : It is used when the dialog box is in fillet shape when there is no title bar , The transparent color value set when the transparent color of the border is used for hollowing out the fillet .

And then there was “ Design operation ” term .

  • Save automatically : Here you can set whether to save automatically or manually , Auto save by default , Is to save every operation . If you save it manually , You need to press... When you need to save Ctrl+S To save .

  • Number of operation records : Used to set the maximum number of steps that can be saved .

  • Control drag method : Generally, it is directly dragged and moved with the mouse , You can also choose CTRL key + Drag and move with the left mouse button , But it always supports dragging and moving with the middle mouse button .

  • Control wheel zoom : Generally, the disposable mask is directly used for dragging and moving , You can also choose CTRL key + Drag and move with the left mouse button , But it always supports dragging and moving with the middle mouse button .

The third is “ Code editing ” term .

  • font size : Text size setting of code area .

  • Font name : Text font setting of code area .

  • Mouse Wheel Zoom : Select the corresponding method to zoom the font directly through the mouse wheel .

(2) Shortcut buttons under the main menu : The frame button can show or hide the frame structure tree , The run button can quickly run the project for testing , The Publish button can package and publish the project as EXE Program . in addition , There are also some common alignment settings , Text font , Foreground background color , Picture background shortcut button .

(3) Leftmost project framework file tree : Includes a list of all files in the project . remember : You can also add a form interface by right clicking the pop-up menu 、 add to python File or import resource file . If you are designing an interface , The frame structure tree will affect your viewing window space , You can click " frame " Button to show or hide it .

(4) Control and module toolbar : For common controls needed in interface design , I listed them here . Although not all , But with the update , I believe it will be gradually enriched . ad locum , The module selection area is used to import custom modules . In the actual case project , There are some customized module classes and cases used in the project , for example 'Express' or 'ChatServer', You can have a little look at , It only needs certain design constraints to use , In the customization module section later, we will talk about .

(5) Central design preview area : Main visual areas of interface design . You can drag here 、 Place and stretch all necessary interface controls . The generated interface is available .

(6) List tree of all controls in the upper right corner of the current interface : List all the controls in the current interface . You can click the corresponding tree item to select the corresponding control , You can also delete it in the pop-up menu by right clicking the mouse .

(7) The property list item of the currently selected control in the lower right corner : List all properties corresponding to the currently selected control . You can double-click the corresponding property item to modify it here .

(8) The message text at the bottom : Displays the position and size information of the current control .

<2>." Dialog box " project

“ Empty interface ” Projects give developers the easiest way to design interfaces and projects from scratch , But if you want to develop a project based on other existing templates , You can return to the project management console through the close button in the upper right corner , And then choose ” Dialog box “ Project template .

Once created , We will immediately enter a project with a simple dialog .

stay ” Dialog box “ In the project , We have carried out the basic simple interface design , And the corresponding logic function is added to the button event , You can directly click on the upper right corner ” function “ To try it .

This is a simple example , But most of the time , This may be an example of high reuse rate .

<3>." Single file " project

Go back to the console again , Let's take another look at the project template of the order document :

Once created , We will see a single document Python Editor project .

Run up , You can write code directly with it .

In this project , You can see that it has a complete menu , How is this done ?

I explained this process in detail in the screenshot above , Once you set up the menu ,TKinterDesigner The corresponding response message function will be automatically created for you , You just need to be in the corresponding cmd.py Just write the specific logic code for the message function of the menu item in , You can try more in later projects .

<3>." Multiple documents " project

Go back to the console again , Let's take a look at the multi document project template :

Once created , We will see a multi document Python Editor project , It uses a split form .

In this project , We realize the segmentation of form and page embedding , You can use this function to make some independent interfaces and combine them into one interface by embedding ,TKinterDesigner At present, we support Frame,NoteBook and PanedWindow Three embedding modes . among Frame Is used to embed a page ,NoteBook Used to embed the corresponding page for each page ,PanedWindow It is used to embed the corresponding page for the two divided parts , During operation, you only need to set according to the corresponding attributes .

In this case , We can see the runtime , Click the tree item file on the left , The text box on the right will display the corresponding content , And it can run and print as a single document Python File results .

<4>." Web crawler " project

Web crawlers are now a hot direction , We also put him into the project template , In this project , Our multi document based framework , Realized a network crawling picture project .

In order to better attract popularity , Here we use an example of downloading beautiful pictures to demonstrate , If you're in a bad mood sometimes , You can relax your eyes more .

The above is an example of four new project templates , Although it can't meet all the project needs , But I will continue to work hard , You are also welcome to put forward valuable directional suggestions , If selected , I will add it to the template and provide it .

(2) Open the project :

All items we create will appear in this panel list . We just need to choose the items we need , And click the “ determine ” Entry project . The first button displayed as a plus sign is used to pop up the file " Browse " Dialog box opens items on your computer that are not in the list .

(3) Project instance :

I provide some small cases for reference , Developers can open learning , So as to understand the framework and implementation of some similar small projects .

These cases include :

  1. Register call : Demonstrate that another registration dialog box pops up by clicking the button event in one interface .

  2. SQLite Add or delete check change : Demo yes Python The database that comes with it SQLite To add, delete, check and change .

  3. Embedded panel : Show me how to draw on the drawing board Canvas And tabs Notebook Embed other interfaces in .

  4. Express inquiry : Demonstrate how to use the self-made module plug-in to complete the functions of Express query and interface control interaction .

  5. Calculator : Demonstrates how to quickly develop a calculator software that can perform addition, subtraction, multiplication and division .

  6. Internet chat : Demonstrates how to develop a server and client chat program software with interface .

  7. Stock price inquiry : Demonstrates how to call the stock query interface for stock query .

  8. browser : Demonstrates how to develop your own browser software .

These examples use TKinterDesigner Design and development of , It makes us feel truly proud , Because in the whole process , We didn't spend much time on interface design and event handling , Only focus on the core function classes can quickly complete the development of the project . Later, we will add more example projects , To help you better learn and master TKinterDesigner.

2. file management

We turn on 《 Calculator 》 This project example , You can see that the leftmost frame structure tree lists the files in the current project . There is a root node item named after the project under the frame structure tree , Here are five file items : 1.Fun.Py: This is a common function library file , Provide access to controls and control variables and some common functions , Modification is not recommended , Therefore, direct editing is not supported here .

2.ico.png: This is the icon file of the project , Generate at creation time , The premise is that TkinterDesigner There is a ICO Catalog , Here, because it is an example project , I put ico Changed to an instance .

3.JSQ.Py: This is the control layout of the main interface of the project python file , Provide code support for the basic layout of the interface , Although it is Py file , but TKinterDesigner When reading it , You will find that it is an interface file , It goes directly into design mode , Because in the whole development process , It is generally not recommended that you manually handle the layout of interface controls python Of documents .

4.JSQ_cmd.py: Logical file of the main interface of the project , Provide code support for the logic of the interface . Here we mainly encode the event function of the control , And you can debug breakpoints .

5.JSQ_sty.py: This is the style setting file for the project , It provides style editing for controls , If you add a custom style here , Can be set directly to the control .

If we want to create multiple windows in the project , We can add a new interface to the framework tree . for example , We can open the new dialog interface project , Right click the frame structure tree on the left .

In the pop-up menu , Click on “ New form ”, Here we can see a new pop-up dialog , We can enter the name of the new form , And then click “ determine ”.

single click “ determine ” after , We'll see a new window , Include “Mywindow.py” and “Mywindow_cmd.py” Two documents , Corresponding to Mywindow Form layout and logical implementation of . If you want to add your own logical code , You can right-click the pop-up menu item in the frame tree , single click “ New file ”, Enter the name of the new file , You can create a new Python file .

single click “ determine ” after , You can see the new file code , Then you can start writing code .

Sometimes , You may need some pictures 、 Sound or other file resources to put into the project . You can also right-click the pop-up menu item in the frame structure tree and click “ Import files ” To select and import them ..

Last , If you want to delete one of the files , You need to right-click the corresponding file item , Pop up menu items , single click “ Delete file ”. After the confirmation , You can delete the file .

3. Interface design

First , We load the dialog project we created earlier .

single click project1 or project1.py Enter the interface design area , Then start interface design . for example , If you want to add gender options in the basic account and password entry interface 、 Occupational classification and married or not , You need to add some new controls , It includes two radio buttons and a combo box 、 A check button and the desired label text . These are very common controls .

We need to expand the main forms , Because it's not big enough . here , You can click the control tree item in the upper right corner "Form_1" , You can also directly click the form interface in the design area , We can see a dotted line around the form , A gray drag block appears at the midpoint of the vertex and edge line . We can click the drag block in the lower right corner of the mouse and drag it to the appropriate size .

After completion , We can “ determine ” and “ sign out ” Drag the button directly to the lower right position .

Now? , We can select and drag the desired control from the toolbar list on the left to the form .

Remember this technique . If you need to create the same control repeatedly , You can directly select a control , Press and hold ALT Drag in the state of key , You can directly copy a new control for dragging , It's faster .

If you feel that the position is not well aligned , You can select... From the shortcut keys “ grid ” and “ Aspiration ” Button , You can also use the key “Ctrl+G”、“Ctrl+D” Quick call to show or cancel . The grid is for each 50 Pixel unit , Easy for you to drag and align after inhalation .

Choose “ Gender ” The label in front of the radio button , Find... In the attribute box on the right “ Text ” attribute , Double click the property , Enter... In the pop-up dialog box “ Gender ”, single click “ determine ” You can change the text of the corresponding label .

Here's a trick, too . If you need to set the text of the label or button , When it is selected, you can click CTRL + BACKSPACE Clear the text , Then you can input text directly from the keyboard .

therefore , Soon we finished all the labels , The text of the two radio buttons and the text of the check button .

It looks good , isn't it? ? Of course , You can set many properties , For example, you can change the background color and text color , You can also modify the font and so on . You can modify these operations in the property bar , You can also quickly adjust these operations through the shortcut button bar at the top .

Of course , Gender cannot be both male and female . Such bisexuality is not in line with our orientation , Right ? We choose to have “ women ” Radio buttons with words . In the group and value Columns , Double click the value item , Change it to... In the input box 2, Then click the button . Then we can see the correct radio button grouping .

There can be many radio buttons in an interface . Some of them may be an option , Such as gender , Some are alternatives , For example, living in several areas of the city . These two parts need to be divided into two groups , And it needs to be distinguished by the unique value in each group . therefore , When representatives “ men ” and “ women ” The two radio buttons in use the default group number 1 when , You just need to “ women ” Change the value of the radio button to 2.

Next , We add career options for the input . choice Combobox, Find... In its Properties box “Items”, Double click Edit... In the pop-up dialog box in the data item editing area Combobox Corresponding data item .

for example , Let's enter three data , namely “ The programmer ”、“ Planner ”、“ The designer ”, And then click “ determine ”, We can see that the combo box has become the desired shape .

single click “ determine ” after , The final results are as follows :

well , Now we have completed the creation and placement of the required controls , All controls are created into the interface by dragging and dropping , If you think the names of these controls in the tree in the upper right corner are not easy to remember , You can double-click the control tree item , Modify the name in the pop-up dialog box , You can also double-click... In the Properties box " name " Property bar to modify or right-click the tree item , Find... In the pop-up menu " modify " Name menu item to modify .

This completes the name modification .

But here's the thing : stay TKinterDesigner in , This newly modified name , Is an alias of the original name , In the following function , You can enter the original name , You can also use aliases to find controls or set variables , But to remember , Custom aliases are preferred .Form_1 As the root node of the form , Modifying alias is not supported .

such as , You can use it.

Fun.GetElement(className,‘AccountEntry’) 

Get it , It can also be used.

Fun.GetElement(className,‘Entry_3’)

Get it , We give priority to aliases as search keywords .

Now let's talk about how to add icons and menus to the window , About window settings , Basically all in Form_1 in , We need to start with “Form_1", Then double-click... In the property box ” Program icon “ At the value of the item , A dialog box for finding icons will pop up , After we select an icon , You will find that the icon in the window changes to the corresponding icon , This completes the icon setting .

To add a menu to an interface , Then double-click... In the property box ” menu “ At the null value of the item , A dialog box in the menu editing area will pop up , Then double-click... In the property box ” menu “ At the null value of the item , A dialog box in the menu editing area will pop up .

We can edit the menu in the dialog box in the menu editing area , The first is to add top dishes

Individual , Then select the value of the menu item in the list box , Add sub menu items or sub separators to it again .

In the process , The menu is also added to the dialog box in the menu editing area in real time for preview , After adjustment , You can see the effect in the actual operation .

But how to respond ? If you decide to use the menu , In the corresponding interface CMD.py In file , The corresponding menu item response function will be generated , You can edit the code in the function .

single click “ function ” key , The design and code will be saved automatically , And run and display the results .

Let's introduce the properties of the control .

4. Control settings

In the current control toolbar , We are divided into two parts :

The first part is the control , Mainly common controls on the interface . The second part is the module , It is mainly the extension control or some function module plug-ins developed by ourselves .

In the control page , We have a total of 18 Controls , This quantity is not too complete , But it basically covers TKinter Common controls , In the future, we will continue to follow up and develop new controls to join . We click on the controls on the interface , You can see that a certain number of attribute values can be set in the attribute bar panel on the right , It includes the following aspects :

Form attribute :

  • w,h: Window size

  • background : The background color , Double click to pop up the color selection dialog box .

  • picture : Background map , Double click to pop up the select Picture dialog box .

  • title : The title text of the window .

  • Program icon : The icon of the program .

  • There's a title bar : Whether the window displays the title bar .

  • Resizable : Whether the window can be resized through the edge .

  • Drag the border width : If without a title bar , The width of the self generated drag border .

  • Drag border color : If without a title bar , The color of the self generated drag border .

  • The theme style : Whether to use theme skin .

  • As before the end : Whether the window always comes first .

  • Transparent color value : If you want to make a transparent form , Corresponding window hollowing color .

  • radius : Whether the edge is rounded , If the radius value is set , At run time , Rounded corners will be formed at the radius value at the corners .

Label attribute :

  • name : Control name

  • Layout : Used to set the control layout , You can choose pack,grid,place Three layout modes .

  • x,y,w,h:place Position, width and height in mode .

  • background : The background color , Double click to pop up the color selection dialog box .

  • Text : Control's display text .

  • typeface : The font that displays the text , Double click to open the font selection dialog box .

  • The color of the words : The color of the displayed text , Double click to pop up the color selection dialog box .

  • alignment : Alignment of text .

  • picture : Background image that can be set , Double click to pop up the select Picture dialog box .

  • Mixed platoon : If there is text , When there are pictures again , How to mix and arrange .

  • style : Several border display styles .

  • state : There are several situations ,(1) Ordinary (2) Unavailable (3) read-only .

  • radius : Whether the edge is rounded , If the radius value is set , At run time , Rounded corners will be formed at the radius value at the corners .

Button attribute :

  • When passing by, the word color : The color of the text when the mouse passes

  • Background color when passing : The color of the background when the mouse passes

Entry attribute :

  • Substitution character : For password type Entry, Settable similar * Substitute for .

Text attribute :

  • Scroll bar : Whether to set the scroll bar .

ListBox attribute :

  • Choice mode : Several common ListBox Choice mode ,"browse"( The radio )、"multiple"( multi-select ) and "extended"( It's also multi-choice , But you need to press and hold Shift Key or Ctrl Key or drag the mouse to achieve )

  • Data item : Text items in the list box .

Combobx attribute :

RadioButton attribute :

  • grouping : The group to which you belong ID.

  • value : Feedback value when currently selected .

Text attribute :

LabelFrame attribute :

Frame attribute :

  • Import interface : Entry for embedding other interfaces , Double click to select other interfaces Py file , Can be embedded into the current Frame in .

Scale attribute :

  • Direction : Choose horizontal or vertical .

  • Display number : Do you show the current adjusted value? .

  • Starting value , End value : Adjustable value range .

  • Particle size : Displays the interval of the scale .

  • scale : Minimum unit of adjustment .

Progress attribute :

  • Maximum : The maximum interval value of the progress bar .

  • Current value : The current progress value of the progress bar .

SpinBox attribute :

  • Starting value 、 End value : Adjustable interval .

  • step : The value of each adjustment changes .

  • Data item : If you want to customize SpinBox The interval value of , You can edit a data list directly here , As SpinBox The numerical term of .

TreeView attribute :

  • Display type , The default is tree, You can also choose “headings", In this way, it will become the form of data list , Just like the property panel .

  • Choice mode : Reference resources ListBox Choice mode

  • Column data , If you choose "headings", You can edit columns for it here .

Canvas attribute :

  • stay Canvas When dragging to the design area , There will be a toolbar for drawing at the bottom , Including emptying , paint brush , A straight line , arrow , Short form , circular , Pentagonal , written words , Eraser, etc , Select the corresponding icon , You can go to Canvas I drew at random on the .

NoteBook attribute :

  • page : Used for current NoteBook Create various pages , And import the window to be embedded .

PanedWindow attribute :

  • Can be dragged : Whether the splitter bar can be dragged , Determines whether the size of the two parts can be changed .

  • Left interface : Double click to import the embedded interface on the left Py file .

  • The interface on the right : Double click to import the embedded interface on the right Py file .

Calendar attribute :

  • Column background and column foreground : The background color and text color of the above column from Sunday to Saturday , Corresponding to the black background and white text in the figure below .

  • Select background and foreground : Change when a date is selected with the mouse in the calendar control , Corresponding to 2021 year 7 month 3 The light green background and dark green text of the day position .

These are all the properties of the basic control , If you have a problem , Please email me :[email protected] Or visit :www.tkinterdesigner.com feedback .

besides , The corresponding module toolbar has two built-in function modules , Let's also briefly talk about their properties , Creating modules and setting properties are the same as dragging controls into the interface .

DataSource attribute : This is a module for obtaining data from various data sources .

  • data type : It has a list , Shows all available data sources , You just press the above selection , Then the corresponding data source properties will appear .

For example, choose TXT.

Click on ” function “ You can see TXT The contents of the file are output and displayed to TXT Control .

VideoCapture attribute : This is a system for obtaining video from camera and outputting it to Canvas Control on .

  • Canvas: Output to the specified Canvas Control , You need to find a suitable... From the control tree item at the top right Canvas Drag here to specify .

Okay , Be accomplished , You just need to click ” function “, And you can see the effect .

That's what I want to do , Drag and drop to quickly realize the interface and functions .

5. Variable binding

In the development process , We often need to store some data , Maybe it's just a simple result storage , Maybe it's the input value of the control . for example , In the instance project JSQ(Calculator It means ) The development of , We bind a temporary variable to store the middle value of the tag that displays the data , In order to add 、 reduce 、 ride 、 Division operation . In the example above , Suppose when we click “ determine ” To determine when the account value is the same as the last entered value , A dialog box will pop up “ Account used ”. We can add a custom variable to bind the account . This design idea is right VC++ A reference to , If you have VC++ Development experience , I believe it can be understood soon .

Right click the input box corresponding to the account , Click... In the pop-up menu “ Variable binding ”. In the pop-up dialog , We enter the name of the data item to bind “NameArray”, And choose it as “List” type . If we use numeric or string types , We can see an option box “ Mapping to ' Text '”, Clicking this option means that the variable will be updated to the text of the label or item control , At the same time, the function will be activated . call Fun.SetUserData Set it up . Only one variable is allowed for the same control . If this option is not selected , You can create multiple variables for the control . We don't need to click here .

After creating , There will be a binding list variable in the input box . You can use it.

Fun.GetUserData(className,‘Entry_3’,’NameArray’) 

Get it . ​ Next , Let's click “OK” Make relevant judgments when pressing the button , This needs to be for “OK” Button to add command event mapping .

6. Event function mapping

So-called “ Event function mapping ”, That is, function mapping of events that can be bound to control , In this way, when the corresponding event is triggered , call set function . Let's right-click on “OK” Button , Then choose... From the pop-up menu “ Event response ”.

In the pop-up event response processing editing area , We can see the list of events on the left , It lists common Python event . There is an input box on the right , Displays the default function name . We can also modify it . Click on “ Edit function code ” Or double-click the event item directly in the list , Directly enter the code editing area of the logical file . here , We can see the added event response function , Here we can edit the code manually .

For button controls , We can be like VC++ Similarly, double-click the control directly during design to enter the corresponding onCommand function .

If we want to invoke other interfaces in the event response , We can also click on “ Call other interfaces ” Button , Then an options dialog box pops up , Let's call... As needed .

Here you can directly select the most commonly used open and save file boxes , But if you create a multi window program , You need to call another window here , Just choose “ Call the custom interface ” You can find the py file . I have one in the sample project “calltest” Project to demonstrate this .

7. Logic code writing

The button is in the code editing area of the logic file , stay “Button\u 6\u oncommand” Function , We can write the following code :

This code passes “Fun.GetUserData” Get the list variable bound to the input box , And pass “Fun.GetText” Get the current input value directly , And then compare them . If the same , Will pop up “ Name registered ” Dialog box . If they are different , The input value is added to the list variable , And pop up “ Registered successfully ” Dialog box .

8. Commissioning and operation

If you want to run now , You can directly click the “ function ” Button . The program code will be saved automatically , And start running . If there is an error in the code , It will be displayed in the compilation error information output window in the code area . If printing is added to this function , It will also display and print in real time .

We enter the name in the account where the program runs , Click... For the first time “ determine ” when , Will pop up “ Registered successfully ” Dialog box . Then click... Again OK, eject “ Name registered ” Dialog box . We can still successfully register by changing our name . It seems that everything is as we expected .

If we want to debug , You can click... On the left side of the line number bar in the code area with the mouse , Add breakpoints to the program .

After adding breakpoints , Click the small blue button in the debugging area below to start debugging .

In the screenshot above , We can see , Once started Debug, Click on ” determine “ After button , stay Button_6_onCommand A breakpoint was triggered in , And the arrow of the current execution line appears , At the same time, in the debugging panel below , There are two areas where information displays , On the left is the local variable area , Here you can see that the local variables of the current function already have values . On the right is the output DEBUG Information .

At this time , We can click Debug The shortcut buttons in the button bar are used for debugging , The specific instructions are as follows :

If you have VC++ Or other programming IDE Debugging experience , I believe you should know how to use , Here's also a tip : You can use the following shortcut keys in the current window to make quick commands :

1.F5: Carry on , Until the next breakpoint , The same is true when you click the blue arrow directly during breakpoint or line by line debugging .

2.F9 key : Adds a breakpoint to the current line .

3.F10 key : Execute next line ( If there is a function , Don't go into functions )

4.F11 key , Execute next line , If there is a function , Enter function .

9. pack EXE

After completing our own procedures , We want to package the program as EXE And publish it to users . We can just click on the top right corner “ Release ” Button , Select the output directory , Then enter the to be packaged EXE The name of . But if you're not logged in , It can't be packed .

single click “ determine ” Button ,tkinterdesigner Will start calling the packer to package the project .

If it goes well , You can finally find the corresponding... In the output directory exe Program :

10. Custom module import

Custom modules are designed to allow developers to interact with controls through self-made module classes , Complete relatively independent functions , You can import module classes into the interface designer , And easily set the properties of the module class , Including passing the interface control as a parameter to it . We hope to provide a large number of available modules for developers in the future , At present we are in ” Component Market “ A few modules are provided to verify the scheme , But the premise is that you have to register an account to see the component Market .

stay ” Component Market “ In the panel , We can see Express Express query component , We can click Install , After installation , It will be placed in the current tool Directory Market_com Directory .

The code is as follows :

iimport urllib.request
import json
import msvcrt
import tkinter
​
class   Express:
    def __init__(self):
        self.Company_Dict = {1:'shentong',2:'youzhengguonei',3:'yuantong',4:'shunfeng',5:'yunda',6:'zhongtong',7:"tiantian",8:"debang"}
        self.CompanyID = 4
        self.ExpressNumber = '0000001'
        self.ComboBox = None
    # Set the index of the company 
    def set_CompanyID(self,companyID):
        self.CompanyID = companyID
    # Get the index of the company 
    def get_CompanyID(self):
        return self.CompanyID
    # Set logistics doc No 
    def set_ExpressNumber(self,expressNumber):
        self.ExpressNumber = expressNumber
    # Obtain the logistics order No 
    def get_ExpressNumber(self):
        return self.ExpressNumber   
    # Set the method to get the company index ComboBox
    def set_ComboBox(self,comboBox):
        self.ComboBox = comboBox
        # These are some express company 's name in China.
        self.ComboBox['values'] = [' STO ','EMS Post Office ',' Yuantong Express ',' SF express ',' Yunda express ',' China Express ',' Express delivery every day ',' Deppon ']
        self.ComboBox.current(4)
    # Get company index ComboBox
    def get_ComboBox(self,comboBox):
        return self.ComboBox   
    # Call query 
    def Query(self,ListBox):
        self.CompanyID = self.ComboBox.current() + 1
        ListBox.delete(0,tkinter.END)
        url = "http://www.kuaidi100.com/query?type=%s&postid=%s" % (self.Company_Dict[self.CompanyID], self.ExpressNumber)
        response = urllib.request.urlopen(url)
        html = response.read().decode('utf-8')
        target = json.loads(html)
        #print(target)
        status = target['status']
        if status == '200':
            data = target['data']
            #print(data)
            data_len = len(data)
            
            for i in range(data_len):
                time_text = "Time: " + data[i]['time']
                ListBox.insert(tkinter.END,time_text)
                state_text = "State: " + data[i]['context']
                ListBox.insert(tkinter.END,state_text)
        else:
            ListBox.insert(tkinter.END,"Error")

We can see , The method of writing custom module class is : Create a class , And add... For the properties that need to be exposed and accessible to the designer set and get function . stay Express Class, we design a function with three variables , Including express companies ID、 Express number , We want to pass in a control combo box to accept a list of company names .

Now let's create a blank project , Then we're on the left Project2 Right click on the tree item , Choose... From the pop-up menu ” Import resources “, take Market_com Medium Express.py Import in .

In the main interface design area , We can quickly build the interface by dragging and dropping the control :

Now we have finished the design of the interface , We'll switch to... In the toolbar “ modular ” page . stay “ modular ” On the page , We click “import module” Button , And then find “Express”. Click on “ open ”. actually ,“Express.py” You don't have to be in the current directory . You can use one module for multiple projects , Just import... Here , The first mock exam is not required to create module class files for each item in the same module. .

well , Now? express The module item appears on the module panel , Let's drag it to the interface .

We can see , In the attribute box in the lower right corner ,express The three variables of the module are displayed in the attribute box . We can set it manually “CompanyID” and “ExpressNumber”, But how to set ComboBox Well ? ad locum , You just need to find the corresponding... In the control tree in the upper right corner ComboBox, Then drag to the attribute box “combobox” The position of the value item . Then we add the command response function to “query” Button .

stay “Button_7_oncommand” Function , We can write the corresponding code :

This part of the code realizes from Entry_5 Get and query the logistics doc No , And through our module name “Express_9” call 'Fun.GetElement' To get Express modular , And use the same method to get Listbox, And then call Express Function of

set_ExpressNumber

Set the express number , Finally, the query method is called to query. . Parameters are displayed ListBox object . After completion , Click on the top right corner ”Run" Run it . We can see the running program . Try to enter the number in the express order number , Click on “ Inquire about ”, You will soon see the express information displayed in the list box .

This is an example of adding a module written by yourself and calling it in the design area , If you find it difficult to write code , You can also directly view the Express query cases in the case project for learning .

About beautification : Apply skin and custom control styles .

Most of the time , We use TKinter The program to create is not beautiful enough , Although it does not affect function development , But the love of beauty , Everyone has it. . If you can make the program more beautiful, it's best , But since most of our developer users are programmers , For the beautified part , It's best to simplify , Therefore, I hope to provide a good color scheme as a skin for developers to use , Make the program beautiful , Therefore, we also launched the skin market , For the time being, only official skin , Later, it will be released to the majority of developers and users to upload and submit, so as to provide a better skin for everyone . But the premise is that you have to register an account to see the component Market .

We can click here " Black gold theme " On the icon ” Not installed " Text to complete the installation .

Then we try to open the instance project " Calculator ", We can do it in Form_1 Found in the properties bar of " The theme style ", Click on the drop-down list , Then we can see a ”BlackGold.py", This is black gold skin .

We choose it , And run the program . You'll see a cool calculator program , It has a dark gray background, dark gold text and contrasting edges .

Of course , If you want to modify your own style , It can also be in sty.py Made in , For example, we open the registered applet project we created before again .

Click on the left “Project1_sty.py", Enter the style editor .

In this interface , We enter... In the style name My, And select... In the corresponding control list ”TForm“, Click on ” New style “ Button .

In this interface , We enter... In the style name My, And select... In the corresponding control list ”TEntry“, Click on ” New style “ Button , And for two key values "background" and "foreground" Set the color .

Same way , We create styles for other controls .

After completion , We can go back to the design area , And in the dialog box , Edit box , Right click radio buttons and combo boxes , In the pop-up menu , There will be one. ” Style selection “ term , We can select the corresponding style .

After styling all the controls , It's like this .

speech :

          Can see here , I believe readers have worked hard , In the process of writing the tutorial , I'm still changing BUG, Some screenshots may be slightly different from the actual version , But roughly the same . I hope you are interested in Python Lovers can communicate with me , Give me more advice , hope Python Can get better and better . ​ Last , I wish you all the best in your work , A healthy body ~

copyright notice
author[Huoyun cave red boy],Please bring the original link to reprint, thank you.
https://en.pythonmana.com/2022/01/202201291351405188.html

Random recommended