I am building a kind of dashboard for my web application. And i need something like a grid to allow the user to create the layout of the "widgets". I kind og like the way that azure does it:
What i am after is a way to arrange and resize my components by letting them snap to the grid. And at the same time allow them to be moved around. I started out by using the JQueryUI for drag and drop, but i just cant seem to get the grid lines working properly and then the placement. Furthermore i need a kind of object in my Javascript that i can serialize to json or xml to post it to my server.
Should i build this myself, or are there JS frameworks for this. Can this be done in plain jquery/jqueryUI and how do i draw the background?
Hope this can help: ReactWM
It's in React though... Not sure about jQuery and jQuery UI.
Related
i plan to implement a webapp that allows users to add widgets that are predefined by me in something like a menu (e.g. two buttons and a card with some content) to something like a canvas.
I then want to save this layout so it can be later restored on the same device as well as on an other device.
There should also be a fast way of deciding on one device to add one widget to a layout that is shown on another device right now. This addition i made from one device should be visible on the other device instantely.
I thought about how to do this but am unsure, I saw some stuff about saving it in databases or in json format like in this example with react https://www.storyblok.com/tp/react-dynamic-component-from-json.
As I am a beginner, I with vue.js as well as json etc I am quite unsure on how to decide how to implement such a functionality.
For example with a database/json file I am unsure on how the other device will receive that something was added by another device.
I am glad on any tips or suggestions.
One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin
USECASE: I am starting with a project which involves a lot of client side scripting. It is similar to a mini CMS where user can drag and drop html components. Somewhat similar to this. Now I am in a situation where I have to choose a MVC framework for defining the components that the user will be working on. (performing operations like drag, resize, delete etc).
Now the problem I am facing is,in choosing a framework which would be easy to learn and implement. I have the basic knowledge of Javascript and jQuery and have been using it for some time,but no experience with MVC.
My research from past 2 days says backbone.js is good to start,but I would like comments/suggestions over the flexibility it gives on handling html components and DOM elements. How can I store the initial content of the HTML components? (Outer boxes and structure).
Also, how can I handle multiple components of same type? Generating Id's dynamically is an option, but it becomes difficult to manage multiple elements with dynamic ids. Is there any other way they can be handled?
Which framework would it be easy to handle events on these components?
i use backbone for a web app which involves dragging and dropping, and i use jquery ui to implement the drag and drop features. They integrate pretty well imo, when you want to implement a droppable backbone view, for example
render: function(){
var $el = this.$el,
over = false,
origWidth;
if (!this.$el.is('.ui-sortable'))
this.$el.sortable({
revert: false,
axis: 'y',
placeholder: 'placeholder',
items: '.load-order',
containment: this.el,
receive: this.onOrderDrop,
over: this.onOrderOver
out: function(e, ui){
// Resize back to original width
if (over && ui.helper)
ui.helper.stop().animate({width: origWidth}, 'fast');
over = false;
}
update:
with backbone views, you have a skeleton html structure which is then incremented with backbone views.
Each view has a template which is rendered with model data
you can read more about it at Backbone Essentials
also i made a small todolist to demonstrate draggable event with backbone
http://www.github.com/joaoxsouls/todolist
Why do you want to use BackboneJS?
If its not a necessity, and you simply want a drag drop interface, you might want to look at this: http://omshankar.kodingen.com/engine-1.73/
The JavaScript has been minimised only to make it single line. Functions and variables are all intact, which in Chrome can be seen by clicking on {} in Sources
If its an extreme necessity, you can definitely have drag drop in backbone. Only thing is that you might have to initialize a drag drop again in the item's render function, every time its called.
Regarding having an HTML structure, outer box and components, make your HTML the way you want. It can be done. A sample Backbone application: http://omshankar.kodingen.com/exp/backbone-html5-dd/
It also has a drag-drop, but that's dragging image files from your OS into browser, not of your relevance
If you want to store HTML, you can do via local storage, or have that simply in your HTML file. Apply/Make Backbone view only to those parts that are dynamic
I suggest Angular JS? It has great binding and directive features.
AngularJS is great, especially if you couple it with something like ConversationJS:
https://github.com/rhyneandrew/Conversation.JS
I'm not a big fan of how "spaghetti" angular feels, and Conversation allows you to decouple quite a bit of it without changing the way it works. It makes the code base quite a bit cleaner.
Hi Im new to GWT and Google App Engine. Im trying to layout which looks like the image. However, Im not sure whats the best way to achieve this.
There are several ways according to GWT documentation such as: UIBinder, Layout Panels (Im using this approach in the image).... etc.
However, my UI is not that complicated. I have a div with the navigation bar on top, a div with a map(Javascript, a div with Facebook comments(javascript), and a div with some functionality which I wrote for ratings etc.
Thus mostly this webpage invokes a lot of javascript and third party stuff.
Here is some code that accomplishes this
String header = "<div><h3>Navigation bar here</h3></div>";
String east = "<div><h3>Rating System here</h3></div>";
String south = "<div><h3>Facebook comments here</h3></div>";
dock.addNorth(new HTML(header), 75);
dock.addSouth(new HTML(south),50);
dock.addEast(new HTML(east), 300);
dock.add(map);
RootLayoutPanel.get().add(dock);
I tried entering some Javascript in that html string to be added to the map. However, it didnt show up on the view. Seems like the html only works if its text, is that caorrect?
Whats the best way to construct this in GWT?
Could someone please point me to some examples of code/ tutorials?
Thanks
I built a website like you project to do (link in my profile).
There is a jar file available for mapping maps v3 in gwt.
Here it is : http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-3.8.0-pre1.zip
Take care of GAE ... if your application must stay in "free", and you plan to make it available for others users, you will ran out of quota pretty fast :-(
(I gets 60% of instance time with only googlebots ...)
Anyway, just make an almost empty html, and build your panels from scratch.
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl