A JBoss Project
Red Hat

Latest posts

The JBoss Developer Studio 8 and JBoss Tools 4.2 release enables developers to use these tools to build mobile applications by using the Apache Cordova framework. Apache Cordova (fka, PhongeGap) is a framework for building packaged mobile applications using web technologies such as HTML5, JavaScript and CSS3. In this article, I will explore different scenarios for getting started with the tools and Apache Cordova.

Where are the tools?

Hybrid mobile tools are not part of the default installation but getting them is easy. Although there are other ways, I usually use JBoss Central to pull them in. Here is how.

First switch to Software/Update tab on JBoss Central. Next select JBoss Hybrid Mobile Tools + CordovaSim. I usually select the AngularJS for Web Tools option before hitting the Install/Update, in order to get the improved support for Ionic framework.

Here is a screeen cast for getting started with the hybrid mobile tools.

1. Start a new Cordova project

This is the option when starting a new project or just experimenting with Apache Cordova development.It gives a basic project template that you can easily change and you can select the initial set of cordova plug-ins to include into your project. I usually add the console plugin at this time, to be able to use console.log() during development and remove it before the final export.

The video above not only shows how a project is created but also introduces the tools at your disposal going forward.

2. Import your existing Cordova application

If your Cordova application already exists and it was developed using a compatible tool such as Cordova CLI, you can import it easily and start using all the functionality available. Import process will also restore your plugins if you have been using the new cordova save command.

Here is a short video that shows the import feature in action.

3. Use existing mobile web site code

Often getting started with your packaged mobile application requires sharing the assets with a web application. We do support linking of resources from different locations to create a Cordova based mobile application. Although I do not recommend using artifacts, let alone whole web sites, that were created for desktop to be turned to mobile applications, but it helps to know that your tools are capable when it gets desperate.

While JBoss Forge has been included in JBoss Tools and Developer Studio for a while now, the recent JBoss Tools 4.2 and Devloper Studio 8.0 releases contain support for Forge 2.12.1. Forge has now become a mature component inside JBoss Tools and Developer Studio with a plethora of available commands that can be executed either using the convenient wizard style or using the integrated Forge console.

Wise Wizards

To use the wizards, you need to issue the Ctrl+4 key combination (or Cmd+4 on a Mac). It will bring up a popup containing all the commands that are available in the currently selected context.

forge command popup

If this key combination does not work, chances are high that you are using a keyboard layout such as AZERTY. Don’t panic, in this case it is just a matter of redefining the key combination to something that works on your hardware. Use the Eclipse preferences dialog (Window→Preferences or something similar) to do this.

forge keys prefs

Selecting the 'Project: new' entry of the popup will open the Forge wizard that allows you to create a new project.

forge project new wizard

Core Console

If you are a console afficionado and typing and code completion is more your thing, you can use the integrated Forge console. One way to bring up the console is to type 'Forge Console' in the 'Quick Access' text field in the toolbar of your Eclipse workbench and then select the 'Forge Console' entry that is visible in the popup.

forge quick access

Another way would be to select 'Window→Show View→Forge Console' from the main menu bar. This will only be possible when you are using the 'JBoss' perspective. In another perspective, you can use 'Window→Show View→Other…​' and then navigate to the 'Forge→Forge Console' entry.

forge show view

In the console you can type Forge commands to perform the same tasks as if you were using the wizard-style approach.

forge project new console

Chatty Cheatsheet

If you are new to Forge, this new feature will certainly help you on the way. And as a bonus it will also help you with learning to develop an HTML5 application with REST, CDI and AngularJS. You can open this brand new cheatsheet by importing the 'AngularJS Forge' example from the 'JBoss Central' page.

forge angularjs central

In case the 'JBoss Central' page is not open or you inadvertently closed it, no worries. You can always bring it back by clicking the 'JBoss Central' icon in your Eclipse toolbar.

forge jboss central

After clicking the 'AngularJS Forge' example hyperlink, a wizard will guide you through the import process. Just accept all the defaults. When the wizard is done, a popup will ask you if you want to open the cheatsheet.

forge angularjs import

Make sure you keep the open option checked when you click the 'Finish' button. Now the cheatsheet will reveal itself in all its glory.

forge angularjs cheatsheet

There is no point in repeating here all the information that is available in the cheatsheet but in short, it will provide you with some general information and then guide you through the development, deployment and execution of a HTML5 application. You will see different examples of using Forge commands such as REST endpoint generation and scaffolding an AngularJS user interface. Check it out!

Happy Forging,
Koen Aers
@koentsje

Looking for older posts ? See the Archived entries.
back to top