View source for Efxclipse/Tutorials/Tutorial5

= Create a Mobile iOS 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.

<ol>
<li><b>You need to have XCode and its command line tools installed</b></li>
<li>Install additional Eclipse Plugin
If you have downloaded our all in one download [http://efxclipse.bestsolution.at/install.html] (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 [http://downloads.efxclipse.bestsolution.at/p2-repos/addons/nightly/site/]<br/>
[[Image:efxclipse_tut5_0.png]]
</li>
<li>Navigate to the JavaFX project wizard<br/>
[[Image:efxclipse_tut5_1.png]]</li>
<li>Give the project a name<br/>
[[Image:efxclipse_tut5_2.png]]</li>
<li>Navigate to the last page<br/>
[[Image:efxclipse_tut5_3.png]]</li>
<li>The resulting project should look like this<br/>
[[Image:efxclipse_tut5_4.png]]</li>
<li>Open the Sample.fxgraph-File and add the following code
<source lang="java">
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
				}
			}
		]
	}
}
</source>
</li>
<li>Open the application.css and add the following selector definitions
<source lang="css">
Rectangle#r1 {
	-fx-fill: red;
}

Rectangle#r2 {
	-fx-fill: green;
}
</source>
</li>
<li>Open the SampleController and make it look like this
<source lang="java">
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); 
	}
	
}
</source>
</li>
<li>Bring up the Context-Menu on the Main.java and navigate to "Run As" &gt; "Mobile Simulator"<br />
[[Image: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)
</li>
<li>Bring up the Context-Menu on the Main.java and select "Generate RoboVM Build"<br/>
[[Image:efxclipse_tut5_6.png]]
</li>
<li>Select the robovm-ant.xml and select "External Tools Configurations ..." in the toolbar menu<br/>
[[Image:efxclipse_tut5_7.png]]
</li>
<li>Select "Ant" Build and press the "New" button and enter -Dbuild.compiler=javac1.7 in the arguments field
[[Image:efxclipse_tut5_8.png]]
</li>
<li>Wait for some minutes ...</li>
<li>When the Simulator comes up flip it to show in horizontal format
[[Image:efxclipse_tut5_9.png]]
</li>
<li>In the outline of the ant-file open the context menu on "do-run-device" and select "Run As" &gt; "Ant Build"</li>
<li>Wait for some minutes ... (in the meanwhile connect your iPad/iPhone)</li>
</ol>