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.

JSF 1.2 Components: book review

JSF 1.2 Components by Ian Hlavats.

Chapter 1: Standard JSF components

Chapter 1 starts by covering standard JSF UI components. It covers all the categories of standard components in JSF: input, output, selection, tables and layout. Examples are short, self-contained, and very easy to follow. Ian does an excellent job of describing various features and attributes of the components and their usage. His explanations are very easy to follow.

Chapter 1 summary says that it covered some of the key concepts behind JSF however, I didn’t see coverage of JSF managed beans, navigation, event listeners, and the JSF life cycle.

Chapter 2: Facelets

Chapter 2 covers Facelets and I think it’s the best Facelets coverage that I have seen. Good examples, easy to follow. I think all JSF 1.x books were published before Facelets became a de facto standard view technology, so this is the missing chapter for all of them. Chapter 2 starts with some interesting historical information on JSP and why Facelets was created. Again, excellent chapter and coverage of Facelets.

Chapter 3: MyFaces Tomahawk components

Chapter 3 covers MyFaces Tomahawk components. The chapters covers some of the most popular and interesting components in Tomahawk such as calendar, jsfCookMenu, upload file and tree. I was glad to see more backing bean code for some of the Tomahawk examples.

Chapter 4: MyFaces Trinidad

This chapter covers MyFaces Trinidad components. As with the standard JSF components and the MyFaces chapter, this is a general overview a description of the usage of some Trinidad components. Ian does a good job explaining how the components work and provides short examples. I like shorts examples because it’s easy for the reader to try them in his or her application without having go to through a large number of steps.

Chapter 5: IceFaces

There is not as much to say about chapter 5 which covers IceFaces JSF components. I would have liked to see some coverage of the IceFaces Direct-To-Dom approach, which really makes IceFaces different from libraries such as Trinidad and RichFaces.

Chapter 6: Seam

The Seam chapter starts with an introduction to Seam and why it was needed. It then goes on to explain Java EE and its components such as EJB3 and JPA. I think it’s a very good (brief) introduction for anyone who is just starting with Java EE. Then the chapter goes on to cover some of the Seam tags. Explanations are good and the examples are easy to follow. The first example shows how to delegate validation to the Hibernate Validator using Seam’s s:validate tag. Other tags are covered as well, such as s:label, s:span, and s:message.

The chapter them moves on to show how to add Ajax with the RichFaces a4j:support tag. (The actual RichFaces chapter comes after this chapter.) I think it would have been better to cover RichFaces, including a4j:support first, and then Seam.

The second part of the chapter is mostly dedicated to covering Seam conversation support. The chapter shows some good examples but feels a little bit out of place. I just don’t view the conversation as being part of the UI. There is also an example that puts navigation rules for controlling the conversation into a standard JSF descriptor file (faces-config.xml) instead of Seam’s descriptor file (pages.xml). Seam’s documentation recommends using only the pages.xml file for storing the navigation rules in a Seam application..

All in all though, it’s a good chapter on some of the core Seam features for JSF.

Chapter 7: RichFaces

The last chapter is on RichFaces and is the most interesting to me personally as I have myself published a book, Practical RichFaces on this subject. The chapter starts with a quick introduction to Ajax4jsf and RichFaces. This chapter is on par with the other chapters. It provides a high-level overview of some of the components from the rich: and a4j: tag libraries. Components covered include rich inputs, panels, menus, data iteration as well as Google Maps and Microsoft Virtual Earth. From the a4j: tag library, a4j:poll and a4j:commanLink are covered.

I was somewhat disappointed to not see a4j:support tag coverage here. (a4j:support was instead covered briefly in Seam chapter.) I think it’s one of the most important tags in the library and probably the tag that made the whole framework popular. Also, the f:ajax tag from JSF 2 is closely based in concept to a4j:support.

In general, the chapter is well written and provides some good examples of various RichFaces components and concepts.

Summary

First of all I want to congratulate Ian on this book. He did an amazing job. I personally know the time, dedication, and other resources need to write a book. The book provides a good, general overview of the most well-known third-party components as well as the standard JSF components. The examples are easy to follow and self-contained (which means it’s easy to run them) with explanations that are very clear.

My biggest question is who is the audience for this book? If you are just starting with JSF, then this book doesn’t go deep enough into the core features of JSF as well as the covered component libraries. You need at least a regular JSF book. If you are already an experienced JSF developer, then it could be a good read to quickly cover various 3rd party component libraries and see what’s available. But again, this is going to be your second book. If you are a manager, this could be a book you could read to get a high level overview of the various components in the JSF ecosystem.

Anyway, a great contribution by Ian Hlavats to the JSF community. Congratulations!

Upcoming features in Exadel JavaFX plug-in for Eclipse version 1.1.1

Upcoming features in Exadel JavaFX plug-in for Eclipse version 1.1.1:

Snippets view. Insert or drag and drop controls into JavaFX editor:
screenshot_073

javadoc for JavaFX code assist:
screenshot_072

Additional features include mutli-source and multi-project support.

Version 1.1.1 will be released this week.

Presenting at TheServerSide Java Symposium: TheClientSide

TSSJS-10-speaking-125x125

I will be presenting two sessions at TheServerSide Java Symposium: TheClientSide conference in Las Vegas, March 17-19th in Ceasers Palace hotel.

Ajax Applications with RichFaces and JSF 2.0
Rich Enterprise Applications with JavaFX