How To Use List Box

This how to will demonstrate how to draw a listbox and utilize it functionality using SwinGame’s User Interface.

Level

Expert

Details

In SwinGame’s User Interface, a list is a component that can be used to load a list of thing for example it could be a list of songs or a list of items in a program. As with most components that uses User Interface functionality it is required to create two images represent the active and inactive stage.

Below is a snip-shot of the configuration for a list box that will be stored from the text file. From the snip set we can see that the panel that use to contain the list box is 320 in width and 180 in height positioning at 0, 0. The active image for the list box is called ‘lstBoxPanel1Active.png’ and the non-active image is called ‘lstBoxPanel1.png’. 

// Panel data: 
x: 0 
y: 0 
//width 
w: 320 
//height 
h: 180 
//active bmp 
a: lstBoxPanel1Active.png 
// Background Image 
b: lstBoxPanel1.png 
//inactive bmp 
i: lstBoxPanel1.png 
//Draggable 
d: true 
v: false  

//List 
r: 8,5, 306, 165, List, List1, 1, 6, -1, courier, 16, 16, v, lstBoxScrollButton.png 
// Lists are loaded as a region with the following format: 
// r: x, y, w, h, Type, ListID, Columns, Rows, ActiveItem, fontID, scrollSize, scrollKind 

As for the list box setting it will be positioning at 8 for x coordinate and 5 for y coordinate. The list box will be of 306 in width and 165 in height. The rest are self-explanatory if you look at the snip set above.

The most common procedures that will be used for list-box are ListFromRegion, ListAddItem, ListActiveItemIndex. ListFromRegion will return the list of the region, ListAddItem are uses to add item to the list and ListActiveItemIndex are uses to check which item in the list currently being select on.

The video that shown on the upper right will show how to load a list of music into a list-box and the code for it will be display down below.

Source Code Widget

  • program HowToUseListBox;
    uses SwinGame,sgTypes,sgUserInterface;
    
    procedure Main();
    var
        p2 : Panel;
        lst : GUIList;
        p1 : Panel;
    begin
        OpenAudio();
        OpenGraphicsWindow('How To Use ListBox ' ,320 ,240 );
        LoadDefaultColors();
        GUISetBackgroundColor(ColorWhite );
        GUISetForegroundColor(ColorGreen );
        LoadResourceBundle('MainMenu.txt' );
        LoadMusic('game.ogg' );
        LoadMusic('diving-turtle.mp3' );
        LoadMusic('fast.mp3' );
        LoadMusic('gentle-thoughts-1.mp3' );
        LoadMusic('morning-workout.mp3' );
        LoadMusic('saber.ogg' );
        LoadMusic('chipmunk.ogg' );
        LoadMusic('bells.ogg' );
        LoadMusic('camera.ogg' );
        LoadMusic('comedy_boing.ogg' );
        LoadMusic('dinosaur.ogg' );
        LoadMusic('dog_bark.ogg' );
        p1 := LoadPanel('lstBoxPanel.txt' );
        ShowPanel(p1 );
        lst := ListFromRegion(RegionWithID(p1 ,'List1' )  );
        ListAddItem(lst ,'Game' );
        ListAddItem(lst ,'Diving Turtle' );
        ListAddItem(lst ,'Fast' );
        ListAddItem(lst ,'Gentle Thoughts' );
        ListAddItem(lst ,'Morning Workout' );
        ListAddItem(lst ,'Saber' );
        ListAddItem(lst ,'Chipmunk' );
        ListAddItem(lst ,'Bells' );
        ListAddItem(lst ,'Camera' );
        ListAddItem(lst ,'Comedy Boing' );
        ListAddItem(lst ,'Dinosaur' );
        ListAddItem(lst ,'Dog Bark' );
        p2 := LoadPanel('lstBoxPanel2.txt' );
        ShowPanel(p2 );
        PanelSetDraggable(p1 ,false );
        PanelSetDraggable(p2 ,false );
        repeat
            ProcessEvents();
            if  RegionClickedId()  = 'Button1'   then
            begin
                if  ListActiveItemIndex(lst )  = 0   then
                    PlayMusic('game.ogg' );
                if  ListActiveItemIndex(lst )  = 1   then
                    PlayMusic('diving-turtle.mp3' );
                if  ListActiveItemIndex(lst )  = 2   then
                    PlayMusic('fast.mp3' );
                if  ListActiveItemIndex(lst )  = 3   then
                    PlayMusic('gentle-thoughts-1.mp3' );
                if  ListActiveItemIndex(lst )  = 4   then
                    PlayMusic('morning-workout.mp3' );
                if  ListActiveItemIndex(lst )  = 5   then
                    PlayMusic('saber.ogg' );
                if  ListActiveItemIndex(lst )  = 6   then
                    PlayMusic('chipmunk.ogg' );
                if  ListActiveItemIndex(lst )  = 7   then
                    PlayMusic('bells.ogg' );
                if  ListActiveItemIndex(lst )  = 8   then
                    PlayMusic('camera.ogg' );
                if  ListActiveItemIndex(lst )  = 9   then
                    PlayMusic('comedy_boing.ogg' );
                if  ListActiveItemIndex(lst )  = 10   then
                    PlayMusic('dinosaur.ogg' );
                if  ListActiveItemIndex(lst )  = 11   then
                    PlayMusic('dog_bark.ogg' );
            end;
            if  RegionClickedId()  = 'Button2'   then
                if  MusicPlaying()    then
                    PauseMusic();
            if  RegionClickedId()  = 'Button3'   then
                ResumeMusic();
            if  RegionClickedId()  = 'Button4'   then
                if  MusicPlaying()    then
                    StopMusic();
            DrawInterface();
            UpdateInterface();
            RefreshScreen();
        
        until WindowCloseRequested()  or (RegionClickedId()  = 'Button5' );
        CloseAudio();
        ReleaseAllResources();
    end;
    begin
        Main();
    end.
    Download Now"
  • #include 
    #include "SwinGame.h"
    int main() 
    {
        panel  p2;
        guilist  lst;
        panel  p1;
        open_audio();
        open_graphics_window("How To Use ListBox " ,320 ,240 );
        load_default_colors();
        guiset_background_color(color_white );
        guiset_foreground_color(color_green );
        load_resource_bundle("MainMenu.txt" );
        load_music("game.ogg" );
        load_music("diving-turtle.mp3" );
        load_music("fast.mp3" );
        load_music("gentle-thoughts-1.mp3" );
        load_music("morning-workout.mp3" );
        load_music("saber.ogg" );
        load_music("chipmunk.ogg" );
        load_music("bells.ogg" );
        load_music("camera.ogg" );
        load_music("comedy_boing.ogg" );
        load_music("dinosaur.ogg" );
        load_music("dog_bark.ogg" );
        p1 = load_panel("lstBoxPanel.txt" ) ;
        show_panel(p1 );
        lst = list_from_region(region_with_id(p1 ,"List1" ) ) ;
        list_add_item(lst ,"Game" );
        list_add_item(lst ,"Diving Turtle" );
        list_add_item(lst ,"Fast" );
        list_add_item(lst ,"Gentle Thoughts" );
        list_add_item(lst ,"Morning Workout" );
        list_add_item(lst ,"Saber" );
        list_add_item(lst ,"Chipmunk" );
        list_add_item(lst ,"Bells" );
        list_add_item(lst ,"Camera" );
        list_add_item(lst ,"Comedy Boing" );
        list_add_item(lst ,"Dinosaur" );
        list_add_item(lst ,"Dog Bark" );
        p2 = load_panel("lstBoxPanel2.txt" ) ;
        show_panel(p2 );
        panel_set_draggable(p1 ,false );
        panel_set_draggable(p2 ,false );
        do 
        {
            process_events();
            if ( region_clicked_id() == "Button1"  )
            {
                if ( list_active_item_index(lst ) == 0  )
                    play_music("game.ogg" );
                if ( list_active_item_index(lst ) == 1  )
                    play_music("diving-turtle.mp3" );
                if ( list_active_item_index(lst ) == 2  )
                    play_music("fast.mp3" );
                if ( list_active_item_index(lst ) == 3  )
                    play_music("gentle-thoughts-1.mp3" );
                if ( list_active_item_index(lst ) == 4  )
                    play_music("morning-workout.mp3" );
                if ( list_active_item_index(lst ) == 5  )
                    play_music("saber.ogg" );
                if ( list_active_item_index(lst ) == 6  )
                    play_music("chipmunk.ogg" );
                if ( list_active_item_index(lst ) == 7  )
                    play_music("bells.ogg" );
                if ( list_active_item_index(lst ) == 8  )
                    play_music("camera.ogg" );
                if ( list_active_item_index(lst ) == 9  )
                    play_music("comedy_boing.ogg" );
                if ( list_active_item_index(lst ) == 10  )
                    play_music("dinosaur.ogg" );
                if ( list_active_item_index(lst ) == 11  )
                    play_music("dog_bark.ogg" );
            }
            if ( region_clicked_id() == "Button2"  )
                if ( music_playing()  )
                    pause_music();
            if ( region_clicked_id() == "Button3"  )
                resume_music();
            if ( region_clicked_id() == "Button4"  )
                if ( music_playing()  )
                    stop_music();
            draw_interface();
            update_interface();
            refresh_screen();
        }
        while ( ! (window_close_requested() || (region_clicked_id() == "Button5" ) ) );
        close_audio();
        release_all_resources();
        return 0;
    }
    
  • Source Code Coming Soon

  • Source Code Coming Soon

  • Source Code Coming Soon

If there is a useful hint you will find it in a box like this

Possibilities

Suggested projects will appear here.