codemorphis.com Forum Index codemorphis.com
Software development: pure and simple.
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

Programming Tip #9: The ToolBar UI Component

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    codemorphis.com Forum Index -> Visual Programming Forum
View previous topic :: View next topic  

Please rate on a scale of 1-5 (5 being max)
how helpful (clarity, ease of understanding, relevance) this article was for you.
You must be logged in to vote.
1
0%
 0%  [ 0 ]
2
0%
 0%  [ 0 ]
3
0%
 0%  [ 0 ]
4
0%
 0%  [ 0 ]
5
100%
 100%  [ 2 ]
Total Votes : 2

Author Message
CodeMorphis



Joined: 02 Dec 2003
Posts: 252

PostPosted: Sun Aug 15, 2004 8:58 am    Post subject: Programming Tip #9: The ToolBar UI Component Reply with quote

Programming Tip #9: The ToolBar UI Component

A ToolBar is a useful user interface component for giving users of your program quick access to features and commands. An example of its usage is the Synopsis toolbar that has image icons and text for various functions such as pan, zoom, run and stop, etc.



In this article, we'll build a simple Windows program that has an application ToolBar, complete with text and images. We'll also see how to determine which toolbar buttons are pressed by a user.

Below we have a program that creates and presents a Window to our user.



The program's source VPD file can be downloaded here:

http://www.codemorphis.com/articles/tip9/Toolbar_prog_1.vpd

Open the Component Tray by clicking on "Component | Component Tray ..." in the Synopsis application toolbar. Click on the "UI Components" tab in the Component Tray and scroll down and look for the ToolBar component. Drag and drop the ToolBar component's icon onto the Windows form. Here is how things should look after you have dragged the ToolBar icon:



Now we want to add ToolBar buttons to our ToolBar UI component. Close the Component Tray and double click on the ToolBar component in our Window. This will bring up the property page for the ToolBar:



Here we have added a ToolBar button. To add the button, scroll down in the property page for the "ToolBar Buttons" section. Click "Add" to create a new ToolBar button. A new entry called "Button" will be added to the ToolBar buttons list. Select the new button and then change its text in the "Text" field below. Change the text to "Btn1". Press the Update button in the property page.

Now click the "Add" button twice to add two more buttons and then change their text to "Btn2" and "Btn3". Close the property page by clicking on its "OK" button. Here is how our window now looks:



We now have three buttons in our ToolBar. You can press the Run button to see how the program looks. Of course the program only displays the window with the ToolBar buttons. Let's modify it to react to user clicks on the ToolBar buttons.

Open the Component Tray and click on the "Windows" tab and drag and drop the MessageBox component onto the workspace area. Connect the MessageBox component as in the snapshot below:



Now press the Run button to test run the program. Note that everytime we click on one of the ToolBar buttons we get a message window indicating which button was pressed.

The source VPD file for our updated program can be downloaded here:

http://www.codemorphis.com/articles/tip9/Toolbar_prog_2.vpd

Now, let's update our user interface to have images for the ToolBar buttons. Open the Component Tray and click on the Windows tab. Drag and drop an ImageList component onto the workspace area. Double click the ImageList component. In the "Images" property section, click the "Add" button to browse for an image file. Add a total of three images.



Close the ImageList's Component Properties dialog and double click the Windows Form component. Double click the ToolBar to open the property page for the ToolBar again. In the "ToolBar Buttons" section select the ImageList component in the "ImageList" property. Then click on the "Btn1" entry and in the "Image Index" property click the Browse button to select an image index. Images in ImageLists are indexed from 0 and upwards.



Select image indices for the other ToolBar buttons. Click the OK button in the ToolBar component's property page.

Now when we run our program we see images as well as text in each of the ToolBar buttons.



The source VPD file for our completed program can be downloaded here:

http://www.codemorphis.com/articles/tip9/Toolbar_prog_3.vpd
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    codemorphis.com Forum Index -> Visual Programming Forum All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group