Page History

This document describes how to setup the Radii8 project for development. Radii8 is to help the Flex community and HTML developer/designers. I think web and application development can be better. For many, in HTML based web applications can be horrible maintenance (not bad as it was). I talk to people all of the time in school and community and there is still a lot of suffering through it. I refer to those an tool to integrate design and development into one work space to make web, mobile and applications easier to create. The main audience is designers working on web, Flex designers and developers and HTML developer and designers. There is still a lot of problems with web development in the HTML world and those who have do not yet got have a grasp on web development and this aims to soften the edges and introduces web developers to Flex at the same time.

I think you should be able to start web development and design at any stage and progress to any stage and the tool to should still be useful. I had a lot of trouble in my early days of software development . and I believe that we can give designers tools to do their design work and give developers tools to do their development work in the same software. I'm looking really at the way Drumbeat 2000 did it a few years ago and taking something from there that I haven't seen anywhere elseDrumbeat 2000 had some really great concepts and could scale from beginner to advanced. There are many things that can be better in my opinion than the current dev development and design software. workflow.

Flash Builder 4.5 design view, Flash Catalyst, I'm also looking at all the great features that were in all of the other great tools I've used in like, Visual Studio, Eclipse, Photoshop and many others and mixing them together in an appropriate way.Flash Builder DV and Java FX Scene Builder are good guidelines for to where we want to go ,

http://www.youtube.com/watch?v=rHcnsEoSK_c

At runtime you can use the MiniInspector class let's you can click on an CMD click on an object and it will details about the element. You can set properties and styles on the selected object. It can be set to show style declarations and style inheritance in the console. You have to CMD + click an object and if you have the property showInheritedStyles set to true it will show styles on the object. This can be used as a starting point for a visual panel for CSS.

Setup Instructions

...

...

for a design view but with support for FXG and SVG vector and primitives support as well.

Setup Instructions

install Flash Builder or compatible IDE. After that follow these steps:

1. Clone the following github libraries to your local machine:
   
   1. Flexcapacitor - Choose MainLibrary
   2. Radii8 - Clone the whole directory. Radii8Desktop/Radii8Desktop.mxml is the main desktop application
   3. FlexIFrame
   4. AS3-PSD-Parser
   5. ObjectHandles - ATM it's not used and code could be commented out to not require it
   6. FTPLibrary - I can't find this library anywhere so it's in the extras folder. It could be swapped out if any alternatives are available
   7. JSON-API-Plus - this is for integrating with WordPress (required if you want to connect to your own domain)
   8. Vanilla Theme - for integrating with WordPress (required if you want to see results on your own domain)
   9. AS3CommonsReflect (AS3CommonsReflect) or AS3CommonsReflect.swc (site appears to be down)
2. In Flash Builder import the following Flash Builder projects into your FlashBuilder workspace
   
   /Radii8Desktop - for working on the desktop application
   /Radii8Designer - for working on the online web application
   /Radii8Library - required
   /Radii8LibraryAssets - required
   /flexcapacitor/MainLibrary (shown as FCLibrary in the screenshots)
   
   /flex-iframe/library (shown as FlexIFrame) - required for the online web application

Now that you have the required projects in your workspace verify that the desktop Flash Builder project or the online web based Flash Builder project will build. We will do that by verifying the projects properties.

First we have to verify the Radii8Library is setup. Then after that we can setup the desktop or web projects.

Radii8 Library Project Properties

In Flash Builder open this project and then open the properties. It should look like this:

Image Added

Image Added

/AS3CommonsReflect.swc
/Radii8LibraryAssets.swc
/FlexIFrame.swc

Radii8 Desktop Project Properties

In Flash Builder open the Radii8Desktop project and then open the properties:

Image Added

Image Added

The main web project is Radii8Designer. The project properties should look similar to the desktop version.

Important Note: The web version has not kept up with the desktop version so it may contain errors. I've tried to minimize any problems along the way but have not tested it in a while. The following picture is outdated and you may need to reference the desktop setup image:

Image Added

Compiler options

Image Added

The main project is Radii8Designer. It's project properties should look like this:
Image Removed
Image Removed

-locale en_US 
-includes=mx.managers.systemClasses.MarshallingSupport 
-keep-all-type-selectors=true 
-link-report linkreport.txt 
-size-report=sizereport.txt
-keep-as3-metadata+=Alternative 
-keep-as3-metadata+=ArrayElementType
-keep-as3-metadata+=DefaultProperty
-keep-as3-metadata+=Deprecated
-keep-as3-metadata+=Effect
-keep-as3-metadata+=Event 
-keep-as3-metadata+=HostComponent
-keep-as3-metadata+=IconFile
-keep-as3-metadata+=Inspectable
-keep-as3-metadata+=InstanceType
-keep-as3-metadata+=RemoteClass
-keep-as3-metadata+=RichTextContent
-keep-as3-metadata+=SkinPart
-keep-as3-metadata+=SkinState 
-keep-as3-metadata+=Style 
-keep-as3-metadata+=SWF

Builder options are no longer used but if we choose to use it in the future you can use the following image. IIRC the builder must be moved up one directory from where it is now and then added manually. It is then run automatically every time the compiler is run. You may need to create a new builder for the version number if you get an error:

When you create a new builder enter what you see in the screenshot.Image Removed

Radii8Library Project Properties

...

FCLibrary Project Properties
Image Modified

The main project has had an Ant Builder that runs when you compile the project . It that auto-increments the build number and sets the current date. It may no longer be valid and can probably be removed.has been moved. We now update the version number in the application descriptor of the desktop version and could probably grab that value when building the online version.

Desktop Version: If you do not get any errors in the problems panel in the Radii8Desktop project then launch Radii8Desktop.mxml.
Web Version: If you do not get any errors in the problems panel in the Radii8Designer project then launch Main.mxml.

Wordpress Server Setup

Instructions for saving to the server (saving locally to the file system isn't available yet) using Wordpress. Read all following steps before starting this process as things may have changed.

1. Install your Wordpress blog on your server

2. In the extras directory download and unzip the json-api directory and upload it to your Wordpress plugins directory. Usually, wordpress_install_directory/wp-content/plugins. In your wp_config.php file add the following:
   
   

   Code Block
   define('JSON_API_CONTROLLERS', "core,categories,posts,user,attachments,projects"); define('JSON_API_EMAIL_FROM', "contact@mysite.com"); // this is optional use your own contact email here define('JSON_API_EMAIL_FROM_NAME', "mysite.com"); // this is optional use your own contact name here

3. Further more detailed instructions are found here and here.

MiniInspector Utility class

At runtime you can use the MiniInspector class let's you can click on an CMD + click on a display object and it will show details about the element. If you do nothing it will then show details about the parent container and so on until you get to the Application. You can set properties and styles on the selected object by clicking on it's name. It can be set to show style declarations and style inheritance in the console. In the main.mxml application set the property showInheritedStyles to true it will show inherited styles on the object in the console when you CMD + click. This can be used as a starting point for a visual panel for CSS.

Notes

This is an in-progress project. You'll find things that don't work.

The development blog for news and new releases from the github repository are currently at www.radii8.com. A google group has been setup here. The donation of the domain and / or hosting costs are being discussed as is the process of working from the Apache repository. Since the current version relies on the domain to save and publish removing this domain will "break" the product. A few other issues such as libraries used that have no license or non-compatible license with Apache and how to set that up are also being discussed.

How to Guide for Developers

A list of how to add new features, new components, new views are in the How To directory of the Radii8Desktop project here.

Goals

Read the readme.txt. It contains the list of goals among other information. It might be outdated. Also, check the website.

The following is features I'd like to see in the design view:

    The design view is the most important part of the application.

    It must support the following features:

    • drag and drop - move

    • rotate

    • resize - drag handles

    • drag into group, drag out of group

    • zoom in and zoom out, other functions work while zoomed in and out

    • drag item from off screen into screen

    • support scrollbars

    • select and work with components in the flex component tree (select tool)

    • select and work with graphic primitives (direct selection type of tool)

    • support filters

    • remove listeners - so components don't react (button press doesn't change state, etc)

    • states

    • transitions

    • measurement rulers

    • alignment tools

    • multiselection

    • rich editable text on double click of text component

    • overlay of image (for example iphone, ipad or layout grid or mock up image)

    • snap to grid (while dragging)

    • snap to other elements (while dragging)

    • snap to rulers

    • background image (used to compare design spec as you work - onion skin)

    ADDITIONAL FEATURE REQUIREMENTS

    • Templates - users can use their own MXML, HTML, PHP, etc templates and indicate locations for CSS, script includes, code blocks and layout

    • Desktop environment - users can run on the desktop

    • Compiler integration - users can compile using the mxmlc or Falcon

    • Flex project support - users can connect to their Flex projects

    • Wordpress integration - users can create their own theme. tokens can be used to repeat sections and get values. results are assembled on the server by a theme assembler

    • Editors - users can create or edit text documents. using Ace editor or Moonshine to syntax highlight

    • Append CSS - users can append CSS to add to element CSS block and override the generated CSS

    • Includes - a view exists of external scripts to include (for CSS, JavaScript, MXML script)

    • Declarations - a view showing declared objects

    • Publishing - users can publish to their server (using Wordpress) or add in FTP for desktop version

    • ActionEffects - users can assemble actions based on ActionEffects and create different action paths

    • AST - a syntax tree can be created for code completion, documentation and error handling. NOTE this may be better to integrate with an IDE like FB, IDEA or JetBrains for code editing.

    • Compiler integration - compiler can provide a problems panel (desktop only?)

    • Import and Export plugins - new or improved import and export plugins can be added to the environment for better input and output

    • Plugins - new and improved plugins can be added to the environment to add new or better feature sets

    • Tools - new and improved tools can be added to the environment to add new or better feature sets

    • Commands -  can be added to the environment to add missing or necessary functionality

    • Document types - new document types can be added for additional functionality. text, vector graphics editor

    • State inheritance - users should be able to create states based on other states (this exists in Flex via basedOn property) this can be used for design templates exporting pages based on state

    • Integrated language support - users should be able to integrate server side language in the output

    • Different work flows for output results - one is to generate code (one way), the other is create an AST from code (round trip), another is a mix of both including search and replace tokens and generated code in templates

    • Examples - starting points and examples should be included for partial and even full example sites and apps

    • Previews - users should be able to preview in HTML or application (possibly in another browser or FP instance)

    • Import of PSD, AI files - users should be able to import PSD or AI. AS3 importers exist

    • CSS view - show styles applied to component and inherited from containers

    • Vector graphics editor - users should be able to create and edit vector graphics and use as FXG and SVG skins

    • Animation timeline - users should be able to animate and trigger effects on elements (see ActionEffects). effects should allow nesting for different code paths.

    • Export options - panel for setting export options. for example, when converting to HTML, convert text element to an image option

    • Data objects - panel of data from a service or internal data for things like lists, datagrids and charts.

    • Workspace Settings - panel that lets you set workspace settings. meaning components to include, panels to include, panel layout, properties and styles to include or exclude

    • Filters - panel for filters and matrix

This list will undoubtedly get out of sync with the readme.txt so check both. 

Issues

As you encounter issues mention them in the issue tracker.