Web Applications

Posts tagged with "javascript"

Opera Widgets SDK Beta launched!

By Hans S. Tømmerholt. Thursday, 22. May 2008, 12:34:26

documentation, javascript, sdk, Widgets ...

With the release of the beta version of the Opera Widgets SDK, developers can get started on making widgets for mobile. So far UIQ 3.3 supports widgets, and support on more platforms are on the way. The SDK contains among other things:

Documentation: We added 10 more articles and documentation about widgets, especially focusing on mobile and cross device development. See the SDK overview page for more information.
Tools: The new Widget emulator will emulate how your widget will work on different devices. And it's implemented as a widget! You can also use Opera Dragonfly to debug your widget, even when they are running in the emulator.
Libraries: You'll find several libraries on the Libraries section on dev.opera.com which helps speed up development. This list will expand as we go forward.

And it's all on the web! Each article and tool is available from Opera's developer website dev.opera.com.

Widget emulator and Dragonfly

The Widget emulator is a tool for seeing how your widgets will look like and behave on different devices. It emulates screen size, media query behavior, the docked widget mode as well as aspects such as network speed and the size of the preference store.

Development for mobile is made quicker and easier by not having to transfer the widget to test on the actual device. Instead, you can just reload your widget in the emulator and test on the phone when you're happy with the resuts.

By using Opera Dragonfly, you can also debug your widgets. They show up as runtimes just like the webpages in your tabs.

Widgets on mobile and cross device development

Opera Mobile 9.5 is on it's way, and with it, developers will be able to make widgets on mobile phones. Mobile widgets offer interesting possibilities for people on the move, as well as challenges when it comes to usability and performance.

For now, we've put up an overview of the characteristics of widgets on mobile phones and some advice for doing cross device development. There's also some advice for a mobile development process. With these, and the emulator, you can get a head start in developing for mobile.

What the future holds

We have more in the works for extending the SDK with more useful tools and documentation. Some examples:

More libraries: More libraries are in the works. For example, we have a library for internationalization and localization coming up and there is also a framework for more easily making resizable and flexible widget in the works.
More functionality in the emulator: We're working on simpler ways of loading your widget into the emulator, as well as emulating more of the functionality of widgets.
More widget examples: We're going to give you a few more widgets to play with, in addition to those you can already find on widgets.opera.com.
More documentation and articles: We'll improve on the current documents, as well as adding more articles. Examples include converting widgets from other runtimes to Opera widgets, more guidelines for mobiles, using Dragonfly with widgets and more.

We also want to hear what you have to say, so do visit the Opera Widgets forums and tells us what you need!

No comments

Web Chat: Talk to the French Guy

By Thomas Ford. Thursday, 9. November 2006, 14:04:33

web chat, javascript, the french guy

Mathieu "P01" Henri will be online today to answer your most obscure and difficult questions about JavaScript and widget development. This is another one of our Web Apps beasts. His homepage has some cool demos from his past, such as his DHTML contests. 256b?!? Check it out. And don't forget to join us today at 5:00 PM CET over on #webapps.

1 comment

Web Chat Transcript: JavaScript with Christian Krebs (Aleto)

By Thomas Ford. Monday, 16. October 2006, 00:17:21

web chat, aleto, javascript

We had a good technical discussion going last week. Thanks again to all of you who submitted great questions - Christian enjoyed it tremendously. Perhaps we will have him back some time in the future.

Keep following the blog to see what we have lined up this week.

-------------------------------

OperaWebApps: Hi Everyone. We go live with Aleto in two minutes. If you would like to post questions now, we'll start answering at 5:00.

Question from dante_: Same question as last time: how about them libraries? Can you give us quick hints, ETAs, maybe save a little wheel invention?

Aleto: Libraries are still in the works, of course. I wrote the animation library, and I'm working on some more. But right now, my focus is on a couple of other important projects.

Question from GreyWyvern: Is there (or will there be) an easy way to disable input methods for widgets and then whitelist the ones we want to allow (perhaps in config.xml)? The huge number of keyboard shorcuts in Opera are a pain to disable for instance.

Aleto: Could you clarify what you mean by input methods? Do you mean strictly keyboard shortcuts?

Question from GreyWyvern: Mostly keyboard shortcuts, but also other things, like if the user has voice enabled and tells the widget to "speak"

Aleto: With JavaScript you cannot override keyboard shortcuts in Opera. I don't know of any plans to change that.

Aleto: Jsaucepn - Hi
Aleto: I'm impressed with your widgets!

Aleto: We have no technical questions today?

Question from FataL: Question: Whwn creating widgets what is the best way(s) to grab data from the remote site if its source code has ID that points to the part that I need?

Example: I already have full source of desired page that has ID "data1" in variable named FullSource. Unfortunately I can't just do FullSource.getElementById("data1").

Gautam: The ways I know are:
1. put FullSource content in some hidden (display:none) DIV element. Than do document.getElementById("data1")
2. use XPath...

Aleto: Another way is to create a new document with document.implementation.createHTMLDocument("") and parse the source into that document.

Aleto: Then the method getElementById is then available in that document.

Question by dante_: (addon to the previous question) 3. DOM3 Load/Save (versus the AJAX implied above)

Aleto: DOM Load and Save is, in my view, dying. The way to go is XMLHttpRequest.

Question by dante_: Any tips on having pre-cached (online) data bundled with the widget?
1. XML (then new XSLTProcessor().transformToFragment)
2. data as source code (JS arrays/JSON)
3. use another way

More so, how to be less memory- or processor-intensive with the 'Switch to language' feature (i.e. keep lots of strings and change all widget texts on user's choice) ?

Aleto: Personally, it depends a little bit. If possible I would keep as much data as possible on the server side. If pre-caching is needed, I would put that as object or arrays in a .js file.

Aleto: If it's really memory consuming, then I would keep that information or data on the server and load it in the .js file when needed. This is in my experience very quick.

Question from jsaucepn: What do you think of the object-oriented features of Javascript? What method do you use for inheritance, or do you avoid it?

Aleto: There is no proper way for object-oriented programming in JavaScript.

Aleto: The problem with the "clean way" of using inheritance in JavaScript is that it is not possible to use private methods or properties in classes.

Aleto: It depends a lot on how many instantiations from an object are really needed to decide which programming techniques are appropriate.

Aleto: But the normal way for inheritance looks in general like Subclass.prototype=new BaseClass(), in short.

Question from shadow: Could you explain the ow_timer object? why are you using it? what is the basic idea behind it?

Aleto: The basic idea behind that is to single-thread all animations.
Aleto: This helps the animations work on a single timeframe.
Aleto: Back to the oop question, in ECMAScript 4, we will have real classes and inheritances, as I have seen in the drafts.

Question from shadow: And when will ECMAScript4 be released and supported?

Aleto: I have no clue, but I hope very soon. As far as I know, Flash 10 already uses some features from ECMAScript 4.

Aleto: The standardization process always takes longer than we wish it would take.

Question from dante_: would you consider a didactic reviewing of a widget ? strong points, weak, alternate.. pick one from widgets.opera.com and make a tutorial, of to-do's and not to's

Aleto: That is a very interesting suggestion. I have a lot of things on my agenda for now. Do you have a certain widget in mind? We can have a small talk right now.

Question from dante_: the spotlight-ed ones.. i assume the reviewers know the best ones

Question from shadow: Can you tell us anything about the mysterious new js libraries that opera is making?

Aleto: We have already made a lot of libraries, but we still have to clean them up

Aleto: If I had more time, I would experiment with the fact that we can store a large amount of data.

Aleto: That is actually the big difference of a widget from a webpage, where we are bound to use cookies.

Aleto: I would like for example to make a real calendar, where you have all your dates local and you syncronize them with, for example, a JSON library, to a server.

Aleto: So, widgets that use these features which are different from a webpage are the ones that I would like to see.

Question from shadow: What exactly will these js libraries do?Ajax?DOM manipulation ?cookies?

Aleto: I know a lot of libraries which do wrap the xmlHttpRequest object, but myself I dont really see the need for that.

Aleto: The libraries will try to make it easier to handle general tasks

Aleto: I have tested myself, upto 1 megabyte is possible. but I dont know where the limit is.

Aleto: What do you feel are the limitations in widgets, in a general way?

Question from shadow: if i can store upto 1mb in the widget prefs...could i then let's say.....store all my js code in the widget prefs?and maybe all the images too?(using the data:uri version of them)

Aleto: Yes, that should be theoretically possible. Just try it out!

Question from shadow: Limitations?Lack of access to the hdd and lack of access to the system stats

Aleto: Yea, system stats would be nice!

Question from dante_: update system

Aleto: dante_ what do you mean by update system?

Aleto: Oh sorry, I misunderstood. I thought that was a question.

Question from dante_: maybe better interaction: sounds when not focused, alerts...

Question from shadow: ohh and maybe the fact that i can't start opera in hidden mode(ctrl+h) when i start my pc

Question from dante_: i would like to see opera manage the updating of new versions of widgets

Aleto: dante_: Yea, that is something I would like to see as well!

Question from dante_: i remember i needed a hashing library: md5, maybe crc32.. would you be so kind to add to the list ?

Aleto: Yea yea, we will consider that.

Aleto: Any questions left? I have to go back to my work

Question from grafio: It's very easy to "hack" JavaScript. Is it possible to secure a widget from hacking? In a game widget for example? Any tips?

Aleto: In general, I dont think there are ways to obscure javascript. (look for example Google Maps)

Aleto: It's not really obscure, you can still reengineer it - but its very hard.

Question from dante_: it's all in connection with 'logging in to sites' and other sensitive operations.. since there is no https support in XMLhttpreq. do you have any technical recommandation for now ?

Aleto: xmlHttpRequest has to work with https. If you have any test case, please file a bug report

Aleto: Outside of https there is no secure way of communicating

Question from shoust: Are you planning any login libraries so it could be possible to have like a full del.ico.us service in a widget for example?

Aleto: I think you should be able to login with xmlHttpRequest

Aleto: Guys, I have to go back to work. Thank you very much for the nice chat, I will take with me some of the things we have discussed here.

Aleto: And I hope to see you again.

4 comments

Animation in JavaScript: Q&A Transcript

By Thomas Ford. Monday, 25. September 2006, 16:38:44

libraries, javascript, Widgets, animation ...

We had a great chat last Thursday. Thanks to everyone who joined us. Here is the transcript. Don't forget to join us again this Thursday when we talk about the Widget World Cup and promoting your widget.

OperaWebApps: Hi everyone. Welcome to today's Web chat. Feel free to start posting questions to /msg pony !ask and your question.

Question from shadow: Can I use opera animation library in my website?
OperaWebApps: You are free to use the animation libraries on your own site, however be advised that the JavaScript may not work in IE as our libraries are built to adhere with the standards. The specific problem is that you cannot extend the HTMLElement.prototype in IE.

Question from grafio: I'm not familiar with IRC, does it work?
OperaWebApps: Yes it's working. We're just taking time to answer the questions thoroughly.

Question from shadow: Does the license allow me to include the animation library in anyother free library or let's say even my own library?
OperaWebApps: You are free to use the library for any commercial or personal purpose. It's currently licensed under the BSD license. All you need to do is keep Opera's copyright in the file and note that you cannot use Opera's name as endorsement for your product or service.

Question from grafio: what's in the extension library? It's not documented (or am I wrong?)
OperaWebApps: The extension library is a collection of shorthand methods for often-used functionality or effects. In the current download of the library, there should be JSDoc documentation.

p01_chat: Hello everyone. For your pleasure, the demos of the animation library are now available on: http://my.opera.com/community/dev/widgets/animation/demos/

Question from shadow: Question about the T-shirts, if i edit and upload one of my widgets due i still get a t-shirt?or does it have to be a totally new widget?
OperaWebApps: As long as your widget conforms to the style guide, we will give you a t-shirt. That's for this week. We're going to have another competition next week for the best use of the animation library.

OperaWebApps: Remember to post questions to our moderator using /msg pony !ask (your question)

OperaWebApps: Also, we'll answer any questions you might have about animation in JavaScript generally. We won't limit you to discussing the libraries we've posted.

Question from grafio: How about questions about other libraries? Can you reveal a (tiny) bit of the secret what's coming next?
OperaWebApps: We're working on some very nifty libraries - this is the tip of the iceberg. We have more than 10 more coming up.

Question from shadow: Is there one which will enable automatic widget updates?
OperaWebApps: We cannot comment on the exact contents of all the libraries, but we do take this feedback seriously. We're developers too, of course, and recognize the value of that feature.

Question from wrtlprnft: I have a question about how to use this library (and the ones to come up): Can I use them on web pages, or do I have to limit my use of it to widgets?
OperaWebApps: We cannot comment on the specific license for all the libraries, but some of them will be available under the same terms as the animation library. As we noted to Shadow, the animation library can be used for commercial and personal use both on Web sites and in widgets.

OperaWebApps: Here are two widgets that showcase some of the possibilities of the animation libraries: http://widgets.opera.com/author/gautam_chandna/

Question from shadow: Is there any chance the widgettab will return?in let's say opera 9.5?
OperaWebApps: Sorry, we cannot comment on future functionality in the browser. While many users liked the separate tab, there are certain accessibility and usability issues that need to be overcome.

OperaWebApps: One of our graphics guys just popped into our office to ask about the skill level needed to use these animation libraries. It's important to know that the tutorial is for developers with some previous JavaScript experience, but they don't have to be experts.

Question from grafio: Yeah why it's so slow?
p01_chat: The library is pretty fast, you must be talking about the chat session

OperaWebApps: Also good to note - the library is made to work on mobile devices too.
OperaWebApps: And grafio, we're just waiting on questions.

Question from STROBr: Are you planning more advanced animation - what aobut 3D?
OperaWebApps: If there is a huge demand for such libraries, we will definitely consider them. For now, we can tease you with Opera's 3D canvas functionality: http://my.opera.com/WebApplications/blog/show.dml/261474

p01_chat: The demos of the animation library are now available on: http://my.opera.com/community/dev/widgets/animation/demos/

OperaWebApps: If there are no additional questions, we will cut this chat short. The transcript will be available online at the Web Applications blog.

Question from grafio: How about a GUI library? Did you ever consider it or maybe it doesn't make sense in your opinion
OperaWebApps: In some of the libraries we are releasing there are elements for creating rich graphics and user interfaces.

Question from grafio: Do you want to release all the libraries together or separately?
OperaWebApps: We have just released the first library and will be rolling the other ones out when they are ready. We want to make sure we have good examples and proper documentation in place before sharing them with the wider world.

OperaWebApps: Alright everyone. Thanks for joining us today. We will post this transcript on the Web Apps team blog. Speak to you all soon.

2 comments

Web Chat: Animation in JavaScript

By Thomas Ford. Tuesday, 19. September 2006, 15:42:18

javascript, animation, Widgets, web chat

We held our first widgets web chat last week and, despite some bumps, had a good time doing it. So lets do it again. This Thursday from 5:00 PM until 6:30 PM CET we will answer questions related to the Opera Animation Library and animation in JavaScript.

We listened to the feedback from the last chat and have made some improvements that will help us get through more questions and make it the session more informative. First, we will chat only on one channel: #webapps. Second, questions will be moderated using a chatbot before they are posted. Third, you can also ask questions for the chat in the comments section of this post.

Thanks for all the feedback and see you this Thursday.

1 comment

Event Streaming to Web Browsers

By Arve Bersvendsen. Friday, 1. September 2006, 14:28:56

server-sent events, event streaming, javascript, python ...

One cool feature we added to Opera 9 is Server-Sent Events from the WHATWG Web Applications 1.0 specification. Using SSE you can push DOM events continously from your web server to the visitor's browser. This creates a lot of exciting opportunities for web application authors.

Traditionally, when building an Ajax application, the browser continually polls the server, sending requests to the server, asking to get data back, making new HTTP requests for every single poll, putting more strain on the server than needed.

The event streaming approach instead opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling. This method for doing remoting offers a tremendous advantage, since the server no longer has to handle the overhead associated with clients asking for new data. Instead, the server simply sends back data every connected client when appropriate, thus reducing the load on the server, with the added advantage of offering instant feedback to the user.

Opera Web Chat

To provide you with a starting point on how to build your own event streaming application, we have built Opera Web Chat. This is a web based chatroom offering some of the features from the built in to the Opera IRC client. Currently the chat only offers one single chatroom. (A screenshot is available here)

Keep in mind that it is an experimental service, which means it may not always be available for use.

How to use Server-Sent Events

To use Server-Sent Events in a web application, add an <event-source> element to the document, with a src attribute pointing to a event source URL. This URL should provide a persistent HTTP connection that sends a data stream containing the events. The connection must use the content type application/x-dom-event-stream.

It is possible to send events with any name, and specify the properties of the event object. Opera 9.01 only supports the data property of the event, so this is what we are going to use in these examples.

The server side event source writes the events whenever they occur, and sends them over HTTP to the client. This is a basic example of event data. This is more thoroughly explained in the specification.

Event: server-time
data: [time on the server]

Event: the-answer
data: 42

This will send two events to the browser, and it's possible to catch them as DOM events. The following JavaScript example listens for the "server-time" event, and alerts the content.

document.getElementsByTagName("event-source")[0]
        .addEventListener("server-time", eventHandler, false);

function eventHandler(event)
{
    // Alert time sent by the server
    alert(event.data); 
}

This is a very simple Python CGI example which sends a new event every 3 seconds. Every event is named "server-time", and sends an event with the data property set to the current time of the server in seconds.

Keep in mind that when a CGI script outputs data, there is no guarantee that it is sent immediately. There are often caching mechanisms and so on in place. For this reason it may be necessary to explicitly flush the output.

Here is the example code written in python.

#!/usr/bin/python
import sys
import time
print "Content-Type: application/x-dom-event-stream\n\n"

while True:
    print "Event: server-time"
    print "data: %f\n" % (time.time(),)
    sys.stdout.flush()
    time.sleep(3)

The same example written in PHP:

<?php
header("Content-Type: application/x-dom-event-stream");
while(true) {
    echo "Event: server-time\n";
    $time = time();
    echo "data: $time\n";
    echo "\n";
    flush();
    sleep(3);
}
?>

Opportunities

In addition to the chat application we made, there are lots of different applications that can be made with Server-Sent Events. For instance games or instant messaging clients, such as MSN Messenger, Jabber or AIM. You could also build stock and news tickers, status and log file monitors, or anyhing you can come up with.

What will you build?

53 comments

Moving and resizing widgets

By Arve Bersvendsen. Wednesday, 21. June 2006, 14:51:09

Widgets, Programming, opera, javascript ...

One of the last additions we made to widgets in the stages before releasing Opera 9.0 was giving widgets the ability to resize and move themselves.

The main use for resizing behavior is in those cases where you want to emulate UI widgets (yes, that other kind of widget) like maximize, restore, and regular resize and drag handlers.

interface Window {
  void resizeTo( in int w, in int h );
  void resizeBy( in int delta_w, in int delta_h );
  void moveTo( in int x, in int y );
  void moveBy( in int delta_x , in int delta_y );
};

`window.resizeTo()`

The window.resizeTo() method takes two positive integers as arguments: A width w and height h. These sizes are the desired dimensions of the widgets in pixels, and correspond to the width and height elements in a widget's configuration file. The method sets the window.outerWidth and window.outerHeight properties. Example:

// Resize the widget to 400x300 px
window.resizeTo( 400, 300 );

`window.resizeBy()`

The window.resizeBy method takes two integers as arguments: A delta_w that is the desired change in width, measured in pixels, and a delta_h that is the desired change in height, again measured in pixels. The width and height of the widget is then recalculated to be equivalent to the following pseudocode:

window.resizeTo( window.outerWidth + delta_x, window.outerHeight + delta_y );

In all cases of window resizing, the resizing happens from the lower-right corner of the widget window, while the upper-left corner remains static.

// Grow the widget by 100px horizontally
window.resizeBy( 100, 0 );

`window.moveTo()`

The window.moveTo method takes two integers as arguments: An x that is the desired x coordinate for the upper-left corner of the widget, and an y that is the desired y coordinate for the upper-left corner of the widget, with both values mentioned in pixels.

// Move the widget to the upper-left corner of the screen
window.moveTo( 0, 0 )

`window.moveBy()`

The window.resizeBy method takes two integers as arguments: A delta_x that is the desired change in x position, measured in pixels, and a delta_y that is the desired change in y position, again measured in pixels. Both values can be negative. Example:

// Move the 50px left and 50px down
window.moveBy( -50, 50 )

Closing note

If you change these settings for a widget, the settings are volatile, and the change will be lost if the widget is closed and then reopened. This means that if your widget relies on being a certain size, which may be different from the install-time default, you should make sure that you store the widget size in the persistent storage. The widget storage interface is compatible with Apple's interface, using the methods preferenceForKey and setPreferenceForKey.

Web Applications Blog