CKEditor is the new version of FCKEditor. Following up on my FCKEditor post, I’ve got CKEditor up and running in both flex and air now.
Download the library + demo’s at http://blog.aboutme.be/wp-content/uploads/ckeditor_flex_air/ckeditor_flex_air.zip
Again, some release notes (same as FCKEditor actually :-)):
When you extract the zip file, you will find an swc file, an assets folder and de demos folder. If you want to use CKEditor in your own Flex or AIR projects, add the swc to your library path, and the assets folder to your src folder (just like the demo projects).
When you use the component in a Flex project, you need to ensure you set the wmode property to ‘opaque’. Also, if you run it on your local filesystem with Internet Explorer, you won’t see the component. It works fine if you run it on a webserver.
One of the most wanted features in Adobe Flex / AIR is a better Rich Text Editor. There are some great ones available for javascript, so why can’t we have an editor with the same featureset? Well, it is actually possible to incorporate existing javascript editors in your Flex / AIR applications.
You can check out a demo at http://labs.aboutme.be/flex_fckeditor/
You can download my library + demo’s at http://blog.aboutme.be/wp-content/uploads/flex_fckeditor/flex_fck_editor_0.1.zip
When you extract the zip file, you will find an swc file, an assets folder and de demos folder. If you want to use FCKEditor in your own Flex or AIR projects, add the swc to your library path, and the assets folder to your src folder (just like the demo projects).
When you use the component in a Flex project, you need to ensure you set the wmode property to ‘opaque’. Also, if you run it on your local filesystem with Internet Explorer, you won’t see the component. It works fine if you run it on a webserver.
Currently it’s possible to get / set the htmlText, and change the toolbar set. I hope you enjoy this component, if you find any bugs or have feature request, feel free to post them in the comments.
I had to create bigger scrollbars, for a flex project which had to run on touchscreens. Their isn’t a real style or property which enables you to do this, but thanks to programmatic skinning, it is quite easy.
First of all, create a class which extends mx.skins.halo.ScrollTrackSkin. In this class, you override the measuredWidth() and updateDisplayList() functions:
override public function get measuredWidth():Number
{
return 50;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(50, h);
}After that, create a class which extends mx.skins.halo.ScrollThumbSkin. In this class, you have to provide the same methods:
override public function get measuredWidth():Number
{
return 50;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(50, h);
}The last class you have to create, is for the scrollbar arrows. This class extends mx.skins.halo.ScrollArrowSkin. Again, you have to override some methods: measuredWidth, measuredHeight and updateDisplayList:
override public function get measuredWidth():Number
{
return 50;
}
override public function get measuredHeight():Number
{
return 50;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(50, 50);
}The final step, is to link these classes in your css file:
ScrollBar
{
trackSkin: ClassReference("com.mydomain.BigScrollTrackSkin");
downArrowDisabledSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
downArrowDownSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
downArrowOverSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
downArrowUpSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
thumbDownSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
thumbOverSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
thumbUpSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
upArrowDisabledSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
upArrowDownSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
upArrowOverSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
upArrowUpSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
}Programmatic skinning allows you to do even more, you can completely control the layout, and drawing of the components through code.
Good luck!
Last saturday I went to the Adobe Usergroup meeting in Gent (Belgium). It featured the Adobe Prerelease tour, Christophe’s presentation about Prana and, last but not least a presentation about lovely charts. Loverly Charts is an application to created flowcharts and diagrams online. This reminded me of a project I’ve been working on now and then the last 3 years. It doesn’t have a title / name yet, but it is a flowcharting application aswell.
You can created flowcharts, which are stored in a database. The flowcharts have metadata, like the perspon who is responsable for that chart, name, description, etc… Each step in a flowchart has metadata aswell. Charts can be linked to eachother, so you can describe a main proces which links to sub-processes aswell.
I’ve put a little demo online at: http://labs.aboutme.be/charts/
Enjoy!
I took the time today to add a simple code generator to the SWX service explorer. Right now, it spits out inline AS2 code for your service methods. I’ll add AS2 class generation and ARP code generation in the near future…
Download the source code
or
Try it online
Enjoy!
Hooray! Popforge, an ActionScript 3 code library by André Michelle and Joe Elbert is nog open source! I was especially interested in the audio classes, that enable you to generate audio at runtime in AS3. You can check out the library at the google code page.
How great is this? I bought a mac a few days ago, and today Adobe releases Flex Builder 2.01, including a Mac version! Downloading it right now… Ted Patrick has posted an overview of the changes in this release…
Recent Comments