SlideShare una empresa de Scribd logo
1 de 53
Descargar para leer sin conexión
Microsoft Visual Basic 2010



  CHAPTER TWO

  Program and Graphical
   User Interface Design
2       Objectives
  ►Open and close Visual Studio 2010
  ►Create a Visual Basic 2010 Windows Application
   project
  ►Name and set the Title Bar text in a Windows
   Form object; resize a Windows Form object
  ►Add a Label object to a Windows Form object;
   name the Label object; set the text in the Label
   object; change the Font properties of the text in
   the Label object
  ►Add a PictureBox object to the Windows Form
   object; name the PictureBox object; resize the
   PictureBox object
Chapter 2: Program and Graphical User Interface Design   2
2       Objectives

  ►Add a Button object to the Windows Form object;
   name the Button object; set the text in the Button
   object; change the Button object size
  ►Align Objects on the Windows Form object
  ►Save and open Visual Basic projects
  ►Understand and implement graphical user
   interface design principles
  ►Understand and implement the first two phases of
   the program development life cycle


Chapter 2: Program and Graphical User Interface Design   3
2       Open Visual Studio 2010

  ►Click the Start button on the Windows
   taskbar, point to All Programs on the Start
   menu, and then point to Microsoft Visual Studio
   2010 on the All Programs submenu
  ►Click Microsoft Visual Studio 2010 on the
   submenu




Chapter 2: Program and Graphical User Interface Design   4
2       Open Visual Studio 2010




Chapter 2: Program and Graphical User Interface Design   5
Create a New Visual Basic 2010
  2       Windows Application Project
  ►Click the New Project button on the Standard
   toolbar
  ►If necessary, in the left pane, click Visual Basic so
   it is selected
  ►If necessary, click Windows Forms Application in
   the middle pane
  ►Double-click the text,WindowsApplication1, in the
   Name text box to select the text. Type the project
   name
  ►Click the OK button in the New Project window


Chapter 2: Program and Graphical User Interface Design     6
Create a New Visual Basic 2010
  2       Windows Application Project




Chapter 2: Program and Graphical User Interface Design   7
2       Display the Toolbox
  ► If the window does not
    already display the
    Toolbox, point to the
    Toolbox button in the left
    margin of the window




Chapter 2: Program and Graphical User Interface Design   8
2       Permanently Display the Toolbox
  ► If necessary, point to the
    Toolbox button in the left
    margin of the window to
    display the Toolbox.
    Then, click the Auto
    Hide button on the
    Toolbox title bar




Chapter 2: Program and Graphical User Interface Design   9
2       Name the Windows Form Object
  ► Click anywhere in the Windows Form object to select it
  ► In the Solution Explorer window, right-click the Form1.vb
    filename. On the shortcut menu, point to Rename
  ► Click Rename. Type the name of the form, and press the
    ENTER key




Chapter 2: Program and Graphical User Interface Design          10
2       Name the Windows Form Object




Chapter 2: Program and Graphical User Interface Design   11
Set the Title Bar Text
  2       in a Windows Form Object
  ►With the Windows Form object selected, scroll in
   the Properties window until you find the Text
   property. Then, double-click in the right column
   for the Text property
  ►Type the title bar text, and then press the ENTER
   key




Chapter 2: Program and Graphical User Interface Design   12
Set the Title Bar Text
  2       in a Windows Form Object




Chapter 2: Program and Graphical User Interface Design   13
2       Resize a Form

  ►Place the mouse pointer over the sizing handle in
   the lower-right corner of the Windows Form object
  ►Drag the sizing handle to the right and down until
   the window is the size you want. Then, release
   the left mouse button




Chapter 2: Program and Graphical User Interface Design   14
2       Add a Label Object

  ►Drag the Label .NET component button from the
   Common Controls category in the Toolbox over
   the Windows Form object to the approximate
   location where you want to place the Label object
  ►When the mouse pointer is in the correct
   location, release the
   left mouse button




Chapter 2: Program and Graphical User Interface Design   15
2       Name the Label Object

  ►With the Label object selected, scroll in the
   Properties window until you find the (Name)
   property. Then double-click in the right column for
   the (Name) property
  ►Type the new name, and then press the ENTER
   key




Chapter 2: Program and Graphical User Interface Design   16
2       Change the Text in a Label Object

  ►With the Label object selected, scroll in the
   Properties dialog box until you find the Text
   property. Then, double-click the Text value in the
   right column
  ►Type the new text for the Text property
  ►To enter the Text property, press the ENTER key




Chapter 2: Program and Graphical User Interface Design   17
2       Change the Text in a Label Object




Chapter 2: Program and Graphical User Interface Design   18
Enter Multiple Lines of Text
  2       in a Label Object
  ►With the Label object selected, click the Text
   property name in the left column of the Properties
   window. Then, click the down arrow in the right
   column of the Text property




Chapter 2: Program and Graphical User Interface Design   19
Change Label Font, Font Style,
  2       and Font Size
  ►Click the Label object to select it. Scroll until you
   find the Font property in the Properties window.
   Click the Font property in the left column of the
   Label property window
  ►Click the ellipsis button for the Font property
  ►In the Font dialog box, scroll to the font you want
   to use in the Font list and then click the font in the
   Font list. Click a desired font style in the Font
   style list. Click the size you want to use in the
   Size list
  ►Click the OK button
Chapter 2: Program and Graphical User Interface Design      20
Change Label Font, Font Style,
  2       and Font Size




Chapter 2: Program and Graphical User Interface Design   21
Center a Label Object
  2       in the Windows Form Object
  ►With the Label object selected, click Format on
   the Menu bar and then point to Center in Form on
   the Format menu
  ►Click Horizontally on the Center in Form submenu




Chapter 2: Program and Graphical User Interface Design   22
2       Delete GUI Objects

  ►Select the object to be deleted by clicking it
  ►Press the DELETE key on the keyboard




Chapter 2: Program and Graphical User Interface Design   23
Use the Undo Button
  2       on the Standard Toolbar
  ►Click the Undo button on the Standard toolbar




Chapter 2: Program and Graphical User Interface Design   24
2       Add a PictureBox Object

  ►With the Toolbox visible, drag the PictureBox
   .NET component on the Toolbox over the
   Windows Form object to the approximate location
   where you want the PictureBox object to be
   displayed
  ►When the mouse pointer is in the correct
   location, release the left mouse button




Chapter 2: Program and Graphical User Interface Design   25
2       Add a PictureBox Object




Chapter 2: Program and Graphical User Interface Design   26
2       Name a PictureBox Object

  ►Select the PictureBox object
  ►Locate the (Name) property in the Properties
   window for the PictureBox object
  ►Double-click the value in the right column for the
   (Name) property, type the name, and then press
   the ENTER key




Chapter 2: Program and Graphical User Interface Design   27
2       Resize a PictureBox Object

  ►Place the mouse pointer over the sizing handle at
   the lower-right corner of the PictureBox
   object, and then drag the handle to the size
   required




Chapter 2: Program and Graphical User Interface Design   28
2       Add a Second PictureBox Object

  ►Drag the PictureBox .NET component in the
   Toolbox to any location in the Windows Form
   object, and then release the left mouse button




Chapter 2: Program and Graphical User Interface Design   29
2       Make Objects the Same Size

  ►Select the object whose size you want to
   duplicate, and then hold down the CTRL key and
   click the object you want to resize
  ►Click Format on the menu bar and then point to
   the Make Same Size command on the Format
   menu
  ►Click Both on the Make Same Size submenu




Chapter 2: Program and Graphical User Interface Design   30
2       Make Objects the Same Size




Chapter 2: Program and Graphical User Interface Design   31
2       Align the PictureBox Objects

  ►With the left and right PictureBox objects
   selected, click Format on the menu bar and then
   point to Align on the Format menu
  ►Click Bottoms on the Align submenu




Chapter 2: Program and Graphical User Interface Design   32
Center Multiple Objects Horizontally
  2       in the Window
  ►With both objects selected, click Format on the
   menu bar and then point to the Center in Form
   command
  ►Click Horizontally on the Center in Form submenu




Chapter 2: Program and Graphical User Interface Design   33
2       Add a Button Object

  ►With the Toolbox displayed in the Visual Studio
   window, drag the Button .NET component in the
   Toolbox over the Windows Form object to the
   position where you want to place the button
  ►When the mouse pointer is positioned
   properly, release the left mouse button




Chapter 2: Program and Graphical User Interface Design   34
2       Name and Set Text for a Button Object

  ►With the Button object selected, scroll in the
   Properties dialog box until you find the Text
   property. Double-click the Text value in the right
   column, type the text you want to display, and
   then press the ENTER key




Chapter 2: Program and Graphical User Interface Design   35
2       Change Button Object Size

  ►Place the mouse pointer over the right edge of
   the Button object until the pointer changes to a
   double-headed arrow
  ►Drag the mouse pointer to the right until the
   Button object is just big enough to display the
   text, and then release the left mouse button




Chapter 2: Program and Graphical User Interface Design   36
2       Add and Align a Second Button

  ►Drag the Button .NET component from the
   Toolbox to the right of the Standard Room button
   on the Windows Form object. Align the top of the
   rectangle in the mouse pointer to the top of the
   Standard Room button until a blue line displays
   along the tops of the buttons
  ►When the buttons are aligned and spaced as you
   like, release the left mouse button




Chapter 2: Program and Graphical User Interface Design   37
2       Add and Align a Second Button




Chapter 2: Program and Graphical User Interface Design   38
2       Aligning Objects Vertically

  ►If necessary, click anywhere in the Windows
   Form object to deselect any other objects.
   Then, slowly drag the Deluxe Room button below
   the Standard Room button until vertical blue snap
   lines are displayed
  ►When the blue lines appear, indicating the
   buttons are aligned vertically, drag the Deluxe
   Room button up or down to create the proper
   spacing between the buttons, and then release
   the left mouse button


Chapter 2: Program and Graphical User Interface Design   39
2       Aligning Objects Vertically




Chapter 2: Program and Graphical User Interface Design   40
2       Save a Visual Basic Project

  ►To save the work you have completed, you can
   click the Save All button on the Standard toolbar
  ►The first time you save a project, the Save Project
   dialog box is displayed




Chapter 2: Program and Graphical User Interface Design   41
2       Close Visual Studio 2010

  ►To close Visual Studio, you can click the Close
   button on the right of the Visual Studio window
   title bar
  ►If, when you close Visual Studio, you have never
   saved your program, Visual Studio will display the
   Close Project dialog box




Chapter 2: Program and Graphical User Interface Design   42
2       Open a Visual Studio Project

  ►Method 1: Double-click the solution file in the
   folder in which it is stored
  ►Method 2: With Visual Studio open, click the
   Open File button on the Standard toolbar, locate
   the solution file, and open it
  ►Method 3: With Visual Studio open, click File on
   the menu bar and then point to Recent Projects
   and Solutions on the File menu. Click the name of
   the project you want to open



Chapter 2: Program and Graphical User Interface Design   43
2       Program Development Life Cycle
  ►Set of phases and steps that are followed by
   developers to design, create, and maintain a
   computer program
    • Gather and Analyze the Program
      Requirements
    • Design the User Interface
    • Design the Program Processing Objects
    • Code the Program
    • Test the Program
    • Document the Program/System
    • Maintain the Program/System
Chapter 2: Program and Graphical User Interface Design   44
Phase I: Gather and Analyze the
  2       Program Requirements
  ►Gather project requirements by interviewing
   users, reviewing current procedures, and
   completing other fact-gathering tasks
  ►Two types of requirements documentation
    • Requirements document
    • Use Case Definition




Chapter 2: Program and Graphical User Interface Design   45
Phase I: Gather and Analyze the
  2       Program Requirements




Chapter 2: Program and Graphical User Interface Design   46
Phase I: Gather and Analyze the
  2       Program Requirements




Chapter 2: Program and Graphical User Interface Design   47
2       Phase 2: Design the User Interface

  ►Developers sometimes spend 25% to 40% of the
   program design time on the user interface
    • Presentation layer
  ►Use Visual Studio to create the user interface
  ►Interface designs are often called mock-ups




Chapter 2: Program and Graphical User Interface Design   48
2       Phase 2: Design the User Interface

  ►Principles of User Interface Design
   • The GUI should be easy to use and follow
            ►Users will not be satisfied with the application if the
             user interface is not easy to use
       • Three primary means of interacting in a user
         interface are the keyboard, a pointing
         device, and voice input
       • Use of the interface should feel natural and
         normal
       • Provide the most appropriate object for each
         requirement
Chapter 2: Program and Graphical User Interface Design                 49
2       Phase 2: Design the User Interface

       • Once an object is used for a particular
         purpose, then that object should be used for
         the same purpose throughout the program
         interface
       • Arrange objects in the sequence in which they
         are used
       • The interface should be kept as simple as
         possible, while maintaining functionality
       • The user interface should be intuitive


Chapter 2: Program and Graphical User Interface Design   50
2       Summary
  ►Open and close Visual Studio 2010
  ►Create a Visual Basic 2010 Windows Application
   project
  ►Name and set the Title Bar text in a Windows
   Form object; resize a Windows Form object
  ►Add a Label object to a Windows Form object;
   name the Label object; set the text in the Label
   object; change the Font properties of the text in
   the Label object
  ►Add a PictureBox object to the Windows Form
   object; name the PictureBox object; resize the
   PictureBox object
Chapter 2: Program and Graphical User Interface Design   51
2       Summary

  ►Add a Button object to the Windows Form object;
   name the Button object; set the text in the Button
   object; change the Button object size
  ►Align Objects on the Windows Form object
  ►Save and open Visual Basic projects
  ►Understand and implement graphical user
   interface design principles
  ►Understand and implement the first two phases of
   the program development life cycle


Chapter 2: Program and Graphical User Interface Design   52
Microsoft Visual Basic 2010


  CHAPTER TWO
    COMPLETE
  Program and Graphical
   User Interface Design

Más contenido relacionado

Similar a Chapter 02 - Program and Grapahical User Interface

Chapter 2 — Program and Graphical User Interface Design
Chapter 2 — Program and Graphical User Interface DesignChapter 2 — Program and Graphical User Interface Design
Chapter 2 — Program and Graphical User Interface Designfrancopw
 
Chapter 03
Chapter 03Chapter 03
Chapter 03llmeade
 
Chapter 07
Chapter 07Chapter 07
Chapter 07llmeade
 
Chapter 03 - Program Coding and Design
Chapter 03 - Program Coding and DesignChapter 03 - Program Coding and Design
Chapter 03 - Program Coding and Designpatf719
 
Power Point Project 5
Power Point Project 5Power Point Project 5
Power Point Project 5lonetree
 
Chapter2.ppt
Chapter2.pptChapter2.ppt
Chapter2.pptLalRatan
 
Chapter 3 — Program Design and Coding
Chapter 3 — Program Design and Coding Chapter 3 — Program Design and Coding
Chapter 3 — Program Design and Coding francopw
 
LECTURE 12 WINDOWS FORMS PART 2.pptx
LECTURE 12 WINDOWS FORMS PART 2.pptxLECTURE 12 WINDOWS FORMS PART 2.pptx
LECTURE 12 WINDOWS FORMS PART 2.pptxAOmaAli
 
Adobe Illustrator CS5 Part 2 : Vector Graphic Effects
Adobe Illustrator CS5 Part 2 : Vector Graphic EffectsAdobe Illustrator CS5 Part 2 : Vector Graphic Effects
Adobe Illustrator CS5 Part 2 : Vector Graphic Effectscsula its training
 
Adobe Illustrator CC 2018
Adobe Illustrator CC 2018 Adobe Illustrator CC 2018
Adobe Illustrator CC 2018 NYCCTfab
 
Adobe Illustrator CS6 Primer
Adobe Illustrator CS6 PrimerAdobe Illustrator CS6 Primer
Adobe Illustrator CS6 PrimerNYCCTfab
 
Module 8 creating menu1
Module 8  creating menu1Module 8  creating menu1
Module 8 creating menu1Izatul Akma
 
Introduction to CATIA (KEY) - CAD/CAM
Introduction to CATIA (KEY) - CAD/CAMIntroduction to CATIA (KEY) - CAD/CAM
Introduction to CATIA (KEY) - CAD/CAMSisubalan Selvan
 
Csphtp1 02
Csphtp1 02Csphtp1 02
Csphtp1 02HUST
 

Similar a Chapter 02 - Program and Grapahical User Interface (20)

Chapter 2 — Program and Graphical User Interface Design
Chapter 2 — Program and Graphical User Interface DesignChapter 2 — Program and Graphical User Interface Design
Chapter 2 — Program and Graphical User Interface Design
 
Chapter 03
Chapter 03Chapter 03
Chapter 03
 
Chapter 07
Chapter 07Chapter 07
Chapter 07
 
Chapter 03 - Program Coding and Design
Chapter 03 - Program Coding and DesignChapter 03 - Program Coding and Design
Chapter 03 - Program Coding and Design
 
Introduction
IntroductionIntroduction
Introduction
 
Power Point Project 5
Power Point Project 5Power Point Project 5
Power Point Project 5
 
Chapter2.ppt
Chapter2.pptChapter2.ppt
Chapter2.ppt
 
Chapter 3 — Program Design and Coding
Chapter 3 — Program Design and Coding Chapter 3 — Program Design and Coding
Chapter 3 — Program Design and Coding
 
CHAPTER 1: Lesson A
CHAPTER 1: Lesson ACHAPTER 1: Lesson A
CHAPTER 1: Lesson A
 
LECTURE 12 WINDOWS FORMS PART 2.pptx
LECTURE 12 WINDOWS FORMS PART 2.pptxLECTURE 12 WINDOWS FORMS PART 2.pptx
LECTURE 12 WINDOWS FORMS PART 2.pptx
 
Adobe Illustrator CS5 Part 2 : Vector Graphic Effects
Adobe Illustrator CS5 Part 2 : Vector Graphic EffectsAdobe Illustrator CS5 Part 2 : Vector Graphic Effects
Adobe Illustrator CS5 Part 2 : Vector Graphic Effects
 
Adobe Illustrator CC 2018
Adobe Illustrator CC 2018 Adobe Illustrator CC 2018
Adobe Illustrator CC 2018
 
Adobe Illustrator CS6 Primer
Adobe Illustrator CS6 PrimerAdobe Illustrator CS6 Primer
Adobe Illustrator CS6 Primer
 
Module 8 creating menu1
Module 8  creating menu1Module 8  creating menu1
Module 8 creating menu1
 
Introduction to CATIA (KEY) - CAD/CAM
Introduction to CATIA (KEY) - CAD/CAMIntroduction to CATIA (KEY) - CAD/CAM
Introduction to CATIA (KEY) - CAD/CAM
 
Csphtp1 02
Csphtp1 02Csphtp1 02
Csphtp1 02
 
Vp lecture 11 ararat
Vp lecture 11 araratVp lecture 11 ararat
Vp lecture 11 ararat
 
Intake 38 9
Intake 38 9Intake 38 9
Intake 38 9
 
IndesignFlyer
IndesignFlyerIndesignFlyer
IndesignFlyer
 
Power point chapter 2
Power point chapter 2Power point chapter 2
Power point chapter 2
 

Último

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 

Último (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 

Chapter 02 - Program and Grapahical User Interface

  • 1. Microsoft Visual Basic 2010 CHAPTER TWO Program and Graphical User Interface Design
  • 2. 2 Objectives ►Open and close Visual Studio 2010 ►Create a Visual Basic 2010 Windows Application project ►Name and set the Title Bar text in a Windows Form object; resize a Windows Form object ►Add a Label object to a Windows Form object; name the Label object; set the text in the Label object; change the Font properties of the text in the Label object ►Add a PictureBox object to the Windows Form object; name the PictureBox object; resize the PictureBox object Chapter 2: Program and Graphical User Interface Design 2
  • 3. 2 Objectives ►Add a Button object to the Windows Form object; name the Button object; set the text in the Button object; change the Button object size ►Align Objects on the Windows Form object ►Save and open Visual Basic projects ►Understand and implement graphical user interface design principles ►Understand and implement the first two phases of the program development life cycle Chapter 2: Program and Graphical User Interface Design 3
  • 4. 2 Open Visual Studio 2010 ►Click the Start button on the Windows taskbar, point to All Programs on the Start menu, and then point to Microsoft Visual Studio 2010 on the All Programs submenu ►Click Microsoft Visual Studio 2010 on the submenu Chapter 2: Program and Graphical User Interface Design 4
  • 5. 2 Open Visual Studio 2010 Chapter 2: Program and Graphical User Interface Design 5
  • 6. Create a New Visual Basic 2010 2 Windows Application Project ►Click the New Project button on the Standard toolbar ►If necessary, in the left pane, click Visual Basic so it is selected ►If necessary, click Windows Forms Application in the middle pane ►Double-click the text,WindowsApplication1, in the Name text box to select the text. Type the project name ►Click the OK button in the New Project window Chapter 2: Program and Graphical User Interface Design 6
  • 7. Create a New Visual Basic 2010 2 Windows Application Project Chapter 2: Program and Graphical User Interface Design 7
  • 8. 2 Display the Toolbox ► If the window does not already display the Toolbox, point to the Toolbox button in the left margin of the window Chapter 2: Program and Graphical User Interface Design 8
  • 9. 2 Permanently Display the Toolbox ► If necessary, point to the Toolbox button in the left margin of the window to display the Toolbox. Then, click the Auto Hide button on the Toolbox title bar Chapter 2: Program and Graphical User Interface Design 9
  • 10. 2 Name the Windows Form Object ► Click anywhere in the Windows Form object to select it ► In the Solution Explorer window, right-click the Form1.vb filename. On the shortcut menu, point to Rename ► Click Rename. Type the name of the form, and press the ENTER key Chapter 2: Program and Graphical User Interface Design 10
  • 11. 2 Name the Windows Form Object Chapter 2: Program and Graphical User Interface Design 11
  • 12. Set the Title Bar Text 2 in a Windows Form Object ►With the Windows Form object selected, scroll in the Properties window until you find the Text property. Then, double-click in the right column for the Text property ►Type the title bar text, and then press the ENTER key Chapter 2: Program and Graphical User Interface Design 12
  • 13. Set the Title Bar Text 2 in a Windows Form Object Chapter 2: Program and Graphical User Interface Design 13
  • 14. 2 Resize a Form ►Place the mouse pointer over the sizing handle in the lower-right corner of the Windows Form object ►Drag the sizing handle to the right and down until the window is the size you want. Then, release the left mouse button Chapter 2: Program and Graphical User Interface Design 14
  • 15. 2 Add a Label Object ►Drag the Label .NET component button from the Common Controls category in the Toolbox over the Windows Form object to the approximate location where you want to place the Label object ►When the mouse pointer is in the correct location, release the left mouse button Chapter 2: Program and Graphical User Interface Design 15
  • 16. 2 Name the Label Object ►With the Label object selected, scroll in the Properties window until you find the (Name) property. Then double-click in the right column for the (Name) property ►Type the new name, and then press the ENTER key Chapter 2: Program and Graphical User Interface Design 16
  • 17. 2 Change the Text in a Label Object ►With the Label object selected, scroll in the Properties dialog box until you find the Text property. Then, double-click the Text value in the right column ►Type the new text for the Text property ►To enter the Text property, press the ENTER key Chapter 2: Program and Graphical User Interface Design 17
  • 18. 2 Change the Text in a Label Object Chapter 2: Program and Graphical User Interface Design 18
  • 19. Enter Multiple Lines of Text 2 in a Label Object ►With the Label object selected, click the Text property name in the left column of the Properties window. Then, click the down arrow in the right column of the Text property Chapter 2: Program and Graphical User Interface Design 19
  • 20. Change Label Font, Font Style, 2 and Font Size ►Click the Label object to select it. Scroll until you find the Font property in the Properties window. Click the Font property in the left column of the Label property window ►Click the ellipsis button for the Font property ►In the Font dialog box, scroll to the font you want to use in the Font list and then click the font in the Font list. Click a desired font style in the Font style list. Click the size you want to use in the Size list ►Click the OK button Chapter 2: Program and Graphical User Interface Design 20
  • 21. Change Label Font, Font Style, 2 and Font Size Chapter 2: Program and Graphical User Interface Design 21
  • 22. Center a Label Object 2 in the Windows Form Object ►With the Label object selected, click Format on the Menu bar and then point to Center in Form on the Format menu ►Click Horizontally on the Center in Form submenu Chapter 2: Program and Graphical User Interface Design 22
  • 23. 2 Delete GUI Objects ►Select the object to be deleted by clicking it ►Press the DELETE key on the keyboard Chapter 2: Program and Graphical User Interface Design 23
  • 24. Use the Undo Button 2 on the Standard Toolbar ►Click the Undo button on the Standard toolbar Chapter 2: Program and Graphical User Interface Design 24
  • 25. 2 Add a PictureBox Object ►With the Toolbox visible, drag the PictureBox .NET component on the Toolbox over the Windows Form object to the approximate location where you want the PictureBox object to be displayed ►When the mouse pointer is in the correct location, release the left mouse button Chapter 2: Program and Graphical User Interface Design 25
  • 26. 2 Add a PictureBox Object Chapter 2: Program and Graphical User Interface Design 26
  • 27. 2 Name a PictureBox Object ►Select the PictureBox object ►Locate the (Name) property in the Properties window for the PictureBox object ►Double-click the value in the right column for the (Name) property, type the name, and then press the ENTER key Chapter 2: Program and Graphical User Interface Design 27
  • 28. 2 Resize a PictureBox Object ►Place the mouse pointer over the sizing handle at the lower-right corner of the PictureBox object, and then drag the handle to the size required Chapter 2: Program and Graphical User Interface Design 28
  • 29. 2 Add a Second PictureBox Object ►Drag the PictureBox .NET component in the Toolbox to any location in the Windows Form object, and then release the left mouse button Chapter 2: Program and Graphical User Interface Design 29
  • 30. 2 Make Objects the Same Size ►Select the object whose size you want to duplicate, and then hold down the CTRL key and click the object you want to resize ►Click Format on the menu bar and then point to the Make Same Size command on the Format menu ►Click Both on the Make Same Size submenu Chapter 2: Program and Graphical User Interface Design 30
  • 31. 2 Make Objects the Same Size Chapter 2: Program and Graphical User Interface Design 31
  • 32. 2 Align the PictureBox Objects ►With the left and right PictureBox objects selected, click Format on the menu bar and then point to Align on the Format menu ►Click Bottoms on the Align submenu Chapter 2: Program and Graphical User Interface Design 32
  • 33. Center Multiple Objects Horizontally 2 in the Window ►With both objects selected, click Format on the menu bar and then point to the Center in Form command ►Click Horizontally on the Center in Form submenu Chapter 2: Program and Graphical User Interface Design 33
  • 34. 2 Add a Button Object ►With the Toolbox displayed in the Visual Studio window, drag the Button .NET component in the Toolbox over the Windows Form object to the position where you want to place the button ►When the mouse pointer is positioned properly, release the left mouse button Chapter 2: Program and Graphical User Interface Design 34
  • 35. 2 Name and Set Text for a Button Object ►With the Button object selected, scroll in the Properties dialog box until you find the Text property. Double-click the Text value in the right column, type the text you want to display, and then press the ENTER key Chapter 2: Program and Graphical User Interface Design 35
  • 36. 2 Change Button Object Size ►Place the mouse pointer over the right edge of the Button object until the pointer changes to a double-headed arrow ►Drag the mouse pointer to the right until the Button object is just big enough to display the text, and then release the left mouse button Chapter 2: Program and Graphical User Interface Design 36
  • 37. 2 Add and Align a Second Button ►Drag the Button .NET component from the Toolbox to the right of the Standard Room button on the Windows Form object. Align the top of the rectangle in the mouse pointer to the top of the Standard Room button until a blue line displays along the tops of the buttons ►When the buttons are aligned and spaced as you like, release the left mouse button Chapter 2: Program and Graphical User Interface Design 37
  • 38. 2 Add and Align a Second Button Chapter 2: Program and Graphical User Interface Design 38
  • 39. 2 Aligning Objects Vertically ►If necessary, click anywhere in the Windows Form object to deselect any other objects. Then, slowly drag the Deluxe Room button below the Standard Room button until vertical blue snap lines are displayed ►When the blue lines appear, indicating the buttons are aligned vertically, drag the Deluxe Room button up or down to create the proper spacing between the buttons, and then release the left mouse button Chapter 2: Program and Graphical User Interface Design 39
  • 40. 2 Aligning Objects Vertically Chapter 2: Program and Graphical User Interface Design 40
  • 41. 2 Save a Visual Basic Project ►To save the work you have completed, you can click the Save All button on the Standard toolbar ►The first time you save a project, the Save Project dialog box is displayed Chapter 2: Program and Graphical User Interface Design 41
  • 42. 2 Close Visual Studio 2010 ►To close Visual Studio, you can click the Close button on the right of the Visual Studio window title bar ►If, when you close Visual Studio, you have never saved your program, Visual Studio will display the Close Project dialog box Chapter 2: Program and Graphical User Interface Design 42
  • 43. 2 Open a Visual Studio Project ►Method 1: Double-click the solution file in the folder in which it is stored ►Method 2: With Visual Studio open, click the Open File button on the Standard toolbar, locate the solution file, and open it ►Method 3: With Visual Studio open, click File on the menu bar and then point to Recent Projects and Solutions on the File menu. Click the name of the project you want to open Chapter 2: Program and Graphical User Interface Design 43
  • 44. 2 Program Development Life Cycle ►Set of phases and steps that are followed by developers to design, create, and maintain a computer program • Gather and Analyze the Program Requirements • Design the User Interface • Design the Program Processing Objects • Code the Program • Test the Program • Document the Program/System • Maintain the Program/System Chapter 2: Program and Graphical User Interface Design 44
  • 45. Phase I: Gather and Analyze the 2 Program Requirements ►Gather project requirements by interviewing users, reviewing current procedures, and completing other fact-gathering tasks ►Two types of requirements documentation • Requirements document • Use Case Definition Chapter 2: Program and Graphical User Interface Design 45
  • 46. Phase I: Gather and Analyze the 2 Program Requirements Chapter 2: Program and Graphical User Interface Design 46
  • 47. Phase I: Gather and Analyze the 2 Program Requirements Chapter 2: Program and Graphical User Interface Design 47
  • 48. 2 Phase 2: Design the User Interface ►Developers sometimes spend 25% to 40% of the program design time on the user interface • Presentation layer ►Use Visual Studio to create the user interface ►Interface designs are often called mock-ups Chapter 2: Program and Graphical User Interface Design 48
  • 49. 2 Phase 2: Design the User Interface ►Principles of User Interface Design • The GUI should be easy to use and follow ►Users will not be satisfied with the application if the user interface is not easy to use • Three primary means of interacting in a user interface are the keyboard, a pointing device, and voice input • Use of the interface should feel natural and normal • Provide the most appropriate object for each requirement Chapter 2: Program and Graphical User Interface Design 49
  • 50. 2 Phase 2: Design the User Interface • Once an object is used for a particular purpose, then that object should be used for the same purpose throughout the program interface • Arrange objects in the sequence in which they are used • The interface should be kept as simple as possible, while maintaining functionality • The user interface should be intuitive Chapter 2: Program and Graphical User Interface Design 50
  • 51. 2 Summary ►Open and close Visual Studio 2010 ►Create a Visual Basic 2010 Windows Application project ►Name and set the Title Bar text in a Windows Form object; resize a Windows Form object ►Add a Label object to a Windows Form object; name the Label object; set the text in the Label object; change the Font properties of the text in the Label object ►Add a PictureBox object to the Windows Form object; name the PictureBox object; resize the PictureBox object Chapter 2: Program and Graphical User Interface Design 51
  • 52. 2 Summary ►Add a Button object to the Windows Form object; name the Button object; set the text in the Button object; change the Button object size ►Align Objects on the Windows Form object ►Save and open Visual Basic projects ►Understand and implement graphical user interface design principles ►Understand and implement the first two phases of the program development life cycle Chapter 2: Program and Graphical User Interface Design 52
  • 53. Microsoft Visual Basic 2010 CHAPTER TWO COMPLETE Program and Graphical User Interface Design