Shaffian Engine for S60: write your Symbian UI with simple XML

Did you ever try to write symbian application from the scratch? It costs a lot of time to add some components. And if you want to do some easy task, for instance play audio file or receive sms, you must also to add a lot of code for this to bring it working. I got an idea to write an engine based on XML parser, which will done all necessary job for you automatically. Forget on memory leaks if you are initialising and deinitialising your components, everything is done automatically. Main idea is to define all components you want to use and inside your code you will add application logic only for it. There is a lot of to do to make it perfect but I am bringing first demo how I imagine to develop fast and quality application. Now only some custom components are implemented, but I am planning to add a support to classic symbian AVKON components (like listbox, grid, menu, message boxes etc...) Also, here will be a possibility to very easy write your own graphics user interface. Now, XML definition files are outside a project, i am planning later to add a possibilty to include xml data directly in the application (already pre-parsed) for case when developers don't wish to change their data by user.

Main Advantages:

  much faster application design
  independent user interface from application code
  global variables anywhere in the project
  easy to add shaffian engine into existing project (only a few init lines)
  you can still use all symbian features without any limitation
  easy to expand with new components

The best it will be to look on the demo to better understand how it should work. Download this installation SIS file (tested on Nokia 6630,6680). This is a binary SIS file, after installation, it will add 3 files (view1.xml, view2.xml and view3.xml) into directory where the application is installed (System/Apps/GfxTest - drive C or E). You can modify these xml files to see results without needing to recompile the application. (supported controls you will find on this page bellow). You can switch between these 3 views using 1,2 and 3 numeric keys on your device keyboard. Exit works only in view 1 in this test application. Now I have only a few basic components (mainpane, rectangle, ellipse, button, label, image, mainbar, menu, timer ) to show the power of this engine. It is really very easy to add a new components. I am going to add some high-level components like audio, camera, sms etc... Imagine, you want to use camera in your application, and everything you will need it will be add this line into your xml file:

<component type="camera"><rect>0,0,178,144</rect></component>

Then you can anywhere in your code have an access to camera component and call needed functions like Snap(), SetFlash() etc...

If you like this idea and want to improve this project or if you have some questions, please contact: shaffian@shaffex.com

Events:

Some components are able to generate events (for example timer expires). Virtual function EventDetected (TShaffianEvent aShaffianEvent) is then called and you can check which kind of event it is and handle it. Also, all needed systems events are sent into shaffian components.

Application example

View 1 (fullscreen):

View 2:

View 3:

Supported controls:

Every control have defined basic 2 elements (type and name). Defining name is not needed if you don't want to access this component using it's name. This is provided in function GetComponent ByName( TDesC& aName)

mainpane

This line will set your view to fullscreen mode (in this case view title text and icon is not needed)

Here, title is set to "View 2 Test", view icon is set from mbm file and also left and right cba buttons are set.

mainbar

This is a small example how to implement a main bar (see screenshot view1), you can turn time off by set time="0" and redefine left and right action buttons (cba)

rectangle

Draws rectangle with foreground color as a pen and background color as a brush (color attributes are in R,G,B). If you want not outlined rectangle set foreground_color=background_color. Also if you want to draw a square, set width = height.

ellipse

Similar like rectangle, but it draws an ellipse, set width=height if you want to draw a circle.

label

Draws a text on position x,y defined in a rect tag with defined color.

button

This draws an example button, text is centered inside button area. Focus and Z-order must be implemnted to use it.

image (non masked)

You must set source mbm file and index to draw an image. "!" means, drive letter is taken from the drive, where your application is installed

image (masked)

Here you must add extra parameter mbmmask (monochrome mask for your image, and mask bit (0 or 1) of your mask.

menu

This is an example how to make custom menu (own user interface)

timer

Interval is in microseconds (in this example, timer event is called every 0.3s)