I have a web page which has three <div> elements:
Right_bar contains several layouts (nothing to do with this question)
Bottom_bar contains several components e.g. calculator, logo, a group of buttons etc. each component uses a <div> and must be resizable and draggable.
And a Working Area, where all the components are dropped & resized. Also a user can resize & change the location of components anywhere in the Working Area. Once a user sets a component then the page must be saved in same style and it shouldn't be changed even after refreshing the page.
My questions are:
Should I use a database to save the location of component.
Which one should I use: JQuery / AJAX / anyother?
If you know of any tutorials please let me know although I am beginner in JavaScript, Basically a Java programmer.
Note: on the server side I am using Servlet.
Whenever the user drops an element, launch a simple Ajax request that will pass the new value to the server.
try {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE
}
catch(e)
{
var xmlhttp = new XMLHttpRequest(); // Other browsers
}
xmlhttp.open('GET', 'yourServerScript.url?param=value', true);
xmlhttp.send(null);
You may want to check if the request succeeded or failed by handling the "readystatechange" event of your http request, but that doesn't seem important in your case.
After that you just have to get the value server-side, store it in a session variable, and then on every page load, check if there is a session variable defined for the parameter before setting it to its default value.
What you can do is save the location of the control in a xml and save it in a table.
2.jquery UI has as build in framework that supports drag and drop div elements, check this link http://jqueryui.com/demos/droppable/
I did the same thing for an application. (but I used PHP, anyway it doesn't matter for what you need)
I used jQuery + jQuery UI drag & drop / resize
I used AJAX with 4 parameters (x,y, z-index and id of the element) for drag & drop on drag stop
I used XML as a database for this, but any database (or any persistance way) will do the trick. As #Thibault Witzig said, take the most pertinent for your project.
Related
I am using current BIRT version that is 4.5. I have two master pages in my report. I have huge data to display on a report so i have set some data to display on one master page and the remaining on another master page due to some reason. The problem is when there is no data to display on one of the master page it is rendering a blank page with header and footer of that master page which i want to avoid. In my pdf report how can i avoid this blank page?
Hi, all are pointing to hide tables or other components but my requirement here is, i need to hide the page itself. I dont think there is visibility option for page. even if it is there it is not so useful. Kindly understand that i dont want to display the page itself not only the components in it.so can i expect any help now?
I guess you added the tables directly on the masterpage?
That's not how it works. BIRT will render the (master)page and maybe hide the elements on them (for example a table that has no data. You can do this by setting the visibility property). The problem with this approach is that the Masterpage cannot be 'unrenderred'.
The proper way to fix this, is to add each element on the normal layout. In the properties for each table, grid, etc. you can set the pagebreak properties. Here you can select the Masterpage you want to use. If an element does not need to be rendered (by visibility settings), it wont trigger a 'blank' masterpage.
Hope that helps.
I want to get and set the position within a SWT browser but I don't know how.
First, I created a browser control:
Browser browser = new Browser(shell, SWT.NONE);
Then I launched a HTML document:
File file = new File("C:\\test\\index.html");
browser.setUrl(file.toURI().toString());
That works perfect so far.
Now I scroll down the page to find an interesting text passage and click a menu item to create a kind of bookmark.
My question is: How can I get the current focus position (x,y) to remember the point in the text and how can I reset the position later to "apply" a specific bookmark?
You can interact with the browser content through Browser#evaluate() and Browser#execute().
Both methods allow to execute Javascript in the context of the browsers document.
To send Javascript code that queries the current position, use something like:
Object position = browser.evaluate( "window.getCurrentPosition();" );
The type of the return value depends on the code that is evaluated. Debug through the code to see what the actual return type is.
If you aren't interested in the return value, use execute. For example to set the current position you would use:
browser.evaluate( "window.setCurrentPosition( x, y );" );
Please note that the Javascript is pseudo-code and doesn't actually return the current position.
If you run into SWTExceptions, it is likely that the document isn't fully loaded yet and you need to delay the execution of the Javascript code until it is fully loaded as explained here:
https://stackoverflow.com/a/7802717/2986905
I use GWT 2.4.
I have a log of widgets on my web page, there are a huge tab panel with 13 elements, each element of tab has a panel. I use GWT framework. I have to make some logic when one of those elements is visible for user, how to implement it ???
I use Timer for "some logic" and to check whether the panel is visible or not.
I check :
if (somePanel.isVisible()) { do smth}
but it's not working because I also have other links and another elements and when I switch to another element it works but if I click on link - does not.
Thank you in advance :)
I suppose you're using MVP,
You should do the display logic on page load through a model that you write to the place url. links change place so your views are reinitialized (if you don't have a clientFactory)
Anyway, you don't give any details on why it doesn't work with links and what means
when I switch to another element it works
I'm working on a web project which uses JSF 2.0, PrimeFaces and PrettyFaces as main frameworks / libraries. The pages have the following (common) structure: Header, Content, Footer.
Header:
The Header always contains the same menu. This menu is a custom component, which generates a recursive html <ul><li> list containing <a href="url"> html links, this is all rendered with a custom renderer. The link looks like 'domain.com/website/datatable.xhtml?ref=2'. Where the ref=2 used to load the correct content from the database. I use prettyfaces to store this request value in a backingbean.
Question 1: Is it ok to render the <a href> links myself, or should I better add an HTMLCommandLink from my UIComponent and render that in the encodeBegin/End?
Question 2: I think passing variables like this is not really the JSF 2.0 style, how to do this in a better way?
Content:
The content contains dynamic data. It can be a (primefaces) datatable, build with dynamic data from the database. It can also be a text page, also loaded from the database. Or a series of graphs. You got the point, it's dynamic. The content is based on the link pressed in the header menu. If the content is of type datatable, then I put the ref=2 variable to a DataTableBean (via prettyfaces), which then loads the correct datatable from the database. If the content is of type chart, I'll put it on the ChartBean.
Question 3: Is this a normal setup? Ideally I would like to update my content via Ajax.
I hope it's clear :)
It's ok to just output link yourself, commandLink is out of the question (it does a postback using javascript, it's not what you want);
Parameter are all in the param implicit object. You can insert them by a #ManagedProperty annotation, like this:
#ManagedProperty("#{param.ref}")
String ref
// .. getters, setters (obligatory!)
You can also use (if you are on JSF 2) the f:viewParam tag (a nice description http://blogs.oracle.com/rlubke/entry/jsf_2_0_bookmarability_view), you get the bonus of validation and conversion.
The way I understand it, your setup is rather complicated. Using a handwritten custom component for a menu is a huge overkill (at least judging from the provided description), a composite component would probably do. JSF has no special way of making ajax calls between views or embedding views one into another, so - unless you use iframes - your only choice would be to include all the possible pieces of content into a single view, wrapped in panels, and render them as required:
<h:panelGroup rendered='#{backingBean.ref == 2}'>
... content 2 ...
</h:panelGroup>
and so on. Careful, this would be heavy on resources.
You could also write your own ajax solution in javascript. This would require all the pieces of content to be fully independent views, with their own forms. Also, all their postbacks would have to go through ajax, so the main page does not get reloaded.
Im completely new to Java web stuff, but here goes my question:
1) How can I add new controls to a JSF page (webuijsf) in the prerender() function?
2) How can I change the position of elements already added using the visual designer? Also in prerender().
I have a number of input fields + labels to show, coming from a database. So I imagine I read from the database and add the appropriate number of controls during prerender. There's also a grid below these dynamically added controls, which I'd like to move further down at the same time.
Thanks!
You would need to write your own component if you wished to render forms based on database data. You should position your grid using standard html techniques or writing your own custom grid component.