CHAPTER TWO

2.1 UNDERSTANDING WEB UI CONTROLS

Standard HTML elements or controls rely heavily on: Web browser engine used for rendering HTML The operating system graphics engine. Over the years, both technologies have been refined, and the way web developers interact with them has also changed dramatically. But whether youre building applications for the Internet explorer browser, Google Chrome, Opera, Apple Safari or Firefox Mozilla etc, behind the scenes the same HTML code are still being generated underground. Web UI controls or JavaScript UI Framework as its popularly called; simply deliver better wrappers for interacting with the different browser engine and the underlying operating system graphics engine. Web UI controls tend to hide the complexity of JavaScript from web developers leaving them with fewer and simpler codes. Web UI controls provide improvements in efficiency, reduce complexity, and add prebaked features so you dont have to code them yourself; but they cant remove the fundamental limitations of a system component associated with JavaScript and browser compatibility issue.

2.2

WEB UI FRAMEWORK OR LIBRARY

Web UI controls or JavaScript Framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. Some JavaScript libraries, such as YUI, are classified as frameworks since they exhibit full-stack capabilities and properties not found in general JavaScript libraries. With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. Thus, JavaScript libraries such as Prototype, script.aculo.us, Ext Core, MooTools and jQuery and JavaScript widget libraries such as Ext JS and Dojo Toolkit were developed, allowing for developers to concentrate more upon more distinctive applications of AJAX. This has led to other companies and groups, such as Microsoft and Yahoo! developing their own JavaScript-based user interface libraries, which find their way into the web applications developed by these companies. Almost all JavaScript libraries are released under either a license to ensure license-free distribution, usage, and modification. Some JavaScript libraries allow for easier integration of JavaScript with other web development technologies, such as CSS, PHP, Ruby, and Java. Many

libraries include code to detect differences between runtime environments, and remove the need for applications to allow for such inconsistencies. 2.3 EVOLUTION OF WEB UI CONTROLS OR JS UI FRAMEWORK

The development of web UI controls can be dated as far back 2005 when Yahoo release the first version of their user interface library called Yahoo User Interface (YUI) which was used in yahoo properties such as My Yahoo! and the Yahoo! front page. YUI was released for public use in February 2006. It is actively developed by a core team of Yahoo! engineers. In September 2009, Yahoo! released YUI 3, a new version of YUI rebuilt from the ground up to modernize the library and incorporate lessons learned from YUI 2. Among the enhancements are a CSS selector driven engine for retrieving DOM (document object model) elements, a greater emphasis on granularity of modules, a smaller seed file that loads other modules when necessary, and a variety of syntactic changes intended to make writing code faster and easier. The YUI Library project at Yahoo! was founded by Thomas Sha and sponsored internally by Yahoo! co-founder Jerry Yang; its principal architects have been Sha, Adam Moore, and Matt Sweeney. Other web UI controls which have existed since 2005 include, jQuery, Moo.fx

in September 2006, Valerio Proietti designed the MooTools framework from Moo.fx, a popular plug-in which existed since October 2005, which is still maintained and used. Others that have existed since that time included Google Web Toolkit (GWT) (2006), pyjamas (2010), etc. 2.4 FEATURES OF WEB UI CONTROLS

The following are some of the key features of web UI controls 1. DOM element selections using the cross-browser open source selector engine sizzle. 2. DOM traversal and modification (including support for CSS 1-3) 3. Events 4. CSS manipulation 5. Effects and animations 6. Ajax 7. Extensibility through plug-ins 8. Utilities - such as user agent information, feature detection 9. Compatibility methods that are natively available in modern browsers but need fallbacks for older ones - For example the in Array() and each() functions. 10. Cross-browser support.

2.5

HIERARCHY OF WEB UI CONTROLS

2.6

WEB UI CONTROLS WITH A SAMPLE DATA APPLICATION

2.7

A HIGHER-LEVEL WRAPPER

Apart from offering browser independent look and feel, web controls offers a set of high level services to allow application development with ease. Below is a list of services ushered in by web controls into the web development: 2.7.1 RICH TEXT MODEL Web UI controls gives Web applications the ability to display rich, styled text anywhere in a user interface. Therefore text can be combined with lists, floating figures, and other user interface elements. And in displaying large amounts of text, advanced document display features such as wrapping, columns, and justification could be used to improve readability. 2.7.2 ANIMATION AS A PROGRAMMING CONCEPT Building animations on pages has never been easy due to the complexity in doing so with JavaScript. Web UI Controls tends to simplify the development of animations on web pages by hiding the complexity involved when doing so with JavaScript. 2.7.3 STYLES AND TEMPLATES Most web controls usually come with this look and feel that is easily integrated into applications ranging from small to complex software programs. They usually make room for easy modification and provide readily available templates that can be used in case there is need for modification in look and feel.

2.7.4 WINDOWS LIKE INTERFACE DESIGN Web UI controls makes it possible to build the web version of software applications like Microsoft outlook express, spreadsheet packages like excel, word documents and host other applications making it look like its a windows based application. 2.7.5 DRAG AND DROP Web UI controls make drag and drop functionality much easier compare to writing in pure JavaScript code. Web UI controls makes it easy by providing controls that can be easily plugged into any application or what so ever. 2.8 FRAMEWORK DEPENDENT

Web controls usually rely on the underlying framework written usually in JavaScript. These JavaScript written frameworks usually contain readymade function call which can be later made use of in an application. Applications written with these frameworks must be referenced correctly; otherwise there would be problems with loading the application. 2.9 WEB UI LIBRARIES, FRAMEWORK AND TOOLKITS

Currently, there are wide varied ranges of Web UI frameworks covering varied languages below are a list of available web UI libraries:

2.9.1 LIVEPIPE: UI COMPONENTS FOR PROTOTYPE LivePipe UI is a suite of widgets and controls for applications that has been built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, well documented and all of them will degrade gracefully for non JavaScript compatible browsers. Available Controls: Tabs, Windows, TextArea, SelectMultiple, Rating,

ProgressBar, ScrollBar and ContextMenu.

2.9.2 UKI SIMPLE UI KIT FOR COMPLEX WEB APPS UKI is a simple JavaScript UI toolkit has been written in plain JavaScript, built to speed-up desktop-like web applications and comes with a rich view-component library ranging from a Slider to List and SplitPane (view the control browser below). It leverages well-known DOM and JS idioms such as CSS selectors, events and attributes. So, if youve ever used jQuery, learning UKI wont take very long.
8

The keyword to UKI is simplicity: No frameworks to install, no dependencies to manage and no CSS to include.

2.9.3 MochaUI A Web Application User Interface Library MochaUI is a popular extension to the MooTools Javascript Framework and ExplorerCanvas, to develop quick Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows, Modal Dialogs and much more.

2.9.4 SIGMA AJAX UI BUILDER Written in Javascript and PHP, SigmaVisual is web based visual WYSIWYG AJAX UI builder that has more than 40 common components, including tabs, dialog, tree grid, time Line and so on.

2.9.5 JXLIB BASED MOOTOOLS JxLib is a JavaScript UI framework built on MooTools. It provides the basic components most applications need such as buttons, tabs, menus, trees, and dialogs, as well as a few more capabilities. JxLib also incorporates a mechanism for selecting a look and feel, or skin, based on a set of images and CSS.

10

2.9.6 JQUERY UI jQuery UI is a widget and interaction library built on top of the jQuery core that allows you to animate different elements giving you impressive front-end interactions, all with relative ease. The UI package is basically a collection of user interface-related functions that and can be broken into 3 main modules: the widgets, which contain prebuilt and customizable user interfaces; the effects, which are very simple and straightforward animations you can do to a page element (shake it, explode it, and so on); and expanded mouse interaction with page elements (dragging and dropping).

2.10 YAHOO! YUI LIBRARY If all of the above UI frameworks, kits and libraries dont suit your needs, maybe you should try the Daddy of UI frameworks, the very reliable, feature rich, and
11

very popular Yahoo! YUI Library. YUI, currently in its third edition, is a constantly updated (by its large team of developers) UI library thats choc-full of features, tools, and packs a multitude of components, utilities, modules and controls. As far as finding the most complete UI library, you would be hard pushed to find any better than YUI.

2.11 GOOGLE WEB KIT (GWT) Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive

development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including Google Wave and the new version of AdWords. It's open source, completely free, and used by thousands of developers around the world.

12

2.12 TELERIK Teleriks RadControls for ASP.NET AJAX set the bar for comprehensiveness, versatility, performance and reliability in the UI component industry. Backed by Teleriks legendary support and aggressive release schedule, these 70+ UI controls help you build high-quality line-of-business web applications faster and easier.

13

CHAPTER THREE
3.1 IMPLEMENTATION ISSUES IN WEB UI CONTROLS

Implementing web applications with web UI controls involves referencing a class libraries shipped as part of the framework. Many of these class libraries helps application developers create UI elements such as buttons, shapes, panels, textbox etc. Below is a list of the class libraries that make up WPF framework: 3.2 INCLUDING THE LIBRARY

Web UI library is usually a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers. jQuery a popular web UI library for example has a CDN sponsored by Media Temple (previously at Amazon). Google and Microsoft host it as well. Below is an example of how to include a reference to your web page. <script type="text/javascript" src="jquery.js"></script> There are other ways, for example, jQuery can reference the above file like this: $(document).ready(function() { // jquery goes here }); 3.3 WEB UI CONTROLS AS PLUGIN

Because of web UI controls architecture, other developers can use its constructs to create plug-in code to extend its functionality. Currently there are thousands of framework plug-ins available on the web that cover a wide range of functionality
14

such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, etc There are alternative plug-in search engines that take more specialist approaches, such as only listing plug-ins that meet certain criteria (e.g. those that have a public code repository). 3.4 MAKING DOCUMENT OBJECT MODEL (DOM) CODING FUN

Web UI controls dont ask that you learn JavaScript inside and out. It doesn't throw you into the deep end with prototypal inheritance, binding, "this", and native prototypes. When you get started with UI controls you will find that it makes web development as simple as hello world. Programming newbies will find web UI controls friendlier to use because they wont have to go through the stress of learning JavaScript in and out. On the other hand, web UI controls makes learning JavaScript easy. It implements a lot of things that JavaScript is going to have (many of the methods on Natives are just the JavaScript 1.8 spec and beyond). 3.5 SAMPLE WEB UI LIBRARIES APPLICATION

Applications developed using web UI libraries always have this distinct look and feel which makes it beautiful and attractive. Below is a list of sample web applications developed with some of the well known third party web UI controls:

15

3.6

JQ STUDIO

JQ Studio jQuery template is distinguished by simple gray-colored design which looks very calm and stylish. The menu sections are highlighted with subdued yellow color which appears as you click one of the blocks. This template is created with the help of jQuery technology which provides smooth interactive effects and makes your website stand out for innovative design and high quality. If you are going to establish a design studio online or build a website for your design agency this jQuery template will appear to be an excellent finding.

16

3.7

WEB-KREATION

Web Kreation makes login screen design as easy and simple as ever. The easy to use framework is designed using the popular jQuery web UI library.

17

CHAPTER FOUR
4.1 WEB UI FRAMEWORK DEVELOPMENT LANGUAGE

The underlying language of web UI controls development is JavaScript; due to its complexity, other simple and easy to code languages were written as layers on top the JavaScript language. Some these languages include: 4.1.1 CoffeScript CoffeeScript is a little language that compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast as or faster than the equivalent handwritten JavaScript. Below is a sample CoffeScript function that returns the multiplication of x by x
# Function in CoffeScript: square = (x) -> x * x

Below is the equivalent JavaScript code:

square = function(x) { return x * x; };

18

4.1.2 OBJECTIVE-J Objective-J is a programming language developed as part of the Cappuccino web development framework. Its syntax is nearly identical to the Objective-C syntax and it shares with JavaScript the same relationship that Objective-C has with the C programming language: that of being a strict, but small, superset; adding traditional inheritance and Smalltalk/Objective-C style dynamic dispatch. Pure JavaScript, being a prototype-based language, already has a notion of object orientation and inheritance, but Objective-J adds the use of class-based programming to JavaScript. Programs written in Objective-J need to be preprocessed before being run by a web browser's JavaScript virtual machine. This step can occur in the web browser at runtime or by a compiler which translates Objective-J programs into pure JavaScript code. The Objective-J compiler is written in JavaScript; consequently, deploying Objective-J programs does not require a web browser plug-in.
@implementation Address : CPObject { CPString name; CPString city; } - (id)initWithName:(CPString)aName city:(CPString)aCity { self = [super init]; name = aName; city = aCity; return self; 19

} -(void)setName:(CPString)aName { name = aName; } -(CPString)name { return name; } +(id)newAddressWithName:(CPString)aName city:(CPString)aCity { return [[self alloc] initWithName:aName city:aCity]; } @end

4.1.3 CONTRACTS.COFFEE Contracts.coffee is a dialect of CoffeeScript with built-in support for contracts. It is inspired by the contract system found in Racket. Contracts let you clearly even beautifully express how your code behaves, and free you from writing tons of boilerplate, defensive code. You can think of contracts as assert on steroids. Heres a simple example of a contract on a function:
myFunc :: (Num) -> Num myFunc = (x) -> x

This says that the myFunc function should always be called with a number and will always return a number. It looks a lot like types (in fact the syntax looks a lot

20

like Haskell) but unlike types, contracts are enforced at runtime in pure JavaScript. 4.1.4 JS11 JS11 takes incomplete code and transforms it back into JavaScript. It's smart enough to add in various bits of redundant syntax, and can also transform some common errors and handy shortcuts into working JavaScript code.
hello (name = "World") { if name isn't "World" { return "Hello, " + name + "!" } else { return "Welcome back, stranger!" } } hello() // works!

4.1.5 MOVE Move is a modern and simple programming language which can run on virtually any computer. Move is primarily aimed towards people not previously familiar with programming computers.
<script src="http://movelang.org/move-0.4.5.js"></script> <script type="text/move" module="bar"> import foo, capitalize export sayHello = ^(name) { print foo.makeHello capitalize name } </script> <script type="text/move" src="capitalize.mv"></script> <script type="text/move" module="foo"> export makeHello = ^(name) { 'Hello '+name+'!' } </script> <script type="text/move"> import bar bar.sayHello 'worlds' 21

</script>

4.1.6 ZEDSCRIPT Zedscript provides a user-friendly and powerful pseudocode-ish syntax alternative to the ECMAScript/javascript syntax. Zedscript runs in the V8 engine (and eventually also in the Spidermonkey and Nitro ECMAScript engines). Below is a sample Zedscript:
//zed // - currently has a dylan/moo -ish syntax // - the parens around the expression will change to // a more ruby/lua -ish syntax, with optional do/then. print("*** start\n") var x = 10 var y = 20

// if has elif clauses // and/or are aliases for &&/|| if (x == -99) print("FAIL") elif (x == 10 and y > 15) print("OK") elif (x == -99 or y > -99) print("FAIL") else print("FAIL") end

// not as alias for ! var b = false; print(!b) print(not b) // fn as alias for function fn times2(i) return i * 2 end 22

var z = 1 while (z <= 5) print(z + " : " + times2(z++)) end print("\n*** end ");

4.2

DIFFERENCE BETWEEN WEB UI CONTROL AND TRADITIONAL HTML ELEMENTS

Whenever possible, web UI controls defers to browsers' native user interface elements (HTML elements). For example, web UI controls Button widget is a synthetic button-like widget built mostly from div which makes it different from the normal HTML <button>. That means that web UI libraries/frameworks buttons are rendered consistently in different browsers and on different client operating systems. Web UI frameworks bring not only consistencies, but also makes possible some of those things that were not possible years back and make application development a few clicks. Unlike your native browser UI elements, web UI frameworks make use CSS to provide that consistency required in all the browsers. So, instead of hard coding the complexity behind the different browsers UI implementation, web UI frameworks or libraries provides a simple and easy way around it thereby making it possible for developers to spend more time on the business logic rather than the user interface design. Browsers provide an interface to examine and manipulate the on-screen elements using the DOM (Document Object Model). Traditionally, web developer, most especially JavaScript programmers use the DOM to program the user
23

interface portion of their logic, and traditionally, they have had to account for the many differences in the implementation of the DOM on different browsers. So that you don't have to worry (generally) about cross-browser support when implementing user interfaces, web UI framework technology provides a set of widget and panel classes that wrap up this functionality. But sometimes you need to access the DOM. For example, if you want to: 1. Provide a feature in your user interface that the web UI library of choice does not provide or support. 2. Access an HTML element defined directly in the host page 3. Handle browser Events at a low level 4. Perform some filtering or other processing on an HTML document loaded into the browser 4.3 DIFFERENCE BETWEEN WPF AND TRADITIONAL CODING STYLE

Building application user interface with native HTML elements is straight forward, for example the code to create a page with a textbox and a button would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <label for="textfield"></label> <input type="text" name="textfield" id="textfield" /> <input type="submit" name="button" id="button" value="Submit" />

24

</body> </html>

While a simple jQuery code to do same thing as above would look like this:
<html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function () { var counter = 2; $("#addButton").click(function () { if (counter > 10) { alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'); newTextBoxDiv.appendTo("#TextBoxesGroup");

counter++; }); $("#removeButton").click(function () { if (counter == 1) { alert("No more textbox to remove"); return false; } counter--;

25

$("#TextBoxDiv" + counter).remove(); }); $("#getButtonValue").click(function () { var msg = ''; for (i = 1; i < counter; i++) { msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); } alert(msg); }); }); </script> </head><body> <div id='TextBoxesGroup'> <div id="TextBoxDiv1"> <label>Textbox #1 : </label><input type='textbox' id='textbox1' > </div> </div> <input type='button' value='Add Button' id='addButton'> <input type='button' value='Remove Button' id='removeButton'> <input type='button' value='Get TextBox Value' id='getButtonValue'> </body> </html>

4.4

WEB UI CONTROLS DEVELOPMENT TOOLS

To make development much simpler and easier to work with, web UI controls developers also make available easy to work with development tools for the libraries. Below is a list of development tools for the quick and easy development of web applications with the libraries. 4.4.1 LOGGER This easy to use tool developed for the YUI library provides a quick and easy way to write log messages to an on-screen console, the Firebug extension for Mozilla Firefox, or the Safari JavaScript console.

26

4.4.2 PROFILER AND PROFILERVIEWER A cross-browser, non-visual code profiling tool for JavaScript is used to provide rich visualizations of your profiling data both graphically (using the Charts Control) and in tabular format (using DataTable). 4.4.3 YUI TEST YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions. While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit. 4.4.4 ECLIPSE Eclipse is a multi-language software development environment comprising an integrated development environment (IDE) and an extensible plug-in system. It is written mostly in Java and can be used to develop applications in Java and, by means of various plug-ins, other programming languages including Ada, C, C++, COBOL, Perl, PHP, Python, R, Ruby (including Ruby on Rails framework), Scala, Clojure, Groovy and Scheme. It can also be used to develop packages for the software Mathematica. Development environments include the Eclipse JDT (Java Development Toolkit) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others. Its also a power tool for developing applications using the GWT from Google.

27

4.4.5 CYPAL STUDIO Cypal Studio for GWT is a set of Eclipse plugins for making GWT development easier. It helps in creating modules, creating remote services, maintaining async file, runing applications in hosted mode, compiling app to JavaScript, as well as deploying to an external server. Cypal studio is one of google default tool for developing with the GWT 4.4.6 GWT4NB The GWT4NB project aims to enable developers to take advantage of both: the superior support for creating Web Applications built into the NetBeans IDE and the power of GWT (Google Web Toolkit). 4.4.7 MICROSOFT VISUAL STUDIO This powerful, user friendly tool allows developers to evaluate the web development and editing capabilities of the other Visual Studio 2005/2008/2010 editions at no charge. Its main function is to create ASP.NET websites. It has a WYSIWYG interface, drag-and-drop user interface designer, enhanced HTML and code editors, a (limited) database explorer, support for other web technologies (e.g., CSS, JavaScript, XML), and integrated, design-time validation for standards including XHTML 1.0/1.1 and CSS 2.1. Visual studio makes development with web UI controls like the above mention telerik for ASP.Net easy, since its an environment for ASP.Net.

28

4.4.8 WIREFRAMESKETCHER WireframeSketcher is a tool that helps to quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a standalone version and as a plug-in for Eclipse IDEs. It has some distinctive features like storyboards, components, linking and vector PDF export. Among supported IDEs are are Aptana, Flash Builder, Zend Studio and Rational Application Developer.

29

CHAPTER FIVE
5.1 SUMMARY

In summary, web UI controls also call web UI framework or libraries is a collection of packages or modules which allow developers to write Web applications or services without having to handle such low-level details as protocols, sockets or process/thread management. The majority of Web frameworks are exclusively server-side technology, although, with the increased prevalence of AJAX, some Web frameworks are beginning to include AJAX code that helps developers with the particularly tricky task of programming (clientside) the user's browser. At the extreme end of the client-side Web Frameworks is technology that can use the web browser as a full-blown application execution environment. As a developer using a framework, you typically write code which conforms to some kind of conventions that lets you "plug in" to the framework, delegating responsibility for the communications, infrastructure and low-level stuff to the framework while concentrating on the logic of the application in your own code.

5.2

CONCLUSION

Web UI libraries or framework is one that has come to stay. However, it wont replace the native HTML elements because they still rely on the native HTML element for existence. Web UI controls plays a vital role when there is need for complex UI design. Its more mature than the native HTML elements and still

30

includes features that are both available and not available to native HTML elements. 5.3 RECOMMENDATION

This research has looked at the evolution, practical implementation as well as the underlying technology of web UI controls as a cost-effective, time saving solution for building modern web based applications, the benefits as well as the challenges. Further research can be carried out to cover other areas on this subject.

31

REFERENCES
contracts.coffee (2011) Google (2011) Google (2011) Google Web Toolkit (2011) JS11 Language (2011) Move (2011) Stackoverflow (2011) http://disnetdev.com/contracts.coffee/ http://code.google.com/webtoolkit/overview.html. http://code.google.com/p/zedscript/ http://code.google.com/webtoolkit/overview.html http://js11.org/ http://movelang.org/ http://stackoverflow.com/questions/720191/webui-prototyping-tools WebFrameworks (2011) Wikipedia (2011) Wikipedia (2011) http://wiki.python.org/moin/WebFrameworks http://en.wikipedia.org/wiki/Google_Web_Toolkit http://en.wikipedia.org/wiki/Objective-J

32