Sample Mobile App With Weather Underground API and Geolocation

We know developers love examples, we’ve just added one more example to Appery.io platform. When you create a new app, you can base it on the new Weather API and Geolocation Example. When you create a new app, click “More Create Options” to see the list of available examples:

Screen Shot 2014-09-15 at 3.34.50 PM

The example app demonstrates a number of features:

  1. How to use a 3rd part API – Weather Underground. You do need go sign up for a free developer account and set the API key.
  2. How to use the Geolocation service.
  3. How to handle different service responses (when an airport is found or not).
  4. How to show UI components on page based on a condition.

The app works in two modes. First, you can enter any 3-letter airport code to show the weather information:

Screen Shot 2014-09-15 at 3.39.31 PM

Second, instead of using the airport code, you can also use the Geolocation service. It will determine your location and use that to show the weather information (for this to work in a web browser, make sure to allow location tracking for the domain appery.io):

Screen Shot 2014-09-16 at 2.53.49 PM

 

Try this yourself at Appery.io.

Build Cross-Platform Mobile App With Facebook API in Appery.io [Video]

This video shows how to build a mobile app in Appery.io with Facebook API. You will learn:

  • How to import the Facebook API plugin
  • Sign into Facebook via OAuth 2
  • Display basic information about the user
  • Post to the timeline
  • Display the timeline

To learn more about using Facebook API, try Build an app with Facebook API tutorial. .

Creating Mobile App with Salesforce API, Barcode Scanner, PhoneGap [Video]

Check out this really awesome video created by Greg Wadley, Platform Architect. Greg shows how to build a mobile app in Appery.io thats uses Salesforce API, Barcode Scanner and PhoneGap. The app scans a barcode, reads data from the product table in Salesforce, and then updates an order table.

Coming Soon: New Cloud-based Mobile App Builder Written in HTML5 and JavaScript

For the past couple of months we have been working on a really exciting project. We are re-creating the Tiggzi app builder in HTML5 and JavaScript. The current version is pretty slick and many people ask us if that’s JavaScript, but all you need to do is to right-click and you will that Tiggzi uses Flash/Flex.

You might be wondering why would we use Flash? Tiggzi was started some time ago. We actually started with a simple cloud-based web prototyping tool, then moved to mobile prototyping and then made it an actual cloud-based app builder. When we were starting, Flash was the best technology to achieve the functionality we wanted. We couldn’t have achieved the same feature set with HTML and JavaScript.

A few months ago we have realized that Flash wasn’t helping us any more, in fact, it was slowing and complicating development. Adding new features became difficult. It was slow, loading the Flash player and the project could sometime take over one minute. Not to mention that Flash has been slowly reaching the end of life.

A few months ago we started recreating the app builder portion in HTML5 and JavaScript. I personally can’t wait for the HTML5/JavaScript version to be released — it’s really awesome! The project is super interesting but also pretty challenging. Why challenging? Well, because no one out there (to my knowledge) has attempted to create a visual, drag and drop app builder using HTML5 and JavaScript. There are JavaScript-based code editors and there are some visual tools for building the UI — but no tool combines building the UI, adding REST API services, visual data binding, and testing into one service. Plus, you will have integration with Tiggzi Backend Services.

Here is a very (very) early version of the HTML5 app builder, most everything will change before it is released in the fall:

Building BlackBerry Mobile Apps With Tiggr and PhoneGap Build

One of the most important features in Tiggr is being able to export the app as HTML5 mobile app, Android app or iOS native app. All export features are show by clicking the big Export button:

As you noticed, there is currently no BlackBerry option. But, it turns out it’s pretty easy to get a BlackBerry native app.

Any app in Tiggr, be it for Android, iOS or BlackBerry is built first with jQuery Mobile component, HTML5, JavaScript and CSS. Then, the app is packaged as native with PhoneGap. For BlackBerry, simply export the app as HTML/CS/JS, and to build a native we are going to use PhoneGap Build.

Here are the steps:

  1. Build an app in Tiggr (try getting started guides) and export it as HTML/CSS/JS
  2. Sign up for PhoneGap Builder. A free account is available
  3. Click to create a new app inside PhoneGap Builder.
  4. Enter app name
  5. Select upload an archive or index.html file option and point to the zip file you exported from Tiggr
  6. Click Create to build the app
  7. That’s it. You may have to wait a few seconds before the build completes.

Once the build is complete, you will should see this:

RichFaces at JavaOne 2011 or What You Need for Building Cool Enterprise Applications with JSF

I'm speaking at JavaOne 2011

My session on What You Need for Building Cool Enterprise Applications with JSF was accepted for JavaOne 2011 conference in San Francisco.

Title:
What You Need for Building Cool Enterprise Applications with JSF
Time:
Tuesday, 10:30 AM, Hilton San Francisco – Golden Gate 3/4/5

JSF is the standard UI technology in Java EE, but on its own, it lacks tools for effectively building real-world rich enterprise applications. RichFaces 4, an open source extension for JSF, fills this development gap. RichFaces Core provides major enhancements for Ajax request customization, rendering and execution options, the JSF client queue, and more. RichFaces UI provides a large number of rich out-of-the-box components. RichFaces Skins makes it possible to change the look and feel of entire applications on the fly. The RichFacesComponent Development Kit streamlines building custom components.

This session explores these different aspects of RichFaces to see how each part, in turn, makes it easier to build cool enterprise JSF applications.

Hope to see you there!

Learn how to upload your own images, banners to use in prototypes

Learn how to upload your own images, banners, and any other assets to use in prototypes
Read more » [via Tiggr blog]

RichFaces 3 to RichFaces 4

RichFaces 4 is not only JSF 2 based, but also undergoing a major upgrade on the framework level. Many components are being rewritten to increase performance, reduce markup size, and make them consistent across the board. RichFaces 4 is a major upgrade and brings many improvements:

  • All JavaScript is now based on jQuery
  • Ajax framework improvements extending the JSF 2 specification
  • Component review for consistency, usability, and redesign following semantic HTML principles
  • Both server-side and client-side performance optimization
  • Strict code clean-up and review
  • New and easy to use CDK (Component Development Kit)

Although core Ajax concepts are staying the same, RichFaces 4 brings many new changes because it is now based on JSF 2. RichFaces 4 adds many new features on top of JSF 2 through its advanced features, tags, customization, and flexibility. If you have been using RichFaces, this 1-day training will bring your team up to speed with everything new in RichFaces 4. If you have questions, please contact me at:

Seam conversations from JavaFX

This post covers starting/stopping Seam conversations from JavaFX. See other posts in this series:

Calling Seam component from JavaFX
Invoking Hibernate Validator from JavaFX
Binding to server-side context variable from JavaFX
Using Expression Language (EL) in JavaFX to communicate with server

Server side

Seam component:

@Name ("wizard")
@Scope (ScopeType.CONVERSATION)
public class Wizard {
   @In Conversation conversation;

   public String info (){
	return "Id: "+conversation.getId() +", active: "+conversation.isLongRunning();
   }
   @Begin
   public void start (){
	// do something
   }
   @Conversational
   public String nextStep (){
	return "Id: "+conversation.getId() +", active: "+conversation.isLongRunning();
   }
   @End
   public void end (){
       // do something
   }
}

Above is a pretty simple Seam component with conversation scope. It has method to start the conversation (@Begin) and end the conversation (@End). It also has nextStep() annotated with @Conversation, that means that the method can only be invoked within a long running conversation.

Client side

Component interface:

public interface Wizard {
   public void end();
   public void start();
   public String nextStep ();
   public String info ();
}

JavaFX script:

CookieHandler.setDefault(new CookieManager(null, CookiePolicy.ACCEPT_ALL));
FXServiceFactory.URL = "http://localhost:8080/server-javafx/seam/resource/hessian/";
var wizardService = WizardServiceFactory.getWizardService();

def red: RadialGradient = RadialGradient{
    centerX: 8, centerY: 8, radius: 12, proportional: false
    stops: [
    Stop {offset: 0.0 color: Color.WHITE},
    Stop {offset: 1.0 color: Color.RED}
    ]
}
def green: RadialGradient = RadialGradient{
    centerX: 8, centerY: 8, radius: 12, proportional: false
    stops: [
    Stop {offset: 0.0 color: Color.WHITE},
    Stop {offset: 1.0 color: Color.GREEN}
    ]
}
var light = Circle {
    centerX: 10 centerY: 10 radius: 10 stroke: Color.BLACK
    fill: bind if (longRunning) green else red
}
var infoButton:Button = Button {
    text : "Info"
    style : "-fx-font-size: x-large"
    action: function () {
        var newInfo = wizardService.info();
        insert newInfo into info;
    }
}
var longRunningOnly:Button = Button {
    text : "Only if active"
    style : "-fx-font-size: x-large"
    action: function () {
        try {
            var newInfo = wizardService.nextStep();
            insert newInfo into info;
        }
        catch (exception: Exception) {
            Alert.inform("Not active conversation");
        }
    }
}
var longRunning = false;
var convButton:Button = Button {
    style : "-fx-font-size: x-large"
    text : bind
    if (longRunning) "Stop" else "Start"
    action: function () {
        if (longRunning==false){
            wizardService.start();
            longRunning = true;
            var newInfo = wizardService.info();
            insert newInfo into info;
        }
        else if (longRunning==true) {
            wizardService.end();
            longRunning = false;
            var newInfo = wizardService.info();
            insert newInfo into info;
        }
    }
}
var info = [wizardService.info()];
var list:VBox = VBox {
    content: {
        VBox {
            content :  bind for (item in info){
                Text {
                    content: item
                    style : "-fx-font-size: x-large"
                }
            }
        }
    }
}
Stage {
    title: "Application"
    width: 450 height: 400
    scene: Scene {
        fill: LinearGradient {
            endX: 0.0
            stops: [Stop { offset: 0.0 color: Color.LIGHTGRAY }
            Stop { offset: 1.0 color: Color.GRAY }]
        }
        content: [
        VBox {
            spacing : 4
            content: [
            HBox {
                spacing: 4
                content: [
                infoButton, convButton, light, longRunningOnly
                ]
            },
            list
            ]
        }
        ]
    }
};

Line 3: we get reference to WizardService and now can call all methods in the interface.
Lines 23-30: info button which returns the current conversation status
Lines 31-43: button that calls a method which should be called only when a long running conversation is active. If clicked outside of a long running conversation, an error dialog will be shown
Lines 45-63: button that starts/stops the conversation

Notice that nothing special needs to be done when using conversations, it is just a simple component method invocation.

No long running conversation:

Long running conversation:

Trying to invoke a method with @Conversation outside of a long running conversation:

That’s it.

JSF dynaWidgets powered by RichFaces

Check out this project, it’s very cool. dynaWidgets created by Top 21 GmbH, are a set of JSF components for rendering portlet like elements (called widgets) in your JSF application. The Ajax functionality is powered by RichFaces. Implementing widgets is just like implementing normal JSF facelets pages. Check out the examples section to see an example usage.