Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Efxclipse/Tutorials/Tutorial5"

(Create a Mobile iOS with RoboVM app on OS-X)
(Create a Mobile iOS App with RoboVM app on OS-X)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
= Create a Mobile iOS with RoboVM app on OS-X =
+
{{Efxclipse}}
 +
 
 +
= 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.
 
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>
 
<ol>
<li>Install additional Eclipse Plugin (if you have not downloaded the all in one package)</li>
+
<li>You need to have JDK8beta and JDK7u45 installed</li>
 +
<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/>
 
<li>Navigate to the JavaFX project wizard<br/>
 
[[Image:efxclipse_tut5_1.png]]</li>
 
[[Image:efxclipse_tut5_1.png]]</li>
Line 13: Line 20:
 
<li>The resulting project should look like this<br/>
 
<li>The resulting project should look like this<br/>
 
[[Image:efxclipse_tut5_4.png]]</li>
 
[[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>
 
</ol>

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]
    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)

Back to the top