Rename View

Our view function is named hello_world. Let’s change it to home_page. Along the way, let’s get introduced to some of the UI elements in PyCharm.

Source for this step | View video/audio walkthrough

Steps

  1. Close all the editor tabs by clicking the x for each.

  2. Click the red button in the left side of the Run window at the bottom.

  3. Click the 4. Run tab button in the bottom of the screen to close that tool window.

  4. Click the 1. Project tab button in the left edge of window to collapse the Project Tool window.

  5. Click it again to re-open.

  6. In the Project Tool window, click to expand the top folder.

  7. In the Project Tool window toolbar, click the collapse button (COLLAPSE).

  8. Click the epc folder to expand/open it.

  9. Double-click the epc.py file to open it in the editor.

  10. Click somewhere inside the symbol hello_world, putting the caret in that function name.

  11. From the PyCharm menu, choose Refactor -> Rename.

  12. In the dialog box, change hello_world to home_page and click Refactor.

  13. In the next prompt, click the Do Refactor button.

  14. Afterwards, your epc.py file should look like this:

    epc.py
    from flask import Flask
    
    app = Flask(__name__)
    
    
    @app.route('/')
    def home_page():
        return 'Hello World!'
    
    
    if __name__ == '__main__':
        app.run(debug=True)
    
  15. In the PyCharm top toolbar, click the green play button to run your Python app.

  16. Reload your browser to confirm all is well.

Analysis

In this task we made a small change, but used that change to explore much of the PyCharm UI.

  • Close tabs. The editor has tabs which can be closed (plus lots more that we’ll see later.)
  • Placement. The IDE has “tool windows” that are placed on the left, bottom, and right.
  • Toggle. These tool windows can be toggled open and closed.
  • Mini-UI. Inside the window, each tool has its own little UI (toolbars, tabs, etc.)
  • Files are good. The Project tool is pretty important, obviously.
  • Editor tabs. The Editor manages files in one or more tabs.

Extra Credit

  1. What does the 1 in the 1. Project tool window button indicate?
  2. How do you move a tool window button to another part of the screen?
  3. What are some ways you can close an editor tab besides clicking the x?
  4. Same for closing/opening tool windows...what other ways are there, instead of using the mouse?
  5. How do you use the Structure tool?
  6. Can you have more than one tab visible at once?