Forum Nokia Wiki - Recent changes [en]

How to create a new Component for the Guarana UI Library

2009-11-20T22:07:00Z

moved text related to Guarana UI Path variables

← Older revision		Revision as of 22:07, 20 November 2009
Line 266:		Line 266:
	</code>		</code>

-	* Call the '''"Nokia.use" function''' to tell Guarana UI that you need to use the new component. Details about the '''Nokia Loader''' are available here: [[Nokia Loader]].	+	* Call the '''"Nokia.use" function''' to tell Guarana UI that you need to use the new component. Details about the '''Nokia Loader''' are available here: [[Nokia Loader]]. Before calling the Nokia Loader, it is necessary to '''define the 2 Guarana UI PATH variables''', to specify where its folders are located:
	<code javascript>		<code javascript>
	<script>		<script>
Line 277:		Line 277:
	</code>		</code>

-	* When the Component resources will be available, the init() function is called. Within the init() function, it is so possible to '''create an instance of the newly created TestComponent'''~~. Before doing that, it is necessary to '''define the 2 Guarana UI PATH variables''', to specify where its folders are located~~:	+	* When the Component resources will be available, the init() function is called. Within the init() function, it is so possible to '''create an instance of the newly created TestComponent''':
	<code javascript>		<code javascript>
	function init()		function init()

User:Flaviofabricioferreira

2009-11-20T22:05:19Z

← Older revision		Revision as of 22:05, 20 November 2009
Line 12:		Line 12:
	*Submitted an article [[Creating Debian packages for Maemo 4 Qt applications and showing in the application menu]]		*Submitted an article [[Creating Debian packages for Maemo 4 Qt applications and showing in the application menu]]

-	[[File:Postdeb1.png\|350px\|center]]~~{{FeaturedArticle}}~~	+	[[File:Postdeb1.png\|350px\|center]]

	*Submitted an article [[How to show city locations in a map using Qt and Google Maps API for Maemo]], which was selected as the [[Featured Articles\|Featured Article of the Week]] 39 - September 20th 2009.		*Submitted an article [[How to show city locations in a map using Qt and Google Maps API for Maemo]], which was selected as the [[Featured Articles\|Featured Article of the Week]] 39 - September 20th 2009.

Versões dos Firmwares da Nokia

2009-11-20T22:04:26Z

← Older revision		Revision as of 22:04, 20 November 2009
Line 5,837:		Line 5,837:
	\|}		\|}

-	[[Category:Technical_Resources/Services (Português) ]] [[Category:Hardware (Português) ]]	+	[[Category:Technical_Resources/Services (Português) ]] [[Category:Hardware (Português) ]][[Category:Lang-PT]]

Talk:Open browser programmaticaly

2009-11-20T21:27:10Z

← Older revision		Revision as of 21:27, 20 November 2009
Line 7:		Line 7:

	----		----
		+
		+
		+	Only Worked for me the following code:
		+
		+	<code python>
		+	import e32
		+	import sysinfo
		+
		+	def display_in_browser(url):
		+	b = 'BrowserNG.exe'
		+	e32.start_exe(b, ' "4 %s"' %url, 1)
		+
		+	display_in_browser("http://www.forum.nokia.com")
		+	</code>
		+
		+	--[[User:javsmo\|javsmo]] 21:26, 20 November 2009 (UTC)

How to create a new Component for the Guarana UI Library

2009-11-20T17:34:27Z

Changing Guarana PATH Settings

← Older revision		Revision as of 17:34, 20 November 2009
Line 269:		Line 269:
	<code javascript>		<code javascript>
	<script>		<script>
		+	NOKIA_PATH_JAVASCRIPT = 'lib/';
		+
		+	NOKIA_PATH_STYLE_ROOT = 'themes/nokia/base/';
		+
	Nokia.use('testcomponent', init);		Nokia.use('testcomponent', init);
	</script>		</script>
Line 276:		Line 280:
	<code javascript>		<code javascript>
	function init()		function init()
-	{	+	{
-	~~NOKIA_PATH_JAVASCRIPT = 'lib/';~~	+
-		+
-	~~NOKIA_PATH_STYLE_ROOT = 'themes/nokia/base/';~~	+
-		+
-		+
	var testComponent1 = new Nokia.TestComponent({		var testComponent1 = new Nokia.TestComponent({
	element: '#testcomponent01',		element: '#testcomponent01',

How to create a new Component for the Guarana UI Library

2009-11-20T14:49:42Z

List fixed

New page

[[Category:Widget for S60]][[Category:Code Examples]][[Category:Web Runtime (WRT)]][[Category:How To]]

This article shows all the steps involved in '''creating a new Component from scratch for the [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Nokia WRT Guarana UI Library]'''.

[[File:Guarana_ui_new_component.png]]

The Component built is this article is also visible on the [http://www.jappit.com/m/guaranabrowser/#guarana_testcomponent Guarana UI online Components Browser].

==Introduction==
The [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Guarana UI Library] is a '''jQuery-Based UI Library for Nokia WRT''', that provides a [http://wiki.forum.nokia.com/index.php/GuaranaUI-Documentation full set of Components] ready to be used within Web Runtime widgets.

'''Guarana UI''' is structured into Components: '''User Interface elements that fulfill a specific function'''. Some examples include: [[Date]], [[Rating]] and [[Progress Bar]].

The Guarana UI structure allows to create new Components, by extending the [[Widget]] base class. The [[Widget]] base class represents a common base for all Guarana UI Components, providing basic and utility functions that manage event handling, vibration control and loading management of the Components.

===Component files Structure===
A Guarana UI Component is typically composed by:
* '''1 JavaScript file''', placed in the "<GUARANA_BASE_PATH>/src/" folder
* '''1 CSS file''', placed in the "<GUARANA_BASE_PATH>/themes/nokia/base/" folder
* optionally, '''1 or more images''' placed in the "<GUARANA_BASE_PATH>/themes/nokia/base/images/" folder

==The Guarana UI Build processes==
Before starting to create the new Component, it is necessary to '''download and uncompress the Full Guarana UI Package''', available here: [http://www.forum.nokia.com/piazza/wiki/images/f/fa/Guarana_WRT_UI_Library_v1_0.zip Guarana UI Full Package].

The Full Package ships with all the source files of the Guarana UI Library, and includes the '''build files necessary to create custom Library versions'''. To have a detailed overview of the Guarana UI folders and build process, check out the [http://wiki.forum.nokia.com/index.php/GuaranaUI-Overview Guarana UI Overview].

'''Note:''' In this article, <GUARANA_BASE_PATH> refers to the complete path where the Guarana UI Full Package was uncompressed

==Setup the Component source files==
The following sections describe '''how to perform the setup steps for a new Guarana UI Component''', here named TestComponent. The involved steps are:
* '''creating the Component skeleton''' in the Guarana UI Full Package
* '''build and move the lib and themes folder''' to an empty Web Runtime widget

===Create an empty Web Runtime project===
Before starting, '''create an empty Web Runtime project''': it will be used to write and test the actual Component's code. You can do this manually, or by using the available Web Runtime IDE's Plugins.

===Setup the Component skeleton structure===
Now let's start, by creating the '''empty source files for the new TestComponent'''. These will be:
* '''testcomponent.js''': place this empty file in the '''"<GUARANA_BASE_PATH>/src" folder'''
* '''testcomponent.css''': place this empty file in the '''"<GUARANA_BASE_PATH>/themes/nokia/base/" folder'''

Now, it is necessary to '''tell the Guarana UI Library that these files exist'''. To do this, '''open the "<GUARANA_BASE_PATH>/src/defaults.js" file''', and add this JavaScript code, just after all the other Components, as '''properties of the window.NOKIA_DEFAULTS.modules object''':
<code javascript>
/*
* Test Component
*/
'testcomponent': {
getPath: function() { return NOKIA_PATH_JAVASCRIPT + 'testcomponent.js'; },
requires: ['widget', 'testcomponent-css']
},

'testcomponent-css': {
getPath: function() { return NOKIA_PATH_STYLE_ROOT + 'testcomponent.css'; },
type: 'css',
requires: ['base-css']
}
</code>
These 2 properties allow Guarana UI to know that new resources exist, and specify the '''dependencies''' of each of them. Most of the Components usually require only the specified dependencies, but it's possible to change them accordingly to different needs.

Before proceeding, '''perform the same modifications to the "<GUARANA_BASE_PATH>/build/build/js/defaults.js" file'''.

===Build Guarana UI and move resources===
Now that the skeleton files are ready, it is possible to '''build Guarana UI by using the standard build process'''. Just go into the "<GUARANA_BASE_PATH>/build/" folder and, from command-line, call:
<code>
ant
</code>
Once built, '''move the "<GUARANA_BASE_PATH>/build/Guarana/lib/" and "<GUARANA_BASE_PATH>/build/Guarana/themes/" to the empty Web Runtime widget created before'''.

Before proceeding, '''check that the Component empty files were actually built'''. If so, they should be located at these paths:
* "<GUARANA_BASE_PATH>/build/Guarana/lib/testcomponent.js"
* "<GUARANA_BASE_PATH>/build/Guarana/themes/nokia/base/testcomponent.css"

==Writing the Component code==
The following sections show how to write the actual Component's code.

===The Component JavaScript skeleton===
The very-basic Component is composed by just one function, that takes care of '''initializing the Component''' itself:
<code javascript>
(function() {
Nokia.TestComponent = Nokia.Widget.extend({
initialize: function(options) {

// initialize the Component

}
});
})();
</code>

Some other functions and properties are also usually defined, and they are:
* the '''_create() function''', that takes care of creating the '''Component's DOM structure''' and of defining all the '''event handlers'''
* the '''Styles property''', that holds the '''names of CSS classes''' used by the Component

So, a more complete Component will be the following one:
<code javascript>
(function() {
Nokia.TestComponent = Nokia.Widget.extend({
initialize: function(options) {

// initialize the Component

},

_create: function() {

// create the Component DOM structure and define events

},

Styles: {

// define the main CSS styles classes used by the Component

}
});
})();
</code>

===Define the Component DOM structure===
The TestComponent built in this article has to show a message, and so it is possible to use the '''following simple DOM structure''':
<code html4strict>
<div class="test-component">
<p class="test-component-message">
Hello World!
</p>
</div>
</code>

====The Component's CSS classes====

Since the Component uses '''2 CSS classes''', it is possible to use the Component's '''Styles property''' to store their names, as shown below:
<code javascript>
Styles: {
testComponent: 'test-component',
message: 'test-component-message'
}
</code>

Those classes will be defined in the Component's CSS file, '''testcomponent.css'''. Some simple rules are the following:
<code css>
.test-component {
margin: .5em;
padding: .5em;
background: #dddddd;
border: 4px solid #aaaaaa;
}
.test-component-message {
color: #666666;
}
</code>

===Initializing the Component===
The initialization is actually the '''most important part of the Component''', as it has to:

* '''initialize the Component's properties''', by using the '''passed options together with the default ones'''. The following code shows how to define some default options (in this case, a default message), and how to add to these options the ones passed to the Component:
<code javascript>
var defaults = {
message: "Hello World!"
};

instance.options = jQuery.extend(defaults, options);
</code>

* '''get a reference to the Component's placeholder DOM element''':
<code javascript>
instance.element = jQuery( instance.options.element );
</code>

* call the '''Widget super-class initialization function''':
<code javascript>
instance._super.apply(instance, [instance.options]);
</code>

* '''register the component'''. This is done with a call to the "registerData()" function:
<code javascript>
instance.registerData("testcomponent");
</code>

* '''create the DOM structure'''. This is usually done from a separate function (usually the "_create" one), so the initialize() function just calls that:
<code javascript>
instance._create();
</code>

* '''fire the 'create' callback''', to notify the finish of the initialization process:
<code javascript>
instance.fireCallback('create');
</code>

The complete initialize() function is the following one:
<code javascript>
initialize: function(options) {
var instance = this;

var defaults = {
message: "Hello World!"
};

instance.options = jQuery.extend(defaults, options);

instance.element = jQuery( instance.options.element );

instance._super.apply(instance, [instance.options]);

instance.registerData("testcomponent");

instance._create();

instance.fireCallback('create');
}
</code>

===Create the DOM structure===
Let's take back the Component's DOM structure: it is now necessary to create it via JavaScript, defining the necessary event handlers, and using the Styles property to assign the right CSS class to the various elements. The following code shows how this can be performed:
<code>
_create: function() {
var instance = this;
var options = instance.options;
var element = instance.element;
var Styles = instance.Styles;

element.each(function(i, el) {
Nokia.util.addClass(el, Styles.testComponent);
});

instance.hello = Nokia.dom.parseHTML('<p class="' + Styles.message + '">' + this.options.message + '</p>');

element.append(instance.hello);

}
</code>
In the above code, it is possible to see how to use the Component's "options" property to retrieve the message to display.

===Add some interactivity to the Component===
In order to add some interactivity, let's define '''a function that allows to change the displayed message'''. This function is visible below:
<code>
setValue: function(html)
{
var instance = this;

instance.hello.html(html);
}
</code>

==Using the component==
The component is now '''ready for use''', and to actually create a TestComponent within a Web Runtime widget the following steps have to be performed:

* '''Include the Guarana UI CSS dependencies''' (as explained here: [[GuaranaUI-QuickStart]]):
<code html4strict>

<link rel="stylesheet" href="themes/themeroller/default-theme/Themeroller.css" type="text/css" media="screen">

<link rel="stylesheet" href="themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen">
</code>

* Include the '''JavaScript dependencies''':
<code html4strict>

<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>

<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>
</code>

* Define a '''placeholder DOM element''' in the widget's HTML code:
<code html4strict>
<div id="testcomponent01"></div>
</code>

* Call the '''"Nokia.use" function''' to tell Guarana UI that you need to use the new component. Details about the '''Nokia Loader''' are available here: [[Nokia Loader]].
<code javascript>
<script>
Nokia.use('testcomponent', init);
</script>
</code>

* When the Component resources will be available, the init() function is called. Within the init() function, it is so possible to '''create an instance of the newly created TestComponent'''. Before doing that, it is necessary to '''define the 2 Guarana UI PATH variables''', to specify where its folders are located:
<code javascript>
function init()
{
NOKIA_PATH_JAVASCRIPT = 'lib/';

NOKIA_PATH_STYLE_ROOT = 'themes/nokia/base/';

var testComponent1 = new Nokia.TestComponent({
element: '#testcomponent01',
message: "I'm a custom message!",
create: function() {
alert('test component created');
}
});
}
</code>

If all goes well, an alert message with the "test component created" message should be displayed, just after the Component creation.

==Finalize the Component==
Now that the Component is ready, it is possible to '''move its resources back to the Guarana UI Full Package''' folders, overwriting the empty files created at the beginning.

'''Note:''' if the '''Component also uses images''' (e.g.: referenced by the Component's CSS file), it is necessary to move them also to the Guarana UI folders. In case of images, '''the folder to use is the "<GUARANA_BASE_PATH>/themes/nokia/base/images/"'''.

Once the Component's files are copied back to the Guarana UI folders, it is possible to launch a new build process, that will '''optimize and compress the Component's code'''. Done that, everything is ready to use and distribute the new Component.

==Links and Resources==
* [[Guarana UI: a jQuery-Based UI Library for Nokia WRT]]
* [[GuaranaUI-Documentation]]
* [[GuaranaUI-Overview]]
* [http://www.jappit.com/m/guaranabrowser/#guarana_testcomponent Guarana UI online Components Browser]

File:Guarana ui new component.png

2009-11-20T14:41:41Z

uploaded "[[File:Guarana ui new component.png]]" Category:Widget for S60 Category:Web Runtime (WRT)Category:Image How to create a new Component for the Guarana UI Library: Component's screenshot

New page

KIS001490 - HTTP Filter doesn't receive events during a DM session

2009-11-20T13:54:49Z

protected "[[KIS001490 - HTTP Filter doesn't receive events during a DM session]]" [edit=sysop] (indefinite) [move=sysop] (indefinite)

New page

TSS001489 - Send data using RTP/RTCP API

2009-11-20T13:42:36Z

protected "[[TSS001489 - Send data using RTP/RTCP API]]" [edit=sysop] (indefinite) [move=sysop] (indefinite)

New page

File:RTPTest.zip

2009-11-20T13:34:47Z

uploaded "[[File:RTPTest.zip]]"

New page

TSS001489 - Send data using RTP/RTCP API

2009-11-20T13:33:42Z

New page

__NOTOC__
__NOEDITSECTION__
{{KBTS}}
{{KnowledgeBase
|id=TSS001489
|platform= S60 3rd Edition & 5th Edition
|devices= Tested on: Nokia N79, Nokia N97
|category= Symbian C++
|subcategory= Connectivity
|creationdate= November 20, 2009
|keywords=RTCP, RTP, streaming
}}

==Overview==
The RTP/RTCP API available in the SDK API Plug-in pack can be used for delivering different types of data between devices. The Real-time Transport Protocol(RTP) is used to send or receive the data and the RTP Control Protocol(RTCP) provides out-of-band statistics and control information for an RTP flow.

== Description ==
This article demonstrates how to enable RTCP and register an observer for receiving the Receiver report(RR) packet in an RTP session. The receiver report informs the sender about the quality of service. The other RTCP messages that can be exchanged are Sender report(SR), Source description(SDES), End of participation (BYE), and Application-specific message (APP).

Since RTCP streaming is used during an RTP flow, more information on starting a RTP session is given in the following link: http://wiki.forum.nokia.com/index.php/S60_RTP/RTC_API

== Solution ==
'''Header Files:'''
<code>
#include <rtpapi.h>
#include <rtpheader.h>
#include <RtpDef.h>
</code>

'''Link Against:'''
<code>
LIBRARY rtpservice.lib
</code>

'''Enabling RTCP and registering an observer in an RTP session'''
<code>
iRtpId = iRtpSession->CreateSessionL( sessionParam,
localPort,
ETrue, //enable RTCP
NULL ); //Set default RTCP parameters
// Set remote RTCP address
TInt err1 = iRtpSession->SetRemoteRtcpAddress(iRtpId, addr2 );<br>
//Register for RTCP callback
err1 = iRtpSession->RegisterRtcpObserver(iRtpId, *this);
</code>

'''Sending a Receiver Report(RR) to sender:'''
<code>
iRtpSession->SendRtcpRrPacket(aStreamId); //aStreamId is the TRtpId
//of a received RTP packet.
</code>

'''Receiving the RTCP packet:'''
<code>
void CRTPEngine::RrReceived( TRtpId aStreamId, TRtpSSRC aSSRC )
{
//Log the received parameters
}
</code>

'''Unregistering the RTCP callback and closing the session:'''
<code>
iRtpSession->UnregisterRtcpObserver(iRtpId);
iRtpSession->CloseSession(iRtpId);
</code>

== Example Application ==
This application sends data packets using RTP and receives feedback about the sent packets using RTCP.
http://wiki.forum.nokia.com/index.php/File:RTPTest.zip

[[Category:Symbian C++]][[Category:S60 3rd Edition ]][[Category:S60 3rd Edition, Feature Pack 1 ]][[Category:S60 3rd Edition, Feature Pack 2 ]][[Category:S60 5th Edition]][[Category:Connectivity]][[Category:Technical Solution]]

KIS001488 - Feature Discovery returns invalid value for keyboard support on Nokia 5800 XpressMusic

2009-11-20T13:08:35Z

protected "[[KIS001488 - Feature Discovery returns invalid value for keyboard support on Nokia 5800 XpressMusic]]" [edit=sysop] (indefinite) [move=sysop] (indefinite)

New page

KIJ001456 - eSWT browser crashes in Nokia N97

2009-11-20T12:05:33Z

← Older revision		Revision as of 12:05, 20 November 2009
Line 8:		Line 8:
	\|category=Java ME		\|category=Java ME
	\|subcategory=eSWT API		\|subcategory=eSWT API
-	\|creationdate=~~September 7~~, 2009	+	\|creationdate=November 20, 2009
	\|keywords=Browser.setUrl(String url)		\|keywords=Browser.setUrl(String url)
	}}		}}
Line 33:		Line 33:
	== Solution ==		== Solution ==

-	This issue ~~is expected to be~~ fixed in V 20.x.x.	+	This issue has been fixed in the second commercial software release (v 20.0.019).

	[[Category:Java ME]][[Category:eSWT API]][[Category:S60 5th Edition]][[Category:Known Issue]]		[[Category:Java ME]][[Category:eSWT API]][[Category:S60 5th Edition]][[Category:Known Issue]]

KIJ001487 - Scrollbar track tap may crash eSWT MIDlet with ListView

2009-11-20T11:58:18Z

protected "[[KIJ001487 - Scrollbar track tap may crash eSWT MIDlet with ListView]]" [edit=sysop] (indefinite) [move=sysop] (indefinite)

New page

Porting iPhone web app to WRT on Nokia devices

2009-11-20T11:25:44Z

Additional features:

← Older revision		Revision as of 11:25, 20 November 2009
Line 139:		Line 139:

	http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-65AAF569-D347-462B-B59A-9D7CA184AB9C.html		http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-65AAF569-D347-462B-B59A-9D7CA184AB9C.html
		+
		+	[[File:Iphone_white.png]] [[File:Wrt_white2.jpg]]
		+
		+	iPhone doesn’t save any files on the device side. WRT widget uses only the server side PHP code and since other files reside on the device, the application can use the device capabilities.

	*Widget object		*Widget object

File:Horoscope.png

2009-11-20T11:23:27Z

uploaded a new version of "[[File:Horoscope.png]]" Category:Web Runtime (WRT)

New page

File:Iphone white.png

2009-11-20T11:22:52Z

uploaded a new version of "[[File:Iphone white.png]]" Category:Web Runtime (WRT)

New page

File:Wrt white2.jpg

2009-11-20T11:22:14Z

uploaded a new version of "[[File:Wrt white2.jpg]]" Category:Web Runtime (WRT)

New page

How to port Opera Widgets to Nokia WRT

2009-11-20T11:07:19Z

changed "standard Javascript libraries" to "standard Javascript"

← Older revision		Revision as of 11:07, 20 November 2009
Line 24:		Line 24:

	=== Runtime specific Javascript APIs ===		=== Runtime specific Javascript APIs ===
-	If only ~~the~~ standard Javascript ~~library~~ has been used in the widget, then no additional ~~javascript~~ libraries need to be added to the widget.	+	If only standard Javascript has been used in the widget, then no additional Javascript libraries need to be added to the widget.

	However, the Opera Widget environment provides Javascript APIs that allow widgets to access special functionality. Some of that functionality is not available in the Nokia WRT environment. If the built-in Opera Widget APIs have been used, then an additional Javascript library needs to be added to the widget. Step 4 explains how to do this.		However, the Opera Widget environment provides Javascript APIs that allow widgets to access special functionality. Some of that functionality is not available in the Nokia WRT environment. If the built-in Opera Widget APIs have been used, then an additional Javascript library needs to be added to the widget. Step 4 explains how to do this.

KIJ001486 - SortedList with FILTER style not working in eSWT MIDlets

2009-11-20T10:34:17Z

protected "[[KIJ001486 - SortedList with FILTER style not working in eSWT MIDlets]]" [edit=sysop] (indefinite) [move=sysop] (indefinite)

New page

KIJ001485 - MultiPageDialog in eSWT MIDlets causes application exit problems

2009-11-20T10:15:37Z

← Older revision		Revision as of 10:15, 20 November 2009
Line 25:		Line 25:
	This issue will be fixed for the Nokia N97, starting from second commercial software releases (v 20.0.019).		This issue will be fixed for the Nokia N97, starting from second commercial software releases (v 20.0.019).

-	~~[[Category:Review]]~~[[Category:Known Issue]][[Category:Java ME]][[Category:eSWT API]][[Category:S60 5th Edition]][[Category:UI]]	+	[[Category:Known Issue]][[Category:Java ME]][[Category:eSWT API]][[Category:S60 5th Edition]][[Category:UI]]

File:Iphone white.png

2009-11-20T10:15:23Z

uploaded "[[File:Iphone white.png]]" Category:Web Runtime (WRT)

New page

KIJ001485 - MultiPageDialog in eSWT MIDlets causes application exit problems

2009-11-20T10:14:58Z

protected "[[KIJ001485 - MultiPageDialog in eSWT MIDlets causes application exit problems]]" [edit=sysop] (indefinite) [move=sysop] (indefinite)

New page

How to port Opera Widgets to Nokia WRT

2009-11-20T10:09:38Z

updated code font

← Older revision		Revision as of 10:09, 20 November 2009
Line 30:		Line 30:
	Be aware that the library is only partially supported and as such will have reduced functionality. The following is a list of the currently supported and unsupported functionality.		Be aware that the library is only partially supported and as such will have reduced functionality. The following is a list of the currently supported and unsupported functionality.
	==== Supported attributes and methods ====		==== Supported attributes and methods ====
-	*identifier	+	*<tt>identifier</tt>
-	*openURL()	+	*<tt>openURL()</tt>
-	*preferenceForKey()	+	*<tt>preferenceForKey()</tt>
-	*setPreferenceForKey()	+	*<tt>setPreferenceForKey()</tt>
-	*onshow	+	*<tt>onshow</tt>
-	*onhide	+	*<tt>onhide</tt>

	==== Wrapper supported attributes and methods ====		==== Wrapper supported attributes and methods ====
-	*widgetMode	+	*<tt>widgetMode</tt>
-	*showNotification()	+	*<tt>showNotification()</tt>
-	*hide()	+	*<tt>hide()</tt>

	==== Unsupported attributes and methods ====		==== Unsupported attributes and methods ====
-	*originURL	+	*<tt>originURL</tt>
-	*getAttention()	+	*<tt>getAttention()</tt>
-	*show()	+	*<tt>show()</tt>

	== The Method ==		== The Method ==
Line 56:		Line 56:

	#'''Download and unzip this info.plist template file and save it in the widget's root directory.'''		#'''Download and unzip this info.plist template file and save it in the widget's root directory.'''
-	#'''Add the <DisplayName> (mandatory)'''<br />This can be found from the <widgetname> element of the config.xml file.	+	#'''Add the <tt><DisplayName></tt> (mandatory)'''<br />This can be found from the <widgetname> element of the config.xml file.
-	#'''Add the <Identifier> (mandatory)'''<br />An identifier is not explicitly declared in the config.xml. However, Opera widgets have an optional <id> element which contains a child <host> element containing the url of the widget and it's name. These can be formatted into the same form as the conventional WRT Identifier, which is the URL in reverse with the widget name appended to the end.<br /><br />eg. widget.example.com/MyWidget → com.example.widget.MyWidget <br /><br />Otherwise, a 30 digit random integer can be assigned as the identifier, which is what Opera does when it installs a widget.<br /><br />eg. 111222333444555666777888999000	+	#'''Add the <tt><Identifier></tt> (mandatory)'''<br />An identifier is not explicitly declared in the config.xml. However, Opera widgets have an optional <tt><id></tt> element which contains a child <tt><host></tt> element containing the url of the widget and it's name. These can be formatted into the same form as the conventional WRT Identifier, which is the URL in reverse with the widget name appended to the end.<br /><br />eg. <tt>widget.example.com/MyWidget</tt> → <tt>com.example.widget.MyWidget</tt> <br /><br />Otherwise, a 30 digit random integer can be assigned as the identifier, which is what Opera does when it installs a widget.<br /><br />eg. <tt>111222333444555666777888999000</tt>
-	#'''Add the <MainHTML> (mandatory)'''<br />Opera widget config.xml files contain an optional <widgetfile> element that contains the HTML file to be opened by the HTML renderer. If this element exists, it's value should be assigned to the MainHTML key in the info.plist file.<br /><br />If it does not exist, then the default value, index.html should be assigned to the MainHTML key.	+	#'''Add the <tt><MainHTML></tt> (mandatory)'''<br />Opera widget config.xml files contain an optional <tt><widgetfile></tt> element that contains the HTML file to be opened by the HTML renderer. If this element exists, it's value should be assigned to the <tt>MainHTML</tt> key in the info.plist file.<br /><br />If it does not exist, then the default value, <tt>index.html</tt> should be assigned to the <tt>MainHTML</tt> key.
-	#'''5. <AllowNetworkAccess> (optional)'''<br />Nokia's WRT does not allow fine tooth control over network access. Either all network resources are available, or none are.<br /><br />Opera's config.xml contains a <security> element that contains a child <access> element, the presence of which allows the widget access to network resources. If this tag is present, then the <AllowNetworkAccess> should contain a self closing tag <true />. If not, then it should be <false />.	+	#'''5. <tt><AllowNetworkAccess></tt> (optional)'''<br />Nokia's WRT does not allow fine tooth control over network access. Either all network resources are available, or none are.<br /><br />Opera's config.xml contains a <tt><security></tt> element that contains a child <tt><access></tt> element, the presence of which allows the widget access to network resources. If this tag is present, then the <tt><AllowNetworkAccess></tt> should contain a self closing tag <tt><true /></tt>. If not, then it should be <tt><false /></tt>.
-	#'''<Version> (optional)'''<br />This tag facilitates updating of the widget, allowing it to check if there is a newer version available. As there is no direct equivalent property in Opera Widgets, this tag can be left out.	+	#'''<tt><Version></tt> (optional)'''<br />This tag facilitates updating of the widget, allowing it to check if there is a newer version available. As there is no direct equivalent property in Opera Widgets, this tag can be left out.
	#'''Save the file.'''		#'''Save the file.'''

Line 75:		Line 75:
	Opera Widgets provide special functionality via a built-in widget object. Nokia WRT contains a built-in widget object that cannot be extended.		Opera Widgets provide special functionality via a built-in widget object. Nokia WRT contains a built-in widget object that cannot be extended.

-	As such, to use the functionality provided by the Opera Widget wrapper, it needs to be referenced as <tt>operaWidget~~.hide()~~</tt> rather than <tt>widget~~.hide()~~</tt>.	+	As such, to use the functionality provided by the Opera Widget wrapper, it needs to be referenced as <tt>operaWidget</tt> rather than <tt>widget</tt>.

	=== 5. Packaging ===		=== 5. Packaging ===

S60 Platform and device identification codes

2009-11-20T08:50:03Z

Added reference for Nokia 6730 classic alternate Product ID, Added Nokia 6788

← Older revision		Revision as of 08:50, 20 November 2009
Line 458:		Line 458:
	\| Nokia 6730 Classic		\| Nokia 6730 Classic
	\|-		\|-
-	\|	+	\| 0x2001DE97
	\| 0x2001DE97		\| 0x2001DE97
-	\| Nokia 6730 Classic [~~actual value observed on some devices!~~]	+	\| Nokia 6730 Classic [http://wiki.forum.nokia.com/index.php/Incorrect_Machine_UID_documented_for_Nokia_6730]
-	\|-	+
	\|-		\|-
	\| 0x200227E2		\| 0x200227E2
	\| 0x200227E2		\| 0x200227E2
	\| Nokia 6760 slide		\| Nokia 6760 slide
		+	\|-
		+	\| 0x200227E6
		+	\| 0x200227E6
		+	\| Nokia 6788
	\|-		\|-
	\| 0x200227E3		\| 0x200227E3

Nokia Eseries SDK Plug-ins for S60 C++ SDKs

2009-11-20T06:47:00Z

Supported devices:

← Older revision		Revision as of 06:47, 20 November 2009
Line 65:		Line 65:
	List stretching enables double-row-style lists to be shown as single-row-style lists, allowing applications to make better use of wide-screen devices. Note: Although this API is present on all S60 3rd Edition, Feature Pack 1 devices, it has an effect only on the Nokia E90 Communicator. On all other devices, calling the API has no effect.		List stretching enables double-row-style lists to be shown as single-row-style lists, allowing applications to make better use of wide-screen devices. Note: Although this API is present on all S60 3rd Edition, Feature Pack 1 devices, it has an effect only on the Nokia E90 Communicator. On all other devices, calling the API has no effect.

-	=== Supported devices ===	+	[[Category:Symbian C++]]=== Supported devices ===
	The following table shows the skins and features supported by the plug-in for S60 3rd Edition, Feature Pack 1 Eseries devices:		The following table shows the skins and features supported by the plug-in for S60 3rd Edition, Feature Pack 1 Eseries devices:

File:GuaranaUI-Starting-Process.PNG

2009-11-19T20:26:49Z

uploaded a new version of "[[File:GuaranaUI-Starting-Process.PNG]]"

New page

Porting iPhone web app to WRT - a porting example

2009-11-19T20:02:07Z

minor spelling

← Older revision		Revision as of 20:02, 19 November 2009
Line 273:		Line 273:
	==Make the application scalable to different screen sizes==		==Make the application scalable to different screen sizes==

-	iPhone has a specific screen size that is used among all models. This is not the case with the plethora of Nokia devices based on Symbian platform. For Nokia touch devices, the current resolution is 360 x 640 pixels, and it can be either portrait or landscape, depending on which way the user is holding the device (for example, the Nokia N97 and Nokia 5800 XpressMusic devices). The common screen size for ~~nontouch~~ devices is QVGA (240 x 320 pixels) in a variety of physical sizes. Depending on the device, it can be portrait (for example, the Nokia 6730 device), landscape (the Nokia E71 and similar devices), or both (for example, the Nokia N95, Nokia N96, and Nokia 6760 slide devices). Furthermore, there are special cases such as the Nokia E90 Communicator, which has a small cover display of 240 x 320 pixels and a large internal display of 800 x 352 pixels.	+	iPhone has a specific screen size that is used among all models. This is not the case with the plethora of Nokia devices based on Symbian platform. For Nokia touch devices, the current resolution is 360 x 640 pixels, and it can be either portrait or landscape, depending on which way the user is holding the device (for example, the Nokia N97 and Nokia 5800 XpressMusic devices). The common screen size for non-touch devices is QVGA (240 x 320 pixels) in a variety of physical sizes. Depending on the device, it can be portrait (for example, the Nokia 6730 device), landscape (the Nokia E71 and similar devices), or both (for example, the Nokia N95, Nokia N96, and Nokia 6760 slide devices). Furthermore, there are special cases such as the Nokia E90 Communicator, which has a small cover display of 240 x 320 pixels and a large internal display of 800 x 352 pixels.

	The same WRT widget can be installed into all of these devices, so you should make sure that your WRT widget always fits nicely in the user<nowiki>’</nowiki>s screen.		The same WRT widget can be installed into all of these devices, so you should make sure that your WRT widget always fits nicely in the user<nowiki>’</nowiki>s screen.

Porting iPhone web app to WRT on Nokia devices

2009-11-19T19:59:07Z

minor spelling conversion to U.S. spelling

← Older revision		Revision as of 19:59, 19 November 2009
Line 7:		Line 7:
	This article provides information that iPhone web app developers need to know when switching to Web Runtime (WRT) development on Nokia devices based on Symbian platform. In this article, WRT refers to WRT on the following Nokia devices based on Symbian platform: S60 5th Edition devices, S60 3rd Edition, Feature Pack 2 devices, and selected S60 3rd Edition, Feature Pack 1 devices.		This article provides information that iPhone web app developers need to know when switching to Web Runtime (WRT) development on Nokia devices based on Symbian platform. In this article, WRT refers to WRT on the following Nokia devices based on Symbian platform: S60 5th Edition devices, S60 3rd Edition, Feature Pack 2 devices, and selected S60 3rd Edition, Feature Pack 1 devices.

-	Porting to WRT is a great way to add volume to the user base and expand markets, with minimal investment. It is beneficial to target as many vendors as possible, and WRT offers an economical way to do it. Lots of iPhone web apps in the market work on Nokia devices based on Symbian platform, with only minor adjustments and ~~optimisations~~ to the screen (adjustments may need to be made to resources on the UI front end; nothing may need to change on the back end). The simplest and fastest way to make them work is to create a WRT widget that includes a link to the web page and add an icon for the widget to the application shell. This is possible because basic web technologies (HTML; Cascading Style Sheets, or CSS; and JavaScript™) work for both iPhone and Nokia devices based on Symbian platform.	+	Porting to WRT is a great way to add volume to the user base and expand markets, with minimal investment. It is beneficial to target as many vendors as possible, and WRT offers an economical way to do it. Lots of iPhone web apps in the market work on Nokia devices based on Symbian platform, with only minor adjustments and optimizations to the screen (adjustments may need to be made to resources on the UI front end; nothing may need to change on the back end). The simplest and fastest way to make them work is to create a WRT widget that includes a link to the web page and add an icon for the widget to the application shell. This is possible because basic web technologies (HTML; Cascading Style Sheets, or CSS; and JavaScript™) work for both iPhone and Nokia devices based on Symbian platform.

	When starting the porting work, it<nowiki>’</nowiki>s a good idea to consider exploiting all the possibilities WRT offers, such as Platform Services. Access to location, phone book, camera functions, and so on adds a great integration experience. Obviously, a static web page from the server side cannot achieve this. Using Platform Services is optional, of course, but the rewards are substantial.		When starting the porting work, it<nowiki>’</nowiki>s a good idea to consider exploiting all the possibilities WRT offers, such as Platform Services. Access to location, phone book, camera functions, and so on adds a great integration experience. Obviously, a static web page from the server side cannot achieve this. Using Platform Services is optional, of course, but the rewards are substantial.
Line 19:		Line 19:
	The iPhone (and iPod Touch) browser is Mobile Safari, based on the open source WebKit browser. S60 5th Edition devices (such as the Nokia 5800 XpressMusic or Nokia N97 device) use the same base (WebKit) for both the mobile browser and the widget engine (WRT), which provides a similar experience for the part of standard HTML and CSS on both platforms.		The iPhone (and iPod Touch) browser is Mobile Safari, based on the open source WebKit browser. S60 5th Edition devices (such as the Nokia 5800 XpressMusic or Nokia N97 device) use the same base (WebKit) for both the mobile browser and the widget engine (WRT), which provides a similar experience for the part of standard HTML and CSS on both platforms.

-	The iPhone SDK does not provide a comprehensive solution for building stand-alone applications using only HTML/CSS /JavaScript. Small applications such as widgets are usually based on native code. While the iPhone browser allows some interaction with device resources (for example, using HTML ~~offline~~ data functionality), the JavaScript APIs exposed by WRT are in many ways more comprehensive and offer the possibility of developing fully fledged applications with JavaScript. This is perhaps the biggest difference between iPhone and Nokia devices based on S60 5th Edition, where web-based widgets (or WRT) provide extensive JavaScript APIs that allow developers to reach the same powerful functions as with native code.	+	The iPhone SDK does not provide a comprehensive solution for building stand-alone applications using only HTML/CSS /JavaScript. Small applications such as widgets are usually based on native code. While the iPhone browser allows some interaction with device resources (for example, using HTML off-line data functionality), the JavaScript APIs exposed by WRT are in many ways more comprehensive and offer the possibility of developing fully fledged applications with JavaScript. This is perhaps the biggest difference between iPhone and Nokia devices based on S60 5th Edition, where web-based widgets (or WRT) provide extensive JavaScript APIs that allow developers to reach the same powerful functions as with native code.

	WRT is comparable to other widget development environments such as Google Gadgets and desktop Apple Dashboard widgets, with added extras such as device interaction (GPS, Calendar, Contacts, Sensor data, Messaging, etc.) and Flash from Adobe.		WRT is comparable to other widget development environments such as Google Gadgets and desktop Apple Dashboard widgets, with added extras such as device interaction (GPS, Calendar, Contacts, Sensor data, Messaging, etc.) and Flash from Adobe.
Line 25:		Line 25:
	=Compatible technologies=		=Compatible technologies=

-	Both platforms implement various web-~~standardised~~ technologies. Therefore, most of these technologies are compatible with both platforms. Here, globally, is what developers can keep in S60 5th Edition:	+	Both platforms implement various web-standardized technologies. Therefore, most of these technologies are compatible with both platforms. Here, globally, is what developers can keep in S60 5th Edition:

	* HTML 4.01, XHTML 1.0/1.1 and XHTML Mobile Profile (MP)		* HTML 4.01, XHTML 1.0/1.1 and XHTML Mobile Profile (MP)
Line 39:		Line 39:
	=Replacement technologies=		=Replacement technologies=

-	Some iPhone-specific technologies have to be replaced on S60 5th Edition, either because they are Apple specific or because iPhone is sporting a slightly newer version of the WebKit core, with support for, for example, HTML5 ~~offline~~ functionality. Here are the technologies and their replacements on S60 5th Edition.	+	Some iPhone-specific technologies have to be replaced on S60 5th Edition, either because they are Apple specific or because iPhone is sporting a slightly newer version of the WebKit core, with support for, for example, HTML5 off-line functionality. Here are the technologies and their replacements on S60 5th Edition.

	==Client-side storage with HTML 5 features==		==Client-side storage with HTML 5 features==

-	On WRT, it is preferable to use the WRT ~~JavaSript~~ API or cookies to do such a task. See	+	On WRT, it is preferable to use the WRT JavaScript API or cookies to do such a task. See

	http://wiki.forum.nokia.com/index.php/Storing_settings_in_WRT.		http://wiki.forum.nokia.com/index.php/Storing_settings_in_WRT.
Line 61:		Line 61:
	==Icon for home page==		==Icon for home page==

-	The home screen icon for iPhone is a ~~metatag~~ that won<nowiki>’</nowiki>t make any difference in the website or WRT widget. You can leave, or not, the following tag if you are using it in your iPhone application:	+	The home screen icon for iPhone is a meta-tag that won<nowiki>’</nowiki>t make any difference in the website or WRT widget. You can leave, or not, the following tag if you are using it in your iPhone application:

	<pre><nowiki><</nowiki>link rel="apple-touch-icon" href="/path_to_icon.png"/<nowiki>></nowiki></pre>		<pre><nowiki><</nowiki>link rel="apple-touch-icon" href="/path_to_icon.png"/<nowiki>></nowiki></pre>
Line 124:		Line 124:
	* iFrame support		* iFrame support

-	* ~~Localised~~ name and icon for Applications menu	+	* Localized name and icon for Applications menu

-	* UI string ~~localisation~~ support	+	* UI string localization support

	* Navigation features for hiding or showing the cursor, allowing tab navigation, and creating transitions between divs.		* Navigation features for hiding or showing the cursor, allowing tab navigation, and creating transitions between divs.
Line 252:		Line 252:
	<nowiki>}</nowiki> else <nowiki>{</nowiki>		<nowiki>}</nowiki> else <nowiki>{</nowiki>

-	// ~~Initialisation~~ for the first time	+	// Initialization for the first time

	friends = <nowiki>[</nowiki>		friends = <nowiki>[</nowiki>
Line 276:		Line 276:
	If you created your iPhone web app using Aptana and the iPhone plug-in, it will be very easy to port it as a WRT widget using the Aptana plug-in for WRT, available at http://aptana.com/nokia. The Aptana IDE is actually the best IDE to use for such porting tasks since it supports both platforms.		If you created your iPhone web app using Aptana and the iPhone plug-in, it will be very easy to port it as a WRT widget using the Aptana plug-in for WRT, available at http://aptana.com/nokia. The Aptana IDE is actually the best IDE to use for such porting tasks since it supports both platforms.

-	If you created your iPhone web app using Dashcode for Mac, you can easily import the project in Aptana. Dashcode uses its own JavaScript component library ~~optimised~~ for the iPhone browser.	+	If you created your iPhone web app using Dashcode for Mac, you can easily import the project in Aptana. Dashcode uses its own JavaScript component library optimized for the iPhone browser.

	=Web browsing on Nokia devices based on Symbian Platform=		=Web browsing on Nokia devices based on Symbian Platform=


-	In addition to offering WRT widgets, Nokia devices based on Symbian platform provide a rich mobile web browsing experience through a WebKit-based browser. ~~Optimising~~ an iPhone-specific web page to S60 5th Edition, for example, is straightforward because both platforms support standard web technologies such as HTML, CSS, and JavaScript.	+	In addition to offering WRT widgets, Nokia devices based on Symbian platform provide a rich mobile web browsing experience through a WebKit-based browser. Optimizing an iPhone-specific web page to S60 5th Edition, for example, is straightforward because both platforms support standard web technologies such as HTML, CSS, and JavaScript.

-	However, there are some differences between devices, so when designing web pages, the supported browser and device features should be taken into account and serve the ~~optimised~~ content to target devices. This can be done easily by checking the UAProfile or user-agent header information that is unique to each device model. When the functionality is built in the server side, all that is needed is to ~~optimise~~ the web page to be target platform/device specific, by changing the supported resolution and UI elements. To make mobile website or application customisation faster and easier, Forum Nokia offers [http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Browsing/Web_Templates/ Nokia Mobile Web Templates], a series of custom, tested mobile web styles and components targeted at mobile web developers and designers.	+	However, there are some differences between devices, so when designing web pages, the supported browser and device features should be taken into account and serve the optimized content to target devices. This can be done easily by checking the UAProfile or user-agent header information that is unique to each device model. When the functionality is built in the server side, all that is needed is to optimize the web page to be target platform/device specific, by changing the supported resolution and UI elements. To make mobile website or application customisation faster and easier, Forum Nokia offers [http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Browsing/Web_Templates/ Nokia Mobile Web Templates], a series of custom, tested mobile web styles and components targeted at mobile web developers and designers.

	----		----

File:GuaranaUI-Starting-Process.PNG

2009-11-19T19:56:17Z

uploaded "[[File:GuaranaUI-Starting-Process.PNG]]"

New page

File:GuaranaUI-Starting-Process.PNG

2009-11-19T19:54:44Z

deleted "[[File:GuaranaUI-Starting-Process.PNG]]" Deleted old revision 20091119195340!GuaranaUI-Starting-Process.PNG

New page

File:GuaranaUI-Starting-Process.PNG

2009-11-19T19:50:24Z

uploaded "[[File:GuaranaUI-Starting-Process.PNG]]"

New page

GuaranaUI-QuickStart

2009-11-19T18:41:51Z

← Older revision		Revision as of 18:41, 19 November 2009
Line 10:		Line 10:
	<h3>0. Build and Copy Guarana Files to your Widget</h3>		<h3>0. Build and Copy Guarana Files to your Widget</h3>

-	The first thing to use the WRT Framework in your Widget is to build. Please, take a look in the [[~~Framework~~-Overview \|~~Framework~~ Overview]] Section for more information about the Framework Structure and Build System. After it, '''copy the necessary files to your widget''':	+	The first thing to use the WRT Framework in your Widget is to build. Please, take a look in the [[GuaranaUI-Overview \|GuaranaUI Overview]] Section for more information about the Framework Structure and Build System. An option it get the Builded Version. After it, '''copy the necessary files to your widget''':

	* lib folder: jQuery Library and Guarana javascript files		* lib folder: jQuery Library and Guarana javascript files
Line 42:		Line 42:
	</code>		</code>

-	You can also visit the [[~~Framework~~-Overview \|~~Framework~~ Overview]] Section in order to check the Javascript Architecture.	+	You can also visit the [[GuaranaUI-Overview \|GuaranaUI Overview]] Section in order to check the Javascript Architecture.

	<h3>3. Include the Component minimal HTML</h3>		<h3>3. Include the Component minimal HTML</h3>

Rating

2009-11-19T17:56:33Z

4.3 - Methods:

← Older revision		Revision as of 17:56, 19 November 2009
Line 69:		Line 69:
	**Returns the component value.		**Returns the component value.
	**return [int]		**return [int]
-	*~~setValeu~~: function(value)	+	*setValue: function(value)
	**Sets the component value.		**Sets the component value.
-	**return [void]	+	**return [void]
-		+
	==4.4 - Default options==		==4.4 - Default options==