Roll Dice

Roll dice application tutorial

In this tutorial we are going to create a simple roll dice application for Android, IOS and Desktop. The user is prompted to choose whether to roll one or two dices.

The following instance shows app’s first view on all three devices.

1.Create a new project

To create a new project press the new project button.

Let’s name this project Dice.

Then press Code button to open your new project with NetBeans. As our first HelloWorld project each CrossMobile project has the basic three files Main.java, ApplicationDelegate.java and ViewController.java.

First we will add a Label.
To initialize a UILabel Object we need to set its placement on the View. Since we are compiling for multiple platforms and devices it is better to have relative placement. For that reason in lines 3 and 4 we create two floats dheight and dwidth which when the application runs calculates screen’s height and width.

In line 11 we initialize our UILabel with:

11UILabel label =new UILabel(new CGRect(0, dheight-120, dWidth, 40));

The UILabel Constructor takes a CGRect as parameter.

CGRect takes four integers to initialize these four integers specify a rectangular space on the screen. The first two integers specify the rectangles’ position (the first one is distance from the left and the second distance from top) and the last two parameters rectangle’s width and height.

So in order to place a simple label on the top – left of the screen we use the following declaration:

12UILabel label =new UILabel(new CGRect(0, 0, 320, 40));

The first parameter defines the label’s distance from the left, which is 0.
The second one set label’s distance from the top again 0. The last two set label’s width and height to be 320px wide and 40px respectively.

So in our case we place a UILabel in a rectangle 0 distance from the left side, 120 from the bottom, full width, and 40 tall.

Next we need to put some text in our UILabel, for that we use the setText() method.

13label.setText("Welcome to Dice!!!");

We also need to set the text alignment .so the text will appear on the center an background color to clear color. We don’t want our rectangle to have different background color than the rest of the screen.

And finally we add the UILabel to the main view. (Every time you add a new component you have to add it to the view otherwise it will not appear on the screen)

14mainView.addSubview(label);

3.Adding the Buttons

Let’s add the two buttons. Add the code below right after the UILabel. This code adds two buttons at the bottom of the screen.

UIButton is not initialized with a constructor. Instead we use a method in order to initialize it. So we use the following declaration:

UIButton.buttonWithType(UIButtonType.Custom);

Next we set the frame of the button again with the following method:

oneBTN.setFrame(new CGRect(50, dheight - 60, 100, 50));

The we add the text displayed on the button:

oneBTN.setTitle("Roll One", UIControlState.Normal);

Also we want to set the button’s background color to clear:
oneBTN.setBackgroundColor(UIColor. clearColor());

oneBTN.setBackgroundColor(UIColor.clearColor());

When the button is pressed we want to see a change. For this reason we have to define a color change and this is accomplished by setting it’s state to be altered from Normal to Highlighted(While Pressed):

UIImageView initializes with a CGRect instance too. In our example the following command places a 100×100 rectangle in the middle of the screen.

new CGRect(dWidth / 2 - 50, dheight / 2 - 50, 100, 100));

In order to set the image we use:

img.setImage(UIImage.imageNamed(6 +".png"));

If you want to change the dice displayed in the first view just change 6 to another number from 1-6.

The imageNamed method looks into the application recourses directory (artwork by default).

We set the background color to clear so it will not be visible on the dice’s edges.

And finally we add it to the main view (never forget to….).

5.Adding a second view controller.

To add a second UIViewController we first need to add a UINavigationController.

To do that go to ApplicationDelegate.java file and we add a UINavigationController and initialize it with ViewController(), set the navigation bar as hidden and set indexPage as root view controller instead of a new ViewController(). (lines 10-12)

A UINavigationController allows navigating through different UIViewControllers. The view controllers are added to the navigation controller as a stack. So the users of our application see the last UIViewController added to the stack. In order to view the previous controller we have to pop the last UIViewControler from the stack.

If you want to view one in the middle of the stack you have to pop UIViewControllers until you reach it, the same goes for the root controller. To add a UIViewController you push it into the stack.

Now add a new class to the package named DiceController, open it and add extends UIViewController to the class declaration

This time we make mainView a field (line 4) instead of a local variable because we are going to need it in some functions.

The next step is to implement the navigation back and forth view controllers. To do that, we will push DiceCcontroller for ViewController and pop to root Controller from DiceController.

To access the navigation controller we use navigationController method.

We add navigationController().pushViewController(new DiceController(1), true) to the public void exec(UIControl uic, UIEvent i) method in ViewController.java (the part that we left as comment lines 31 and 47), using the appropriate parameter for the DiceController (1 for one dice and 2 for two).

To go back to the mainview we can’t create a new instance of it, since it already exists. So we use navigationController() popToRootViewControllerAnimated(true) where the value true in both pop and push sets the transition to be animated.