Win an Ipad
  Developer   Demos & Samples   Hello UI

Hello UI

Screenshot
Hello UI sample shows how application layout works. It explains how to define form, tittle bar, content (body) and toolbar in Moscrif. We used Metro skin in this sample.

User Interface

Application usually contains title, content and tool bar. Layout of the sample application is simple. Title bar is located on the top, tool bar on the bottom. Space between title bar and tool bar is application content.
To create hello UI application we need predefined classes from user interface area. Basic class is the application class. This class is used for enterprise application. For a game, Window native class is sufficient.
Application offers user a basic event which happens during life cycle of application. For this sample we use Application.onStart method which defines what application should do at its start. Application.init method is obvious, it sets all necessities to make application running. Application.run runs the application.
To create simple application form you need Form class instance. Form is a content of form elements such as TittleBar, Label and ToolBar.
There are three toolBar buttons defined - Back, Menu and Quit. In this sample, Quit is the only one working and is called upon Application.guit method.

Let's make your own Hello UI in Moscrif :

include "lib://uix/application.ms";
include "lib://uix/control/navigation/titleBar.ms";
include "lib://uix/control/navigation/toolBar.ms";
include "lib://uix/control/navigation/toolBarButton.ms"; //Create object Application and add skin
var app = new Application();
//Event called at init Application.
app.onStart = function (sender)
{
    //Create new Form and control objects.
    var form = new Form({name : "MainForm"});
    var title = new TitleBar({label : new Label({text:"Hello UI"})}); //Bar on top of the Form.
    var label = new Label({text: "Content goes here"});
    //stretch lable size to both
    label.stretch = #both;     //Create ToolBar. It is a bar on bottom of the Form.
    var tools = new ToolBar();
    tools.name = "MyToolBar";
    //Buttons, which will add to ToolBar
    var menu = new ToolBarButton({name : "menu"});
    menu.icon = #menu;
    var quit = new ToolBarButton({name : "quit", icon: #close, onClick: function(){ app.quit();}});     //Adding ToolBarButtons to the ToolBar
    tools.add(new ToolBarButton({name : "back", icon: #back}));
    tools.add(menu);
    tools.add(quit);
    //Adding objects to the Form
    form.add(title);
    form.add(label);
    form.add(tools);
    //Adding Form to the Application
    app.add(form);
}
//Init Application and start main loop.
app.run();

 

If you would like to try this hello UI sample with the Moscrif skin, you might create an instance of the Moscrif skin and create application with it.

  include "lib://uix-skin/moscrif/skin.moscrif.ms" var app = new Application({skin: new MoscrifSkin()}); ...

License

This article, along with any associated source codes and files, is licensed under The BSD License

 Gradients   Sensors 
22.7.2012 12:30:43
Source code problem

Hello.

I tried your Hello UI source code in Moscrif IDE 2012q2f.150 but no success. I got following error in console:


debug stacktrace: at onError C:\Users\User\Documents\MoscrifWorkspace\Test\uix\application.ms 25 Exception: [Applicaion.skinHandler] Unknow skin (undefined), or incorrect project settings

then I updated source code to:


include "lib://uix-skin/moscrif/skin.moscrif.ms" var app = new Application({skin: new MoscrifSkin()});

I ran the project with empty screen (no text in TitleBar, no text in Label). I got following information in console:


Log-W: 0 Obsolete 'code://' usage! Please use 'lib://' instead. Usage: 'code://core/log.ms' Log-W: 0 Obsolete 'code://' usage! Please use 'lib://' instead. Usage: 'code://uix-skin/theme.ms' Log-W: 0 Obsolete 'code://' usage! Please use 'lib://' instead. Usage: 'code://uix-skin/skin.ms' Log-W: 0 Obsolete 'code://' usage! Please use 'lib://' instead. Usage: 'code://uix-skin/moscrif/skin.moscrif.vectors.ms' Log-W: 0 Obsolete 'code://' usage! Please use 'lib://' instead. Usage: 'code://uix-skin/moscrif/controls/skin.moscrif.tileItem.ms' Log-W: 0 Error loading font! Log-W: 0 Error loading font! Log-W: 0 Error loading font! Log-W: 0 Error loading font!

Regards

Jan

22.7.2012 12:37:52
One more notice

I tested this project by copy and paste source code from this page no import by downloading project ...

vspin
19.1.2013 0:46:50
Download supposed to work?

I've imported this and the transitions sample and both have errors when I run. Are these samples supposed to work without any further code?

drawing.ms 47  Object ([object Object]:Object) has no method - hasDrawing

Write a Comment (3)
Subject
Please complete this mandatory field.
HTML Tags Not Allowed!
Comment
Please complete this mandatory field.