We're working on creating a modeling tool based on the GMF framework and tools. We have a requirement to allow users to add views (figures) at runtime and use them in their diagrams. We will be using SVG files to represent figures.
What's the correct structure of EditParts and other GEF related classes in such a case? We were thinking of implementing a single GEF EditPart class, that would create the appropriate figure based on a parameter (path to SVG file) present in the model. So far it doesn't seem to be working.
There HAS to be someone who's already done something like this before. Googling and the Eclipse forums have not been helpful so far...
Well we found a (partial) solution. We have one element, and depending on a parameter we create a child figure inside it, which uses an SVG file (based on the parameter).
The following test code is called in the constructor of the Figure:
ScalableImageFigure svg; URL url;
if (type == 1) { url =
ArchitectureStudioDiagramEditorPlugin.getInstance().getBundle().getEntry(
"icons" + IPath.SEPARATOR + "shadow-box.svg"); } else { url =
ArchitectureStudioDiagramEditorPlugin.getInstance().getBundle().getEntry(
"icons" + IPath.SEPARATOR + "star.svg"); } svg = new
ScalableImageFigure(RenderedImageFactory.getInstance(url),
true, true, true);
this.add(svg);
Now we need to figure out how to have multiple elements in the Palette.
The correct way is to have one to one mapping between figure and editpart . Also painting task should be left to the figure . How the image should be painted , the logic must be inside the figure not in the editpart.
Thanks
Related
I've searched thru Corvid docs and Stack, not finding anything.
Is there a way to appendChild() in Wix Corvid(Code)?
EDIT: Wix does not allow DOM access directly. I assumed that people answering this would know i was looking for an alternative to appencChild and knew this method could not be used as is in Wix.
so to clarify: is there a way to add a child to a parent element using Wix's APIs?
It depends what you are trying to achieve,
the only thing off the top of my head is adding more items to a repeater
which you can do by first getting the initial data from the repeater, adding another item to array and reassign the data property of the repeater
const initialData = $w('#repeater').data
const newItem = {
_id: 'newItem1', // Must have an _id property
content: 'some content'
}
const newData = [...initialData, newItem]
$w('#repeater').data = newData
https://www.wix.com/corvid/reference/$w.Repeater.html#data
In Corvid, you cannot use any function which accesses the DOM.
Coming from one of the developers of Corvid:
Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can't try to trick it by using parent, window, top, etc.
Javascript files can be added to your site's Public folder, but the same limitations apply - no access to the DOM.
Read more here: https://www.wix.com/corvid/forum/main/comment/5afd2dd4f89ea1001300319e
I'm still relatively new to programming and I have a project I am working on. I am making a staff efficiency dashboard for a fictional pizza company. I want to find the quickest pizza making time and display the time and the staff members name to the user.
With the data charts it has been easy. Create a function, then use dc, e.g dc.barChart("#idOfDivInHtmlPage")
I suspect I might be trying to be too complicated, and that I've completely forgotten how to display any outputs of a js function to a html page.
I've been using d3.js, dc.js and crossfilter to represent most of the data visually in an interactive way.
Snippet of the .csv
Name,Rank,YearsService,Course,PizzaTime
Scott,Instore,3,BMC,96
Mark,Instore,4,Intro,94
Wendy,Instore,3,Intro,76
This is what I've tried so far:
var timeDim = ndx.dimension(function(d) {
return [d.PizzaTime, d.Name]
});
var minStaffPizzaTimeName = timeDim.bottom(1)[0].PizzaTime;
var maxStaffPizzaTimeName = timeDim.top(1)[0].PizzaTime;
}
then in the html
<p id="minStaffPizzaTimeName"></p>
<script type="text/javascript" src="static/js/graph.js">
document.write("minStaffPizzaTimeName");
</script>
You are surely on the right track, but in javascript you often have to consider the timing of when things will happen.
document.write() (or rather, anything at the top level of a script) will get executed while the page is getting loaded.
But I bet your data is loaded asynchronously (probably with d3.csv), so you won't have a crossfilter object until a bit later. You haven't shown these parts but that's the usual way to use crossfilter and dc.js.
So you will need to modify the page after it's loaded. D3 is great for this! (The straight javascript way to do this particular thing isn't much harder.)
You should be able to leave the <p> tag where it is, remove the extra <script> tag, and then, in the function which creates timeDim:
d3.select('#minStaffPizzaTimeName').text(minStaffPizzaTimeName);
This looks for the element with that ID and replaces its content with the value you have computed.
General problem solving tools
You can use the dev tools dom inspector to make sure that the p tag exists with id minStaffPizzaTimeName.
You can also use
console.log(minStaffPizzaTimeName)
to see if you are fetching the data correctly.
It's hard to tell without a running example but I think you will want to define your dimension using the PizzaTime only, and convert it from a string to a number:
var timeDim = ndx.dimension(function(d) {
return +d.PizzaTime;
});
Then timeDim.bottom(1)[0] should give you the row of your original data with the lowest value of PizzaTime. Adding .Name to that expression should retrieve the name field from the row object.
But you might have to poke around using console.log or the interactive debugger to find the exact expression that works. It's pretty much impossible to use dc.js or D3 without these tools, so a little investment in learning them will pay off big time.
Boom, finally figured it out.
function show_fastest_and_slowest_pizza_maker(ndx) {
var timeDim = ndx.dimension(dc.pluck("PizzaTime"));
var minPizzaTimeName = timeDim.bottom(1)[0].Name;
var maxPizzaTimeName = timeDim.top(1)[0].Name;
d3.select('#minPizzaTimeName')
.text(minPizzaTimeName);
d3.select('#maxPizzaTimeName')
.text(maxPizzaTimeName);
}
Thanks very much Gordon, you sent me down the right path!
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...
I have an ASP.NET MVC 3 site that makes use of a ClientDependency framework for dep. resolution (CSS/JS).
My base path's are defined in /Shared/_Layout.cshtml like this:
#MvcHtmlString.Create(Html.RenderCssHere(new List<IClientDependencyPath> {
new BasicPath("Base", "~/Content/themes/base"),
new BasicPath("Content", "~/Content")
}))
I want to have one page without a standard layout. I force it by calling
#{
Layout = null;
Html.RequiresCss("FileUpload/fileUpload.css", "Content", 20);
}
However, I can no longer request a dep. like shown above, since "Content" path isn't defined.
I am rather new to ClientDependency framework, so which is the best way for me to get my dependencies in a non-layout view?
I need to have the Path declared somewhere in the View, as well as the RenderCss/JsHere element, so if I don't use a shared layout, I had to re-declare it in my custom page all together.
I have two labels in an figure . by default gef allows direct editing to be performed when the user clicks the edit part. I have two labels in the same figure i have to perform direct editing on the label on which the mouse was clicked . but now when i click both the labels are displaying for direct edit ?
i have placed the coding
#Override
public void performRequest( final Request req )
{
if( req.getType().equals( RequestConstants.REQ_OPEN ) || req.getType().equals( RequestConstants.REQ_DIRECT_EDIT ) )
{
perform directedi()
}
}
you can try to read this article: direct edit is one of the topics
Moreover this is another intresting resource about gef development
I've never done it, but my guess is that either you have to either create an editpart for each label and then each editpart will get the REQ_DIRECT request, or you can plug directly a draw2d listener to the label and create more specific requests.
The first option can be implemented by returning from the containing figure two model children that you can probably store at the parent. The factory should be able go identify them and create a new edit part which in turn creates a figure that only contains a label and which installs the direct edit policy
I don't know how to implement the second solution :-)