I have a comprehensive web application with the use of lots of nested tables.
This app works fine for desktop version / view.
I am in the process of getting it setup for mobile view. Which is nearly done, BUT:
I am using JSP and java to, for example, retrieve search results. All of these are displayed in one row at a time.
I am not able to make this row fit onto a mobile screen, so what I am looking for is a JavaScript function to disable the table structer, and just show the columns underneath each other e.g. - comparable with opera mini MOBILE VIEW, which with the click of a button makes contect fit to any screen size. My web app works fine, except of some tables, such as search results. I do not want to change the JSP, not create new pages - that would be too much work !
All I want is to include a certain JavaScript file if the connected user comes via handheld device (which works) and disable the tables, or make it fit properly to the screen !!
I hope someone is able to come up with a solution, I have tried everything with CSS, and few JavaScript bits (which I am not so familiar with)
I have two seperate CSS files, depending on the medium u conenct with, it chooses the right one.
BUT HOW TO GET RID OF THE TABLE OVERFLOW / that the data will be displayed fine, without having to scroll left and right on a small device, which as u know is very annoying ;) !?!?!?
Best regards
ALEX
Try using an alternative stylesheet:
tr{display:block;}
td{display:inline-block;}
...this should allow cells to float inside their parent row.
Example: http://jsfiddle.net/doktormolle/nu62m/
Related
I want to make an app, which will work as interface to several servers.
Why: In web iface provided by default (and we cannot change it) are few things we miss, few could be done better and for sure automation of some stuff would make the job easier.
What do I have: almost finished classes for communication with web interface of a server app.
GUI description:
For some kind of version 0.1: text field for username, radio button to select server and one "go" button. Then several (4-12) action buttons to operate on data, 2x text area with results, one label with some text data - I can manage this.
Then I need to view the data - grid MxN which will load the data, expected size: 7-15 columns, usually 10 rows or less, but rarely it can go over 1k (or even more, but I don't need all to be visible to the user in that case).
What I need: simply an advice.
I wish to start with a simple version (and I'm working on that already, but I'm stuck on too many things - 95% cos and absolutely new to GUI and 5% cos I'm new to java).
I've checked many tutorials, but they're all simple.
Real questions:
1) Verify. In MVC controller should handle all user actions - is it done by view's method which is something like button.addActionListener(param); anotherButton.addActionListener(paramp; ...?
1b) I've seen all implemented via one (nested) class, which was then checking source or smth - is that ok? There will be a lots of buttons etc.
2) How to implement the data grid, when I need to take actions on click / dbl click?
4) First row is header, the rest should be scroll able - should it be in the grid or outside (its own grid):
4a) How to make sure header's size (width) will be the same as in data (I don't want to set up straight size)
4b) I failed to create anything scrollable so far, but thats my bad I guess. How to ensure header will hold on a place and the rest can be scrolled?
5) How should be "data update" implemented? I've got JPanel from which I remove grid component and then I make new one and add data into it (simple, but perhapss there is another way). One of first enhancements will be sorting - use the same way I used for new content?
Thanks a lot for any answer, I know this is not very specific, but example I've found are too simple.
I plan a lots of enhancements, but thats in the future and I don't mind to rework GUI/Controller several times, at least, I'll practise, but I don't want to finish one part of the code and realise I've got to rewrite half of a controller and 1/4 of a view to make it possible.
Note: I plan to use this at work as my tool (if things go right, I could make 25-50% of my work by few clicks :-)
So I really mean this).
Note#2: I'm not new to programing, but I've never created GUI (which is why I've got GUI with menu bar with 2 items and 3 components and almost done web-iface connections).
Note#:3 dragable data header, tabbed data view - thats the plan for the future :-)
MVC in Swing is examined here; use nested classes for ease in prototyping and creating an mcve for future questions; as the need arises, nested classes can be promoted to separate classes having package-private access.
Use JTable; its flyweight implementation of renderers is good for organizing data by row and column.
Item three does not exist, but "always remember to translate cell coordinates" if you plan to drag columns or sort rows.
Use a JScrollPane to keep the table header stationary.
Update the TableModel, and the listening view will update itself in response.
If you are interested not only from the event/messaging architecture, but also on handling mouse/keyboard input, hovering detection, widgets, temporary menus, form re-sizing with widget alignment, dragging and dropping etc. I can advice you to look at this question and my answer with helpful resources.
I am writing a browser based application using GWT and making use of websql (yes, I know it is deprecated). I have created a custom table widget (based on FlexTable) and enabled it to scroll with the help of some CSS trickery. What I am striving to achieve (without much success) is that when the user scrolls to the start/end of the current data in the table, an event is fired and the next subset of X rows is returned from the websql DB and replaces the data currently in the table. In order for this to work, I need to keep track of the data offset in the table widget so that I can pass this to the query and use the limit and offset functions of SQL to return the required data. However, I just cannot seem to get the logic right to implement the data offset tracker within the widget. Another complication is that I need the table to be able to scroll 'into the past' (so to speak), so that it can retrieve data from before the initial start point when the table loads.
I have been at this for a number of days now and just cannot seem to get it right. So I was wondering/hoping that someone might be able to point me in the right direction (PLEASE!).
Thanks in advance
Tim
I am not sure why this is causing a problem.
int page = 0;
// when you hit the bottom
page++;
loadData(page);
// when you hit the top
if (page > 0) {
page--;
loadData(page);
}
Tim I think it is not a good idea controlling the scroll with CSS trickery.
I have done something similar soon and controlling all the logic (pagination, scroll positions,...).
What I suggest to use is a gwt's scrollPanel, a HasData widget (like a cellList) your custom AbstractCell (class which is rendered for each row of your list) and asyncDataProvider ( which gives you the onRangeChange handler for asking to your server when the range data display has changed).
You can force/fire that event when in scrollPanel.addScrollHandler detects you are arriving to the end.
If you want to see all of this in action have a look into (click on source code): http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellList
EDIT [according comment below]:
A. If you want to override the data (in the example is X+X+X...) with the new retrieved just maintain always the same range of data displayed [display.setVisibleRange(0, newPageSize);], and start from 0 when you render the new data (on your RangeChange listener).
B. If you need to have control over up and down scrolls instead of taking advantage of the used events internally on the cellList (basically onRangeChange), you can create your custom events and fire them (this option could be easier for your colleagues for understanding everything). And do not worry about controlling up and down scrolls, inside the ShowMorePagerPanel.java you can see a simple example of knowing up and down controls.
Anyway, I did not explain more detailed because I did not see you very convinced to use CellList approach (and I was using my tablet :D ).
If you change your mind, just let me know and I write for you a proper example step by step (this part could be tricky, so if you are lost it is normal ;) ).
I have some html files on my server that are displayed using a WebView. The html files are quite lengthy, meaning they have a lot of text (for example one is a copy of the US Constitution). Instead of letting the user simply scroll down the WebView to display the rest of the HTML file I was wondering if there is some way I could use ViewFlipper to "flip" to the next section of the HTML file's text. Basically what I mean is instead of scrolling, you "flip" the WebView content to view the rest of it. I am not sure if this is even possible and I apologize if what I am trying to do is not clear with my question. I appreciate any help or approaches to take or ideas on how one could do this. Thanks.
I'm using this two library. both are free and opensource.
TurnJs
Booklet
I think this is only possible in case of responsive website's only.
Other websites can't able to scroll because the minimum Desktop resolution screen is 1024 * 768. where as in case of mobile it is as low as 240 * 320 and it goes up to 5 inch , up to 10 inch in case of tablet.
We have a requirement where we already have pre printed stationery and want user to put data in a HTML form and be able to print data on that form. Alignment/text size etc are very important since the pre-printed stationery already has boxes for each character. What could be a good way to achieve this in java? I have thinking of using jasper reports. Any other options? May be overlay image with text or something?
Also we might need to capability to print on plain paper in which case the boxes needs to be printed by our application and the form should match after the printed with the already printed blank stationery containing data.
Do we have some open source framework to do such stuff?
Jaspersoft reports -- http://sourceforge.net/projects/jasperreports/
You will then create XML templates, then you will be able to produce a report in PDF, HTML, CSV, XLS, TXT, RTF, and more. It has all the necessary options to customize the report. Used it before and recommend it.
You will create the templates with iReport then write the code for the engine to pass the data in different possible ways.
check http://www.jaspersoft.com/jasperreports
Edit:
You can have background images and overlay the boxes over it and set a limit on the max character size ... and many more
It is very powerful and gives you plenty of options
Here is one of iReport's tutorial for a background image http://ireport-tutorial.blogspot.com/2008/12/background-image-in-ireport.html
The big problem when printing form content that has been filled in electronically, is aligning it correctly on the pre-printed form. You may get content to align for one printer, but when you use another it is completely misaligned.
Fly Software have a form design product called InForm Designer that gets around the problem nicely by allowing users to specify and save vertical and horizontal offsets for printers. This ensures filled in form content is always aligned. I've tried it and it works perfectly. Take a look for yourself here...
http://www.flysoftware.com/products/inform_designer/overview.asp
It might be worth implementing a printer offset similar to InForm's in your own application (if possible).
Some things to think about.
First in terms of the web page, do you want use the stationery as the form layout?
Does it have to be exact?
Combed boxes (one for each character)
Do you want to show it like that on the web page, or deal with the combing later.
How are you going to deal with say a combed 6 digit number. Is this right aligned. What if they enter 7 digits. Same for text. what if it won't fit.
Font choices, we had a lot of fun with W...
How aligned do you want the character within the box, what font limitations does that imply, some of the auto magic software we looked at did crap like change the size of each character.
Combed editing is a nightmare, we display combed, but raise an edit surface the size of the full box on selection.
Another thing that might drive you barking mad, you find find small differences in the size and layout of the boxes, so they look okay from a distance but a column of boxes sort of shifts about by a pixel. Some of testing guys had to lend us their electron microscopes, so we could see how many ink molecules we were out by. :(
Expect to spend a lot of time in the UI side of things, and remember printed stationery changes, so giving yourself some sort of meta description of the form to start with will save you loads of trouble later on.
I'm about to have to write a web page/app that will serve the agenda for circa 100 people on a page. One line per person, one column per day with 3 clickable zones in each cell.
In HTML, the page is way complex for the browser to load quick and there is no possibility to click on a border between 2 cells to for example split an event that spreads among several cells.
So I search an not too overkilling technology to render this kind of view. I begun with a PHP generated HTML page but the number of elements in the page make the mouse move jerky.
Moving to JAVA would give me better performances regarding the reuse of the generator of the view but it will still be an HTML page.
So, here is my question: do you think that going forward with JAVA and its graphical capability is the simple solution or is Flash a better option for this part of a Web App? I'm afraid of the code I'll have to write in JAVA to handle the GUI presentation as well as the events generated by the 1000's cells plus borders of the page. In Flash, the graphical part seems simpler even if the actions handling is still huge.
I'd really like to have your feedback on this one.
I'm almost done with a new version of my Census RIA benchmark app that shows how different technologies handle loading and rendering large amounts of data. Check it out at:
http://www.jamesward.com/census2
You could try Flex, which outputs Flash movies (SWF files), you have a very extensive data visualization library to show your data. For example, you can use DataGrid or AdvancedDataGrid, specify columns, itemRenders for headers and cells which can be very complicated controls, etc. And the grids only render cells that appear in the viewport; if, say, you have 1,000 rows of data but the user's browser can only show 25 rows at a time, only 25 are rendered and scrolling switches the dataprovider's view rather than attempts to scroll 1,000 fully rendered rows.
Flex is fast for UI development but robust for handling data. My company uses it with Java and PureMVC, and it has worked very well for us.