Latest revision as of 15:08, 5 January 2014

Create a Mobile iOS App with RoboVM app on OS-X

In this tutorial we'll guide you through the creation of JavaFX iOS application using e(fx)clipse tooling. While development of the application is possible with the default e(fx)clipse tooling. You need to install an additional plugin to get the robovm support.

1. You need to have JDK8beta and JDK7u45 installed
2. You need to have XCode and its command line tools installed
3. Install additional Eclipse Plugin If you have downloaded our all in one download [1] (you need the nightly-sdk) no extra install is needed. In case you've not done so you need to post install additional features from [2]
   
4. Navigate to the JavaFX project wizard
   
5. Give the project a name
   
6. Navigate to the last page
   
7. The resulting project should look like this
   
8. Open the Sample.fxgraph-File and add the following code

   package application
    
   import org.eclipse.fx.ui.mobile.Deck
   import application.SampleController
   import org.eclipse.fx.ui.mobile.Card
   import javafx.scene.shape.Rectangle
    
   component Sample styledwith "application.css" controlledby SampleController {
   	Deck id deck {
   		cards : [
   			Card {
   				name : "c1",
   				center : Rectangle {
   					^id : "r1",
   					width : 100,
   					height : 100,
   					onMouseClicked : controllermethod c1
   				}
   			},
   			Card {
   				name : "c2",
   				center : Rectangle {
   					^id : "r2",
   					width : 100,
   					height : 100,
   					onMouseClicked : controllermethod c2
   				}
   			}
   		]
   	}
   }

9. Open the application.css and add the following selector definitions

   Rectangle#r1 {
   	-fx-fill: red;
   }
    
   Rectangle#r2 {
   	-fx-fill: green;
   }

10. Open the SampleController and make it look like this

    package application;
     
    import javafx.fxml.FXML;
     
    import org.eclipse.fx.ui.mobile.Deck;
    import org.eclipse.fx.ui.mobile.TransitionType;
     
    public class SampleController {
     
    	@FXML Deck deck;
     
    	@FXML public void c1() {
    		deck.moveTo("c2", TransitionType.SLIDE_LEFT);
    	}
     
    	@FXML public void c2() {
    		deck.moveTo("c1", TransitionType.FADE); 
    	}
     
    }

11. Bring up the Context-Menu on the Main.java and navigate to "Run As" > "Mobile Simulator"
    A Java Application will launch showing the surface of a iPhone (you can modify screen size, ... in the launch configuration dialog)
12. Bring up the Context-Menu on the Main.java and select "Generate RoboVM Build"
    
13. Select the robovm-ant.xml and select "External Tools Configurations ..." in the toolbar menu
    
14. Select "Ant" Build and press the "New" button and enter -Dbuild.compiler=javac1.7 in the arguments field
15. Wait for some minutes ...
16. When the Simulator comes up flip it to show in horizontal format
17. In the outline of the ant-file open the context menu on "do-run-device" and select "Run As" > "Ant Build"
18. Wait for some minutes ... (in the meanwhile connect your iPad/iPhone)