The creator function
The Creator Function
The creator function is not a constructor and does not make use of the "new" keyword. Rather, it replaces the need for a constructor and allows the ability to separate public and private methods.
The code for the creator function is marked in the code below.
(function (nameSpace) {
var privateFunc = function () { some private function };
//start of creator function
nameSpace.componentName = function (container, options) {
var that = fluid.initView("nameSpace.componentName ", container, options);
that.refreshView() {
some refresh function
}
return that;
};
//end of creator function
})(nameSpace);
Let's look at this in more detail.
Anonymous functions
By wrapping all of the javascript for the component inside an anonymous function, we can separate private and public methods. The anonymous function is accomplished with the code below.
(function () {
// place javascript here
})()
The creator function signature
The next step is to prepare the creator function for the component. Its signature is defined by giving the function a name and assigning it to a function with the parameters (container, options).
- componentName is the name of the component you are creating.
- container is a "jQueriable" element (a string representing a selector, a DOM element, or a jQuery) which will contain the component.
- options is a JavaScript object specifying the configuration details of the component
The result is shown below.
(function (nameSpace) {
nameSpace.componentName = function (container, options) {};
})(nameSpace)
Read more about the creator function:
initView
To make componentName an actual component, the first task within the creator is to create a new object called that, which is assigned the value of fluid.initView(componentName, container, options).
(function (nameSpace) {
nameSpace.componentName = function (container, options) {
var that = fluid.initView("nameSpace.componentName", container, options);
return that; //should always be the last line of the creator function
};
})(nameSpace)
Read more about the creator function and initView:
More detailed information about the initView function can be found here.
Public functions
To add public functions to the component, you can define a function within the scope of the creator function and add it to the that object. For example if we wanted to add a refreshView function to the component, the code would look like...
(function (nameSpace) {
nameSpace.componentName = function (container, options) {
var that = fluid.initView("nameSpace.componentName", container, options);
that.refreshView() = function { some refresh function };
return that;
};
})(nameSpace)
To call this function you use:
nameSpace.componentName.refreshView();
Private functions
Functions defined within the anonymous function but outside the creator function and without having the nameSpace prefix, will be private and inaccessible to the global namespace. Thus, a private function can be defined as shown below.
(function (nameSpace) {
var privateFunc = function () { some private function };
nameSpace.componentName = function (container, options) {
var that = fluid.initView("nameSpace.componentName", container, options);
that.refreshView() = function { some refresh function };
return that;
};
})(nameSpace)
Read more about private functions:
Writing a creator function for Flutter
Try writing a creator function for Flutter's status view. Download the fluid:Sample Code. Rename the file to StatusView.js and place into the "flutter-infused" directory. The following tutorial code for the creator function should be added starting at line 41 (see comments within the code).
Flutter's views take two extra arguments which are not usually required for Fluid components, however Fluid components are flexible and can accommodate additional arguments. These two arguments, "twitter" and "events", are added to the statusView creator function as shown below.
/**
* A View representing the Flutter status panel.
*
* @param {Object} container
* @param {Object} options
*/
fluid.flutter.statusView = function (container, twitter, events, options) {
};
Next call initView
/**
* A View representing the Flutter status panel.
*
* @param {Object} container
* @param {Object} options
*/
fluid.flutter.statusView = function (container, twitter, events, options) {
var that = fluid.initView("fluid.flutter.statusView", container, options);
that.twitter = twitter;
that.events = events;
};
Now add the public methods and any other function that the creator function needs to call.
/**
* A View representing the Flutter status panel.
*
* @param {Object} container
* @param {Object} options
*/
fluid.flutter.statusView = function (container, twitter, events, options) {
var that = fluid.initView("fluid.flutter.statusView", container, options);
that.twitter = twitter;
that.events = events;
/**
* Updates the user's status on Twitter.
*
* @param {String} statusMessage the status message to send to Twitter
*/
that.updateStatus = function (statusMessage) {
// Post the status to the server
that.twitter.postStatus(statusMessage,
that.events.onStatusSaveSuccess.fire,
that.events.onStatusSaveError.fire);
};
/**
* Shows a message to the user when their status has been successfully updated on Twitter.
*/
that.showStatusUpdateSuccess = function () {
showStatusUpdateMessage(that, "Your status was successfully updated!");
// Clear the edit field so the user has another affordance showing that their status update was a success.
that.locate("statusEdit").val("");
};
/**
* Displays a polite error message to the user if there was a problem updating their status on Twitter.
*/
that.showStatusUpdateError = function () {
showStatusUpdateMessage(that, "There was a problem updating your status on Twitter.");
};
setupStatusView(that);
return that;
};
When you are done, the code should look like this - fluid:Complete Code