Skip to content

Instantly share code, notes, and snippets.

@edewit
Created July 6, 2015 14:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save edewit/7e7afc7de8cff9310cde to your computer and use it in GitHub Desktop.
Save edewit/7e7afc7de8cff9310cde to your computer and use it in GitHub Desktop.
Thym demo steps

###Jboss developer studio

In order to have something to build an mobile client application for let's first create a backend. To do this fast we'll use forge, forge is continues wizard that takes your input and generates code from that. To begin start JBoss Developer Studio and select 'Window' -> 'Open view' from the menu, then select 'Other' type forge in the search and you'll see a 'Froge Console'. In the 'Forge Console' that has just opened type the following:

project-new --named demo
jpa-new-entity --named Contact
jpa-new-field --named name
jpa-new-field --named age --type int
rest-generate-endpoints-from-entities --targets org.demo.model.Contact

You'll have a rest endpoint for this Contact JPA entity, so let's try that out right click the project and choose 'Run As' -> 'Run on Server' select an existing 'Wildfly' or download a 'Wildfly' using the 'Manually define a new server' option. Once our REST service is running let's see if we can invoke it. In the 'Project explorer' view you can expand the 'JAX-RS Web Service' option, now you'll see all the endpoints that have been generated we can run GET and POST by right clicking these endpoints and selecting 'Run As' -> 'Run on Server' and then the wildfly instance you deployed on, for the post be sure to set the 'Content-Type=application/json' in the 'Request Headers' box.

Now this is already nice interface, for a machine, but we could also generate something a bit more user friendly. If you go back to the 'Forge Console' and type:

scaffold-setup --provider AngularJS
scaffold-generate --provider AngularJS --targets org.demo.model.Contact

Point your browser to 'http://localhost:8080/demo/' and you'll have a nice AngularJS generated front-end that uses the rest endpoint we just created to perform CRUD operations on the Contact entity.

Let's build a mobile web client for this application using this same REST api. To build mobile applications JBDS supports Android but also Cordova and Cordova is what we are going to use. Cordova is a Framework to build mobile applications that are platform independend. You entire application is build with html, css and javascript and wrapped into a native app that will use a web view to display your app. You can still use native features like the camera for instance as it comes with plugins that give you a javascript API but then call native functionality. The plugins are supported like cordova itself on a wide range of platforms. To start developing a mobile client with this technoligy JBDS helps us. We can create a new project and choose 'Hybrid Mobile (Cordova) Application Project'. We'll need to give it a name and an ID (important for iOS) let's call it client and org.demo.client as the ID. On the next page we need to add a Mobile Engine let's choose the latest. Next is the Registry to find and install plugins, we don't need one now so let's 'Finish'

The project contains a plugin folder that contains the plugins we talked about earlier and a www folder that is our app. We can already see it in action by right clicking the project and choose 'Run As' -> 'Run w/CordovaSim' this is a simulator that will also emulate a bunch of plugins so great for testing. It even comes with 'Live reload' to enable it right click on the simulator and select 'Enable LiveReload' then in JBDS open the 'Servers' view and start the 'LiveReload Server at localhost'. Open index.html and change the h1 to something like 'Apache Cordova application powered made by me!!' after you hit save you'll see the change in the CordovaSim.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment