case
1Feb/105

Create Flex/AS3 applications for Mobile Devices

elips studio 3 box 150x150 Create Flex/AS3 applications for Mobile DevicesYup! Flex Apps on your mobile. And I'm not talking about Flash Lite and you won't need CS5 either.
ELIPS Studio converts the Flex code in native code for Windows Mobile, Symbian, Android, iPhone and mass-market mobiles. It's still beta and you have to register for a beta account to get it but I think will do wonders for the mobile dev. world.

And in their words:

"ELIPS Studio 3 is a plug-in for Adobe Flex Builder, a widely used IDE for internet & desktop application. Our plug-in allows Flex to go mobile!

The product offers a mobile-optimized Flex Framework, plus numerous Flex extensions, including mobile UI components & access to mobile device features (voice call, SMS, access to calendar and contacts, to the camera, etc.)

The product includes a form-factor device simulator allowing you to see your application behavior on different devices. It also includes a network simulator allowing to generate calls, SMS, etc."

So..get it while it's hot icon smile Create Flex/AS3 applications for Mobile Devices

25Jan/100

Static files locked by Jetty in Eclipse

jetty logo2 Static files locked by Jetty in Eclipse If you use Jetty you might notice that once it's running you can't edit any static files because it says they are already in use and locked.
Why ? Because Jetty buffers static content for webapps such as html files, css files, images etc and uses memory mapped files to do this if the NIO connectors are being used. The problem is that on Windows, memory mapping a file causes the file to be locked, so that the file cannot be updated or replaced. This means that effectively you have to stop Jetty in order to update a file.

In case this happens follow these steps:

1. Extract the runjettyrun_1.0.1.jar in the eclipse plugin directory
2. Extract the jetty-6.1.6.jar in the lib directory of the previous jar.
3. Edit the file org\mortbay\jetty\webapp\webdefault.xml and change the "useFileMappedBuffer" to false. It should look like the following:

1
2
3
4
<init -param>
      <param -name>useFileMappedBuffer</param>
      <param -value>false</param>
</init>

4. Pack everything back up and overwrite the runjettyrun jar in the plugin directory.
5. If you still get the error after step 4 start eclipse.exe with -clean and then recreate the Jetty configuration. (It just need to replace whatever jar's it copies in your workspace .plugins dir)

15Jan/100

Adding ellipsis points in a TextArea component in Flex

The goal here is to use a TextArea component to display some text that doesn't quite fit in the specified region and ellipsis points (...) should be showed to let user know the text is trimmed. Standard stuff right ? But Flex doesn't do it by itself and I thought someone might look for this.

My problem was with a Flex app that uses i18n and in some languages the text didn't fit the box, the scroll bar policy was off and user had no idea there was more text in there and didn't had the possibility to scroll further. Anyway, here it is :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
	<mx :Script>
		< ![CDATA[
 
			[Bindable]
			private var text : String = 'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ' +
						    'The quick brown fox jumped over the lazy dog. ';
 
			private function trim(text : String) : String
			{
				box.text = text;
				box.validateNow();
				if(box.maxVerticalScrollPosition > 0) {
					text = text.replace("...", "");
					text = text.substr(0, text.length - 1) + "...";
				} else {
					return text
				}
				return trim(text);
			}
 
		]]>
	</mx>
 
	<mx :TextArea id="box"
		verticalScrollPolicy="off"
		width="250"
		height="50"
		wordWrap="true"
		text="{trim(this.text)}"
		paddingBottom="0"
		editable="false" />

 Adding ellipsis points in a TextArea component in Flex

12Nov/090

ExtendedImage Component

I just finished writing a Flex3 library that will allow you to read a great number of image formats using flex and actionscript 3. The component uses a codec like rendering system, so each time you provide it with a source, the codecs attempt one by one to read the file signature and decide which one is fit to decode the image.
So doing this, it won't matter the file extension or the way you provide the image asset (archived, link, base64 encoded, plain text, byteArray or embedded at compile time)

It's a work in progress but curently I've made codecs for the following formats:

  • PointLineCAD 3D objects (*.p3d)
  • Photoshop images (*.psd, *.pdd)
  • ZSoft images (*.pcx)
  • Truevision TGA (*.tga, *. icb, *.vda, *.vst, *.win)
  • Windows icon files (*.ico)
  • GIF images (*.gif – static and animated gifs)
  • JPEG images (*.jpg. *.jpeg, *.gfif)
  • PNG (Portable network graphic) images (*.png)
  • Windows Bitmap images ( *.bmp, *.rle, *.dib)
  • Adobe Shockwave Flash (*.swf)

As I said before, the way you provide the source doesn't really matter. You can zip up all your images in an archive and as source you can just point to the file inside the zip.

1
<adm :ExtendedImage id="img" source="archive.zip://image.png" />

This way, you greatly reduce the number of requests to the server. But this is not all. Source can be also provided as a base64 encoded string, or as plain text (only p3d can take advantage of this since the p3d file is plain text as well).

For a bit more details, a demo and API description, visit this page

7Oct/092

Use any Font with Cufon

Typography is one area of web development that has seen painfully little advancement when compared with other areas of the industry. Web developers have been forced to rely on a small set of ‘web safe’ fonts that are likely to be installed on the majority of their visitor’s computers. Image and flash-based solutions have arisen, both of which have downsides to using.

Cufon offers developers a robust and fast solution, which can be displayed in the browser without requiring third-party plugins using features built in to browsers. Cufon fonts can be used as VML for native IE implementation, or the

Usage

This library differs from the others in that a little bit of preparation is required before use; a new font file needs to be generated which can be done easily using the cufon website. The will generate an SVG font and save it in a JS file. This file needs to then be linked to any other <script> resource after the cufon core file:

1
2
<script src="cufon.js" type="text/javascript"></script>
<script src="Breip_500.font.js" type="text/javascript"></script>

Then it’s just a case of telling Cufon which elements to replace:

1
2
3
<script type="text/javascript">
Cufon.replace('h1.replacedFont');
</script>

The API offers other solutions for using multiple fonts on the same page and for improving performance in IE. Although I’ve called this section, "Using any Font"… you should remember that only fonts that are licensed to be embedded should be used. The following screenshot shows a replaced heading:

cufon Use any Font with Cufon

[Download] [Demo]