Jump to: navigation, search

Efxclipse/Tutorials/Tutorial5


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]
    Efxclipse tut5 0.png
  4. Navigate to the JavaFX project wizard
    Efxclipse tut5 1.png
  5. Give the project a name
    Efxclipse tut5 2.png
  6. Navigate to the last page
    Efxclipse tut5 3.png
  7. The resulting project should look like this
    Efxclipse tut5 4.png
  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"
    Efxclipse tut5 5.png 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"
    Efxclipse tut5 6.png
  13. Select the robovm-ant.xml and select "External Tools Configurations ..." in the toolbar menu
    Efxclipse tut5 7.png
  14. Select "Ant" Build and press the "New" button and enter -Dbuild.compiler=javac1.7 in the arguments field Efxclipse tut5 8.png
  15. Wait for some minutes ...
  16. When the Simulator comes up flip it to show in horizontal format Efxclipse tut5 9.png
  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)