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.
.png)
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
|