Skip to main content
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 with RoboVM app on OS-X)
Line 13: Line 13:
 
<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>
 
</ol>
 
</ol>

Revision as of 07:05, 6 November 2013

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.

  1. Install additional Eclipse Plugin (if you have not downloaded the all in one package)
  2. Navigate to the JavaFX project wizard
    Efxclipse tut5 1.png
  3. Give the project a name
    Efxclipse tut5 2.png
  4. Navigate to the last page
    Efxclipse tut5 3.png
  5. The resulting project should look like this
    Efxclipse tut5 4.png
  6. 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
    				}
    			}
    		]
    	}
    }
  7. Open the application.css and add the following selector definitions
    Rectangle#r1 {
    	-fx-fill: red;
    }
     
    Rectangle#r2 {
    	-fx-fill: green;
    }
  8. 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); 
    	}
     
    }

Back to the top