There are many times when you want to listen to link events from TextFields in ActionScript 3. You might want to perform a certain task when the user clicks on a link and if so the new feature in ActionScript 3 that’s called “link events” come in handy.
Monday, June 30, 2008
Flex vs Silverlight (in my eyes)
Posted by Neil
I’ve been spending a bit of time recently taking a look at the RIA market as a whole and the tools that are available within. During this time, I’ve been spending most of that looking at Adobe’s Flex and Microsoft’s Silverlight.
Sunday, June 29, 2008
Backbase in Visual Studio 2008 Express in 1 minute
Today I will reveal little secret on how your Visual Web Developer 2008 Express can be used as IDE for Backbase AJAX Framework.
It passed like a year since I posted anything related to Backbase, it happen that my routine ActionScript 3 and Flex tasks overtook my Backbase Evangelism so I basically had no time to do any AJAX, not only Backbase.
There are many changes happen since I touched Backbase last time, it was Backbase 4.0 EA build that was available for members of Development Committee. Today we have 4.2.1 available and good part about it is that licensing was reviewed in a better way. So even if you had to give up your idea of using Backbase when you experienced first time on builds 3.x and 4, you better reconsider it today.
Still, for those who does non-commercial applications - nothing changed,we cool.
If somehow happen that you still don't know a thing about Backbase, please visit official web site on http://www.backbase.com and you will find plenty of information including pretty good Development Network that you can find on http://bdn.backbase.com.
Now, back to our IDE thing. Many of you probably using already or at least heard that Microsoft have bunch of free tools for software and development. One of them is Visual Web Developer (VWD) that you can download from http://www.microsoft.com/express/vwd/
Could be surprising for some Microsoft haters, but Express editions works same good as their "bigger brothers", that are commercial editions. VWD's JavaScript, HTML, XML and etc fancy stuff support is just outstanding. A lot of nice improvements since VWD 2005...
So, for a start you need two things:
After you downloaded VWD 2008, open it and let's configure it to use Backbase Schemas to be able to use Backbase markup languages:
- Click in menu Tools\Options. It will open "Options" dialog. There make sure you have selected [x] Show all settings.
- In options tree in the left pane select element Text Editor
- Select element XML,
- Inside of it select element Miscellaneous,on right pane you will see additional settings open:
- There is caching section with input box and "Browse..." button, click on it and it will open new dialog:
This dialog shows you location of Schemas folder. This is a magic place you have to know about. If you know how to reach there manually, fine, if not, right-click on it, select properties, and then copy path of the Schemas folder. - Next step is to unpack zip file you downloaded from Backbase, if you still haven't done it.
- Now, in this unpacked content locate this path: \client-edition\tools\schemas\
- Select all files from there except the xhtml11 folder and copy them into Schemas folder that you just discovered in VWD2008.
- When you done, go inside of xhtml11 folder of your Backbase installation, select all files there and copy them into Schemas folder of VWD2008. Don't worry if you might have warning appeared that you overwriting some files. It's safe to overwrite.
- Now restart your VWD2008.
You've got you Backbase Schemas and intelli-sense!
Now when you create some XML file you can use proper Backbase markup in it.
<
b:window xmlns:b="http://www.backbase.com/2006/btl" id="windowRssLink" label="RSS Widget" open="false"></b:window>
Friday, June 27, 2008
Web Domains Could Expand Broadly Under New Plan
NEW YORK (AP) -- The Internet's key oversight agency relaxed rules Thursday to permit the introduction of hundreds, perhaps thousands, of new Internet domain names to join ''.com,'' making the first sweeping changes in the network's 25-year-old address system.
The Internet Corporation for Assigned Names and Numbers unanimously approved the new guidelines as weeklong meetings in Paris concluded. ICANN also voted unanimously to open public comment on a separate proposal to permit addresses entirely in non-English languages for the first time.
New names won't start appearing until at least next year, and ICANN won't be deciding on specific ones quite yet. The organization still must work out many details, including fees for obtaining new names, expected to exceed $100,000 apiece to help ICANN cover up to $20 million in costs.
Domain names help computers find Web sites and route e-mail. Adding new suffixes can make it easier for Web sites to promote easy-to-remember names -- given that many of the best ones have been claimed already under ''.com.''
Thursday, June 26, 2008
Today's Flex 3 SDK build available for download
There is new Flex SDK 3 build (2228) available to download, you can get it from here: flex_sdk_3.0.3.2228.zip
This build also contains fixes for bug related to PlayHead Update when you have slider control "connected" to video player. That was pain the ass for a long time. So today you can have it fixed.
Tuesday, June 24, 2008
Tutorial: Drawing curves with AS3
In this tutorial we will be talking some more about drawing with actionscript 3.0, you might want to check out previous tutorials on the subject here.
Drawing with Flash AS3 (part 1)
Drawing with AS3: draw lines part 2
Now in this tutorial we will try to draw curved lines and try to wrap things up with this basic drawings tutorials.
So first I will try to explain what happens when we will draw curves with ActionScript.
Basically we do the same thing as when we define a simple line, we set two point, the start and ending point of the line, both x and y coordinates. The difference is now we also have to define the curve point telling flash to drag the line from the center and out, as shown in the image below.
The image might explain it better then I do.
Now we will try to make a curved line, and make it look like the one below.
And here is the ActionScript code, just paste it into your flash ActionScript panel.
If you have trouble understanding what happening try to read the description inline with the code.
// First we define a variable of the type shape and name it myLine
var myLine:Shape = new Shape();// Then we add the line to the stage, if we forget this, we will never see anything on the stage.
addChild(myLine);
// Here we tell flash what our shape should do, in our case we want it to do a curve line thats called through the graphics.curveTo property.
// As you can see we set a starting a control point x and y, and the anchor x and y to control the line curve
myLine.graphics.curveTo(50,100,100,0);
// Now we need to set some styles for for our line, such as line color (dart blue is 00099) and the line thickness, which is set to 4.
myLine.graphics.lineStyle(4,00099);
// The last thing we could do is to place this line somewhere on the stage so its not just located at 0,0.
myLine.x = 100;
myLine.y = 100;
You might see this is quite simple, so now we will make it a bit more interesting, se we can add another curve point to the first line, just by adding a new curveTo property like this one.
myLine.graphics.curveTo(150,150,230,0);
Now if you add this line of code after the first curveTo, you will get an output result like this one.
Now you should be ready to draw your own shapes with ActionScript 3.0.
ThinkFree goes mobile
ThinkFree have created an online demo service that will allow you to check your online office documents(such as .doc, .xls, .ppt) on both the iPhone and the iPod Touch.
This demo service was created to allow individuals to test the service on their iPhone and/or iPod Touch to help them gain more detailed information.
More on ThinkFree Web site
Monday, June 23, 2008
RTI ports P2P middleware to .NET
High network latency is fatal to performance-sensitive applications. With that notion in mind, an ISV has devised middleware that uses peer-to-peer communications at the messaging layer to stamp out latency in distributed .NET applications.
RTI announced on June 9 at the SIFMA Technology Management Conference in New York that its Data Distribution Service middleware product would support the .NET Framework 2.0 by September.
The company says that a beta of Data Distribution Service, using standard gigabit Ethernet networks, achieves inter-application messaging latency of less than 100 microseconds for distributed .NET applications.
Furthermore, claims RTI, each application thread can send and receive up to 1 million messages per second. This is accomplished by using a peer-to-peer architecture, with no intermediate message brokers, daemon processes or servers.
More specifically, said to the company, the middleware uses publish-and-subscribe, or pub-sub, an asynchronous messaging paradigm, to send messages directly to subscribing applications without going through a server.
Publish-and-subscribe, said Larry O'Brien, an independent software engineering consultant and SD Times columnist, “is one of the most fundamental patterns in either the design or architecture of software. It crops up everywhere and is used at every level of a decent software program.
“It is especially relevant on the network,” he added, where the distributed application results from “not knowing all of the clients that might be interested in your data in advance. [Pub-sub] fits well with the whole concept of service orientation.”
Presenting Groovy Language
Groovy is an object-oriented programming language for the Java Platform as an alternative to the Java programming language. It can be viewed as a scripting language for the Java Platform, as it has features similar to those of Python, Ruby, Perl, and Smalltalk. In some contexts, the name JSR 241 is used as an alternate identifier for the Groovy language.Groovy uses a Java-like curly bracket syntax which is dynamically compiled to JVM bytecodes and that works seamlessly with other Java code and libraries. The Groovy compiler can be used to generate standard Java bytecode to be used by any Java project. Groovy can also be used dynamically as a scripting language.Groovy is currently undergoing standardization via the Java Community Process under JSR 241. Groovy 1.0 was released on January 2, 2007. After various betas and release candidates numbered 1.1, on December 7, 2007 Groovy 1.1 Final has been released and rebranded as Groovy 1.5 as a reflection of the great improvement made.
Samples
A simple hello world script:
def name='World'; println "Hello $name!"
A more sophisticated version using Object Orientation:
class Greet {
def name
Greet(who) { name = who[0].toUpperCase() +
who[1..-1] }
def salute() { println "Hello $name!" }
}
g = new Greet('world') // create object
g.salute() // Output "Hello World!"
Leveraging existing Java libraries:
import static org.apache.commons.lang.WordUtils.*
class Greeter extends Greet {
Greeter(who) { name = capitalize(who) }
}
new Greeter('world').salute()
On the command line:
groovy -e "println 'Hello ' + args[0]" WorldMore information and Downloads on http://groovy.codehaus.org/
Sunday, June 22, 2008
Facebook Platform To Be Open Sourced
'This is a nearly inevitable response to Open Social, which is backed by Google, MySpace and Yahoo,' noted Michael Arrington today as he predicted that 'Sometime soon, perhaps this week, Facebook will turn the year-old Facebook Platform into an open source project.' Arrington continues: 'Expect to see the four major technical pieces of Facebook Platform - FMBL (markup language), FQL (query language), FJS (Javascript library) and the Facebook API to be open sourced and made available to anyone.'
Kaxml - free tool for Silverlight developers
Kaxaml is a lightweight XAML editor that gives you a "split view" so you can see both your XAML and your rendered content (kind of like XamlPad but without the gigabyte of SDK). Kaxaml is a hobby and was created to be shared, so it's free! Feel free to download and try it out. If you don't like it, it cleans up nicely.
If you're having problems with the installer or if you're just a do-it-yourself kind of individual, you can download the files you need as a zip.
Requirements
Kaxaml is built using WPF. To use it, you need to have the .NET Framework version 3.0 installed on your machine.
CSS Editors Reviewed
from Smashing Magazine by Vitaly Friedman & Sven Lennartz
We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it’s time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding.
Of course, real CSS ninjas accept nothing but a minimalistic Notepad or some sophisticated source code-editor. In fact, CSS-editors are often considered to be unnecessary and superflous — after all, you can do the same in your favourite text editor. And sometimes this is true — while there are some really bad HTML-editors there are also some even worse CSS-editors. Particularly code autocompletion tools are extremely good at bloating the code to extremes, making the resulting stylesheet unnecessary complex and hard to maintain. Why would someone purchase a CSS-editor to raise the maintenance costs afterwards?
Yet CSS-editors can be helpful; furthermore, you can effectively use them in different settings by developers with different skills. Web professionals can use a CSS-editor to improve workflow and get all useful CSS-tools provided by one single application. Newbies can easier learn CSS by analzying stylesheets and using live-editing to understand how the design is built up and what is actually going on behind the scenes. In either case you should make sure you know what you are doing and not end up producing quick’n'dirty stylesheet.
Why the heck do I need a CSS-editor?
Well, actually you don’t need one. But you may want to use one to make your workflow more effective. The main advantage of CSS-editors lies in an integrated development environement they offer to web-developers. The main task of a CSS-editor is to combine the editing features of CSS-stylesheets, HTML-source code and the site layout effectively within a compact interface. However, often CSS-editors go even further.
Apart from coding functionality good CSS-editors offer assisting tools for debugging and testing as well as useful features such as live-editing, preview in different browsers, advanced code browsing, code formatter, beautifier and compressor, validation, built-in CSS-reference and project management tools. Combining these features together you get an arsenal of useful tools all ready to hand in front of you.
Some editors also enable you to organize parts of the code into folders and filter the stylesheet easily which simplifies maintenance and makes the source code easier to scan. Another useful feature is instant style sheet preview with Internet Explorer or FireFox which is hard to find in any “standard HTML-editor. Furthermore, with CSS-editors it’s easy to analyze code problems using a code inspector and decompose a stylesheet using the so-called “X-Ray” function.
To put it short: the main advantage of a CSS-editor is that it offers an integrated, compact environment for CSS-design and enables a quick and effective coding workflow which would require a dozen of external tools otherwise. So which CSS-editors are available?
Xyle
Xyle (Mac)
This advanced editor allows developers to edit web-sites on the fly using the embedded stylesheet. Similary to Web Developer’s Toolbar you can modify the CSS-code and the changes will be displayed immediately in the browser window. Compared to Web Developer’s Toolbar, with Xyle you have further useful features such as selectors tree view, syntax highlighting and advanced file management.
In Browser Mode you can browse the Web using Safari’s rendering engine. In Selection Mode, clicking into any part of the web page displayed will reveal the exact portion of the HTML and CSS sources that are responsible for the contents and formatting of that part.
In Cascade mode, Xylescope displays not only the style rules that apply to the currently selected element, but also all rules applying to ancestors of the selected element. When debugging, with
Xylescope you can simply select a “problematic” element in Cascade Mode to see which rules are actually applied and which ones are overridden, including those that are applied to ancestors of the
given element! Xylescope displays the specificity of selectors to indicate why rules have precedence and dims overridden CSS properties to improve clarity. Xylescope also offers integration with external text editors such as BBEdit.
Price: $19.95. A trial version is available. A nice solution without advanced features such as validation, compressor or beautiful offer to an optimal price.
Some of Xyle’s features
- Automatic formatting
- Selector matching
- filter large CSS files using smart groups
- built-in DTD viewer
Stylizer
Stylizer (Windows)
Two things make Stylizer a slightly different mindset than the others: it uses a grid interface instead of a text editor, and it has Firefox and IE embedded, so when the user changes the CSS, it’s propagated right away to the browser. The grid system makes CSS feel like “CSS on rails”, because it makes it impossible to have any CSS errors. It lets Stylizer do things such as a Firebug-like element inspector that lets the user diagnose and edit in the same place, and an editable, spotlight-style filtering system.
In Stylizer dimensions can be adjusted on the fly. To change a height, a margin, or a background-position, the user can literally click on the value, drag the mouse around, and watch the element be manipulated in real time. Colors are the same. The user can click on them, drag the mouse, and see the color of the text, background, or border change in the browser, in real-time, creating a “Photoshop for the web” type feeling. Stylizer Basic is free. The premium version (Price: $69.95) isn’t that different, however in a free version it’s impossible to filter a style sheet to only show rules with specified content.
Rapid CSS Editor
Rapid CSS Editor (Win)
This editor supports developers with a syntax highlighting, autocompleter and a code inspector which ensures that the produced code is correct. You can use built-in CSS- and HTML-references to quickly look up the syntax and attributes of a given selector or tag. A color tool enables designers to pick the right color without switching to color application and observe the result live using the Style Sheet Preview with Internet Explorer and Firefox. A file manager can also take care of uploading CSS-files via FTP. Furthermore, you can make use of an advanced clipboard to keep multiple code fragments ready to hand. The editor costs $29.85. A trial-version is available.
Some of Rapid CSS’s features
- Syntax Highlighting for CSS and HTML documents
- CSS Checker and Validator
- CSS Code Explorer
- Code Inspector
- Code Auto Complete for CSS and HTML
- Instant Style Sheet Preview with Internet Explorer or FireFox
- X-Ray for HTML preview
- Compliance with CSS standards and various browsers
- Integration with W3C CSS and HTML validators
- Built-in CSS Reference
- CSS Code Formatter and Beautifier
- CSS Code Compressor
- Search and Replace with Regular Expression support
- Search and Replace in files
- Multi Item Clipboard
- Built-in File Explorer
- Save and open files directly from FTP
- Project and site management and FTP publishing
- Fully customizable interface
- Code collapse
TopStyle
TopStyle (Win)
The CSS-HTML-editor TopStyle is available in its Lite-version within the HTML-editor Homesite — however, there is also a sophisticated full version for professional web-developers. With TopStyle developers get a number of features which aren’t available in other editors. For instance, with integrated HTML-tidy you can easily convert depricated HTML-tags in valid XHTML. The integrated Style update replaces deprecated tags such as the <font>-tag with respective valid CSS-rules. The Clip Library contains frequently used code-snippets. A split window enables a direct browser-comparison displays site presentation in Internet Explorer and Mozilla. You can also vary the Doctype-definition to find out how different DTDs influence the layout in different browsers.
Probably the most powerful tool in TopStyle is Style checker. Not only can it validate style sheets and hence ensure the correct layout presentation in different browsers. It can also predict bugs in popular browsers which may appear despite the valid CSS-code. You can also forward CSS-stylesheets to W3C CSS Validation Service to fix the problems which haven’t been found by TopStyle. The full version costs $79.95. Warning: the lite-version can’t be updated. Windows-only.
Some of Top Style’s features
- HTML, xHTML and CSS Editing in a Single Program: HTML attributes are categorized so you can quickly see which are required, and it generates XHTML-compliant markup with a simple toggle.
- Easy Navigation Between Documents: Click an HTML class attribute to navigate to the definition of that class in an external style sheet or click an anchor tag or CSS link to open the linked file for editing. You can even click on an < img > tag to open the image file in your favorite image editor.
- Element and Attribute Validation as You Type: All of the classes are defined in your style blocks and external style sheets, so assigning a class to an HTML tag is a very simple task.
- Style Checker: Validate your style sheets against multiple browsers, flagging any invalid properties or values it finds. You can also pass your style sheets directly to the W3C’s CSS Validation Service, so you can quickly check against the official CSS specifications.
- Style Upgrade: A quick, reliable way to replace all deprecated (outdated) HTML markup - including the long-abused HTML < font > tag - with equivalent CSS.
- HTML Tidy Integration: Make the move to XHTML painless with the built-in Tidy configuration, which converts HTML to XHTML with a single click!
- Site Reports: See at a glance where styles are used in your site. Find out where you’ve applied style classes that aren’t defined in any style sheets, or see what style classes you’ve defined that aren’t being used.
- Full Screen Preview: Split the preview between Internet Explorer and Mozilla for an immediate look at browser differences. You can even change the !DOCTYPE of each preview panel on-the-fly to see how different document type declarations affect your layout.
- Integration with W3C HTML Validation: Results of the validation are displayed within TopStyle, with hyperlinked line numbers that synchronize with TopStyle’s editor.
CSSEdit
MacRabbit CSSEdit (Mac)
Similarly to XyleScope, CSSEdit offers real-time styling of stylesheets. Even when a dynamic web-application is powered by a complex database or makes use of AJAX, you can style and analyze it without the hassle of uploading or refreshing (online and offline — this is not the case in Web Developer’s Toolbar). Selector Builder lets you describe what elements to style in plain English. Intelligent CodeSense analyzes CSS and CSS behavior to offer smart, context-sensitive suggestions.
X-ray Inspector shows you what styles apply to a HTML-document. You can also validate your sheets against W3C standards and use project management tools (Milestones etc.) to improve your workflow. Among other things CSSEdit automatically adds brackets, (semi-)colons and appropriate spacing for you. If you encounter a style sheet from someone who didn’t have that luxury, you can always do a Re-Indent to apply your spacing settings. Besides, it has a live-preview feature and the clipboard library for frequently used code snippets.
There is an EditCSS plugin for Firefox as well as CSSEdit bookmarklets. You can start editing any site’s style sheets with a single click in your browser’s Bookmarks bar, and then use the advanced CSSEdit’s editing. The tool has a beautiful, intuitive interface which is very compact yet very well organized and nice to work with. EditCSS costs 29.95 Euro ($47). There is also a trial-version available for free download.
Some of CSS Edit’s features
- Selector Builder takes the Yuck out of selectors
- Organize in folders and filter easily
- Modify source code with intelligent CodeSense
- X-ray pages
- Live-preview
- Intelligent CodeSense support
- Project management
- Validation tool
- Integration in web-browsers
Style Master
Style Master (Win / Mac)
Since this WYSIWIG-CSS-editor calls itself a master it needs to have some nifty features which let the tools stand out from the crowd. In fact, Style Master enables both newbies and professionals to create valid and semantically correct stylesheets. The selectors can be grouped by alphabet, category or current settings. The editor has an integrated color picker, various templates, wizards and validation tools. Hence, the professional can work easily and effectively while newbies don’t have to figure out their way through CSS-tricks to create flexible CSS-based web-sites.
Quite surprising is the fact that various templates which are by default integrated in the editor are actually useful — that’s not the case in most editing applications. Hence you can simply take over a CSS-skeleton and define the rules — all selectors are already listed. You can also use a W3C-example-stylesheet which defines the style of almost every possible HTML-tag, e.g. the leading of headlines <hx>.
Style Master allows you to use online documents (and those running on local servers) as preview documents. You can then use all the features of the Design Pane, like X-Ray, to design your styles sheets. The editor is simple, intuitive and clean. Price: $59.99. Not cheap, however in the end you get an effective and powerful tool for your daily routine. Style Master is available for both Windows and Mac. There is also a trial-version available for free download.
Some of Stylemaster’s Features
- Browser support help
- Wizards
- Over 40 Templates
- Use X-Ray to instantly see the structure of your layouts
- Code optimization
- Intelligent code completion
- Whitespace formatting tools
Style Studio
Style Studio (Win)
Style Studio offers a powerful "CSS-Checker" which enables both newbies and professional to develop standard-conform CSS-based layouts. Developers can use a number of assisting tools such as “Smart linker” which links multiple CSS documents to many HTML XHTML / XML documents at once and CSS Manager that manages and upgrades to standard compliant code (tidy) and detects CSS-related problems.
The editor has an IntelliSense-like technology (for both style sheets and HTML) with quick lookup-reference for CSS. Property Watch automatically detects CSS property (or HTML tag if you’re editing an HTML document) under caret and lists complete information about it.
Style Studio costs $49.95 and is available only for Windows. The official web-site offers a number of CSS-related articles, layouts and tutorials.
Some of Style Studio’s Features
- Powerful customizable Syntax-Colored Editor with full search/replace/editing capabilities
- CSS Validator: a powerful css checking utility to detect and correct common css errors.
- Powerful CSS Manager to help you manage, upgrade to standard compliant code (tidy) and detect CSS-related problems in your web-site.
- Integration with over 35 HTML editors
- IntelliSense for style sheets and HTML
- CSS Property Watch and Instant help on css keywords under caret
- Multi files Import from HTML/Export in HTML capability
- Customizable CSS Code Indent
- CSS wizards
- Validate XML documents
- Intelligent parser which detect invalid properties as you type.
- Unlimited number of code snippets with custom hotkeys.
- Migration Wizard
- Automatically detect installed browsers/web-authoring tools.
- Formatting ToolBars which simplify the use common properties
- Easily change CSS values using Ctrl+Up/Down hotkeys.
- True multiple CSS charts support (i.e. target IE 4+ AND Netscape 4+)
- Built-in system-wide search and replace.
CoffeeCup
CoffeeCup StyleSheet Maker (Win)
CoffeeCup StyleSheet Maker offers CSS-editing options which offer something between sophisticated editor’s functionalities and basic editing features. It resembles TopStyle yet clearly doesn’t achieve the same level of flexibility.Using TopStyle you’ll also be able to overlap text, create links that aren’t underlined, place image backgrounds in tables, and even create your own tags with the functions you assign them. Price: $34.00. A trial-version is available.
Some of CoffeeCup’s Features
- Includes CoffeeCup Website Color Schemer
- Easy CSS Font Designer, just select from the drop down menus.
- Step by Step Help for making your Style Sheets
- Multiple Browser Testing
- Edit, Save, and Open .css, .html or .txt documents.
- 50 Style Sheet Drop Down Tags
- Class & ID Wizard for Creating your own HTML Tags.
- Dynamic HTML Snippets included.
- Cascading Style Sheet Creation for Netscape and Internet Explorer 3.0+
EngInSite CSS Editor
EngInSite CSS Editor (Win)
If you would like to ensure the strictly correct CSS code which complies with W3C-standards, EngInSite is definitely an option worth considering. The main goal of the editor is to create strictly standard-conform web-sites which pass the W3C validation test. The tool has an integrated instant style sheet previewer, automated code completion, syntax highlighting, integration with W3C HTML Validator, integrated help system, built-in CSS Reference, customizable and expandable code library and live editing feature.
You can also use a CSS Property Editor with dynamic shorthand properties support and Selector Constructor - a convenient wizard for the complicated selectors and various code tools, like Expanding/Extract URLS, Convert Colors, Convert Code and so on. It is possible to navigate across selectors, properties, comments and @-rules and add / remove HTML-specific items like HTML comments and CDATA section. Price: $39.95. A trial-version is available.
Some of EngInSite’s features
- Advanced, fully customizable text editor
- Integrated Instant Style Sheet Preview against HTML file of your choice
- Check your CSS syntax against multiple browsers
- Integration with W3C HTML Validator
- Compliance with CSS standards and various browsers
- Preview in the different browsers.
- Integrated help system and built-in CSS Reference
- Multiple style sheets editing
- Compatibility Check and Syntax check
- Search and Replace with Regular Expression support
- Customizable navigator with media rules support
- Visual editors for different data types
- Wizards for body, IE Scrollbars, lists and backgrounds
Jellyfish CSS
Jellyfish CSS (Mac)
Being extremely simple and intuitive, Jellyfish CSS makes sure that developers can edit CSS-styles easily and quickly. The editor has a code library, Code-Sense support, browser support reference, wizards and helps you avoiding mistakes (you’ll be informed immediately by the program, if you have mistyped accidentialy). You can also use an integrated Colorblender to create matching colour palettes. Price: 29,- € ($47). A trial-version is, of course, available.
Some of Jellyfish’s Features
- Code-Sense helps you avoiding mistakes
- Supports Mobile Profile 1.0
- Syntax-highlighting
- Codechecking while typing
- 3 different preview-types
- integrates extern Programs for a quick availability
- Style-Check with the W3C Validator and CSS-Tidy
- load CSS-files directly from thw www and work on them
- Codesnippets
- Wizards support you while creating Stylesheets
- Colourblender
Astyle
Astyle (Win)
Astyle is a basic visual CSS-editor which offers exactly what one would expect from a basic editing tool. No advanced features, however more than essential editing tools. Astyle couldn’t really impress us with some extremely useful features or sensatonal abilities. Price: $20.
Some of Astyle’s Features
- Visual easy-to-use interface
- Graphic tree-type view of attachment files and the CSS structure
- Grouped view of properties and selectors
- Automatic selection and grouping of CSS selectors from a markup language document
- Source CSS, HTML, XML highlight code editor
- Active preview current selectors and documents with IE and Mozilla support
- Clean up HTML document via CSS
- Icon associate dictionary
- Copy, Paste and Cut operations
- Drag and Drop operations
Further CSS-Editors
JustStyle CSS Editor (Cross-platform)
JustStyle CSS Editor is a cross-platform editing application. Written entirely in Java, it works on different platforms, such as Microsoft Windows, IBM OS/2, Linux, Apple Mac OS, Mac OS X and others. You can edit the whole CSS-file at once or select some fragments of it and edit them separately. An integrated tool lets you integrate the CSS “on the fly” in HTML-files. Although JustStyle CSS Editor offers only a minimal set of features for CSS-development, it can serve as a quick tool for updating a CSS-file outside your personal development environment. However, JustStyle won’t be of any help in large corporate projects. UCWare offers JustStyle for free download.
Simple CSS (Win)
Simple CSS is another free editor for Mac, Linux and Windows. Single elements which can be styled via CSS can be grouped and defined separately. The preview-window enalbles designer to quickly check or tweak the produced source code. Once the CSS-file is done you can click on “Export CSS” and the file can be used for another project. Simple, easy and intuitive.
CSSED (Linux / Win / Mac)
CSSED is a CSS-expert for Linux. Although it delivers only essential features such as syntax highlighting, syntax validation and autocompletion-tool, it is highly extensible via plugins. For instance, you can easily add the search functionality or a file browser. You can find further plugins in the download area of developer’s site. Open Source.
Eric Meyer’s CSS Sculptor (Win)
Eric Meyer’s template-based add-on for Dreamweaver and Microsoft Expression Web. You can choose from any of the 30 included layouts—and then modify the design to the max: change the page width and position or number of columns. It is also possible to specify margins and padding for any page element along with type properties for paragraphs, headings and link states. You can save your modified layouts as new presets to be easily re-created or modified further.
Causeway CSS Editor
A legend, a legacy and one of the first CSS-editors ever created. The tool is unlikely to help you in developing CSS-stylesheets, but definitely had to be mentioned in a review of CSS-editors.
Alternative tools
- Oxygen
An XML-Editor with CSS-functionality - Eledicss
A CSS2 editor (GPL licensed) implemented as a server-side PHP script. It allows editing CSS files using a web browser. - XMLSpy
This editor includes a full-featured CSS editor to assist developers creating XML-based Web sites in XMLSpy. - Firebug
Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly. - CSS Layout Magic (Win / Mac)
This Dreamweaver-plugin offers you a number of simple or advanced CSS-layouts. Works on Windows and Mac OS X systems running Dreamweaver MX. Price: $60. - Web Developer’s Toolbar (Firefox Extension)
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
Open Source Silverlight Data Visualization Tool
by Ray Cheung
is a set of open source data visualization components - powered by Silverlight. With Visifire you can create and embed visually stunning animated Silverlight Charts within minutes. Visifire is easy to use and independent of the server side technology. It can be used with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML. Visit Visifire Gallery or design your own chart using Chart Designer.
SQL Server 2005 CTE (Common Table Expression)
By Bihag Thaker
CTE is a new feature provided by Microsoft SQL Server 2005. In real world, we often need to query hierarchical data from the database. For example, to get a list of hierarchical list of all the employees, list of product categories etc. CTE fulfills this requirement and let us query the database recursively.
Tutorial: Make your own Flickr search engine with Flash and AS3
One of the best things about the internet is that you could search an unimaginable universe of information, text, images, videos, podcasts, blogs, newspapers.
With web 2.0, the community websites come to life, and one of the most famous web2.0 community websites is Flickr.
Flickr stores on their servers, photos form all their users around the world, and they have an open api so you could interact with it, and make your own developments, like PicNik.com, the photos online editor, where you could import your Flickr photos and make it look really cool.
Now in this tutorial I’m gonna show you how to interact with the flickr data base, making your own photo search engine, looking for tags on the photos.
Thursday, June 19, 2008
Which JavaScript frameworks are the most common?
To answer that question, we here at Pingdom have examined a set of almost 200 popular websites to see if they use a Javascript framework, and in that case which framework they have chosen. The websites were collected from the Alexa US Top 100 and the Webware Top 100 Web Apps. The frameworks we looked for were Prototype, JQuery, MooTools, Yahoo! UI Library, Dojo, ExtJS and MochiKit.
Improved ActionScript Spell Checker Released
by gskinner.com SPL 1.2 is a free upgrade for current users. If you own a license to SPL, and have not received the update package, please contact us through the support form on our product site. You can find more information on the Spelling Plus Library, and see demos of it in action at the SPL product page.
Wednesday, June 18, 2008
Tutorial: Create an Interactive Stack of Photos
In this tutorial, you will learn how to build an interactive stack of photos using Flash. This is a great technique to display numerous images in a limited amount of space, and the best part is that it is extremely easy to execute.
Tutorial: MP3 Player In AS3
In this tutorial you’ll learn how to create your very own Ipod player using actionscript 3. We’ll load in our music files from an XML file, take all the artist song and album data from that file and load it into our fla file. We wont be looking into the XML file in great detail in this tutorial but I hope to cover that in future tutorials.
XAML Export Script for Blender
by nerddawg
Daniel Lehenbauer created a script that exports model and texture data from Blender to XAML. Blender is an open-source product for 3D modelling, animation, rendering etc.
Monday, June 16, 2008
SimpleScrollBar class AS
from webdevils.com
Here's an AS3 class that creates a simple scroll bar. Set this as the Base Class for any movie clip. The container clip must have two movie clips named drag_mc and track_mc. These clips act as the dragger and track for the scroll bar
Add an event listener to call a handler when the scroll bar is dragged. SimpleScrollBar dispatches the ScrollBarEvent.UPDATE which includes the property scroll_value. This property holds a value from 0 to 1 representing the position of the dragger.
Here's some example code. Assume that scroll_mc is a movie clip that contains two clips drag_mc and track_mc. This clip has SimpleScrollBar set as it's base class.
scroll_mc.addEventListener( ScrollBarEvent.UPDATE, on_update );
function on_update( e:ScrollBarEvent ):void {
var n:Number = e.scroll_value; // Get the value of scroll bar
scroll_txt.scrollV = Math.round( ( scroll_txt.maxScrollV - 1 ) * n ) + 1;
}
Download the sample: simplescrollbar-class
InteractivePNG
From the site:
Like magic, transparent parts of a PNG in your MovieClip are ignored during mouse interactions. Check it out!
Normally the clear areas of a PNG are treated as solid, which can be especially frustrating when dealing with a lot of images that overlap each other because they tend to block mouse interactions on the clips below them.
This utility fixes that so that mouse events don’t occur until you bump against a solid pixel, or a pixel of any transparency value besides totally clear. InteractivePNG lets you set an alphaTolerance level to determine what transparency level will register as a hit.
Free icons for webware applications
Looking for some free icons for your applications? You can get some from these resources:
- Mono Factor - 25 Free Vista Icons
- Web Appers - Free Web App Icons Set
- ZeusBox Studio - Free RSS Feed Icons
- VistaIco - Free Vista Style Icons
- DryIcons - Free for non-commercial use
Smashing magazine has an article that links to even more resources. Check it out if you want to delve deeper into the free icons scene.
Microsoft Source Code Analysis for C#
by Phil Wright
Microsoft has just released a tool that integrates into Visual Studio and is used to look at your C# source code and report style violations. This is great for any project manager that wants to become style enforcer. The intent is to provide compile time warnings/errors about C# code that violates its rules.
For example, you might want to enforce a rule that all source files have a header at the top containing a copyright notice along with the company name. You can configure the utility so that it produces either a warning or an error whenever this rule is violated. The current list of rules that it comes with can be turned on or off depending of which are applicable to you.
Personally I like the idea and I think it would be a great tool to use on a new project. Everyone of the team can sit down at the start and agree a set of style guidelines that can then be automatically enforced. But on existing projects I think it would be almost pointless, as the number of violations is going to be huge and the time needed to prettify your code not really be justifiable.
Sunday, June 15, 2008
Caching data locally to work offline in AIR applications
by Marco Casario
These days here in Comtaste, I'm very busy for a consulting activity to support a project for an Adobe's Italy partner (I'm under NDA so I can't do names), working on a enterprise desktop AIR application (that uses Java, Oracle Form and Hibernate). The project is a porting of an ActionScript 3/J2EE web application, so what we're doing is to write ActionScript 3 classes to add AIR desktop functionalities.
Creating A Downloader For YouTube with Flex/Air
YouTube’s mixed easy movie access with community uploads to create a startling new service. The online problem is that you can only access YouTube when you are online. How can you access those movies when you are offline? Let’s solve that problem by building a downloader with Flex and AIR.
In this article we will build a cross platform application that searches for YouTube videos and then provides a mechanism to download those videos and view them locally. You will be able to take your favorite YouTube videos with you wherever you go.
ALERT: Aswing 1.4 released
It happen again, we've got good news from Aswing Team, version 1.4 released and available for download.
If you still don't know what the heck is Aswing (shame!), AsWing is an Open Source ActionScript GUI framework that allows programmers to make flash application (or RIA) with syntax similar to Java Swing.
Even more, Aswing is damn fast and eats less memory that any other UI Framework for Flash Platform, yes I mean Flex too.
And by the way, don't forget about http://groups.google.com/group/asui your place for discussions about ActionScript centric UI development.
mySQLTuner
EriK Hallander shared some nice stuff with us - mySQL Table Optimizer.
"One of the most irritating aspects of the web is that you so often find (almost) exactly what you’re looking for, but seldom just exactly. There’s bits and pieces out there and it can be terribly frustrating to combine information from multiple sources since they don’t always merge well or are compatible. Enough talk. Here’s the free stuff! : mysqlTuner!"
Some more WAML JavaScript for media content
Happen that in some of my projects I needed a way to control media content like mp3 and mp4 via JavaScript, so I've decided to extend my existing WAML JavaScript core with new module waml.windowsmedia.js, I will provide download link's a bit later after I finish with polishing this functionality.
<div id="playerContent"></div>
var player = new Waml.Media.MediaPlayer('playerContent', Waml.Media.GUID.QUICK_TIME);
player.play(url);
Initially I made it in a way where it can handle only Windows Media player embedding, but I found that in Firefox browser it works differently if you have Apple QuickTime installed. Basically QuickTime overtakes <embed /> content, so I had to enable some support for QuickTime in a way where you can choose what media engine you use right in object construction, as I showed above.
Stay tuned, more things coming.
Thursday, June 12, 2008
ActionScript Framework + Ruby on Rails = JumpShip
InfoQ just published post about a great ActionScript framework, JumpShip. JumpShip is a Ruby on Rails inspired ActionScript 3 MVC driven RIA framework. Here at Flex RIA we are all big fun of RIA infused Ruby on Rails system. As matter of fact, the best startup we’ve written(Babble) was just like that. And now, JumpShip gives you a framework to develop a Flex + Ruby on Rails application with everything you need, including a Rail Gateway.
Drawing in Flex using the UIComponent
Create a simple whiteboard type application with flex and ActionScript 3 extending the UIComponent.
Wednesday, June 11, 2008
A List of Open Source Flex projects
- Adobe APIs1 corelib:consists of several basic utilities for MD5 hashing, JSON serialization, advanced string and date parsing, and more.
- FlexUnit:FlexUnit is a unit testing framework for Flex and ActionScript 3.0 applications. It mimics the functionality of JUnit, a Java unit testing framework, and comes with a graphical test runner.
- Flickr:The Flickr library is an ActionScript 3.0 API for the online photo sharing application, Flickr. It provides access to the entire Flickr API.
- Mappr:Mappr is a service and application that combines images from Flickr with geolocational information. The Mappr ActionScript 3.0 API gives you access to Mappr’s geo-tagged image data.
- RSS and Atom libraries:Use the RSS and Atom libraries to parse Atom and all versions of RSS easily. These libraries hide the differences between the formats so you can parse any type of feed without having to know what kind of feed it is.
- Odeo:The Odeo API provides an ActionScript 3.0 interface for searching and retrieving podcasts from Odeo.
- YouTube:The YouTube API provides an ActionScript 3.0 interface to search videos from YouTube.
- as3awss3lib
This is an AS3 library for accessing Amazon’s S3 service. It only works in Apollo because of restrictions in the browser player. - As3Crypto
a cryptography library written in Actionscript 3 that provides several common algorithms. This version also introduces a TLS engine (TLS is commonly known as SSL.) - FZip(or here)
an Actionscript 3 class library to load, modify and create standard ZIP archives. FZip parses ZIP archives progressively, allowing access to contained files while the archive is loading. - ASCOLLADA
A actionscript library for parsing Collada files,released under the MIT License - Salesforce Flex Toolkit
allows Flex programmers to build S-controls — components within the Apex interface where custom code can be executed — without dropping into JavaScript - Twitter AS3 API
dependency is the Adobe core library - Away3d
Away3D is a realtime 3d engine for flash in ActionScript 3, originally derived from Papervision3D. - Papervision3D
a realtime 3D engine for Flash - as3soundeditorlib
Application displays a spectrum of the mp3 file, displays cue points from a file, and allows navigation and playback of mp3 and navigation between cue points. MIT-license. - as3ds
AS3 Data Structures For Game Developers’ is a library containing data structures optimized for game development with Adobe Flash and Actionscript 3 - mecheye-as3-libraries
consists of a set of ActionScript 3 libraries used primarily for Flash game development. These libraries are known to work with the Flex 2 SDK. - asinmotion
An animation library for actionscript 3. Contains a basic tweening class as well as the ability to sequence and execute tweens in parallel - flest
an ActionScript3 / Flex application framework for building enterprise level RIAs. It uses such design pattern as Controller, Factory, Command, etc. High efficiency, simplicity and practicality were set as its mandatory design features. - facebook-as3
Implementation of Facebook’s REST API in Actionscript 3. - APE
a free AS3 open source 2D physics engine for use in Flash and Flex, released under the MIT License. - uicomponents-as3
a lightweight AS3 UI component library - Tweener
a Class used to create tweenings and other transitions via ActionScript code for projects built on the Flash platform - XIFF
XMPP client library - Midas3 a pure actionscript3 library that provides seriliazition/deseriliazition APIs and some MIDI node event APIs.
- Vegas - open source framework for RIA development in ActionScript 1, 2, 3 and SSAS
Saturday, June 07, 2008
Create a 3D Product Viewer in Flex 3
This is the winning article from the recent competition we ran to promote Flex articles on sitepoint.com.
I remember the first time I saw the Mini Configurator on the Mini USA site. I was blown away -- I loved just playing with the colors and the options -- it was a truly immersive experience of the kind that only Flash applications can offer, and I'm sure it sold more than a few Minis.
Ever since then I've wanted to create one of my own, and in this article I'll show you how to do just that. For this example, I'll assume that you're across the basics of working with Flex 3 -- that you're set up with an editor such as Flex Builder 3, are familiar with MXML and ActionScript 3, and can create basic applications. If you're after a beginner's tutorial, or need a refresher, try Rhys Tague's beginner's tutorial.
Wednesday, June 04, 2008
AIR+OpenAIM: Buddy List Viewer
I'm researching OpenAIM for an upcoming article and thought I'd share a few quick tidbits about connecting to OpenAIM. Let me first say...I didn't do anything special here. AOL has provided a pretty quality developer center and they have written the ActionScript 3 code necessary for connecting to the AIM service. As a test I thought I'd try to grab my buddy list and show it in an mx:Tree component.
Disclaimer: This is purely a sample app so the code does not use any best practices or anything...just showing how to use the OpenAIM code.
Sample AIR app:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:wim="com.aol.api.wim.*"
layout="absolute"
applicationComplete="init()">
<mx:Script>
<![CDATA[
import com.aol.api.wim.data.types.SessionState;
import com.aol.api.wim.data.User;
import com.aol.api.wim.data.Group;
import com.aol.api.wim.Session;
import com.aol.api.wim.data.BuddyList;
import com.aol.api.wim.events.BuddyListEvent;
import com.aol.api.wim.events.SessionEvent;
private var aolSession:Session = new Session(stage, "your developer key", "Your Test Client", ".1");
private var aolBuddyList:BuddyList;
private function init():void{
aolSession.addEventListener(SessionEvent.SESSION_STARTING, handleSessionStarting);
aolSession.addEventListener(BuddyListEvent.LIST_RECEIVED, handleBuddyListLoad);
aolSession.signOn("your username", "your password");
}
private function handleSessionStarting(event:SessionEvent):void{
aolSession.requestBuddyList();
}
private function handleBuddyListLoad(event:BuddyListEvent):void{
aolBuddyList = event.buddyList;
updateBuddyList();
}
private function updateBuddyList():void{
var buddyList:XML = <node label="AOL Buddy List" />
var group:XML;
var user:XML;
for each(var item:Group in aolBuddyList.groups){
group = <node />
group.@label = item.label;
for each(var userItem:User in item.users){
if(userItem.state == SessionState.OFFLINE) continue;
user = <node />
user.@label = userItem.aimId;
group.appendChild(user);
}
buddyList.appendChild(group);
}
buddies.dataProvider = buddyList;
}
]]>
</mx:Script>
<mx:Tree id="buddies" width="100%" height="100%" showRoot="false" labelField="@label" />
</mx:WindowedApplication>
So, briefly I'll cover the code (gotta cook dinner in a sec; lol). On Line 4, above, we set the applicationComplete event to call our init() function, lines 19 to 23. In there we add a couple event listeners then call the signOn(..) function of the WIM api. Before we can successfully do this the aolSession variable must be created, which we do on line 15.
Note: You HAVE to get a developer key from AOL in order to test this code.
Once the sign on request is complete we call requestBuddyList(), line 26. When the buddy list is returned we set the aolBuddlyList variable then call updateBuddyList(), line 32. The updateBuddyList() function merely loops over the groups (your buddy groups) and users in each group, updates the buddyList XML local variable, then assigns it to the dataProvider of the buddies Tree component.
For the UI we merely create an instance of mx:Tree and set the labelField to @label, which is what we created in the updateBuddyList() function.
That's it. Run the app and you'll see your buddy list in a window like below:
They have some work to do on the source code but I went from from 0 knowledge to this sample app in 20 or so minutes. Grab the code and check it out.
Sunday, June 01, 2008
Two major BUGS in flash player
by JamieG
First of all, massive memory leaks. See Adobe bug tracker FP-49
I am surprised this has not gotten more attention. Firefox, for example, has been slammed on memory problems in FireFox2. This memory leak could be a major cause of browser slow down and memory usage issues.
In simple terms, this bug does not free up memory properly. For example, you may have a rich internet ad in flash on your web page. It may be running over and over, and if using the latest Actionscript3 (I would, its 10 times faster then AS2) the ad could be slowly growing in memory usage.
I commonly leave tabs open for days like many other people I imagine. Imagine what this bug is doing to the browser.
This issue also makes Adobe AIR unsuitable for many applications. Writing an application that runs as a desktop application and lives in the task bar for days at a time is simply not very viable with this bug hanging over you.
If you are a developer, I urge you to have a read of FP-49 and vote for it. (Adobe lets flash/flex developers vote for bugs to fix first. The more votes, the faster it gets addressed.
Secondly I would like to mention bug “Security.loadPolicyFile() attempts to load file only once” FP-49
This bug basically makes flash used with socket communications near unusable. All my development depends on it. So if you can, please kick that one along too.
Subscribe to:
Posts (Atom)
