Point of Sale Tutorial Part 3 – Creating Graphical Interfaces Pt 2

In our previous tutorial, we made the 5 application interfaces on this project, This is the continuation of creating the graphical interfaces. Lets begin!

Object Needed:
11 - Label
2 – CombotBox
6 – Command Button
8 – TextBox
1 - Shape

FORM PROPERTIES Settings
(Name) : frmProductAE
BorderStyle : 1 – Fixed Single
Caption : Create New Entry
StartUpPosition: 2 –CenterScreen

1st LABEL Properties
Caption : Stock Add Entry
AutoSize : True
BackStyle : 0 - Transparent
Font : Arial Narrow, Narrow, 24
Forecolor : &H00FFFFFF&

2nd LABEL Properties
Caption : Barcode
AutoSize : True
BackStyle : 0 - Transparent
Font : Tahoma, Bold, 8

OTHER LABELS Properties In Caption value, separated by comma match to each label (see image)
Caption : Product, Description, Category, Supplier, Remarks, Quantity, Unit Price, Selling Price, Amount
AutoSize : True
BackStyle : 0 - Transparent
Font : Tahoma, Bold, 8

1st COMBOBOX Properties
Caption : cboCategory
Font : Tahoma, Regular, 8

2nd COMBOBOX Properties
Caption : cboSupplier
Font : Tahoma, Regular, 8

1st TEXTBOX Properties
(Name) : txtBarcode
Font : Tahoma, Bold, 8
Backcolor : &H00C0E0FF&
Forecolor : &H00004080&

2nd TEXTBOX Properties
(Name) : txtProduct
Font : Tahoma, Regular, 8
Forecolor : &H00004080&

3rd TEXTBOX Properties
(Name) : txtDescription
Font : Tahoma, Regular, 8

4th TEXTBOX Properties
(Name) : txtRemarks
Font : Tahoma, Regular, 8
Multiline : True
Scrollbars : 2 – Vertical

OTHER TEXTBOX Properties
In Name value, separated by comma match to each label (see image)
(Name) : txtQty, txtUnitPrice, txtSellingPrice, txtAmount
Font : Tahoma, Regular, 8

SHAPE Properties 
Backcolor : &H80000006&

COMMAND BUTTONS Properties
(Name) : cmdNew, cmdSave, cmdClear, cmdExit
Caption : New, Save, Clear, Exit
Font : Tahoma, Bold, 8

OTHER COMMAND BUTTONS Properties
(Name) : cmdAddCat, cmdAddSupp
Caption : . . ., . . .
Font : Tahoma, Bold, 8

Next Form: frmSupplierAE

Object Needed:
13 - Label
1 – CombotBox
4 – Command Button
9 – TextBox
1 - Shape
1 – DTPicker

FORM PROPERTIES Settings
(Name) : frmSupplierAE
BorderStyle : 1 – Fixed Single
Caption : Create New Entry
StartUpPosition: 2 –CenterScreen

1st LABEL Properties
Caption : Supplier Add Entry
AutoSize : True
BackStyle : 0 - Transparent
Font : Arial Narrpw, Narrow, 24
Forecolor : &H00FFFFFF&

2nd LABEL Properties
Caption : Supplier Contact Details
AutoSize : True
BackStyle : 0 - Transparent
Font : Tahoma, Regular, 8
Forecolor : &H00FFFFFF&

OTHER LABELS Properties
Caption : Supplier Code, Supplier, Description, Address, Date Started, Status, Contact Person, Business Tel., Email Address, Telefax No., Mobile
AutoSize : True
BackStyle : 0 - Transparent
Font : Tahoma, Regular, 8

1st & 2nd SHAPE Properties
Backcolor : &H80000006&

COMMAND BUTTONS Properties
(Name) : cmdNew, cmdSave, cmdClear, cmdExit
Caption : New, Save, Clear, Exit
Font : Tahoma, Bold, 8

1st TEXTBOX Properties
(Name) : txtSuppCode
Font : Tahoma, Bold, 8
Backcolor : &H00C0E0FF&
Forecolor : &H00004080&

2nd TEXTBOX Properties
(Name) : txtSupplier
Font : Tahoma, Regular, 8
Forecolor : &H00004080&

3rd TEXTBOX Properties
(Name) : txtDescription
Font : Tahoma, Regular, 8

4th TEXTBOX Properties
(Name) : txtAddress
Font : Tahoma, Regular, 8
Multiline : True
Scrollbars : 2 – Vertical

OTHER TEXTBOX Properties
In Name value, separated by comma match to each label (see image)
(Name) : txtContact, txtTelNo, txtEmail, txtTelfaxNo, txtMobile
Font : Tahoma, Regular, 8

COMBOBOX Properties
(Name) : cboStatus
Font : Tahoma, Regular, 8

DTPICKER Properties
(Name) : DTStart
Font : Tahoma, Regular, 8

Next Form: frmUAccount

Object Needed:
7 - Label
1 – CombotBox
7 – Command Button
4 – TextBox
1 - Shape
1 – DTPicker
2 – Frame
1 – ImageList
1 - Listview

FORM PROPERTIES Settings
(Name) : frmUAccount
BorderStyle : 1 – Fixed Single
Caption : User Account Manager
StartUpPosition: 2 –CenterScreen

1st LABEL Properties
Caption : User Account Manager
AutoSize : True
BackStyle : 0 - Transparent
Font : Arial Narrow, Narrow, 24
Forecolor : &H00FFFFFF&

OTHER LABELS Properties
Caption : Username, Password, Confirm Password, Complete Name, Designation, Date Created
AutoSize : True
BackStyle : 0 - Transparent
Font : Tahoma, Regular, 8

COMBOBOX Properties
(Name) : cboDesignation
Font : Tahoma, Regular, 8

DTPICKER Properties
(Name) : dtCreate
Font : Tahoma, Regular, 8

SHAPE Properties
Backcolor : &H80000006&

1st COMMAND BUTTONS Properties
(Name) : cmdAddDesignation
Caption : . . .
Font : Tahoma, Bold, 8

COMMAND BUTTONS Properties
(Name) : cmdNew, cmdSave, cmdUpdate, cmdDelete, cmdClear, cmdExit
Caption : New, Save, Update, Delete, Clear, Exit
Font : Tahoma, Bold, 8

1st TEXTBOX Properties
(Name) : txtUsername
Font : Tahoma, Regular, 8

2nd TEXTBOX Properties
(Name) : txtPassword
Font : Wingdings, Regular, 8

3rd TEXTBOX Properties
(Name) : txtConfirm
Font : Wingdings, Regular, 8

4th TEXTBOX Properties
(Name) : txtName
Font : Tahoma, Regular, 8

1st FRAME Properties
Caption : New Account
Font : Tahoma, Bold, 9

2nd FRAME Properties
Caption : User Account Masterlis
Font : Tahoma, Bold, 9

Right Click the Listview Object and Click Properties
LISTVIEW PROPERTIES Settings
(Name) : lvAccount
Appearance : 1 – cc3D

In General Tab Settings
View : 3 - lvwReport
LabelEdit : 1 - lvwManual
BorderStyle : 1 - CCFixedSingle
Appearance : 1 – CC3D
Checked : LabelWrap, MultiSelect, Enabled, FlatScrollBar, FullRowSelect, Gridlines.

In Image Lists Tab Settings
Normal, Small, Column Header = ImageList1

In Column Headers Tab Settings
Insert 7 Column, Index (1) Text: User ID, Index (2) Text: Username, Index (3) Text: Password, Index (4) Text: Confirm, Index (5) Text: Complete Name, Index (6) Text: Designation, Index (7) Text: Date Create

In Font Tab Settings
Font : Tahoma, Bold, 8.25

IMAGELISTS PROPERTIES Settings
Right Click the ImageList Object and Click Properties
Go to Image Tab, Click Insert Picture and upload any icon that you want.
Note: Imagelist accepts only .ico file extension.

Next Form: MDIMain

Object Needed:
1 – StatusBar

FORM PROPERTIES Settings
(Name) : MDIMain
Caption : Point Of Sale
StartUpPosition: 2 –CenterScreen
WindowsState : 2 –Maximize
MDIChild : True

STATUSBAR PROPERTIES Settings
(Name) : MDIStatus
Font : Tahoma, Regular, 8

Right Click the StatusBar Object and Click Properties
Go to Panel Tab, Insert 12 Panels

In Panel Tab Settings
Insert 12 Panels, Index (1) , Index (2) Text: ONLINE, Index (3) Bevel: 1 - sbrInset, Index (4) Bevel: 1 - sbrInset , AutoSize: 1 - sbrSpring, Index (5) Browse any Icon, Index (6), Index (7) Style: 6 – sbrDate, Bevel: 1 – sbrInset, Index (8) Style: 5 – sbrTime, Bevel: 1 – sbrInset, Index (9) Style: 3 – sbrIns, Bevel: 1 – sbrInset, Index (10) Style: 2 – sbrNum, Bevel: 1 – sbrInset, Index (11) Style: 1 – sbrCaps, Bevel: 1 – sbrInset, Index (12) Style: 4 – sbrScrl, Bevel: 1 – sbrInset,

In Menu Editor Settings
Right Click the Form and Click Menu Editor

CAPTION                   NAME
&File                           mFile
Logout                         mLogout
-                                   mSep1
Close                           mClose
&System                     mMasters
Suppliers                     mSuppliers
Users                           mUsers
User Designation        mUserDesig
-                                   mSep2
Item Category             mItemCategory
Product Entry              mProductMaster
Product LookUp          mPLookUp
&Transaction               mTransaction
Point Of Sales              mPOS
&Utilities                     mUtilities
Calculator                    mCalculator
WinExplorer                mWinExplorer
Notepad                       mNotepad 
A&bout                       mAbout

Object Needed:
7 – Command Buttons
18 – Labels
5 – TextBox
1 – Listview
1 – Timer
2 – Imagelist
1 – PictureBox
1 – Image
1 - Frame

FORM PROPERTIES Settings
(Name) : frmPOS
Caption : Point Of Sale [Transaction]
StartUpPosition: 2 –CenterScreen

FRAME Properties
Caption :
Height : 9135
Width : 12300

1st LABEL Properties
Caption : OR No.
AutoSize : True
BackStyle : 0 - Transparent
Font : Tahoma, Bold, 8

2nd LABEL Properties
(Name) : lblInvoiceNo
BackStyle : 1 - Opaque
Font : Tahoma, Bold, 11
Height : 345
Width : 2385
Backcolor : Black
Forecolor : Green

3rd LABEL Properties
(Name) : lblInvoiceNo
Caption : Amount
BackStyle : 0 - Transparent
Font : Tahoma, Bold, 20

4th LABEL Properties
(Name) : lblTotal
Alignment : 1 – Right Justify
Caption : 0.00
Font : Arial, Bold, 50
Height : 1095
Width : 12015
Backcolor : Black
Forecolor : Green

5th 6th 7th 8th 9th LABEL Properties
BackStyle : 0 - Transparent
Caption : Barcode #, Description, Unit Price, Quantity, Sub Total
Font : Tahoma, Bold, 8

10th 11th 12th LABEL Properties
BackStyle : 0 - Transparent
Caption : Total Amount, Cash Tendered, Change
Font : Arial, Bold, 18
Forecolor : Green

13th 14th 15th LABEL Properties
(Name) : lblTotalAmount, lblCashTend, lblChange
BackStyle : 0 - Transparent
Caption : 0.00, 0.00, 0.00
Font : Arial, Bold, 18
Forecolor : Green

16th LABEL Properties BackStyle : 0 - Transparent
Caption : Im Happy To Serve You! [CASHIER]:
Font : Tahoma, Bold, 10
Forecolor : White

17th LABEL Properties
BackStyle : 0 - Transparent
Caption :
Font : Tahoma, Bold, 14
Forecolor : Red

18th LABEL Properties
BackStyle : 0 - Transparent
Caption : Note: Press ESC to Cancel Transaction
Font : Tahoma, Regular, 8
Forecolor : Red

1st TEXTBOX Properties
(Name) : txtProductCD
Font : Tahoma, Bold, 9
Forecolor : Brown
Height : 375
Width : 1935

2nd TEXTBOX Properties
(Name) : txtDescription
Font : Tahoma, Bold, 9
Height : 375
Width : 5160

3rd TEXTBOX Properties
(Name) : txtUnitPrice
Alignment : 2 – Center
Font : Tahoma, Bold, 9
Height : 375
Width : 1575

4th TEXTBOX Properties
(Name) : txtQuantity
Alignment : 2 – Center
Font : Tahoma, Bold, 9
Height : 375
Width : 1215
Forecolor : Browns

5th TEXTBOX Properties
(Name) : txtSubTotal
Alignment : 2 – Center
Font : Tahoma, Bold, 9
Height : 375
Width : 2160

LISTVIEW Properties
(Name) : lvList
Font : Tahoma, Regular, 8
Height : 3135
Width : 12015

1st 2nd 3rd 4th COMMAND BUTTONS Properties
(Name) : cmdTransaction, cmdItemVoid, cmdLookUp, cmdCashTend
Backcolor : Orange
Captions : New Trans.., Item Void, Look Up, Cash Tend
Style : 1 - Graphical
Font : Tahoma, Regular, 8

5th 6th 7th COMMAND BUTTONS Properties
(Name) : cmdPrint, cmdSave, cmdClose
Backcolor : Green
Captions : Print, Save, Close 
Style : 1 - Graphical
Font : Tahoma, Regular, 8


And we're done in graphical interfaces, if you see something missing with the properties you can refer the image of every form..

See you in the next tutorial.