Develop a view that the provider will use to add an offer.
In this document:
The offer-new
view is called from the offers
view, when a user clicks the New button.
The view controls the offer creation process.
A JavaScript code in offer-new.html
must perform the following operations:
It defines some widgets needed for setting a new offer. Initially, it proposes
default values for it using the newoffer.json
file.
When a user clicks Cancel, it forwards the user back to the offers
view. On Submit click, it
saves the new offer and then proceeds to the offers
view.
This section continues the demo project from the previous step.
When creating the ui/offer-new.html
file from scratch,
keep in mind the Typical Structure of View File and follow these steps.
Once the HTML structure is created as presented in the previous step, create the structure of the main script:
require([
"dojo/when",
"dijit/registry",
"dojox/mvc/getPlainValue",
"dojox/mvc/at",
"aps/ResourceStore",
"aps/WizardData",
"aps/load",
"aps/Memory",
"./displayError.js",
"dojo/text!./newoffer.json",
"aps/ready!"
], function (
when,
registry,
getPlainValue,
at,
Store,
wd,
load,
Memory,
displayError,
newOffer
) {
/* Declare the data sources */
var store = new Store({
apsType: "http://aps-standard.org/samples/offer1p/offer/1.0",
target: "/aps/2/resources/" + aps.context.vars.cloud.aps.id + "/offers"
}),
model = JSON.parse(newOffer),
oses = new Memory({
/* ...List of operating systems for selecting one for the offer */
});
var widgets =
[
/* ...Create widgets here */
];
load(widgets).then(function(){
/* ...Once the widgets are initialized, create handlers for the navigation buttons */
});
});
In the code, we use the following data sources:
The store
object will interact with the APS controller for creating an offer based on the specified APS type.
The offer must be linked with the application root resource (cloud
) whose presentation
is passed by the cloud
variable (aps.context.vars.cloud
) declared in the navigation tree earlier.
The offers
link collection is used for linking the cloud
resource with offers. The store declared
this way will work only with the offers linked with the cloud
resource of the current APS
application instance.
The model
object will be used internally for syncing offer properties with widgets. Initially, it will
accept the default properties from the newoffer.json
file defined earlier and sync them with the widgets.
The oses
object contains a list of operating systems that will be proposed to a user in a selection list.
Define the list of operating systems:
oses = new Memory({
idProperty: "value",
data: [
{ value: "centos7", label: "CentOS 7" },
{ value: "debian", label: "Debian" },
{ value: "windows2008", label: "Windows 2008 Server" },
{ value: "windows2012", label: "Windows 2012 Server" }
]
});
Create and load widgets:
var widgets =
["aps/PageContainer", { id: "page"}, [
["aps/FieldSet", {id: "offerNew_general", title: true}, [
["aps/TextBox", {
id: "offerNew_offerName",
label: "Offer Name",
value: at(model, "name"),
required: true
}],
["aps/TextBox", {
id: "offerNew_description",
label: "Description",
value: at(model, "description")
}]
]],
["aps/FieldSet", {id: "offerNew_props", title: true}, [
["aps/Select", {
id: "offerNew_os",
label: "OS",
value: at(model.platform.OS, "name"),
store: oses
}],
["aps/Slider", {
id: "offerNew_cpu",
label: "CPU Number",
minimum: 1,
maximum: 16,
value: at(model.hardware.CPU, "number"),
step: 1
}],
["aps/Slider", {
id: "offerNew_disk",
label: "Disk Space",
minimum: 1,
maximum: 100,
value: at(model.hardware, "diskspace"),
legend: "GB",
step: 1
}],
["aps/Slider", {
id: "offerNew_ram",
label: "RAM",
minimum: 128,
maximum: 8192,
value: at(model.hardware, "memory"),
step: 128,
legend: "MB"
}]
]]
]];
load(widgets) // Followed by function *then()*
The aps/Select
widget gets a list of OSes from the local store oses
. The values of all widgets
are synced with model
.
Once the widgets are loaded, define handlers for processing the standard navigation buttons.
Cancel button:
aps.app.onCancel = function() {
aps.apsc.gotoView("offers");
};
It returns the user back to the list of offers.
Submit button:
aps.app.onSubmit = function() {
var page = registry.byId("page");
if (!page.validate()) {
aps.apsc.cancelProcessing();
return;
}
when(store.put(getPlainValue(model)),
function() {
aps.apsc.gotoView("offers");
},
function(err) {
displayError(err);
}
);
};
This handler will store the new offer in the APS database and then pass control to the list of offers.
This completes the development of a view for creating a VPS offer.
The project file you have created is similar to the respective file in the
sample package
.