Introduction

The aim of this development is to:

-       Increase performance

-       Start evolving towards platform independence. This means that soon Silex will be able to render sites in AS2, AS3, JS, or pure static HTML and that this development must lay some of the groundwork for that.

-       Make integration of third party components as easy as possible

-       Remove functionality from the core to make it lighter and push it towards plugins

-       Supercomponents. This is a separate development so it will not be specified here, but its future integration must be taken into account

-       Library of components in one swf file should be possible

Current state of things, and what the problems are :

-       A page is what you see at a url, for example yoursite.com/welcome/contact. This is rendered in Silex as pile of Layouts that contain Layers that contain media and components. Containers that are in a “Layer Skin” render Media, for example images and sound. Components are special SWFs that are loaded independently. It would be simpler and better to speak of Layers, SubLayers, and only components, not media.

-       Layouts are described in cumbersome XML files that no longer fit our needs and that are long to parse and manipulate. Furthermore the component properties are very linked to the virtual machine DOM. For example they contain “_x”, that is only x in AS2. There is therefore no way forward to work with AS3 or JS. The file format/system needs to be changed.

-       All components in Silex currently need to inherit the UiBase AS2 class. UiBase contains the arrays where the components and their properties are described. This is bad for performance, forces all components to be visual whereas there are now many non-visual components, and makes integration of third party functionality very difficult. We need to get rid of this dependence on UiBase and find another mechanism to describe components.

Proposal

Changes to the user experience

As mentioned above, a page will now be rendered as a pile of Layers that contain SubLayers. LayerSkins will be destroyed, and be replaced by a system where there is a mapping between the file extension of the media being used and the corresponding container component. For example, all files ending with “jpg”, ”png”, and “swf” can be rendered in the same way by the same container component that is responsible for static visual media. It could be called “ImageDisplay”. The current library will be enhanced with a separation between media and components. To add an image, the user will therefore have 2 possibilities: either add an “ImageDisplay” and configure it, or simply choose to insert the image and use the associated component. If by chance there are 2 components available to render the same file extension, the UI could offer a choice.  The only way for components that do not match a media type to be added is now through the component menu.

Changes in the architecture

The current layer skin players are moved to a plugin called “base_components”. This plugin contains the current renderers each in their own swf (or one single librairy ?), and one or more php files for the plugin integration.

A description of these components and how they can be used, configured etc. must be made available when editing the site, but not be necessary just to render them. Furthermore, the layer description file(s) should be useable to render the layer without a server and be planned for the multiplatform evolution.

The following data formats are to be applied:

Layers are described in one file per platform, using the following naming scheme: <layername>.<platform>.xml. For example: start.as2.xml. The structure of all of these files is the same down to component description, where the description of the component properties is specific to the DOM of the platform. For example the as2 file will contain _x if necessary, and the as3 file will contain x.

So for example:

<layer>

<subLayer id=”under”>

<components>

<component url=”/plugins/base_components/imagedisplay.swf” _x=”34” … more properties, ><htmlText>…</htmlText>…more properties…</component>

… more components

</components>

</subLayer>

… more subLayers

</layer>

Here is the content of the class ComponentDescriptor:

-       As2Url, as3Url, jsUrl: urls to the file to load when using it, depending on the platform. url relative to the root of the server. This information is used to see what platforms are supported.

-       Class: Name of the class contained in the file, where relevant

-       Name: A localized name to show in the components menu

-       Description: A localized description to show in the components

-       MediaTypes: an array of strings each containing an extension that is supported by the component. For example [“swf”, “png”, “jpg”]

-       Properties: An array of properties. See below.

-       getHtmlEquivalent which returns an html equivalent for the component (seo). Takes as input: the component id, the context (values for accessors, i.e. all layers data for the current page + publication config)

Events and methods and whatever other meta data we need can be added later.

Here is the content of the class PropertyDescriptor:

-       Name: Localized name

-       Description: Localized description

-       As2Name, as3Name, jsName : The matching property in each platform (e.g. _x / x / left )

-       Default: default value

-       Category: a category to use to sort the properties. TODO Could be replaced by tags, maybe.

-       isRegistered:  true/false should this be saved?

-       Miscellaneous meta data such as type, min/max values, min/max length etc.

Events and methods are not currently used, so they can be described later.

Furthermore, it must be easy to inherit descriptors. For example, the image renderer and the video renderer will have shared properties because they are both visual components. So a possible class inheritance structure would be :

ComponentDescriptorBase -> VisualComponentDescriptor-> ImageDescriptor and VideoDescriptor.

It makes sense to make ComponentDescriptorBase and VisualComponentDescriptor part of the basic framework so that components in other plugins such as OOF can use them to build their descriptors. ComponentDescriptorBase should handle localization using a standard yet to be defined. Each of these descriptor classes is defined in its own PHP file.

These components descriptors are only used by the wysiwyg, so they can be queried using a new service called component_descriptor_service. The method is called getDescriptors. It returns all available component descriptors.

Quelques mots pour vous informer que l’histoire de Silex continue d’être pleine de surprises et de satisfactions. Nous travaillons sur Silex v1.6! La phase de débogage pour l’alpha 3 est en cours.

Continuez à lire cet article, vous allez être surpris!

Nice ergonomics by Pol ( superwup.com ) Development by Yannick and Ariel ( arielsommeria.com ) The design of the site in the background is made by Léo

Lexa a fait un gabarit d’animation « flip book » et a coordonné l’ensemble du dev avec Pol.

Pol a également fait une ergonomie 100% revue et corrigée. Yannick et Zabojad l’ont codée en Flex (boîtes à outils WYSIWYG) et Oof (manager). Vous pouvez voir une capture d’écran ci-dessus.

Grace à Ariel, l’API est maintenant complète: 25% php, javascript 25%, ActionScript2 25% et 25% ActionScript 3. Et tout cela communiquer de façon transparente, dispatch des événements d’un langage à l’autre. Un système de plugin est en place et plusieurs plugins utilisent déjà l’API (merci Qian): Google Analytics, Piwik Analytics, Yahoo Analytics, recherche interne, snapshot, …

En ce qui concerne Nicolas V, il est à fond sur haXe! Il programme un convertisseur HTML5, afin d’avoir un équivalent des pages Flash/Silex en HTML5. Ca fonctionne déjà sur iPad / iPhone

Et le meilleur pour les nouveaux utilisateurs Silex vient des gars de Silex Labs, qui ont fait un excellent travail de documentation. Et ils travaillent actuellement sur le design de l’interface graphique, et de la nouvelle identité de Silex, Oof, AMFPHP et Flog. Franck, Sol, Kat, Léo, Riwal et Nico « Frankie Fraser », go on, please!

Donc, maintenant vous le savez, nous ne nous sommes reposer sur nos lauriers ces derniers mois …

ENCOURAGEMENTS BIENVENUS EN COMMENTAIRE

Ensuite, pour les plus avancés, vous voulez disposer d’outils d’analyse. La version normale de Flash ne dit rien quand il y a un problème. Par contre la version Debug vous mettra un message d’erreur quand il détecte une erreur. Une règle de pouce: S’il y a eu une erreur, rafraîchissez tout de suite, Flash est en vrac et on ne peut plus rien en tirer de bon. Nous vous conseillons aussi FireBug, une extension Firefox, qui fait trop de choses pour qu’on puisse les lister là, mais vous permettra entre autres de suivre les requêtes envoyées au serveur. Il y a enfin une extension pour FireBug qui s’appelle FlashBug, qui permet de lire facilement les traces que vous aurez mis dans dans votre code Flash.

Il ne me reste plus qu’à vous souhaiter bon courage, et de vous inviter à partager vos questions et vos tuyaux dans les commentaires!

Let’s use this functionality of Silex and the Yahoo! widgets system, in order to make a desktop application with installation, update and configuration.

Here is my sample widget. And here are the sources.

widget test for Silex: it gives you some news about Silex on your desktop

Yahoo! Widgets is a free application platform for Mac OS X and Microsoft Windows.

• http://en.wikipedia.org/wiki/Yahoo!_Widgets
• http://widgets.yahoo.com/

Here is how to make a Yahoo! widget with Silex:

• in a silex server, create one site with the parameter « layer skin » set to « layer_skin_light.swf » and no embed fonts (all text field should have the parameter « include font » unchecked). You can remove the folders fonts, logs, cgi, conf, install, js, loaders, plugins, tools, trash and all files in the root folder except silex.swf
• in a new folder where you will put all the yahoo plugin, put a « Resources » folder with the « silex_server » folder inside it.
• use the file « fla/loader_projector.fla » of the dev kit to generate the loader, which I called « loader_yahoo_widget.swf ». This file contains the website configuration, your site name for example. Tip : leave this line uncommented (i do not know why exactly):

rootUrl = "../silex_server/";

• create a .kon file which is the yahoo widget conf file, see the example I did. You just need to embed the loader_yahoo_widget.swf file. You also can define properties which the user will be able to modify and which will be available in Silex as accessors (in <<silex.config.YOUR PROPERTY FROM YAHOO CONFIG PANNEL>>)

silex yahoo widget admin pannel

• install yahoo widget and use the « open widget » menu in order to load your widget.

After you have done a cool widget, do not forget to submit it to yahoo! here.

Note: the widget background is transparent, which is pretty cool

A l’instar de GoogleAnalytics, Piwik, qui est la nouvelle version de phpMyVisites, est une application web d’analyse web en temps réel développée en PHP/MySql – son développeur principal, un français, est Matthieu Aubry. Mais Piwik présente un avantage que nous ne pouvons qu’apprécier et souligner chez Silex : c’est un logiciel libre et Open-Source.

Contrairement à GoogleAnalytics, vos données sont stockées dans votre propre serveur (en effet, Piwik est installé sur votre serveur) et vous pouvez choisir, dans son interface, vos modules, enlever ceux dont vous n’avez pas besoin, et même en créer. Vous pouvez aussi customiser votre interface utilisateur grâce aux widgets et à leurs propriétés de drag and drop. Chaque Widget peut aussi être incorporé dans vos sites, blogs, etc.

De plus, comme Silex, Piwik est disponible en plusieurs langues (environ 30).

Piwik aujourd’hui

new piwik design

Pour sa nouvelle version, Piwik 0.6, le logiciel a refait peau neuve. Il est désormais plus moderne tout en restant professionnel. Il y a aussi de nouvelles caractéristiques comme l’assistant pour exclure les visites en fonction des adresses IP et/ou grâce à un cookie ; l’assistant pour exclure des paramètres d’une URL ; de nouveaux réglages dans la section utilisateur. Donnez votre avis sur les nouveautés ici.

Piwik est déjà compatible avec un certain nombre de CMS : Spip, Drupal, Joomla, Wordpress, Dotclear2, Typo, Dokuwii, Mediawiki, et bientôt Silex !

Tutoriel en français pour installer Piwik : http://www.infothema.fr/forum/index.php?topic=896.0

Site officiel : http://piwik.org

Disponible sous Sourceforge : http://sourceforge.net/projects/piwik/

Hello This is a technical article on the use of haXe to develop animation layouts for Silex publications. I will explain why I find it very interesting to use haXe in Silex development team and then explain how I reproduced the minimal layout in haXe (little explanation and source download).

haXe is an open source & multiplatform programming language. A code written with haXe can be compiled to JavaScript, Flash (AS2 & AS3), PHP and NekoVM.

It is developped by Nicolas Cannasse at Motion-Twin, a French game development companny. Nicolas is the one who initiated the open source Flash community with his open source Flash AS2 compiler which turned out to be way better than the Adobe one :-0

Why haXe ?

Open and French first of all

Multiple language, one code base

It allows Silex to evolve smoothly toward a full AS3 implementation, keeping the backward compatibility in mind. And not only AS3 but also iphone and javascript

Performance

It seems to be much efficient to use haXe than Flash to publish swf, according to Joacim…

Libraries and file formats

haXe opens new perspectives for Silex, like the use of the numerous libraries for 3D redering, 2D physics, support of pdf (decryption only), zip, …

Click in the movie below …

How to develop page transitions in Silex with haXe ?

Here I will not make a tutorial because I am not good at this Instead I will explain the overall philosophy and use of Silex API. You can look at these sources in order to see how I implemented this: minimal layout of Silex, re-made with haXe. For this need to install haXe and edit the files with FlashDevelop or eclipse+hxeclipse.

Here are the classes you need to implement in a Silex animation layout..

The class interacting with Silex API

The class accesses Silex API thanks to this haXe code:

var timeline:MovieClip = Lib.current;

var silex_ptr:Dynamic = Lib._global.getSilex();

var layout:Dynamic = silex_ptr.application.getLayout(timeline);

layout.registerLayoutContainer(timeline);

layout.registerLayerContainer(layerContainer, LAYER_NAME);

After these calls, the layout will then be initialized and recognised by Silex for load, save operations etc. The layer will be visible in the "pages" tool box.

The animations for the layer are to be registered too. These animations will be played when silex want it to. The following animations can be  registered for a given layer (descriptions come from Silex API technical documentation, especially the constant for animation names):

• preload – Preload animation. This animation is played before any content is loaded (either text or medias) and after the transition of the parent page.
• show – Show content. This animation is played once the content is loaded (at least the text) and after the preload anim is over.
• close – Hide content. This animation is played when the current page is closing before the parent “transition close” anim is started and after the current page “transition close” anim is over (only if a child page was open).
• transition - Show child page. This animation is played when a page is opened in the current layout and only after the show anim is over.
• transitionClose - Hide child page. This animation is played when the current layout has a child page opened in and this child page is closed.

The animations registered like this

layout.registerAnim(showAnim,silex_ptr.config.ANIM_NAME_SHOW, false);

Can be MovieClips or any object with the method « play() ».

The animation(s)

One or more classes in which you can implement the animation(s). For example a fade can let the content of the page appear. This class has to have at least the method « play() » which is called by Silex.

The animations can change the layers appearance – the layers you registered and which contain the dynamic content, i.e. the user  media.

Silex Labs ( http://www.silexlabs.org/the-blog/ ) est une association ayant pour objectif de promouvoir et de contribuer à l’open source Flash. Notre équipe est constituée d’indépendants, professionnels des métiers du numérique, pour qui le fait de participer activement à la communauté open source Flash est une carte de visite précieuse.

Le CMS Flash Silex ( http://fr.wikipedia.org/wiki/SILEX-RIA ) attire de plus en plus d’acteurs du monde du multimédia. Présent dans plus de soixante pays et fort de plusieurs milliers d’installations à travers le monde, l’avenir du projet est aujourd’hui assuré. Sa licence open source est un des facteurs permettant de le faire connaître auprès des clients, et reste un levier décisionnel indéniable quant au choix de Silex par rapport à ses concurrents.

La montée en puissance de Silex, open source Flash CMS nous amène à vouloir agrandir notre équipe pour pouvoir satisfaire les demandes de nos clients de plus en plus nombreux et prestigieux.

Devenez Formateur Silex…

Notre objectif à court terme est de former des professionnels motivés afin de leur permettre de produire des applications et d’être eux-même formateurs Silex. Nous vous proposons donc une série de formations Silex dans les locaux de l’association pendant les mois de mai et de juin 2010. Ces formations peuvent être financées par un CIF / DIF, car l’association est un centre de formation reconnu.

Si vous souhaitez obtenir de plus amples informations à ce sujet, merci de prendre contact avec Franck à l’adresse formation@silexlabs.com

… ou Webdesigner/Flasheur Silex

Nous recherchons activement des professionnels ayant des compétences en programmation Flash AS2 et une connaissance de Silex.

L’objectif est de développer des modules spécifiques (plugins Silex) afin d’adapter notre CMS aux besoins de clients ou de membres de la communauté. Nous sommes ouverts à plusieurs types de collaboration en fonction des projets, des besoins, de vos envies et de votre statut.

Si cela est susceptible de vous intéresser, merci de prendre contact avec Franck par mail à l’adresse franck@silex-ria.org

Je contribue, tu contribues, il contribue…

Participez à l’expansion de Silex en contribuant à votre mesure (traductions, animation FAQ, réalisations, thèmes, composants, plugins…) et bénéficiez en priorité des propositions de projets que nous recevons quotidiennement.

Nous sommes à votre disposition pour vous accompagner, alors n’hésitez pas à nous contacter par mail à l’adresse contact@silexlabs.com

Avis aux développeurs PHP

Nous cherchons en particulier des développeurs PHP expérimentés qui comprennent bien les enjeux de nos projets et l’architecture logicielle.

Il est question de contribuer à amfPhp et à Silex, et d’être leader sur des développements à fort potentiel, en collaboration avec les autres développeurs de l’équipe, qui ont fait le succès de Silex et qui vont faire revenir amfPhp sur le devant de la scène open source Flash. Des connaissances Flash/Flex sont bien sûr appréciées mais pas obligatoires, car nous avons déjà de bonnes ressources de ce côté là.

Votre contribution à la communauté open source Flash ne passera pas inaperçue, mais elle sera bien entendue non-rémunéré. Idéalement nous aimerions 2 ou 3 personnes motivées.

Si vous êtes intéressé(e)s faites nous signe dans les commentaires !

Toute la communauté se joint à la team de Montreuil en ce jour ensoleillé, pour souhaiter à Franck un

BON ANNIVERSAIRE !!!

Il a passé la journée à scanner, rappeler, encadrer, déformer et faire des blagues (c’est bien des blagues?).. Car Franck vient assidument à Montreuil depuis que l’assos est créée et qu’elle a des locaux. Il a commencé par recruter les stagiaires de compétition qui nous entourent en ce moment, il les a formé à Silex avec l’aide de Pol et les encadre au quotidien.

En tant qu’ancien formateur senior (salut papi!), Franck a aussi mis au carré les programmes de formation, il a organisé le local et réunis le matériel nécessaire pour que la 1ere session de formations ait lieu, il y a un mois. Depuis il n’arrête pas, il s’occupe des supports de cours et de tout ce qui fait que la formation Silex est dynamique et professionnelle. La 2e session approche, allez Francky tu tiens le bon bout !

Merci en tous cas, pour tes bonnes blagues, pour la place que tu prends si bien, pour ton naturel naturellement nature… et pour TA PATATE PERMANANTE !

Voici la liste des correctifs et améliorations majeures qu’intègre cette nouvelle version:

- Le coeur de Silex a été optimisé, 30% plus petit et 30% plus efficace, grâce à une intégration complète Silex/amfphp
- Nouvel éditeur de texte, le premier d’une série de boîtes à outils avec support du multi écran (travail sur plusieurs écrans)
- Système de plug-ins: il est maintenant possible de faire des plugins qui peuvent modifier le comportement du Silex, en PHP, ActionScript et JavaScript
- Correction de bugs: compatibilité avec Google Chrome, des bugs dans le manager, erreurs PHP en mode strict, …
- Optimisation de la page HTML pour les moteurs de recherche
La bonne nouvelle est que le projet Silex est repassé dans le TOP100 sur Sourceforge !
Téléchargez la depuis sourceforge => http://sourceforge.net/projects/silex/

Ce petit composant pour OpenOffice Calc (Tableur) vous permet à vous et/ou à vos clients d’envoyer un tableau de données (fichier excel) sur le serveur. Il est donc très facile de mettre à jour ses données sans connaissance supplémentaire que la maitrise d’un simple tableur.
Cet outil est le pendant du composant ExcelConnect qui permet à Silex de charger des données depuis un fichier excel pour dynamiser tout ou partie de vos applications multimédias.
Télécharger cet outil à l’adresse suivante: http://wp-manager.silex-ria.org/?p=495

Pol vient de donner naissance à un nouveau thème pour Silex: Association 2010.

Ce thème ainsi que les précédents sont disponibles gratuitement depuis le manager ou sur la plateforme d’échange.

Télécharger ce thème à l’adresse suivante: http://wp-manager.silex-ria.org/?p=486

Avec l’aide de nos stagiaires motivés, de nouveaux thèmes devraient voir le jour dans les semaines/mois à venir.