03.30.07

How we deal with browser quirks, with a compendium of IE 7 issues

Posted on March 30th, 2007 in Documentation, Development by Max

Anyone who has done serious DHTML development work knows there are many issues and quirks with the browsers out there. Of course, we had to come up with a way to deal with these cleanly for OL 4. First, I’ll talk about how we deal with browser quirks. Next, I’ll list the IE 7-specific issues we ran across during development of the OL4 DHTML runtime.

Capabilities-based browser quirks

1. We keep an object that lists each quirk by name, with a boolean value for whether it’s active in the current browser or not. Here’s a list of all the current quirks, with default values:

LzSprite.prototype.quirks = {
    fix_clickable: true
    ,fix_ie_background_height: false
    ,fix_ie_clickable: false
    ,ie_alpha_image_loader: false
    ,ie_leak_prevention: false
    ,invisible_parent_image_sizing_fix: false
    ,emulate_flash_font_metrics: true
    ,inner_html_strips_newlines: true
    ,inner_html_no_entity_apos: false
    ,css_hide_canvas_during_init: true
    ,firefox_autocomplete_bug: false
    ,hand_pointer_for_clickable: true
    ,alt_key_sends_control: false
    ,safari_textarea_subtract_scrollbar_height: false
    ,safari_avoid_clip_position_input_text: false
    ,reverse_mouse_wheel: false
    ,no_cursor_colresize: false
    ,safari_visibility_instead_of_display: false
    ,preload_images_only_once: false
    ,absolute_position_accounts_for_offset: false
}

2. Next, we use some browser detection code to turn specific quirks on or off depending on the browser we’re running in:

    ...
    if (Lz.__BrowserDetect.browser == 'Opera') {
        // Fix bug in Opera where if any parent of an image is hidden the size is 0
        LzSprite.prototype.quirks['invisible_parent_image_sizing_fix'] = true;
    }
    ...

3. Finally, the sprite checks these quirks at runtime, like so: 

LzSprite.prototype.__imgonload = function(i) {
    ...
    if (LzSprite.prototype.quirks.invisible_parent_image_sizing_fix) {
        Fix...
    }
...
}

This has a several benefits:
+ By conditionalizing on capabilities (instead of browser-specific version information) we can turn the quirks on or off once up front when we do the browser test.
+ It runs faster - it’s quicker to test for a boolean value than test for a browser ID/version each time a given chunk of code runs.
+ We can easily and safely turn behavior on or off without touching the rest of the code.
+ Quirks can be cleanly reused when the same issue is discovered across multiple browsers. For example, when I discovered Opera had the same issue as Webkit (images with any parent div whose style.display is set to ‘none’ don’t get valid height and width properties), all I had to do was set the ‘invisible_parent_image_sizing_fix’ quirk to ‘true’ for Opera in the browser detection phase. When this issue is fixed in future browser versions, I can easly turn the quirk back off.
+ The rest of the code is much cleaner because the quirks are ’self-documenting’. Compare these two for legibility/maintainability:

    if (this.quirks.invisible_parent_image_sizing_fix) {
        ....
    }

vs. 

    if (browser.name == 'Opera' || (browser.name == 'Safari' && browser.version < 1.5)) {
        ....
    }

I encourage everyone to steal this idiom and apply it to their code! It’ll make the DHTML world a better place. If only we didn’t have to worry about these issues…

Then again, if you use OL 4, we’ll worry about them for you! We’re fond of saying ‘we work hard so you don’t have to.’ :)

IE 7-specific quirks

Okay, on to the second part of the article: IE 7-specific quirks. The IE team is currently in the process of locking down features for the next version of IE. This provides an excellent opportunity for us to list the IE-specific bugs and quirks we ran across during the development of the DHTML runtime for OL 4.

I’m not trying to single out IE here - I intend to talk about quirks in other browsers (there are plenty) in the future. I just learned the IE team is soliciting feedback, and I wanted to provide some in a timely fashion! So, I’ll list only issues that affect IE 7 for now:

+ Can’t set opacity on any div that contains <input type=”text”/> or <textarea/> without getting nasty visual artifacts in the text field.

+ Must use the AlphaImageLoader if we want opacity to apply to a div and all its children.

+ AlphaimageLoader must have its src property set to the URL of an image to prevent a red x/missing image icon from appearing

+ AlphaimageLoader does not send onload/error events - instead we have to use the img tag mentioned above

+ IE 7 still has memory leaks for apps loaded in iframes

+ Empty divs with style.backgroundColor set appear ~10px tall unless they contain an img (for less than 2px tall) or have style.fontSize = ‘0px’ applied.

+ IE does not support &apos; when setting a div’s innerHTML property

+ IE does not send onclick/onmouse* events for divs without a blank image attached

Thanks for all the hard work on IE 7 - it’s miles ahead of IE 6 in almost every way. And we all love the IE developer toolbar! Of course, let me know if you need more specifics about any of these.

Best of luck, and I hope some or all of these issues can be addressed in an upcoming release!

03.23.07

Introducing the new, improved flash-javascript bridge!

Posted on March 23rd, 2007 in Announcements, Development by Max

It’s been a while. We got such great response from the post about our new <html/>, I thought it was time to do it again. In 4.0, the Flash embedding and Flash/browser communications subsystem has been rewritten from the ground up. What does this mean for you? You can now reliably communicate across the Flash/browser javascript boundary, sending as much data in either direction as you need. You can use DHTML to deliver your UI, and use Flash for things it’s great for, like playing audio and video. Your applications can degrade gracefully for users that don’t have the Flash player installed. More importantly, Flash apps can be more tightly integrated with the HTML pages they live in than ever before. I predict a new wave of innovative mashups that take advantage of the strengths of HTML and Flash, without relying entirely on either one.

Before I say more, please take a look at this example. Go ahead and click the ‘Load’ button, and you should hear some audio playing. What’s the big deal? All the UI elements you’re interacting with are DHTML, which is communicating with a tiny laszlo SWF audio player embedded on the same page. As the audio plays in the Flash app, it sends events to update the position of the play head in the DHTML app. Clicking buttons in the DHTML app sends events to the Flash application, affecting audio playback. It’s a small example, but it shows off the feature pretty well.

One thing this example doesn’t show is how much data you can pass across the boundary. I just ran a test, and on my machine I was able to pass 700K into Flash in 72 ms, and get 700k of data out of Flash in 50ms. Pretty snappy, huh?

All of this works across Firefox Safari and IE, for flash 7 and up.

And, you can take advantage of the improved history feature to make your applications interact with the browser forward and back buttons - with bookmarking and deep linking to boot!

Many thanks to our friends at Dojo foundation for their stellar contributions to the community, in particular Brad Neuberg, author of the awesome dojo.flash module which is the basis of the new feature.

03.20.07

OpenLaszlo 4.0 Announced!

Posted on March 20th, 2007 in General, Announcements, Releases by jgrandy

We are extremely pleased and proud to announce that OpenLaszlo 4.0 is now available. This is the first official release of the new multi-runtime edition of OpenLaszlo, complete with a native browser DHTML (”ajax”) runtime, a heavily revamped Flash (7, 8, 9) runtime, and much more. With OpenLaszlo 4.0, you can compile source LZX applications for any supported target with a single mouse click.

OpenLaszlo 4.0 is available from http://www.openlaszlo.org/download
This release of OpenLaszlo is built on a new kernel architecture that abstracts away platform differences. Also, with OL4, we have switched to an inheritance-based class system that tracks the emerging ECMAScript 4 standard. These new language features have been implemented in the LFC core to support (and extend) JavaScript 2 `class` declarations portably. This means that the OpenLaszlo platform is well engineered to keep up with emerging JavaScript standards and to support new target runtimes.

In addition to literally hundreds of improvements to all aspects of the platform software and documentation, we have added new features, such as support for streaming media. The documentation tools have been re-implemented in order to to make them easier to maintain and also to give us more possibilities for arranging and accessing the data in the Reference Manual. Eventually, this will allow us to provide better cross-referencing, better indexing, more user control over presentation of information, and more options for printing and displaying the documentation.

We have put a lot of effort into improving our open source processes. The tools we use to build, test, and analyze OpenLaszlo have matured significantly with OL4. We have changed to using Subversion, for source control, in order to enable a more open development process. The build is now based on ant 1.6.5, rather than ant 1.5. We have created a new testing tool, lztest, for automated testing, to complement lzunit, our tool for application- and component-level testing. We have created a suite of benchmarks and benchmark analysis tools.

By any criterion, this is the most ambitious and significant release in the history of OpenLaszlo.

The OpenLaszlo project aspires to be truly open and inclusive. Raju Bitter, our OpenLaszlo community manager, is on board to answer questions, streamline processes, and generally make it easier for you to play a vital part in this platform’s success.

Post questions and comments to laszlo-user@openlaszlo.org or to the OpenLaszlo Forum. Please report bugs, especially regressions from OpenLaszlo 3.x, to our bug database.

OpenLaszlo 4.0 is the culmination of a project that began more than a year ago, and it embodies the contributions of dozens of community members from around the world. Thank you, and congratulations to all!

03.09.07

Monster.com starts public beta for OpenLaszlo based Monster JobSearch application

Posted on March 9th, 2007 in General, Sightings, Community by Raju Bitter

Monster.com, the biggest and most comprehensive internet job search engine on the web started a public beta for the new OpenLaszlo based job search application. The development team announced the the public beta in the OpenLaszlo forums.

Monster.com launches OpenLaszlo based job search application

It’s exciting to see another adoption of OpenLaszlo technology by a market leader in the internet industry. At startup, the application shows a random live feed of jobs as they are coming into the system. The rich filtering options will make it a lot easier for anyone to filter out the jobs you don’t want, saving you a lot of time in the process.

I remember that I was playing around with the German version of Monster.com about two years ago. I thought to myself: “With OpenLaszlo the searchs’ functionality would be a lot better.” Well, here we go! Congratulations to the development team at Monster for taking the application to a public beta. We can’t wait to see the application step out of the beta phase. Great job!

03.08.07

오픈라즐로 코리안 커뮤니티 - Korean OpenLaszlo Community

Posted on March 8th, 2007 in General, Community by Raju Bitter

OpenLaszlo community in South Korea: 오픈라즐로 한국에 도착하다! 아직은 한국에 오픈라즐로 아는 분들이 많이 없겠지만 이제 한국 오픈라즐로 커뮤니티를 위한 다음 카페가 (Daum Cafe) 생겼다. 오픈라즐로 카페에서 만나는 라즐로팬들이 빨리 많아지기를 기대해 본다. 일본에서도 중국에서도 오픈라즐로 쓰는 사람의 숫자는 벌써 많다! 북경 오픈라즐로 클럽에 참석하는 사람들은 50명입니다. Let’s make OpenLaszlo a success in Korea, too!

For everyone who doesn’t know Korean. There’s a new website for the Korean OpenLaszlo community. Visit the Daum Café for the Korean OpenLaszlo Community (sorry, everything in Korean). Daum is one of the major internet companies in Korea.

Thanks to Hayoung for setting up the Café. Let’s see if OpenLaszlo will be as successful in Korea as it already is in Japan and China.

P.S. If you know Korean and want to register from outside Korea for the Daum Café, that’s possible. Just register with Daum and enter your international phone number. The Daum server will call you and pass a secret code in Korean to you. Enter that code into the registration form on their website and you can join the Café.

Two OpenLaszlo applications of note

Posted on March 8th, 2007 in General, Sightings by jgrandy

Lately, we’ve been finding out about new OpenLaszlo applications by a somewhat unexpected route. There’s a lot of interest within Laszlo Systems in web-based interaction design, and so frequently folks send around links to new sites with particularly noteworthy design. Someone will always right-click on the site, and sometimes (more and more these days) we’ll see that tell-tale “About OpenLaszlo…” line at the top of the contextual menu. What a thrill!

There were two such sightings yesterday, from folks who have built amazing applications without (as far as I know) any formal or informal contact with Laszlo Systems or the OpenLaszlo community. Without further ado:

Bret Victor’s website

An Ajax front-end to Cafe Press

For those of us who live in the OpenLaszlo bug database, it is really gratifying to see that folks are building real applications in OpenLaszlo on their own. Thank you for the inspiration!

Get ready for OL4

Posted on March 8th, 2007 in General, Development by jgrandy

We reached a milestone in the OpenLaszlo 4.0 project cycle yesterday: we created a release branch (?) preparatory to producing a Release Candidate next week and (with luck) releasing an official 4.0.0 build the following week.

The release branch sources are available in Subversion at

http://svn.openlaszlo.org/openlaszlo/branches/4.0

We are updating the nightly build machines to produce distributions of the release branch, and will be deploying these builds later today.

I guess now would be as good a time as any to let everyone know that there will not be an OpenLaszlo 4.0 Beta 2…

Thanks everyone for your help and support during this amazing project!

03.03.07

OpenLaszlo community members around the world - Hungary

Posted on March 3rd, 2007 in Community by Raju Bitter

As I announced in my previous blog posts we plan to feature community members from around the world using OpenLaszlo technology. The name Laszlo is of Hungarian origin. Peter Andrea, a graphic designer who was a co-founder of Laszlo Systems, had a cat named Laszlo, in honor of the Hungarian artist and Bauhaus professor László Moholy-Nagy. Given the fact that Laszlo Systems carries a Hungarian name it’s only appropriate to start with a community member from Hungary. Well, his name is not László, let him introduce himself:

Marcell Kiss-Toth, Hungarian OpenLaszlo addict
Marcell Kiss-Toth, Hungarian OpenLaszlo addictI’m 18 years old and I live in Tiszaújváros, Hungary. I started my career in the field of information technology in 2000 when I was in the junior classes of primary school. In august I had a chance to meet a really innovate company and their great leaders - the SandMark Solutions. Their main tool in developing Web 2.0 applications is the open-source OpenLaszlo. I was amazed at its flexibility and powerfulness. Currently I’m the community manager of SandMark Solutions. You’ll find more info about me on my website www.kiss-toth.hu.

How did you get in contact with OpenLaszlo technology?
I was working with Adobe Flex when people from SandMark Solutions brought OpenLaszlo to my attention.

What was your first impression when you saw OpenLaszlo and OpenLaszlo applications?
I believed those were the next generation of web applications. They give you an unforgettable breakthrough user experience.

OpenLaszlo applications are programmed in the LZX language, a mixture of JavaScript, XML and xPath. What are the advantages of using LZX and tags compared to directly scripting in JavaScript?
Generally tags are used to create JavaScript objects, while directly scripting is used to manipulate objects created by tags. Theoretically anything that can be done with a tag can be done by directly scripting too, and vice versa. Usually you use tags to make the layout and JavaScript to do the programming.

Do you have a favourite OpenLaszlo application which shows bests the features of the technology?
My favourite one is the LaszloMail. It’s fascinating to see that it gives you all the same features as a desktop mail client. It’s fun and easy to use. ?

Did you build and any applications which are online right now? Or maybe applications running on intranets, which are not accessible to the public?
The only application that is currently available to the public was made for a French competition at school. I had a Sunday afternoon for it, you may check it out on www.mactheguy.com/Les_Clochards. I’m working on a new project now however it’s not public yet.

How does OpenLaszlo compare with other technologies, like Flex or AJAX toolkits?
OpenLaszlo has the advantage that you don’t need anything to run an OpenLaszlo application but a Flash player. Because of this you surely won’t have any platform compatibility problems. It’s hard to compare OpenLaszlo with Flex as OpenLaszlo is not just about compiling LZX code into Flash but it also makes possible to compile your code into DHTML or other runtimes which will be available in the future.

By the end of the Q1/2007 the OpenLaszlo team will release the 4.0 version of OpenLaszlo. With the 4.0 version developers can chose between two different runtimes for OpenLaszlo applications: Flash and DHTML! Have you tried the beta release of 4.0 and what is your experience with the 4.0 version?
Yes, it rocks! It’s so good to see that it’s enough to write your applications using one technology (OpenLaszlo) and then you can choose whether to use this or that runtime according to your needs.

As an open source project we need an active and supportive community. Are you involved in any community efforts around OpenLaszlo or do you plan to start a user group?

2 weeks ago we started an OpenLaszlo User Group (HOPLAA – Hungarian OpenLaszlo Addicts) with the help of SandMark Solutions, one of the leading Hungarian RIA developer companies. We have already had our first community meeting in Budapest. We are planning to organise more and looking forward to having a great community with OpenLaszlo fans. Our website will be online soon.

Where would you personally like to see OpenLaszlo in a year from now? Which parts of the technology should be improved, which runtimes should be added to the platform (Flash Lite, Java Micro Edition, Windows Presentation Foundation)? Do you any suggestions?

For me it’s going to be an interesting time when I could see OpenLaszlo applications running on all the cell phones around me and on the television in the living room. And you could turn your OpenLaszlo application into a Windows Sidebar gadget with the help of Windows Presentation Foundation.

There’s a great team of developers working hard to make the OpenLaszlo platform such a cool technology, answering questions for free in the mailing lists and forums. And there are people working hard every day at Laszlo Systems making money, part of which is invested into the OpenLaszlo technology. Is there anything you would like tell those people here?

I appreciate their work and I would say thank you for their generous help. OpenLaszlo has a fascinating future, keep doing well!

Marcell, thank you for the interview. I wish you good luck in building up an active Hungarian OpenLaszlo community. I’m looking forward ot meeting you at the Hungarian Web Conference 2007 in Budapest on March 31st. And to all you OpenLaszlo developers in Hungary: let’s have an all Hungarian OpenLaszlo user group meeting at the end of March in Budapest. Please contact Marcell for more information. You’ll find his contact information in his weblog.

Making the OpenLaszlo community shine – a new face on the OpenLaszlo team

Posted on March 3rd, 2007 in General, Announcements by Raju Bitter

Raju Bitter, OpenLaszlo Community Manager, Laszlo SystemsIn December 2006 I was approached by the Laszlo folks from San Mateo.They were looking for a community manager for the OpenLaszlo community. David Temkin asked me if I’d be interested in filling that position for Laszlo Systems. Wow, how exciting is that!? I’m a huge fan of the technology since October 2004 when Laszlo turned the Laszlo Presentation Server into the open-source OpenLaszlo project. And I’ve been working with the Laszlo Studios in 2006 on some projects, which was a great experience. But joining the company from out of the community was like a dream coming true for me.

So I went to San Mateo in January, spent an impressive week at the Laszlo Systems office in San Mateo meeting so many people whose names I’ve been seeing in the mailing lists, forums and whose blogs I’ve been reading. Many things around the OpenLaszlo project became much clearer to me when I gained insight into the development process of the OpenLaszlo platform. The development speed shown by the OpenLaszlo team was incredible. Almost the whole development team was gathered in San Mateo at that time. I remember a meeting when we set down to define which features would have to be implemented by the team in January. Jim Grandy and his team came up with an ever growing list of tasks. I thought to myself: How are they going to implement all of that by the end of January? Well, they did.

It’s a good thing to see the performance of the OpenLaszlo team, but there’s a problem connected to that: How can open-source community members be integrated into the development process and turned into committers? Especially the Flash runtime requires deep knowledge of the server internals once you get to the Laszlo Foundation Classes (LFC). With the new DHTML runtime it’s a lot easier to become involved in the server development. The JavaScript knowledge required is much more common among web developers. One of my major goals is to make the process of contribution to the OpenLaszlo server sources easier for outsiders. That process will be started right after the release of OpenLaszlo 4.0.

Does that mean that there are no outside contributors for the OpenLaszlo server? No, we have contributors from around the world. But most of those valuable activities take place in the area of LZX component development. We definitely are looking forward to increasing the number of contributors working on the runtime platform.

I have chosen a slogan for my work as a community manager: “Making the OpenLaszlo community shine!” What do I mean by that? Every community member using the OpenLaszlo technology invests time and energy into learning LZX, helping other community members in getting their problems solved, evangelizing OpenLaszlo and improving the OpenLaszlo server by delivering feedback and contributions. In an open-source community I consider the community members to be the heroes. So my job is to make you shine.

Every single one of you adopting OpenLaszlo is an important member of the community. We have many OpenLaszlo applications out there which we (the community) don’t know about. I want to feature those applications, show what great work you are doing. Single community members will be interviewed about their experiences with OpenLaszlo and the community. The interviews will then be posted in this blog, starting with a young developer from Hungary. We’ll hold global and local community meetings and make the OpenLaszlo experience a more personal one. I wish that many more of you get the chance to meet the awesome team around Jim Grandy and experience the openness around OpenLaszlo.

Making the community shine is nothing I can accomplish on my own. I need your help and support as well. So I’m asking you: Get back to me with positive and negative feedback, with ideas on how to improve our community. I hope that you’ll enjoy the community in the future as much I did in the last 2 1/2 years. OpenLaszlo’s potential is huge: J2ME, mobile AJAX, SVG and Flash Lite, where will the server be heading in the next months and years? You all can play a role in defining the direction into which OpenLaszlo is moving and the success of this open-source project.

Raju Bitter
OpenLaszlo Community Manager