I'm pretty new to Dojo and working version 1.10.
I'm looking for a solution to create a widget at runtime, based on data requested from a server.
The application has a tree. If you click on a item in the tree a new tab should be created and a script should be executed to get the data from the server and create the widget. (In most cases its a form, the data from the server describes the types of inputs). The location of the script is stored in the tree node.
At the moment in my application I can click on the tree node -> a contentpane is created and added as a tab. In the contentpane the href-attribute is set to static .html-site like this:
dynWidget.html?scriptlocation=abc
In the .html file I tried to read the parameters from the URL via the location attribute. This, of course, does not work, because the location attribute contains the URL of the complete site not the URL attached in the content pane.
Is there a possibility to get the href-attribute from the contentpane?
Is there a completely diffrent solution for this problem?
Any help appreciated!
Thank you very much!
Your question could do with more detail, but maybe you need:
var node = dojo.byId("contentpane");
var value = domAttr.get(node, "href-attribute");
Save data about tree items in dedicated store
Use Object Pool Pattern for saving opened tabs list
Use require and Widget.addChild()
// Custom name for click event handler. Replace to own.
onItemClick: function(item) {
// Getting data from store. Any item have full path to widget.
var dataItem = store.get(item.id),
requirePath = dataItem.requirePath; // Full path to widget
// Load widget via require function
require([ requirePath ], function(LoadedWidget){
var newTab = new ContentPane({}),
newWidget = new LoadedWidget({});
// Append tab in the global tabs store
desktop.tabs.add(newTab);
// Place new widget to tab
newTab.addChild(newWidget);
// Run new widget:
newWidget.startup();
});
}
Also example for creating widget in runtime:
define([
"dojo/dom-construct",
"dojo/_base/declare",
"dijit/_WidgetBase"
], function(
domConstruct,
declare,
_WidgetBase
){
return declare(
"My.Widget.Name",
_WidgetBase,
{
buildRendering: function(){
this.inherited(arguments); // Call parent method
this.domNode = domConstruct.create("div", {
// Detail properties of DOM element
});
this._button = domConstruct.create("button", {
label: "OKAY"
});
},
_okBtnHandler: function(event) {
// Handler for click by OKAY button
console.log(this); // Instance of widget, not button DOM node
},
startup: function(){
this.inherited(arguments);
// Connect handlers to widget dom elements
// Also, "this" for handler now is My.Widget.Name instance, not DOM Button element
this.connect(this._button, "onClick", "_okBtnHandler");
}
}
);
});
Related
This is an instance of Rappid Toolkit which uses jointJS for building visual tools as for web development. http://i.stack.imgur.com/6XSis.png
In this toolkit you can make a graph which can become a website.
My problem is the following one:
In every single element of this graph there is a box below it with:x,y,width,height,angle.
I want to change this information of this boxcontent and to display some info from this element but the code in which I have to add my snippet is the following(var Halo is the var for my element in the graph):
var halo = new joint.ui.Halo({
cellView: cellView,
boxContent: function(cellView) {
return"Here I want to display my box content info instead of x,y,width,height, angle";
}
}).render();
If I try to add my code inside it to access in JSON format my current element info my full code is:
var halo = new joint.ui.Halo({
cellView: cellView,
boxContent: function(cellView) {
// Drawing
var selectedObjectDataText = JSON.stringify(this.cellView.toJSON());
var selectedObjectDataJSON = JSON.parse(selectedObjectDataText);
return(selectedObjectDataJSON[0].wi_name);
}
}).render();
where wi_name is the name of my element but in the first line I can't access the specific element of my graph.
var selectedObjectDataText = JSON.stringify(this.cellView.toJSON());
Is there any global way to access my halo(my graph element) since this.cellView.toJSON() doesn't work?
I tried this.model.toJSON() this.cellView.model.toJSON() etc with no result
Note that JointJS links and elements are Backbone Models (linkView and elementView are Backbone Views).
To get the current value of an attribute use get() method.
boxContent: function(cellView) {
return cellView.model.get('wi_name');
}
Alternatively you can use prop(), that can return also nested properties of a model.
boxContent: function(cellView) {
return cellView.model.prop('wi_name');
}
It worked for var selectedObjectDataText = JSON.stringify(cellView.model.toJSON());
Thank you all for your support.
We are given a requirement such that the page should be moved to a location based on the path provided at the page properties.
How to implement that in Touch UI?
In Classic UI we can use edit config and may use listeners and write respective JS code on that.Correct me if I am wrong.
Your question alludes to wanting to use JavaScript to move the page. I've put together an example using the Touch UI dialog. It works, but would require polish to validate user input and prevent string manipulation errors.
In this example, I'm using the dialog-success event that triggers after a dialog is saved. See Touch UI Events. I check to see if the textfield with the CSS selector is populated, and if it is, I post back to the Sling Post Servlet using the #MoveFrom suffix to move the node and its children (the page and the jcr:content, etc...). If that operation is successful, navigate the user to the new page.
In your dialog, add a textfield and give it a unique class name:
<movePage
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Move page to:"
class="move-page"/>
Then add this JavaScript to a ClientLib used only in authoring mode such as cq.authoring.editor:
(function ($, $document) {
'use strict';
$document.on("dialog-success", function(e) {
var newPath,
lastSlash,
moveFromSuffix,
newDirectory,
currentPath,
data;
e.stopImmediatePropagation();
newPath = $('.move-page').val();
if (newPath) {
lastSlash = newPath.lastIndexOf('/');
moveFromSuffix = newPath.substring(lastSlash + 1) + Granite.Sling.MOVE_SUFFIX;
newDirectory = newPath.substring(0, lastSlash);
currentPath = Granite.HTTP.getPath().replace('/editor.html', '');
data = {};
data[moveFromSuffix] = currentPath;
$.post(newDirectory, data)
.done(function(){
window.location = '/editor.html' + newPath + '.html';
})
.fail(function(){
$(window).adaptTo('foundation-ui').alert('Alert', 'Could not move page');
});
}
});
})($, $(document));
However, another option would be to do it server side by implementing a custom Sling Post Processor.
I have created a custom section in umbraco to manage some data in an SQL database.
I can edit items OK but when adding I need to refresh the page to see my new row in the custom tree on the left.
How can I cause a refresh of my custom tree using AngularJS? My tree is called "clients".
I have tried debugging the code and looking at the source to find the event but I can't seem to work out how to do it.
Is there a method I can call on the umbTreeDirective somehow? Or an event to subscribe to?
I am fairly new to AngularJS and am struggling a little.
You're looking for the navigationService.
This line is example of a syncTree call:
navigationService.syncTree({ tree: 'clients', path: content.path, forceReload: false, activate: true });
Here's a contrived, spaghetti promised but full example:
angular.module("umbraco")
.directive('nowplaying', ['navigationService', 'contentResource', 'contentEditingHelper', function (navigationService, contentResource, contentEditingHelper) {
//spaghetti example to create new document
contentResource.getScaffold(parentId, alias)
.then(function (scaffold) {
var myDoc = scaffold;
myDoc.name = name;
//we have minimum to publish
contentResource.publish(myDoc, true, [''])
.then(function (content) {
$scope.newlyCreatedNode = content;
//Sync ('refresh') the tree!
navigationService.syncTree({ tree: 'clients', path: content.path, forceReload: false, activate: true });
});
});
}]);
All of the Belle documentation lives here. -I'm not sure it's actively maintained, i can say for certain that one or two signatures have changed since it was first posted. That aside, it's the best resource i know of to interact with all the umbraco exposed modules and services.
I am trying to display a dojo grid on click of a button.
This is the function that gets called once the button is clicked:
function initAndDisplayDataGtrid(){
var dataStore = new dojox.data.CsvStore({url: path});
var chartDivNode=dojo.create("div");
chartDivNode.setAttribute("id","chartDivId");
chartDivNode.setAttribute("class", "toggle_container");
var grid = new dojox.grid.DataGrid({
query: {},
store: dataStore,
autoWidth:"2",
autoHeight:"5",
columnReordering:true,
structure: chartLayout,
noDataMessage: localizedLabel.NO_RESULTS
});
grid.placeAt("chartDivId");
grid.startup();
}
But this is throwing an error: TypeError: _3d6 is null when I check in firebug.
Not sure what might be null at this point.
In the code you have provided, you dynamically create a new element that you then call "chartDivId". You then execute a "placeAt" call to place your newly created grid as a child of "chartDivId". However, the placeAt call searches the document and won't find "chartDivId" because it has not yet been attached to the document as a whole.
See the following Dojo documentation on how to create a new element and insert it into the page.
http://dojotoolkit.org/reference-guide/1.7/dojo/create.html
It seems that there are parameters to the dojo.create() method. The 1st is the type of element to create, the 2nd are any options you may wish to pass ... but the 3rd is where within the document the new element should be attached.
This question is based on my previous one Switching from a region to another in Marionette, views are not rendered correctly. It differs from it since I'm asking if the approach I'm following is correct or it exists another approach to perform the switching between regions.
I've created a layout with two different regions. On initialize the layout loads two views in two regions of my layout. Say ViewA and ViewB. Within ViewA an event is triggered. The event is consumed by the layout to switch and other two views are injected. Say ViewC and ViewD.
Is this approach correct or do I have to follow another pattern? Routing?
Here some code where comments highlight the important parts.
onConfirm : function() {
this.leftView = new ViewC();
this.rightView = new ViewD();
this.leftRegion.show(this.leftView);
this.rightRegion.show(this.rightView);
},
initialize : function() {
// listen for event triggered from ViewA
// e.g. GloabalAggregator.vent.trigger("ga:confirm");
// where "ga:confirm" is a simple string
GloabalAggregator.vent.on("ga:confirm" , this.onConfirm, this);
this.leftView = new ViewA(), // creating here a new ViewC the style is applied correctly
this.rightView = new ViewB(); // creating here a new ViewD the style is applied correctly
},
onRender : function () {
this.leftRegion.show(this.leftView);
this.rightRegion.show(this.rightView);
}
To switch between views in a Layout usually a Controller is used, have a look at this gist for an example.
Basically you will have to create a new controller
var controller = Marionette.Controller.extend({
initialize: function(options){
this.leftRegion = options.leftRegion;
this.rightRegion = options.rightRegion;
},
swap: function() {
// do the region swapping here
}
});
You could create it like this from the view:
var controller = new MyController({
leftRegion: this.leftRegion,
rightRegion: this.rightRegion
});
(where this referes to the view) and have it listen on that event with the help of listenTo.
A couple more examples from the author of Marionette you might find useful:
fiddle
wiki article