Android Tutorial: Building Hello World App in Tiggr

This tutorial uses Tiggr, a Web-based Mobile Apps Builder. If you don’t have an account, sign up for one. It’s fast and easy.

Creating New Project

  1. Enter a new project name: AndroidHelloWorld

  2. From the Native App tab, select Blank Mobile Application:
  3. Click OK to create a new project. Once the app builder editor is loaded, you will see the following:

    Now that we got the project, we are ready to build the UI. 

Continue reading “Android Tutorial: Building Hello World App in Tiggr”

Why You Need Interactive and Clickable UI Prototypes for Your Next Project

If you’ve been building web or mobile applications, you probably know how tough it is to describe UI requirements in a text document. It’s even more challenging for the person reading the requirements to understand what the heck the author meant.

Sometimes visual aids help. It’s probably safe to assume that many projects include pictures or drawings in the requirements document to help visualize the UI. Any visual aid in a requirements document will help.

It’s also possible that many projects use a somewhat better solution than just inserting images or drawings into a requirements document – a mockup tool. A mockup tool is specialized software to create, well, a mockup of the UI. With a mockup tool you use lines and various shapes (rectangles, boxes, etc.) to create the outline or shape of the various UI elements.

The problem with mockups…

However, mockups suffer from a number of drawbacks. First of all, mockups are static. Today, most user interfaces are very interactive with AJAX or AJAX-like features. Expressing such interactivity or navigation is just not possible with static mockups.

Continue reading on theserverside.com

Exadel Tiggr links for 2010-08-31

Exadel Tiggr links for 2010-08-31:

2009

2009 was a good year. RichFaces is more popular than ever today. Exadel has participated in hundreds of RichFaces engagements this year. I don’t remember how many trainings I’ve done this year but just since September I had a RichFaces training every other week. The forum is very active. RichFaces now has two books, one is mine, Practical RichFaces (Apress). The other books is called JBoss RichFaces 3.3 (Packt). There is also RichFaces DZone RefCard available.

My blog traffic has been steadily growing this year. To make it easier for readers, I have tagged all my RichFaces howto’s, tips and tricks with richfaces-howto tag. Now you can find all the posts quickly. And of course I also started using Twitter (http://twitter.com/maxkatz) this year. My first tweet and my first follower @kito99 via http://firstfollower.com/

If you tried JSF 2 (and you should, it’s much better than JSF 1.2. Here is a great post by Andy Schwartz and here is my JSF 2 series), you will notice that core Ajax features in JSF 2 are very similar to what has been available in RichFaces for a very long time now. You will see that f:ajax tag in JSF 2 works very similar to the popular a4j:support tag (see this blog post and this for more info). The RichFaces team is already working on RichFaces 4 which will be based on JSF 2.

This year I attended and spoke at a number of conferences. I started with JSFdays in Vienna, Austria in early April. End of April I attended JAX in Maintz, Germany. In June, I spoke at JavaOne 2009 and beginning of September presented at JBoss World in Chicago. My final conference was JSFSummit in Orlando in December.

With trainings and conferences (and some personal travel), I flew over 150,000 on United this year which makes me 1K again. I’m looking forward to system wide upgrades (for international travel) and new unlimited upgrades United announced earlier this year. If you travel frequently, I definitely recommend trying to stick with one airline. Even if you just get entry level status, travel usually becomes more pleasant.

Next year already looks very interesting. I already have three trainings booked and two conferences. I will be presenting and teaching RichFaces workshop JSFdays 2010 in Vienna in February and presenting for the first time at TheServerSide Symposium in Las Vegas in March.

If you have been reading my blog, you will know that we have been doing some interesting stuff with JavaFX. Exadel has been working on JavaFX plug-in for Eclipse and Flamingo framework. We have also worked on JavaFX and JSF integration. Although we could wished for a stronger “acceptance” of JavaFX this year especially in the enterprise, nevertheless, the community has been growing very strong. I have approached Sun on two different occasions with an offer to work together on some of the enterprise features for JavaFX but never got a reply back. Now that Oracle-Sun deal is close to being final and once Oracle takes ownership of JavaFX, we hope it [Oracle] will start using more JavaFX in the enterprise.

2010 (how are you going to say 2010?) is looking to be very interesting year. We have RichFaces 4.0, our JavaFX plug-in for Eclipse is going to be open source and have been adding very interesting mobile feature to Flamingo such as connector for Android. JavaFX and JSF integration also sounds very interesting. Stay tuned.

Happy New Year!

10% discount for RichFaces workshop in Germany

I’m doing 1-day RichFaces workshop in Nuremberg, Germany during Herbstcampus conference. Enter “Max Katz” in the registration code “Buchungscode” field to get 10% discount.

Flamingo 1.8.2 Just Released

Flamingo 1.8.2 was released. It’s mostly bug fixes and we improved JavaFX-Spring integration. Read more on Exadel blog ».

As for what’s coming up, Flamingo 2.0 will have JavaFX server-side push feature.

JavaFX and Spring CRUD

Exadel Flamingo RIA framework comes with CRUD application generator. Using the maven-based generator, you can easily generate JavaFX user interfaces connected to Spring or Seam back-ends. In this post I showed how to do it Seam. Let’s do the same with Spring framework. There are just a few simple steps.

  1. If you don’t have, download and install JavaFX SDK 1.2 for your operating system.
    1. Set JAVAFX_HOME variable
  2. Download Exadel Flamingo
  3. Unzip the downloaded file
  4. Run flamingoinstall (if you are on Linux, you will need to make the file executable)
  5. Inside flamingo/bin, run flamingo create project . Just follow the wizard questions, in most cases you can accept the default values. My answers are shown in bold.
    max@:~/Exadel/Flamingo/flamingo-1.8.2$ ./bin/flamingo create project
    [INFO] Scanning for projects...
    [INFO] ------------------------------------------------------------------------
    [INFO] Building Maven Default Project
    [INFO]    task-segment: [com.exadel.flamingo.maven.plugin:flamingoapp:1.8.2:create-project] (aggregator-style)
    [INFO] ------------------------------------------------------------------------
    [WARNING] While downloading jboss:javassist:3.3.ga
      This artifact has been relocated to javassist:javassist:3.3.GA.
    
    [INFO] [flamingoapp:create-project]
    discovered andromdapp type --> 'flamingo-seam'
    discovered andromdapp type --> 'flamingo-spring'
    Please choose the type of application to generate (flamingo-seam, flamingo-spring):[flamingo-spring]
    flamingo-spring
    Please enter the location in which your new application will be created (i.e. c:/java/development):
    [/home/max/Exadel/Flamingo/dev]
    /home/max/Exadel/Flamingo/dev
    Enter the project name (e.g. myproject): [javafx-spring]
    javafx-spring
    Please enter the root package name for your project (e.g. com.mydomain.myproject): [com.sample]
    com.sample
    Will this project have Flex or JavaFX user interface? (flex, javafx): [javafx]
    javafx
    What kind of database are you using? (hsql, mysql, oracle, postgres, mssql, db2, sybase, none): [hsql]
    hsql
    Enter the JDBC URL for your database (e.g. jdbc:hsqldb:.): [jdbc:hsqldb:.]
    jdbc:hsqldb:.
    Enter database username: [sa]
    sa
    Enter database password: []
    Do you want to update the database schema each time you deploy? (y, n): [y]
    y
    Enter the entity class name (Flex source files to view and modify entities will be generated as well): [Person]
    Person
    ....
    ....
    
  6. Once generation is completed, go to javafx-spring/web and run this command: ant -f build.xml create-keyEntry
  7. Go one level up to javafx-spring/web and run: mvn package
  8. Copy javafx-spring/web/target/javafx-spring.war to Tomcat
    8) Start Tomcat
  9. Go to http://localhost:8080/javafx-spring and start the JavaFX applet.

You will see an application shown below:

Login screen:
screenshot_002

Main screen (before entering users):
screenshot_003

Adding a user:
screenshot_004

Main screen with users:
screenshot_005

Learning JSF 2

If you are starting to learn JSF 2, this post by Andy Schwartz is an excellent place to start. It summarises and gives an excellent overview of features in JSF 2.

JavaOne, JavaFX 1.2, JavaFX Studio plug-in for Eclipse, Flamingo

It’s going to be a busy week, lots of things happening.

JavaOne

I have one general session (on using JavaFX with Seam) and a number of lighting talks in JBoss and Sun booths. I will also be signing Practical RichFaces book at the JavaOne book store (you will get 20% discount). My complete schedule.

JavaFX 1.2

JavaFX 1.2 was released over the weekend. There is now official support for Linux. Here is a great post with all the details from Stephen Chin. Check out Dzone JavaFX Refcard also from Stephen.

JavaFX Studio plug-in for Eclipse

Exadel will be releasing it’s newest JavaFX Studio plug-in for Eclipse tomorrow. The plug-in comes with various wizards and features to help develope JavaFX applications. Read previous posts on the plug-in.

Flamingo

There is no easy way to connect JavaFX to back ends such as Seam or Spring. Flamingo is a RIA framework that easily connects JavaFX with Seam/Spring (and Flex with Seam/Spring). Flamingo has been available for about a year now. New version 1.8 will be released this week and it will be compatible with JavaFX 1.2 . Watch for an article on Dzone.com about using JavaFX with Seam with Flamingo.

Finally, if you are at JavaOne and want to chat about any of these, just drop me an email.

Keeping rich:panelMenu state

This example is in response to this post.

The solution uses two managed beans, one in request and one in session scope. The session bean will keep the menu state. You can easily extend this example to use Seam. I need to remember two things. First is which group was opened/closed and second which item inside the group was clicked. Remembering which item inside the group was clicked is done via selectedChild=”#{menuState.selectedMenuItem}”. Remembering which group was opened is done via value attribute on each group. The value is saved automatically.

I’m setting action=”page.xhtml” because I’m using a custom navigation handler. Standard navigation rules will work the same way.

start.xhtml:



  
	
	
	
   
   
       
	
	
   


MenuBean managed bean (in request scope):


package test;

import javax.faces.event.ActionEvent;

public class MenuBean {

   private MenuState menuState;

   public MenuState getMenuState() {
	return menuState;
   }
   public void setMenuState(MenuState menuState) {
	this.menuState = menuState;
   }
   public MenuBean() {}

   public void select (ActionEvent event) {
	menuState.setSelectedMenuItem(event.getComponent().getId());
   }
}

In select listener, we are remembering which rich:panelMenuItem was clicked. When we come back to the page, the clicked item will be italicized via selectedChild=”#{menuState.selectedMenuItem}”.

MenuState bean (in session scope) keeps the menu state.

package test;

import java.util.HashMap;
import java.util.Map;
import javax.annotation.PostConstruct;

public class MenuState {

private Map  menu;

   private String selectedMenuItem;

   public String getSelectedMenuItem() {
	return selectedMenuItem;
   }
   public Map getMenu() {
	return menu;
   }
   public void setMenu(Map menu) {
	this.menu = menu;
   }
   public void setSelectedMenuItem(String selectedMenuItem) {
	this.selectedMenuItem = selectedMenuItem;
   }
   public MenuState() {
   }
   @PostConstruct
   public void init () {
	menu = new HashMap ();
	menu.put("group1", false);
	menu.put("group2", false);
   }
}

rich:panelMenuGroup value attribute is bound to the menu HashMap and is saved automatically.

JSF configuration file:

 
  menuBean
  test.MenuBean
  request
  
   menuState
   test.MenuState
   #{menuState}
  
 

 
  menuState
  test.MenuState
  session
 

select.xhtml is very simple:


   
  	Go