Setup Info for: My Custom Module

Here are a few things you can do to get your module and its source code ready for the CDN.

• If you have not already done so, you need to fork the yui3-gallery project on GitHub.

  If you are not familiar with the procedure for forking a project, Github provides a detailed guide on forking here.

• You then need to clone the builder project as well. Note that this needs to be cloned in the same directory as your yui3-gallery fork.

  git clone git://github.com/yui/builder.git

• You also need a working version of Java and Ant installed. You can test your configuration with these commands:

  ant -version
  //Prints something like:
  Apache Ant version 1.7.0 compiled on July 20 2009
  
  java -version
  //Prints something like:
  java version "1.6.0_15"       

Build File Setup

After you fork the yui3-gallery project, you need to configure your build files so you can create the files needed for a CDN push.

cd yui3-gallery

mkdir build/gallery-my.custom.module
mkdir -p src/gallery-my.custom.module/js src/gallery-my.custom.module/tests src/gallery-my.custom.module/assets/skins/sam

touch src/gallery-my.custom.module/build.xml

touch src/gallery-my.custom.module/build.properties

touch src/gallery-my.custom.module/js/my.custom.module.js

Sample build.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- YUI 3 Gallery Component Build File -->
<project name="My Custom Module" default="local">
    <description>My Custom Module Build File</description>
    <property file="build.properties" />
    <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
</project>

Sample build.properties

# My Custom Module Build Properties
 
# As long as the 'builder' project is cloned to the default folder
# next to the 'yui3-gallery' project folder, the 'builddir' property does not 
# need to be changed
#
# If the 'builder' project is checked out to an alternate location, this
# property should be updated to point to the checkout location.
builddir=../../../builder/componentbuild
 
# The name of the component. E.g. event, attribute, widget 
component=gallery-my.custom.module
 
# The list of files which should be concatenated to create the component
# NOTE: For a css component. (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead. 
# component.jsfiles=my.custom.module.js, my.custom.moduleHelperClass.js, my.custom.moduleSubComponentClass.js
component.jsfiles=my.custom.module.js
 
# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
component.requires=node, event
 
# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
component.supersedes=another.custom.module
 
# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
component.optional=
# If your module has a skin file, set this flag to "true"
component.skinnable=false
#component.skinnable=true

Sample Javascript File

/*
* This wrapper code is added by the build system.
* It's only here for informational purposes.
*/
YUI.add('gallery-my.custom.module', function(Y) {
 
    //Add the code for your module here.
    //Here "Y" is the YUI instance this module was added to.
 
}, '@VERSION@' ,{requires:['node',' event']});

Building your module

Building your module is as simple as running ant all from the source directory of your module.

cd src/gallery-my.custom.module

ant all

Module Skins

If your gallery module has a CSS skin, create the "sam" skin directory structure like this:

Note: The only official skin supported in YUI 3 is the default "sam" skin. You are free to submit a "CSS module" and build your own CSS skin that way, but currently builder only supports building "sam" skin.

cd yui3-gallery

#if not already created
mkdir -p src/gallery-my.custom.module/assets/skins/sam

touch src/gallery-my.custom.module/assets/gallery-my.custom.module-core.css
touch src/gallery-my.custom.module/assets/skins/sam/gallery-my.custom.module-skin.css

Don't forget to set component.skinnable=true in your build.properties file.