Develop Professional-Looking Apps with the New Guarana WRT UI Library

[darroyo]

To help developers focus their efforts on delivering content and implementing use cases, Forum Nokia in cooperation with INDT, recently launched the Guarana Web Runtime UI Library. The Library significantly reduces user-interface design time by providing a UI look-and-feel that is consistent across applications, and that integrates well with devices using both touch and non-touch input methods.

The Library also lets developers use custom colour schemes and branding elements. This gives apps a familiar look-and-feel for users while maintaining consistency and predictability in the way applications are used by mobile devices. Also, the application framework provides developers with ready-made APIs they can use for common application operations, including automatic orientation change, view switching, view stack, and background loading of scripts.

More information on Guarana here.

We can use this thread to handle questions about the library.

Happy Programming!

[pasi.hytonen@starcut.com]

Hi,

how does one build test widget with each GuaranaUI component for S60 FP1 and FP2 devices?

I tried e.g. building like this:

ant -Dplist.component=button -Dresolution=240x320

which produced a widget, but the widget did not work on E71 nor N95?... Test widget builds to N97 so far have worked.

br,
--Pasi

[allanbezerra]

Pasi,

There are jQuery issues on S60 3.1 devices (E71,N95 for example).

Please, check components compatibility matrix on GuaranaUI documentation here.

-- Allan Bezerra

[pablopoo]

The button labels in the lightbox windows are static and cannot be changed at runtime, eg: localization.

[Nypsy]

I have a problem with Guarana.
I can run the examples, but I can't change the position of the elements. If I give the div some kind of positioning it stops working.
I also tried to put element in another divs but if I put there more content it always comes to the right side of the element.

[JasperGoes]

What advantages does guarana offer above using Jquery UI?
For instance, what would convince me to use guarana's new
implementation of tabs over jquery ui's .tabs() method?

At first glance, having to "build" for each <resolution> scares me away.

[woozpt]

I've tried Guarana UI and I see no advantage over jQuery. The issues you have on jQuery still the same on Guarana.
And with jQuery you don't have to build for different resolutions, you have better documentation, inumerous themes and plugins that still can be used on widgets.

[JasperGoes]

@woozpt: I agree.

Having JQuery UI and a single function to set all objects width's in window.onload and window.onresize
results in the same behaviour, without having to load extra javascript upon jquery and having to learn
a new way of implementing objects.

Guarana would become useful at the point it extends jquery like jquery plugins do, and adds some native
way to handle window.innerHeight and window.innerWidth instead of "building" for resolutions.

If hired, I would be willing to change stuff around *grin*

[allanbezerra]

I have a problem with Guarana.
I can run the examples, but I can't change the position of the elements. If I give the div some kind of positioning it stops working.
I also tried to put element in another divs but if I put there more content it always comes to the right side of the element.

Nypsy,

Which elements you are trying to change position?

-- Allan Bezerra

[allanbezerra]

What advantages does guarana offer above using Jquery UI?
For instance, what would convince me to use guarana's new
implementation of tabs over jquery ui's .tabs() method?

At first glance, having to "build" for each <resolution> scares me away.

Jasper,

I agree with you, a more friendly way to make custom versions is needed.

Did you try to use jQuery UI tabs in WRT?

-- Allan Bezerra

[gibbert]

I am trying to build a widget using a combination of a transitionlist and an accordion to show HTML previews of webpages, but I'm a bit stuck with the accordion part. I would like to use predetermined headers for the foldable items (read in from an array) combined with HTML content in the collapsable part based on the header clicked.

Is there any way to dynamically load the content of the collapsable sections?

[JasperGoes]

I am trying to build a widget using a combination of a transitionlist and an accordion to show HTML previews of webpages, but I'm a bit stuck with the accordion part. I would like to use predetermined headers for the foldable items (read in from an array) combined with HTML content in the collapsable part based on the header clicked.

Is there any way to dynamically load the content of the collapsable sections?

I think this is a bit off-topic here, you might want to start your own thread.
Also include with -what- you are trying to do this, to my understanding this -is- possible using either guarana or jquery ui.

Good luck.

[JasperGoes]

Jasper,

I agree with you, a more friendly way to make custom versions is needed.

Did you try to use jQuery UI tabs in WRT?

-- Allan Bezerra

Hi Allan,

Yes indeed I did try, and after some minor tweaking, it worked as one would expect.
Although, after adding increasing amounts of code to my widget, I deceided to drop jQuery totally, and write some stuff of my own to reduce overhead.

jQuery still seems to be the best solution, for widgets that do not need to run most of the time.


Best regards,

Jasper

[nik.rolls]

I agree Jasper,

I started a widget with Guarana, found it wasn't working the way I wanted it, switched to jQuery and jQueryUI and once I had finished found it was way too slow. I ended up rewriting it all in pure javascript and experienced a 300%+ speed increase. While jQuery is fantastic it's not that hard to replicate its methods in pure Javascript and the speed increases are fantastic.

A fair idea for a sticky thread or Wiki page would be a listing of common jQuery methods and how to replicate them in Javascript. I may start working on one.

Nik

[gpalouk]

Hi to all WRT Developers,

I think that Datepicker component has a bug in version 1.1 of Guarana library. When you change the date clicking a day number [dayWrapper] it doesn't fireCallback the 'setDate' event !! Changing date typing in date textfield or calling setDate(date) function, it is fireCallback 'setDate' event correctly.

The bug is in line 236 of datepicker.js :
instance._setDate(date);

must change to:

instance.setDate(date);

this function fireCallback 'setDate' event as it is designed to do.

Am I wrong?

- George Paloukis