What’s in my Cocktail ?

This article is an overview of the source code organisations of the cocktail project.

Alright, let’s start here :

https://github.com/silexlabs/Cocktail

We’re going to focus on the cocktail folder which contain all the actual cocktail code.

https://github.com/silexlabs/Cocktail/tree/master/cocktail

The root

This folder contains the following items :

  • api
    This contains the cocktail embedding classes, to be used to embed cocktail inside your application. Here is a tutorial to leveraging this api.
  • core
    This is the big one, contains the vast majority of code, more on this below
  • plugin
    This contains the start of a plugin system, which is the equivalent of the browser’s plugin you can install such as the flash player. For now this contain only code to embed swf file with object tag when you build for the flash target. A full fledged plugin system might eventually happen.
  • port
    Another big one, this contains all the platform specific code. If you want to check how the native flash/NME api is leveraged, this happens all in here. More on it below.

This folder also contains some haxe files such as Dom.hx, Lib.hx… Thoses files mimick the Haxe/JS API (for haxe 2.10), so that when you build with cocktail, you can use the same api as when building for regular JS.

Core

https://github.com/silexlabs/Cocktail/tree/master/cocktail/core

All this code is cross-platform and is the bulk of cocktail, it must be around 85% of  it but don’t quote me on it. By cross-platform I mean that it contains no pre-processor instruction (haxe conditional compilation, similar to C++ macro) and that it doesn’t rely on any target specific api. For instance there is not any call to the flash api within this package.

As a consequence, this code can be compiled to any Haxe target, we’ve successfuly build this to flash, NME, php, neko and even the macro target of Haxe ! Macro in Haxe are Haxe methods called during compilation, used for code generation.

The core package contains the code building the DOM and laying out and rendering the document.

Port

https://github.com/silexlabs/Cocktail/tree/master/cocktail/port

This code contains all the platform specific code and abstract it so that the core package can access a cross-platform api to access native functionnalities.

For instance, when rendering the document, let’s say the document contains a div with a red background. The core package is in charge of determining the size and the position of the rectangle  and when to render it so that the z-index of the element is respected. It also normalizes the red color defined in CSS to an rgba color.

However, ultimately, a drawing method from the native platform’s api needs to be called to actually display a red rectangle on screen. That’s where the port package come in handy. It will present an interface to the core package, for instance a « drawRect » method. This method in turn will be implemented for each target cocktail can be built to.

That’s it for now, we’ll delve further into Cocktail’s internal in subsequent articles.

Laissez un commentaire

News letter

Evénements Silex Labs sur Paris et sa région: Inscrivez vous à la Newsletter mensuelle

Silex Labs community Tweets

Facebook page