yab Beginners Tutorial No. 2


System: BeOS, Haiku, Zeta

You can only understand this tutorial once you have read and understood the first Beginners Tutorial



Index

1. We create a application 5. Run the program options
2. Planing the App 6. What is still missing
3. Program window 7. Bind source
4. Interface 8. The complete source




 

we create a application

During this tutorial we create a application to make bfs images.

The first step is to think: which functions does this application need? A BFS Creator need an option to set the name and the size of the imagefile. We need to know the path to the target folder for writing the imagefile.

The second step is to think about the construction of the application. Do this with the eyes of the user of the application.

- The program start
- Interface for setup the name and size of the imagefile
- A button to start creating the imagefile
- Open of a filetree to setup the target for the imagefile
- Create the imagefile
- Information for the user, that the image is created

back to index
 

Planing the App:

#!/boot/home/config/bin/yab

screenWidth = peek("desktopwidth")
screenHeight = peek("desktopheight")

dim part$(1)

inloop = true
while(inloop)
msg$ = message$
if (split(msg$, part$(), ":|") > 2) then
        PartTwo$ = part$(2)
        PartThree$ = part$(3)
fi
if (msg$ <> "") print msg$

switch msg$
        default:
end switch

if(window count<1) inloop = false

wend



This template sourcecode is bigger as you need it. I wrote more information into it, because you can use it for you following projects.

At the beginning we get the size of the screen with screenWidth = peek("desktopwidth") and screenHeight = peek("desktopheight"). First the screen width (desktopwidth) and then the screen height (desktopheight). We use this informations to place the main window in the middle of the screen.

Then we create an Array with dim part$(1) with the value 1. Past this we begin with the inloop. You know them from the first beginners tutorial. At msg$ = message$ we copy the information message$ into the variable msg$.

if (split(msg$, part$(), ":|") > 2) then
        PartTwo$ = part$(2)
        PartThree$ = part$(3)
fi
if (msg$ <> "") print msg$



Then we split the variable msg$. We're splitting at the ":" and the "|" sign. The ":" sign separates the parts of the message. The "|" sign is the end of the message. During these variables you get the information for the function the user is calling.

For example: You have a button called Button. When you use the terminal to test your source you get following information: "Button|". This information you can easily use with a case to proceed a function.

back to index
 

The Program window

We create a window and use the information of the screen resolution to place it in the middle of the screen:

window open ((screenWidth/2)-170), ((screenHeight/2)-80) to ((screenWidth/2)+170), ((screenHeight/2)+80), "createbfs", "BFS Image Creator"
        window set "createbfs", "MinimumTo", 340,160
        window set "createbfs", "MaximumTo", 340,160



This creates a window with a width of 340 pixel and a height of 160 pixel. We use the screen informations and place the window in the middle of the screen. To get the middle of the window, we take the value ScreenHeight and ScreenWidth and divid them by two. Then we take the half of the wanted window size and subtract them to the divided value for the left position of the window. We do the same for the right side, but we don't subtract the value, we add the value from the screenWidth. So we have, between the added and subtracted values, the wanted width of the window. We make the same with the ScreenHeight, we adding and subscracting the half of the wanted windowsize to/from the ScreenHeight (left side= middle of the screen -170 | middle of the screen +170 = right side).

We setup the maximum and minimum window size of the window using window set. So the user can set the window between this two values. If you set both values to the same size the user can not change the window size.

back to index
 

Interface

The next Step is to create a interface for the application.

draw text 20, 40, "Size of the Imagefile:", "createbfs"
textcontrol 150,25 to 270,60, "bfssize", "","","createbfs"
draw text 275, 40, "MB", "createbfs"

draw text 20, 65, "Name of the Imagefile:", "createbfs"
textcontrol 150,50 to 270,65, "bfsname", "","","createbfs"
draw text 275, 65, ".image", "createbfs"

button 120,110 to 220,130, "savebfs", "create", "createbfs"



At beginning of this tutorial we were thinking about the information the user needs to enter for the image file. This was the size of the image, the name of the image and the place where the image will be placed. We create two textcontrols, one for the size of the imagefile and the other one for the name of the imagefile. The command for the textcontrol is like a button. You setup the lefthand site and the top margin site of the textcontrol and past them to the righthand and lower edge site of the textcontrol. The next information is the id of the textcontrol. It is the name for using intermally the application. Then you set the displayed name of the textcontrol (we dont enter here a name, because we use draw text in this tutorial to do that). The last information is the view on that we place the textcontrol.

We dont use the name of the textcontrol we can set in the textcontrol command, because this name is directly in front of the textcontrol, so we dont get a nice looking interface then the textcontrol and the names of it don't have the same lengthens.



In front and behind the textcontrol we type a draw text so the user know that he have to enter here. We write .MB behind the first textcontrol so the user knows this entry is in megabytes. Behind the second one we write the extension for the imagefile (.image) so the user knows that the application adds this information to the imagename. Ok in BeOS and ZETA we don't have to set an extension but you can more quickly see which file it is when you have a extension.

The last object of the interface is the button to activate the image processing.

back to index
 

Run program functions

So we are at the point we need to create the BFS image processing. For this we use the shell tools dd to create a raw imagefile and mkbfs to initialize the image file with the bfs filesystem.

We don't can do this without the informations the user entered in the textcontrols

For that we enter the following code under the switch msg$ :

case "savebfs|"
        bfssize$=textcontrol get$ "bfssize"
        bfsname$=textcontrol get$ "bfsname"
        bfsimage$ = FILEPANEL "Save-File", "Save", "/boot/home", bfsname$+".image"
        Output$=system$("/boot/beos/bin/dd if=/dev/zero of="+bfsimage$+" bs=1024k count="+bfssize$)
        Output$=system$("mkbfs 2048 "+bfsimage$+"; sync")
ALERT "Imagefire are created!", "Ok", "info"
break



You know the case function from the beginners tutorial.

We create a variable bfssize$ and we get with textcontrol get$ "bfssize" the size of the imagefile. Getting infos from the textcontrol bfssize using textcontrol get$ and save them into bfssize$.

We do the same for the name of the imagefile. We also create a variable but we call it bfsname$. We get the information from the textcontrol bfsname with textcontrol get$ and save them to bfsname$.

After this we have the entered informations of the user.

The next step is to get the target folder for the imagefile. For this we use the command FILEPANEL. For this we create a variable with the name bfsimage$. With filepanel and the informations for it we open a window for browsing the system. We name it Save-File for the internal use and Save for the displayed name. Behind this is the path to that folder the browser window starts (here /boot/home) at. Here the User enters the name for the imagefile and this is saved into the variable. The complete string of the variable is the path with the imagename and the extension.

With Output$=system$("/boot/beos/bin/dd if=/dev/zero of="+bfsimage$+" bs=1024k count="+bfssize$) (with system$ you can use applications out of yab.) we create a raw imagefile bfsimage$ with the size bfssize$.

We initialize Output$=system$("/boot/beos/bin/dd if=/dev/zero of="+bfsimage$+" bs=1024k count="+bfssize$) the raw imagefile bfsimage$ with the bfs filesystem.

At the end of the image processing we use an ALERT command to inform the user that the image file is created. The first text is the information for the user "Imagefile is created!". The second one is the name for the button in the alert window and the last one is the type of information (here is it an info).

back to index
 

What is still missing?

Add some things from the first tutorial. Include the quit option for the window, enter a menu with informations about the developer, a quit option or something else.

back to index
 

Bind program code.

If your program is ready, then the next step is to bind it. By binding a program you prevent other people from looking into the program code so only you can change and look at the source code.

Open a Terminal window and enter the following:

yab -bind "Name of the App" /Path/to/Sourcecode.yab



With yab -bind you declare that you would like to bind the source code. The name of the program is the name of the file that you can find in your home folder. The source code can be added like before with drag and drop.

This is a screenshot of the bind source:



back to index
 

The complete source:

#!/boot/home/config/bin/yab

screenWidth = peek("desktopwidth")
screenHeight = peek("desktopheight")

window open ((screenWidth/2)-170), ((screenHeight/2)-80) to ((screenWidth/2)+170), ((screenHeight/2)+80), "createbfs", "BFS Image Creator"
        window set "createbfs", "MinimumTo", 340,160
        window set "createbfs", "MaximumTo", 340,160

draw text 20, 40, "Size of the Imagefile:", "createbfs"
textcontrol 150,25 to 270,60, "bfssize", "","","createbfs"
draw text 275, 40, "MB", "createbfs"

draw text 20, 65, "Name of the Imagefile:", "createbfs"
textcontrol 150,50 to 270,65, "bfsname", "","","createbfs"
draw text 275, 65, ".image", "createbfs"

button 120,110 to 220,130, "savebfs", "create", "createbfs"

dim part$(1)

inloop = true
while(inloop)
   msg$ = message$

   if (split(msg$, part$(), ":|") > 2) then
      PartTwo$ = part$(2)
      PartThree$ = part$(3)
   fi

   if (msg$ <> "") print msg$

   switch msg$

   case "savebfs|"
      bfssize$=textcontrol get$ "bfssize"
      bfsname$=textcontrol get$ "bfsname"
      bfsimage$ = FILEPANEL "Save-File", "Save", "/boot/home", bfsname$+".image"

      Output$=system$("/boot/beos/bin/dd if=/dev/zero of="+bfsimage$+" bs=1024k count="+bfssize$)
      Output$=system$("mkbfs 2048 "+bfsimage$+"; sync")

      ALERT "Imagefile are created!", "Ok", "info"
   break

   default:
   end switch

   if(window count<1) inloop = false

wend



back to index


Special thanks to JohnM for sending a PDF file of this Tutorial.
Special thanks to leszek and DaaT for checking the translation.
Tutorial and translation by Christian Albrecht (Lelldorin) August 2006
Made available by BeSly, the BeOS & Zeta knowledge