Wednesday Dec 16, 2009

JavaFX - Custom Layout


In one of the previous post I suggested to use Layout and Layout related attributes. But it didn't clearly demonstrate how to use that for developing an application. So here is an example which uses Panel to layout the components.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/PanelLayout/PanelLayout.js"></script>


To launch click on above image or

The components can be positioned using various methods available in Container such as getManaged, getNodePrefSize, positionNode, resizeNode and layoutNode. The entire layout of components is done in onLayout function. This function will be invoked when ever there is need to layout the content nodes. We may explicitly update layout using requestLayout function.

Try it out and let me know feedback..


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/PanelLayout/zoneit.js"></script>

Tuesday Sep 15, 2009

JavaFX - Custom Feed Parsers


In one of my previous post I have described the use of RSS and ATOM Task to parse the feeds.

Unfortunately many feeds do not strictly comply with the RSS/ATOM format. Example: In some cases the date specified for pubDate element may be in wrong format, or its an invalid date or the information specified is embedded in CDATA instead of TEXT. The parser will fail for such scenarios. Hence we need to implement custom parsers so as to handle the situation.

Below sample reads engadget rss feed..

<script src="http://dl.javafx.com/1.2/dtfx.js"></script><script src="/rakeshmenonp/resource/CustomRssTask/CustomRssTask.js"></script>

For Applet mode, click on above image

Both RssTask and AtomTask API provide an attribute - factory - which can be used to specify custom implementation of RSS or ATOM Factory. Users may also customize various elements such as Channel, Item, Entry, Feed by overriding functions such as - fromXML, tryParseDate etc.

Example: In some cases the default parser fails to convert pubDate to valid DateTime instance. So a new attribute - pubDateText - is added so as to save the date as String.

/\*\*
 \* Customize Item so as to override fromXML
 \*/
class CustomItem extends Item {
    
    public-read var pubDateText : String;
    
    override function fromXML(parser: PullParser): Void {
        
        if(parser.event.qname == PUB_DATE) {
            if ((parser.event.type == PullParser.TEXTor
                (parser.event.type == PullParser.CDATA)) {
                pubDateText = stripCDATA(parser.event.text)
            }
        else if(parser.event.qname == TITLE) {
            title = stripCDATA(parser.event.text);
        else {
            super.fromXML(parser);
        }
    }
}

Now we need to implement a custom Factory which will instantiate and return the above CustomItem instance.

/\*\*
 \* Customize Factory so as to return CustomItem
 \*/
class CustomFactory extends Factory {
    public override function newItem(c: Channel: Item {
        CustomItem parent: c channel: c }
    }
}

Above Factory is set in factory attribute of RssTask as shown below.

var rssTask = RssTask {

    // set custom factory
    factory: CustomFactory { }

    location: "http://www.engadget.com/rss.xml"
    onChannel: function(channel) {  }
    onItem: function(item) { }
}
rssTask.start();

Update: Please refer to SpeedReaderFX by Jim Weaver for real world example.

Try it out and let me know feedback


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/CustomRssTask/zoneit.js"></script>

Monday Sep 07, 2009

JavaFX - Register Font


In one of my previous post I discussed about how to bundle custom font along with application. Recently I came across another query related to registering a custom font. Java API - Font.createFont(int fontFormat, InputStream fontStream) provides a way to create an instance of AWT font. Once created the font needs to be registered so that it can be loaded using the font name or family name. JavaSE 6.0 and above has API - GraphicsEnvironment.registerFont(Font font) for this purpose.

Problem:

  • API is available only since JavaSE 6.0, it may not be possible to use these APIs directly from JavaFX (which enforce JavaSE 5.0 compatibility)
  • API involves loading of font over network, so we need to perform this operation in background thread so as to avoid freezing the user interface

Solution:

In below example, font - RRRaghuMalayalam.ttf is downloaded from specified URL and registered. Launch application and click on "Register Font" button. The application is signed since it access resource from another domain.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/RegisterFont/RegisterFont.js"></script>

For Applet mode, click on above image

For standalone mode

Note: You may have to wait for a while until the font is downloaded from the URL and registered. Sample requires JavaSE 6.0 or above.

// Register Font
var registerFontTask = RegisterFontTask {
    url: font-url
    onDone: function() {
        text.font = Font 
            name: "<font-name>" 
            size: 40 
        };
    }
};
registerFontTask.start();


Try it out and let me know feedback


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/RegisterFont/zoneit.js"></script>

Wednesday Jul 15, 2009

JavaFX - Splash Screen


I must have done this post a long time back.. Hmm.. Better late than never.. In all my post I haven't used an important feature - Splash Screen. In real world applications users may not be interested in the technology, they would like to use the application. So we must show splash-screen which is related to the application.

Update: Refer to Download Service Listener available in JRE 1.6.0_18

JavaFX deployment script provides arguments for specifying alternate image to be shown instead of default java logo. We can pass arguments loading_image_url, loading_image_width and loading_image_height to specify the image-url, width and height as shown below.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script>
<script>
  javafx(
    {
      archive: "InterestingPhotos.jar",
      width: 240,
      height: 320,
      code: "interesting.Main",
      name: "InterestingPhotos",
      loading_image_url: "< url-to-image >/image.jpg",
      loading_image_width: 240,
      loading_image_height: 320
    }
  );
</script>

Now JavaFX Zembly Widget uses custom splash screen. Click on below image to load the applet.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/ZemblyIP/ZemblyIP.js"></script>

Custom Splash Screen sample demonstrates this feature. Overall experience may not be as good on Mac platform due to older JRE version. Try it out and let me know feedback

Update: Post received two dzone entries!
Thanks a lot for your encouragement and support

<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/SplashScreen/zoneit.js"></script>     <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/SplashScreen/zoneit1.js"></script>

Friday Mar 20, 2009

"Can JavaFX speak my language?"


An attempt to answer two simple questions...
  • Can JavaFX speak my language?
  • How to load custom fonts in JavaFX?

There are many languages for which Java does not provide built-in support. Also you may want to use some nice custom font instead of the logical font. You may also want to ensure that the application looks fine across platforms and does not render boxes or look ugly on some platforms.

JavaFX allows you to package your font along with the application. So that you can use the font with your application and its guaranteed that the application looks fine on all platforms. Here I'll try to render some characters using my mother tongue - Malayalam. Oh! Yes! its a palindrome.

First I downloaded Malayalam font from Indix website. I'll use RRRaghuMalayalam.ttf in my application.

I copied the RRRaghuMalayalam.ttf font file under src/fontttf/fonts/ directory. fontttf is package name of the application. Next I created a mapping file - fonts.mf under src/META-INF/. In mapping file I specified a name for the font and the location of font as shown below. I named the font as Malayalam Font.

Malayalam\\ Font = /fontttf/fonts/RRRaghuMalayalam.ttf

Now the directory structure looks as shown below.

Now lets use this new font in our application. That is simple!. We can just specify the font name as "Malayalam Font". No additional settings required.

Text {
    font: Font {
        name: "Malayalam Font"
        size: 40
    }
    content: "\\u0d2e\\u0d32\\u0d2f\\u0d3e\\u0d33\\u0d02"
}

<script src="http://dl.javafx.com/1.2/dtfx.js"></script><script src="/rakeshmenonp/resource/FontTTF/FontTTF.js"></script>

For Applet mode, click on above image

For standalone mode

Cool! Now JavaFX can speak my language! Can it speak your language?
You need to try it out!

Source:

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_custom_fonts";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>
<script type="text/javascript"> digg_skin = 'compact'; digg_window = 'new'; </script>

About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today