A few days ago, Oliver Steele contributed a roundrect class to OpenLaszlo. Until then, without a designer and art assets, we had to prototype with plain old rectangular views. The roundrect class inspired a button based on it, roundrectbutton, which I’ve just checked in to the dev branch, in the incubator. I was trying to make it a well-behavd basecomponent subclass, so I made it handle _applyStyle, so now it’s tintable. This makes me happy in a silly sunday morning wannabe designer kind of way.
In the example below, the roundrect buttons are mine; the other widgets are built-in OpenLaszlo components.
[EDIT: Sorry, this post was not valid XHTML. Now it is, thanks to
chrispederick’s webdeveloper firefox extension
Due to a limitation in the Flash player, device text can only be visible or invisible; any non-zero opacity values for text will be drawn as opacity=1. “Device text” means text drawn by the Flash player using the client operating system’s underlying font technology. Device text is inexpensive both in runtime cost and download cost; it uses the font already present on the client machine, so no font description needs to be downloaded. However, device fonts are handled slightly differently on different operating systems; the font dimensions may not be the same across runtimes, and some OS’s may not even have fonts you expect. (Notably, most linux machines lack Verdana.)
Embedded fonts are more flexible, but they cost more, in runtime and download size. The OpenLaszlo platform ships with several TrueType fonts, which can be found in lps/fonts. Specify a font for embedding by using the font tag: <font name="timmons" src="timmonstb.ttf" /> This includes the timmons TrueType font in the swf built from your lzx code. If you’re counting bytes (and you should be) just that one font adds 58624 of ‘em to your download. Ouch. If you’re design-focused, embedded fonts are worth it for two reasons: one, you can be sure they will look the same on every flash runtime, and two, they can be rendered semi-opaque.
There are two workarounds, both of which increase the download size:
Turn the text into an image; render it as an image with dynamic opacity. This is a huge pain to maintain.
Use embedded fonts.
The difference between embedded and device fonts has been bothering me for a while, so I put together a little example. It constrains the opacity of various text objects to the value of a slider.
<canvas width="600" >
<font name="Arioso" src="ariosor.ttf">
</font>
<font name="timmons" src="timmonsb.ttf"/>
<view name="inset" x="20" y="20">
<simplelayout axis="y" spacing="10" />
<view name="controls" layout="axis:y; spacing:30" width="100%" height="140" >
<text multiline="true" x="10" width="${parent.width-20}" >
This slider controls the opacity of each of the text objects below, as
well as the right half of the rectangle at the bottom of the canvas.
Opacity varies from 0 (slider=0) to 1 (slider=100).
The text using embedded fonts (timmons and arioso) can have fractional
opacity; the text using device fonts can only be visible or invisible.
</text>
<slider id="gSlider" minvalue="0" maxvalue="100" value="50" x="10" width="${parent.width-20}" />
</view>
<view height="130">
<simplelayout axis="y" spacing="10" />
<text id="gText" height="24" font="timmons" fontsize="18" opacity="${gSlider.value/100}">
some text in timmons (an embedded font)
</text>
<text height="24" font="Arioso" fontsize="18" opacity="${gSlider.value/100}">
some text in arioso (an embedded font)
</text>
<text height="24" font="Verdana" fontsize="18" opacity="${gSlider.value/100}">
some text in verdana (a device font)
</text>
<text height="24" font="Sans" fontsize="18" opacity="${gSlider.value/100}">
some text in Sans (a device font)
</text>
</view>
<view width="200" height="100" layout="axis:x">
<view bgcolor="black" width="100" height="100" opacity="1" />
<view bgcolor="black" width="100" height="100" opacity="${gSlider.value/100}" />
</view>
</view>
</canvas>
We are pleased to announce that OpenLaszlo 3.1.1 was released today and is available at http://www.openlaszlo.org/download/ . This is a minor point release, but has some notable improvements:
Primarily, the documentation has been significantly improved. Many edits have been added; dead links and broken examples have been repaired; and a new chapter on the rich text component has been added to the Developer’s Guide.
In addition, significant defects were corrected with the following components, which can be found in the incubator: newcombobox, gradientview, and draglib.
A list of the JIRA tasks completed for 3.1.1 can be found at:
http://www.openlaszlo.org/jira/secure/ReleaseNote.jspa?version=10140&styleName=Html&projectId=10020&Create=Create
We also wish to say thank you for your enthusiasm and ongoing involvement in the OpenLaszlo platform. All best wishes for 2006!
Posted on December 20th, 2005 in Development by hminsky
I’m in the process of integrating a set of i18n (internationalization) changes from the super OpenLaszlo hackers in Japan (Togawa-san et al). Here’s what the dev console looks like in Japanese.
With the changes they added, the compiler warnings and console pages can be localized easily by adding a Java properties file on the server.
Roundarch, a user-centric Web design and technology services provider, today announced it has awarded its first annual Interactive Experience Awards to three recipients: David Mendels, senior vice president of the Enterprise and Developer Solutions Business Unit at Adobe; David Temkin, founder of Laszlo Systems; and Coach Wei, founder and CTO of Nexaweb Technologies — for their pioneering efforts in the rich internet application (RIA) space. The Roundarch Interactive Experience Awards are given to companies that best represent the advancement of Web experiences through the integration of user-centric design and advanced technology.
“We singled out these three companies because each is breaking ground in the RIA space,” said Jeff Maling, President and Chief Experience Officer at Roundarch. “These three companies are tackling traditional Web challenges — such as Webmail, on-line commerce and on-line banking — and transforming them into richer, more interactive and ultimately more profitable on-line experiences. They are also defining new uses for the Web by using rich internet technology to increase customer profitability and improve employee productivity.”
Congratulations to David, and to the OpenLaszlo and Laszlo Mail teams!
Posted on December 13th, 2005 in General by hminsky
Since I really want closures to package up some state right where I need it, but the LFC API’s all use LzDelegate, I find myself doing this; making a closure and defining a “method” on it, and pointing the delegate at that.
var myclosure = {addAAText: function () {
pclip[clipid]._accProps = {name: altval}
}
}
var aadel = new LzDelegate(myclosure, ‘addAAText’);
LzIdle.callOnIdle(aadel);
The Music Genome Project, an attempt to define music by it’s traits in a way similar to DNA defines traits in humans has led to the development of Pandora. Pandora uses the song choices you make to see what traits appeal to you and present you with custom radio station. While limiting you to thumbs up or thumbs down, the “gene” heuristics allows for a very quick adaptation to your musical tastes.” Not sure how deep it goes, and I’m not sure I like that it led me from The Who to Styx and Def Leppard. But this is a neat little tool for discovering new music.
Pandora.com is now the top Google hit for “pandora”. Not bad for a company for a web site that’s a few months old, competing with an established Greek mythological character!
