Hello world example of the MAF

In this section, we will illustarte how to create teh classical "hello world" example under MAF.

1. Include the header files. This header file will include all MadButter headers by default and define a system-wide MBApp instance variable. #include "<mb/app.h>" MBApp *myApp;

2. Initialize the MBApp instance. The hello.svg is an example SVG file. You can put anything inside it. The only requirement is that it must have a "btn" symbol inside it. We will explian how to create such symbol latter.

   void myapp_done(event_t evt, void arg); main(int argc, char *argv[]) {

    myApp = MBApp_init("hello.svg");
   

3. Add an event observer to receive the button events.

    mb_sprite *sprite = MBApp_getSprite(myApp);
    mb_button_t *button = MB_SPRITE_GET_OBJ(sprite,"btn");
    subject_add_event_observer(mb_obj_getSubject(MB_BUTTON_GET_OBJ(button)), EVT_OBJ_CLICK, myapp_done, NULL);
   

4. Enter the MBApp mainloop. This function can be called recursively. A recursive called is equivalent to a model window.

    MBApp_mainloop();
   

5. Release the MBApp instance and return the return value, which can be changed by the MBApp_setReturnValue. By default, it will return 0.

    return MBApp_done();
   

   }

6. The event observer handler.

   void myapp_done(event_t evt, void arg) {

    MBApp_quit(myApp);
   

   }

7. Create the hello.svg. We need to create a SVG file hello.svg for this example. Please follow the below instruction to create a SVG file. Since it is a SVG file, the art designer can use their favorite tools to create and modify it. Since it is an XML format, the programmer can add the required structure without spoiling the structure as well. In addition, since it is in XML, it is possible to write a "merge" program to merge the modification from both art designer and the programmer. This solve a big issue of the Flash. In Flash, since the FLA is an closed binary format. The art designer and programmer can not modify the FLA simutaneously. This won't be an issue for the SVG file.

8. First of all, invoke the inkscape and then create a new file by using 640x480 or whatever you want for your application.

9. Select Effects/MadButterFle/frame. Click the first cell and then click the insert Key Scene to create a new key scene. In this example, we will use one scene only. Therefore, select the first scene and then click Edit to edit the first scene.

10. Draw an recntangle on the screen. Please make the size as the full screen. Or you can put any image as the background as well.

11. Create a new layer and rename it to be button. We will put the confirm button here.

12. Create an rectangle on the new layer. Set its size to be 100x40. Move it to the appropriate location. Add text "OK" and put it in the center of the rectangle. We may groupboth rectangle and the text to be a group.

13. Select the group and then click the Effects/MadButterfly/convert to symbol. In this way, this rectangle become a MB symbol which can be accessible inside the MadButterfly program.

14. Select the group and then click the Effects/MadButterfly/Button/Convert to button. This will convert a symbol into a button.

15. Each button will have three independent frames. Please select the group and then select Effects/MadButterfly/Button/Edit Normal Button. The content of the normal button will be shown on the screen. Please cheange it to be blue.

16. Select the group again and then click Effects/MadButterfly/Button/Edit Active Button. Change the color to be red.

17. Select group again and the click Effects/MadButterfly/Button/Apply change. This will apply the previous change into the button. (PS, this may not be necessary when you read this article since we will write a output filter to convert the SVG into MBR file which will apply the change automatically.)

18. Save the SVG file.

19. Compile the above application and execute it.

Conclusion

You can see how easy it is to create an MadButterfly application. Actually, you don't need to write the above code. The code wizard can genearte code for you. You only need to add the observer. The code generated by the code wizard has two files. the HelloApp.c and the HelloUser.c. If the HelloUser.c exists, it will not be changed. However, the HelloApp.c will be updated with the new parameters. Please refer to the code wizard for the details.