SKITSANOS FOR RIA

Skitsanos

Sunday, March 14, 2010

Run-time language switching with jQuery

When you are making some enterprise apps that targets users from different countries you might need to implement live/run-time language switcher where labels for your controls will be changed instantly from one language to another, to be short and visualize the result we are looking for, i will put it this way, we need to turn this:

image

into this

image

For Single-Page-Interfaces (SPI) we need to have ability to run these transformations at run time, without having UI reloaded. I won’t explain at this moment how your design could be affected because ‘translated’ labels from one language could be longer/shorter than in another language, i think it’s quite simple thing to issue to understand and take care of so it doesn’t require my coverage here. What i want to do here is just to give you idea about one of the many ways on how to implement language switching for labels on your html controls.

First of all i suggest you to use some light-weight tagging for your labels, something like this:

<table>
<tbody>
<tr><td key="Messages.NAME">Name:</td><td><input /></td></tr>
</tbody>
</table>
<a href="#" key="Messages.YES">OK</a> | <a href="#" key="Messages.NO">Cancel</a>


Notice that i’ve added new attribute called key. That’s my placeholder for label keys. So idea is like this, when language switching event happens i will run through my labels, and assign new values to their content based on the key i find. So markup we did, now we need actual implementation. Which quite simple as well:

var app = {
events: {
CHANGE_LANGUAGE: 'jQueryChangeLanguageEvent'
},
   Messages:  {
OK: 'OK',
CANCEL: 'Cancel',
YES: 'Yes',
NO: 'No',
NAME: 'Name'
},
Messages_gr: {
OK: "εντάξει",
CANCEL: "ακυρώσει",
YES: "ναι",
NO: "οχι",
NAME:'Όνομα'
}
};
  $(function() {
$('#btnExec').live('click', function() {
$(document).trigger({
type: app.events.CHANGE_LANGUAGE,
language: 'gr'
});
});
   $(document).bind(app.events.CHANGE_LANGUAGE, function(e) {
app.Messages = app["Messages_" + e.language];
$('*[key]').each(function(ndx) {
$(this).html(eval('app.' + $(this).attr('key')));
});
});
});

What i’m doing here is this, i defined my application data that contains events names/constants, I defined 2 set of language files Messages and Messages_gr, which in real world application you could load with $.getJSON or something from some URL, instead stuffing it into your main application. If your user workign only with English UI, there is no point to load data for all other languages.

So, we need to listen for CHANGE_LANGUAGE that we defined in app.events.* in order to perform live language switching, once this event happen we going through all elements that have key, you can see in my case it’s TD and A tags, and replace labels with new content based on key specified within context html element.

I’ve also added there btnExec just to perform actual event triggering so you can see whole flow.

In case if you will decide to use file based language files you could wrap it like this:

$(document).bind(app.events.CHANGE_LANGUAGE, function(e) {
$.getJSON('messages_' + e.language,function(data) {
app.Messages = data;
$('*[key]').each(function(ndx) {
$(this).html(app.Messages[$(this).attr('key')]);
});
});
});
You can find complete code here: jquery-languageSwitch.htm

Saturday, March 13, 2010

Javascript: the new VBA

Source: Zef

Somewhere at the end of the eighties, my dad started work at his local university where he became the WordPerfect expert, which was the dominant word processor at the time. Beside acting as a helpdesk and laying out documents, he also spent a lot of time writing WordPerfect macros. WP’s macro language allowed you to add functionality and automate common tasks. All was well, until Microsoft came along with Microsoft Office.

It took Microsoft a long time to dominate the word processing market, but they managed to push WordPerfect practically out of the market with Word ‘97. My dad’s university also switched to Word around that release. Word uses a dialect of BASIC for writing macros: Visual Basic for Applications (VBA). He still does the majority of his programming work in VBA. To give you a flavor:

Public Function BusinessDayPrior(dt As Date) As Date
Select Case Weekday(dt, vbMonday)
Case 1
BusinessDayPrior = dt - 3
Case 7
BusinessDayPrior = dt - 2
Case Else
BusinessDayPrior = dt - 1
End Select
End Function
It is likely that within 10 years practically all word processing will be done in some sort of web application. Albeit in Google Docs or something else, and with this platform shift will also come another shift in macro language. Although it may not be surprising, it looks like that macro language is going to be Javascript.

Google has started introducing macro capabilities to its Google Docs offerings, calling it Google Apps Script, but if you look closely you will see it’s simply Javascript using a Google Docs API. The first application where Google Apps Script is introduced is in its spreadsheets, this is what it looks like:

function example() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var myValue = Browser.inputBox("Enter a number");
sheet.getRange("A1").setValue("Number entered:");
var b1Range = sheet.getRange("B1");
b1Range.setValue(myValue);
var valueToShow = b1Range.getValue() + 1;
Browser.msgBox("Answer: " + valueToShow);
}
Google’s Apps Script — I’m guessing they don’t like to abbreviate it to GAS — currently enables power users to define:
  • Custom spreadsheet functions
  • Custom menus in the spreadsheet application
  • Send e-mails
  • Read and manipulate spreadheets
  • Communicate with web services

Google took another step to become a serious Microsoft Office competitor. And my expectation is that more web applications will allow users to build macros in this fashion soon.

Another programming domain conquered by Javascript.

XML Prague Live

XML Prague is a conference on XML for developers, markup geeks, information managers, and students.

Zorba XQuery Processor

Zorba is a general purpose XQuery processor implementing in C++ the W3C family of specifications. The query processor has been designed to be embeddable in a variety of environments such as other programming languages extended with XML processing capabilities, browsers, database servers, XML message dispatchers, or smartphones. Its architecture employes a modular design, which allows customizing the Zorba query processor to the environment’s needs. In particular the architecture of the query processor allows a pluggable XML store (e.g. main memory, DOM stores, persistent disk-based large stores, S3 stores). Zorba can be accessed through APIs from the following languages C, C++, Ruby, Python, Java, and PHP. Zorba runs on most platforms and is available under the Apache license v2.

Zorba XQuery processor in version 1.0 implementing the following specifications:

This release includes support for data definition and manipulation (collections, indexes and integrity constraints). It also extends the standard XQuery capabilities with a rich and extensible function library, including xqDoc, REST,  JSON, CSV,  Excel functions, email, introspection, file manipulation, and mathematical  computations. Zorba 1.0 includes lots of bug fixes and performance improvements as well.

Downloads and more details on http://www.zorba-xquery.com/

Wednesday, March 10, 2010

GameQuery Makes Javascript Game Development Easier

Source: WebAppers

gameQuery is a jQuery plug-in to help make JavaScript game development easier by adding some simple game-related classes. gameQuery has the following features: multi layer-sprite animations, sprite hierarchies, collision detection, swappable sound support, periodic callbacks and keyboard state polling.

JavaScript games are still in their infancy but but there is many reason why they are more than a curiosity: Modern browser provide very good JavaScript engine and improvement keeps coming. Then to develop JavaScript games you don’t need an expensive proprietary IDE, widly available, free, open source software are there waiting for you! Sometimes Flash is not available in some platform, even very recent ones (Wii, iPhone …).

jquery-games

Requirements: jQuery Framework
Demo: http://gamequery.onaluf.org/demos.php
License: MIT License

Saturday, March 06, 2010

Microsoft’s First App for Android is Called Tag

Source: Mashable

Admit it: seeing Microsoft release an application for Google’s operating system seems a little weird, doesn’t it? Still, it’s true; Microsoft has launched its first Android app, called Tag.

We wrote about Tag a couple of weeks ago; simply put, it’s an app that lets you link physical objects with content on the Internet (as featured in Get Married magazine). You point your smartphone’s camera at a specially designed barcode, and your smartphone opens a link to any sort of online content: video, image, or text.

At launch, Microsoft supported most mobile operating systems – Symbian, iPhone OS, BlackBerry – with Android also being on the list, but clicking on that link actually revealed a “coming soon” message. Now, Android users can try out the app too, but its significance lies in the fact that Microsoft has created an application for Google’s Android. It’s not that big of a deal, since the same app exists for the iPhone OS, another competitor to Microsoft’s Windows Mobile and the upcoming Windows Phone 7 mobile operating systems. Still, in the epic battle of Microsoft vs. Google, this is another small victory for the online giant from Mountain View.

Google Europe Exec: Desktop PCs 'Irrelevant' In Three Years

Source: PCWorld via Yahoo! News

One thing's for certain: Google isn't exactly bullish on the long-term prospects of the conventional desktop or laptop. When it comes to online search, the conventional PC will be "irrelevant" within three years, or so claims Google vice-president of Global Ad Operations John Herlihy.

Herlihy, who's based in Ireland, made his dour desktop prediction during a Wednesday speech at the Digital Landscapes conference in Dublin, according to a report by Ireland tech news service SiliconRepublic.com.

Said Herlihy: "In three years time, desktops will be irrelevant. In Japan, most research is done today on smart phones, not PCs,” according to the report.

Google's Anti-Desktop Rhetoric

Herlihy's remarks echo a speech made last month by Google CEO Eric Schmidt, who announced that the search giant is focusing on mobile, not desktop, search, and urged application developers to do the same.

In his keynote at Mobile World Congress in Barcelona, Schmidt pointed out that global sales of smartphones and other mobile devices are growing rapidly and will soon eclipse sales of conventional PCs.

An Exaggerated Demise?

There's little doubt that smartphones are already ubiquitous worldwide. According to a recent United Nations report, nearly two-thirds of all humans currently use a cell phone, and the mobile device revolution is still in its infancy.

OK, but is the desktop really doomed? Perhaps from the perspective of Google, a search company that generates nearly all of its revenue from online advertising, the desktop may soon grow irrelevant, at least globally.

Certainly, Google's strategic focus on cloud computing and connectivity is visible in every project the company undertakes, be it online productivity apps like Google Docs or an experimental fiber broadband network.

But it's likely the conventional PC will have a longer, healthier life than Google anticipates. Big bulky desktops are disappearing, of course, but that's hardly a new development. Smaller, lighter, and more mobile laptops will take their place, except for niche applications that require maximum, local processing power and storage.

The smartphone is great for many things, but it's no desktop-replacement device, either in the home or office. New mobile devices, such as the Apple iPad and similar tablets, may bridge the gap between phone and desktop. And laptops will likely make new inroads in developing nations, particularly as manufacturing costs continue to fall.

Who knows? Maybe we'll eventually ditch the "smartphone" and "laptop" labels and just call everything a mobile device.

Wednesday, March 03, 2010

IBM Adds Support for XPath 2.0, XSLT 2.0 and XQuery 1.0 to WebSphere 7

Source: InfoQ

IBM's WebSphere feature packs are optionally installable product extensions to the application server offering new features.  IBM's recently released Feature Pack for XML provides application developers with support for the most recently ratified set of W3C XML standards:

  • XQuery 1.0: a newly introduced query and functional programming language designed to query collections of XML data.  It uses the XPath expression syntax to address specific parts of an XML document supplementing it with "FOR, LET, WHERE, ORDER BY and RETURN" expressions. Commonly abbreviated to "FLWOR" these expressions may be used for performing joins across multiple XML streams in a similar manner to SQL. 
  • XPath 2.0: an expression language for working with XML documents.  The result of an XPath expression is typically a selection of nodes from the input documents or an atomic value. XPath 2.0 is now a subset of XQuery 1.0.  The most notable change from XPath 1.0 to XPath 2.0 is the introduction of a much richer type system: Every value is now a sequence, with a single value being treated as a sequence of length 1.  XPath 2.0 supports "Schema Awareness" meaning that elements of the tree have type annotations which can be used to navigate the XPath. A processor must offer schema awareness for the built in types such as string, number, date and so on. It may optionally support user defined types, which can greatly simplify the required expressions. For example an internet mailing company might have an XML document with a billing address and delivery address associated with a customer's order. If both address fields have a common AddressType the expression for //element(*, tns:AddressType)/postalCode would return the post code for both addresses. XPath 2.0 also offers a greatly expanded set of functions and operators. New functions include regular expression syntax for pattern matching, new date functions such as current date, and new numeric functions such as floor, ceiling and round. New operators include intersect and except.
  • XSLT 2.0: a programming language used to transform XML into a new XML format, or into another presentation format such as HTML, XHTML or SVG.  Like XQuery 1.0, XSLT 2.0 uses XPath 2.0 as a path language. XSLT 2.0 adds a number of new capabilities including grouping, the ability to output multiple results from a single input document, and the ability to define functions in XSLT that can be called from XPath. As for an XPath 2.0 processor an XSLT processor may optionally be "Schema Aware". Being so offers a number of advantages, such as the ability to validate input trees prior to the XSLT transformation, and to validate output trees to ensure that the XSLT transformation is producing valid output. You are also able to specify data types for variables, input parameters, return values from functions, user-defined functions and templates. XSLT continues to be the primary choice for transforming XML data, whilst XQuery is expected to become the standard for querying XML documents. Whilst both XQuery and XSLT 2.0 use XPath 2.0 as a path language, the XQuery extensions to XPath 2.0 are not of practical relevance to XSLT developers.

Read full article at InfoQ

Monday, March 01, 2010

Vzaar and escaping your query strings

Not Vzaar API related but rather a hint. When are having situation where you need to redirect user to a video page and submit some parameters in query string, make sure you have used escaping for non-English symbols.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            document.location.href = 'http://somewebsite.ext/somepage.php?'+escape('somevalue=Förmedling');
        </script>
    </head>
    <body>
        some content...
    </body>
</html>

Webware development dedicated blog by Skitsanos R&D Labs. ASP.NET, XML, RIA, Adobe Flex, ActionScript 3, AIR, AJAX, Web 2.0, Backbase, CGI development with RealBasic and other web development issues.
News
Downloads