Fybit Riatrax4Js: Program YUI in Java

February 2, 2010 at 11:08 am by Erol Koç | In Development, In the Wild, YUI Implementations | 2 Comments

Erol KoçAbout the Author: Erol Koç is a co-founder of Fybit, a Switzerland based startup company. Before joining Fybit, he worked as a software architect for a security company where he was the tech lead for the product’s web frontend. He has an MS degree in computer science from ETH Zurich. During an internship at IBM, he contributed to the Eclipse project.

Fybit Riatrax4Js: Write YUI in Java

YUI is not only a fantastic JavaScript library, it is also a great community. Developers contribute to YUI and allow others to benefit from it. Now, Fybit joins the YUI community with Riatrax4Js, a toolkit for rich internet applications (RIAs) based on YUI. Riatrax4Js allows you to program RIAs in plain Java and automatically translates your code to JavaScript, using YUI as a foundation layer. With YUI being available from Python, Java and JavaScript, one fourth of all developers get access to YUI. And with 18%, Fybit’s Riatrax4Js covers the largest part, consisting of Java developers.

Riatrax4Js: Java benefits, powerful YUI widgets

We just launched the Riatrax4Js alpha version with the goal of easing development of YUI-based RIAs. Riatrax4Js combines the advantages of Java with the extensive widget set and controls of YUI. Consequently, you get the benefits and comfort of Java programming such as:

  • Type safety
  • Inheritance
  • IDE support (Eclipse, NetBeans, …)
  • Debugging
  • Test tools like JUnit
  • Access to many 3rd party libraries

And you all know how fantastic YUI is:

  • Many powerful widgets
  • Compatible with all major browsers
  • Great performance
  • Yahoo! experts develop YUI

Add up the advantages of Java and YUI, you get the properties of Riatrax4Js. Riatrax4Js is not a server-side framework. It compiles Java to JavaScript, leveraging the standard Java compiler to give you unlimited scalability and speed. Moreover, Riatrax4Js allows you to connect your YUI frontend to the web server and backend with a simple annotation-based remoting mechanism.

A simple example: Show the server’s time on a button’s label when clicked

This section walks you through a simple example that is available for download from our website. Riatrax4Js apps consist of regular Java classes that can use the Java version of YUI that ships with Riatrax4Js. Here is how simple that is: 

@MainPanel(name="index")
public class DemoPanel {
		
	@Services(implementation=TimeServiceImpl.class)
	protected static TimeService service;
	
	public DemoPanel () {
		final Button syncButton = Button.create("syncButton");
		syncButton.addClickListener(new Listener() {
			public void perform () {
				syncButton.setConfLabel("Sync: " + service.getTime());
			}
		});
	}
}

The code starts with a @MainPanel annotation to allow Riatrax4Js to find the entry point to your program. Next, there is a field service that is annotated with the @Services annotation. Thanks to this annotation, the server can be called to get the time (or any other value/object you want to use on the client). It does not have to be explicitly initialized, Riatrax4Js does the dirty work for you and ensures that the client and server parts are connected by injecting an appropriate proxy. A YUI Button is then created by replacing an existing HTML button “syncButton” of your HTML page. A click listener which invokes the time service on the server is attached to the button. This is a synchronous (i.e., blocking) call. Async calls are just as easy: The generated proxies contains an async variant of each method in the interface that can be readily used. Here is the corresponding HTML page for the code: 

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fybit New</title>
		<script type="text/javascript" src="codebase/app-index.js"></script>
	</head>
	
	<body class="yui-skin-sam">
		<button id="syncButton">Synchronous Call</button>
	</body>
</html>

The most important line is the script tag at the beginning. It includes a single JavaScript file app-index.js where “index” is the name given in the @MainPanel annotation above. In the HTML body, you can find the aforementioned HTML button. Riatrax4Js wraps the YUI Button over this button.

A YUI button with server invocation

When you compile the application, Riatrax4Js analyses the source files and generates the file app-index.js consisting of the Java classes needed in the browser translated to JavaScript as well as the necessary YUI JavaScript code. Unlike with native YUI, you don’t have to care about YUI dependencies or which YUI files to include — Riatrax4Js includes them automatically!

This is just a small excerpt from a larger demo. The full demo also explains how to call the server asynchronously and how to use other YUI widgets (text editors, auto-completion, menus etc.). Apart from generating web application from scratch, using Riatrax4Js you can improve existing web applications easily with interactive features by wrapping ordinary HTML elements with YUI elements.

The full Fybit sowcase

Beyond demos: “PublicationManager” written with Riatrax4Js

We used Riatrax4Js to develop a user-friendly web application to manage publications for a research group at a university in Switzerland. This application facilitates the process of entering and modifying publication records and it has been put into operation in November 2009. The PublicationManager features YUI dialogs, sortable and resizable tables, paginators and auto-completion. The records entered by the users are stored in a database and can be edited and complemented with files with just a few clicks.

Publication manager for a research group at ETH Zurich

Security

Riatrax4Js is designed to make applications as secure as possible by default. But because Riatrax4Js uses JavaScript, applications are as hard to secure as any other dynamic web app. Fybit offers separate extension to Riatrax4Js, Riatrax Security. It is based on Riatrax4Js’s program code analysis and secures the application by filtering invalid or malicious content and blocking it before it reaches your code and/or application server. Fybit Riatrax Security is also configured with Java annotations.

Want to try?

The alpha version of Riatrax4Js is currently available on our web site to registered users. It’s great to see the user base of Riatrax4Js grow and be used by developers at this stage.

Fybit’s goal is to make Riatrax4Js the best Java RIA toolkit available and support it in the long run. We believe that the YUI community and YUI developers can give us important feedback about Riatrax4Js. We are excited to hear your questions and suggestions, e.g.

  • How can we improve Riatrax4Js?
  • For what kind of projects would you consider Riatrax4Js?
  • What is the best way for us to distribute the product?

As Fybit is a small startup company, we appreciate everyone who wants to contribute to Riatrax4Js to make it the number one RIA framework. Just drop us a line if you are interested or want to know more.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for January 19, 2010

January 19, 2010 at 7:32 am by Eric Miraglia | In In the Wild | No Comments

News and notes follow from the past week in the YUI community. As always, please let us know via the comments or @yuilibrary if we missed something good.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for January 10, 2010

January 8, 2010 at 9:18 am by Eric Miraglia | In In the Wild | 2 Comments

News and notes from the YUI community over the past month…let us know in the comments or at @yuilibrary if we missed something important:

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

YUI 2.7.0 on InsideLine.com

December 14, 2009 at 11:37 am by Réal Deprez | In In the Wild, YUI Implementations | 1 Comment

About the Author: Réal Deprez is the frontend architect at Edmunds.com, the premier resource for automotive information, based in Santa Monica. A Maine native and Tulane graduate, Réal has been working in frontend engineering professionally for five years.

Here at Edmunds (Edmunds.com) we just launched a redesign of Inside Line (InsideLine.com), our automotive enthusiast web site, and we are using the YUI JavaScript library extensively.

Some of the YUI utilities & widgets used on Inside Line:

  • Yahoo/Dom/Event
  • Animation Utility
  • Connection Manager
  • ImageLoader
  • JSON
  • Selector
  • Carousel
  • TabView

We (the Frontend team) started out with YUI 2.7.0 JavaScript core and built our own JavaScript user interface library on top of it to encapsulate site-specific components and functionality. Our library takes advantage of YUI’s core utilities, including Dom, Event, Connection Manager, and Animation.

We are using Dom and Event extensively to handle DOM interaction, event listeners and custom event handling. The YUI Connection Manager is handling all of our Ajax implementations, including our custom search widgets. We are also using many of the YUI widgets on Inside Line, including TabView and Carousel, with custom skins. The YUI ImageLoader helped us improve page performance and meet our strict performance requirements.

We chose YUI because of its great documentation, thorough testing, and the scope and depth of its offerings. The library is easy to learn, understand, and implement. The modularity of the system fits in well with our design principles, and the API and custom events make it extremely extensible and easy to integrate.

Some Highlights

Multimedia Spotlight (tabview, carousel) from InsideLine.com:

InsideLine.com multimedia spotlight.

Image and Video Galleries (core, JSON and Carousel):

InsideLine.com gallery interface.

Ajax Search Widgets (Dom, Event, Connection Manager):

InsideLine.com search interface.

Do you have a YUI Imlementation you’d like to share on YUIBlog? Check out our contribution guidelines — we’d love to hear from you.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: Pattern Insight

December 4, 2009 at 12:05 pm by Erik Hinterbichler | In In the Wild, YUI Implementations | No Comments

Erik Hinterbichler of Pattern Insight.Erik Hinterbichler (@ehinter)is the lead user interface designer/engineer for Pattern Insight, a technology startup based in Mountain View, CA. Erik is responsible for the UI and the usability of Pattern Insight’s products. He creates UI mockups and helps develop the web frontend for Pattern Insight’s flagship products, Code Insight and Log Insight. Erik has a graduate degree in HCI from the University of Illinois at Urbana-Champaign, the university from which Pattern Insight was originally founded. He also holds a B.A. in Computer Science and Math from Dartmouth College.

About Pattern Insight

Pattern Insight provides powerful solutions to index, search, and analyze semi-structured data. By “semi-structured” we mean any type of system data — code, logs, scripts, and more.

Currently we have two major software suites: “Code Insight” and “Log Insight.”

Code Insight provides several unique capabilities for analyzing source code. At its core is a lightning-fast fuzzy snippet search which scales to billions of lines of code. With snippet search, you can paste in a snippet of code and find all similar snippets across your entire code base, even tolerating variable name changes or line insertions/deletions. Built on top of this fuzzy search capability is Patch Miner, an application for locating buggy code that needs to be fixed. You can input a bug fix and Patch Miner will find all other locations where that bug fix should be applied. Finally, we have Pattern Miner, a copy-paste and duplication detector. Pattern Miner can help you refactor your code base by automatically finding duplicated code, even when variable names have changed. It can also detect IP leaks across different codebases; e.g., if you use both open source and proprietary code and want to prevent code from flowing between them.

Log Insight is our next-generation log search and analysis product. Log Insight can index TBs of system data and provide sub-second performance for complicated search queries. Furthermore, it enables the creation of persistent signatures that can be used to scan new or archived data for instant matches. Log Insight can also automatically extract common patterns (e.g. for failures) that can then be codified as signatures back to the Pattern Insight engine.

The Importance of UI

We recognize that possessing great underlying technology is not enough to create a successful product. A good UI is absolutely essential if we want users to be able to see the value of our technology and take full advantage of it. Thus the requirements for our user interfaces drive much of the development of our backend technology.

As one example, a product like Patch Miner is heavily dependent on the UI to shape it. At its highest level, Patch Miner is a fairly abstract concept: “find all the places where a bug fix needs to be applied in my code base.” Turning this into a concrete UI provides quite a few unique design challenges. For instance, what exactly is a “bug fix” and what is the best way for a user to input it? And once Patch Miner has found a bug somewhere else, what’s the best way to present the result to the user? Solving these user experience problems has provided the road map for the development of the core Patch Miner application.

Using YUI at Pattern Insight

The UIs for Code Insight and Log Insight are fully web-based, and we are using YUI heavily to improve user experience. When we were initially trying to decide which JS framework to use, there were two things that sold us on YUI: the extensive documentation and the wide variety of ready-made components and widgets. We ended up making use of almost all of them: animation, autocomplete, button, calendar, connection manager, container, cookie, datasource, history, JSON, slider, tabview, treeview, loader, logger, test, and CSS base/reset/fonts/grids.

Maintaining High Performance in a Rich Application

Our main strategy in keeping our rich applications performant has been to develop our own web services API which we use to load data on-demand as much as possible. The built-in support for on-demand loading in YUI widgets like treeview has made this much easier for us. We also made the decision to stop supporting IE 6. This has enabled us to use much more sophisticated Javascript that modern browsers can handle but IE 6 can’t.

Most Interesting YUI Implementation Features

We’ve developed quite a few of our own custom widgets, including a multi-select list with filtering capability and an auto-resizing textbox that grows and shrinks based on user input. Things like auto-resizing might seem minor, but I think most users would agree that small things like this are often the difference between pain and joy when using an interface.

Additionally, purely from a development perspective, our use of the YUI loader makes it very easy to quickly write new pages. We can effortlessly drop in anything we want on a given page, either standard YUI widgets or our own. Essentially, at the top of each page we just need to call our own “loadModules” function and give it the list of components we want to use, plus a callback function:

YAHOO.PI.loadModules(['treeview', 'PI.SelectableList'], function() { …

We are still using YUI 2, but this works similarly to the new YUI().use function in YUI 3.

What’s Next?

We are currently hard at work on Code Insight 1.6, our next major release, which will come with some impressive improvements to Patch Miner. We are also actively developing the next version of Log Insight, which will include a brand new, highly sophisticated UI. Among the new features are a web-based signature editor with live syntax highlighting, autocompletion, and error checking.

If you’re interested in learning more about us, you can read about our products and check out some videos at our website: http://www.patterninsight.com. Also, feel free to email us at info@patterninsight.com.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for November 30, 2009

November 30, 2009 at 12:43 pm by Eric Miraglia | In In the Wild | 1 Comment

As we get back into the swing of things post-Thanksgiving in the US, here are some of the YUI-related items we’ve noted in recent weeks. If we missed something, let us know in the comments; if you’d like to contribute an article to YUIBlog on your own YUI-related work, we’d love to see it — please see the contribution guidelines and send your article over.

  • Matt Snider’s YUI 3/PHP “Amazon Web Services Utility”: A great new project from Matt Snider, author of the YUI Storage Utility and lead frontend at Mint.com: “Amazon Web Services (AWS) provides a powerful tool for finding and evaluating just about any type of material goods. Whether you are searching by keywords or the UPC code, AWS can provide just about all the information you will ever need to know about a product. However, Amazon has put a lot of hurdles between you and the information you needs. First, as of August 15, 2009, AWS now requires that you sign all your requests. Secondly, they have terrible documentation and confusing error messages that do not always explain how to fix the problem.  Amazon Web Services Utility is a YUI 3 JavaScript/PHP solution that simplifies interacting with AWS by handling the request signing process automatically and securely, and prevening or handling common errors. In addition to returning the result as XML, there is an additional ‘gallery-aws-json’ package that adds functionality to parse the XML data into JSON objects.”
  • YUI 2 in Use at PayPal: We’ve known this for awhile, but I gather we haven’t mentioned it on YUIBlog in the past: PayPal is one of many consumer financial sites using YUI.  Currently, we’re seeing YUI 2.7.0 Yahoo, Dom, Event, Animation and Connection Manager on some pages in the PayPal workflow.
  • CutMyPic Site Using YUI ImageCropper and More: Writes Sean: “Me and a friend built this little tool as we found ourselves always wanting to crop images, round their corners, and add a drop shadow, but didn’t want to open up the CPU hungry CS4 every time.  In this site, we utilize YUI Reset, YUI ImageCropper, and YUI Slider. Although still in it’s beta form, we felt like the YUI ImageCropper was the easiest to modify in addition to not having to worry about any internal library conflicts.” (Original source.)
  • Caridy Patiño Mayea’s YUI 3 Getting Started Guide: Caridy has a great set of YUI 3 getting-started suggestions up on his Random Bubbles blog.
  • YUI 2 and 3 in Use on ActiveLog.com: Chris from ActiveLog wrote in to tell us “about a set of health and fitness sites that utilize YUI 2.x (soon to add some 3.x). We utilize the Connection Manager, TreeView, Dialog, Slider, and Calendar. ActiveLog is probably the most popular site we use these on, but we have a handful of other partner sites that use the same technologies via our fitness-partners.com site.” (Original source.)
  • Improving YUI 3 DataSchema-XML: From the prolific Matt Snider: “I have recently been working on finalizing the Amazon Web Services Utility, which now supports all the non-cart operations and almost all the possible response groups. In the course of developing the JSON version of the utility, I had the opportunity to work closely with YUI3’s DataSchema-XML, and realized its several shortcomings: it doesn’t support nested schemas, the resultListLocator cannot be an XPath statement, and all lookups fail if the Amazon XML namespace is included. This article will look at how I implemented the first two improvements…”
  • Jekyll Base Powered by YUI CSS Grids: Raphael Bauduin has posted his Jekyll Base project to GitHub.  Writes Raphael: “I was looking for a fast and simple way to maintain documentation for Dedomenon, the information storage engine behind MyOwnDB.Com. I was looking for a hosted system I didn’t have to maintain, but that would still give me full control of the content so I can move it to another system later if I want to.” You can read more about the project on Raphael’s blog (“Jekyll, YUI and GitHub: A Great Combination”). (Original source.)
  • KidZui Website Using YUI 2 Grids: We don’t do a great job of calling attention to all the sites using one of YUI 2’s most popular components: CSS Grids.  Here’s one that caught our attention recently — the website for KidZui, a browser for children 3-12. Great idea, nicely implemented.
  • @triptych, “YUI3 Turns NIMBY into BYBBQ”: Andrew Wooldridge writes: “As I’ve been poking around in YUI3, much to its annoyance mind you, since nobody likes to be poked, I’ve notice something very different about it. With many javascript libraries, you get the sense that the authors would very much like you to give up all work in other libraries and join the “one true faith” of this library. Instead of using your own code to do drag and drop use OURS. Instead of using jQuery’s AJAX, use OURS. Instead, I get the impression that YUI3 is much more pragmatic in its purpose. Instead of chaining you to one way of doing things, it has this idea of “bringing in” libraries and functions when you actually need them, instead of dumping let another few milliseconds onto your site’s pageload at the beginning. This really frees you up because you can just load the bare bones set of code you need to get things going, and pull in other libraries on demand. It’s almost like LOD for javascript….”  He’s got more to say…keep reading on his blog.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Implementation Focus: OCLC/WorldCat

November 19, 2009 at 10:33 am by Fiz Mohamed | In In the Wild, YUI Implementations | No Comments

Mohamed FizFiz Mohamed has worked for OCLC since 2004 where he’s a senior UI/UX (accessible) designer/developer for a number of high profile products and is responsible for a UI Cookbook/Library. A wealth of commercial freelance experience since 1993 has resulted in a wide range of technical and graphical skills. He lead the UI design for the launch of Cinema.com and also was the UI/UX designer for the US National Archives & Records Administration ARC project.

YUI TabView on Worldcat.

Here at OCLC — a worldwide non-profit library cooperative that provides web visibility for library catalogues around the world — we initially came across YUI while discussing grid frameworks early in 2008. Later that year the subject of JavaScript toolkits arose, and we recalled YUI as part of the investigation for one of our products. We looked at a number of other popular toolkits, and we tried to approach the toolkits from the point of view of both a developer and designer. While it was a close call between some, I was very impressed with the YUI, especially with the YUI 3 intro at that time which showed that Yahoo’s developers weren’t afraid to make big changes for the better, and had borrowed ideas from other mature toolkits and improved upon them. Even using YUI 2 would save us time with its fully-featured set of interactive widgets. On top of that, YUI was supported both by Yahoo and an active developer community.

YUI Carousel on WorldCat.org

YUI components have since found their way onto OCLC’s WorldCat.org, a site that allows users to search for an item of interest and discover which libraries near them own that item. WorldCat.org has become the Web destination for cross-library searching and uses YUI components in several locations:

  • TabView: One the homepage, tabs built on YUI TabView let a user click between a default search of all formats and one of several narrowed, format-specific searches, including books, DVDs and articles. TabView is also used on library profile pages (such as http://www.worldcat.org/libraries/14229), where users can tab through recently-catalogued items by genre.
  • Carousel: The WorldCat.org detailed record page provides a host of evaluative information about an item plus links to related items. Record pages on OCLC’s “WorldCat Local” service, a locally-branded and focused instance of WorldCat.org that serves as a library’s online catalog, uses the YUI Carousel to present a scrollable assortment of similar works by the same author or about the same subject. (See page bottom of http://ucsd.worldcat.org/oclc/3952807&referer=brief_results for an example.)
  • Reset/Fonts/Grids CSS: We use the complete YUI Reset package on the detailed record page, our most complex layout and most important page since it connects users to the local catalogs of our member libraries. The CSS package helps us maintain a consistent presentation across supported browsers, especially with user adjustment of font sizes — a key to making the page accessible for library users with limited sight.
  • Menu: WorldCat.org will soon use YUI Menu to create its main navigation and user-account menubar. We liked the better support for keyboard and mouse navigation over our current third-party utility.

    • Find conversations: bloglines | technorati

    Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Next Page »
Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.