We currently have a Silverlight application that has the following functionality.
Page load with multiple tab pages. The tab pages may or may not contain more tab pages.
None of the tab pages data has been retrieved. Except for the one visible and in front.
On the user clicking the tab page to bring it to the front - the app then retrieves the data for that tab page.
We are now creating an HTML5 and Javascript version of this application and are after the same functionality.
I am new to this and am using the jquery-ui tab control which is done by using a div.
Related
I have a web application using Primefaces 8.0 and JSF 2.2 and the way I have users navigate to instances of the application is by an HTML page with links like the following:
Always opens in the same window
This makes sure that if the user clicks the link a second time, it simply navigates to the tab they already have open. But the browser(chromium in this case) also forces a refresh of the tab every time this link is clicked! Is there any way to avoid this forced refresh?
My web application is mimicing the UI of my desktop application, flow is as follows
Select Task in browser window
Change any Options and then start
Show Progress in same browser window, the progress bar goess back to server every 5 seconds checking progress.
When task has completed we show report in new tab
and go back to Select task Window,
this is done by running following Javascript in progress page
window.open('/start','_self'); window.open('/reporturl','_blank');
This works fine on my PC but when trying on Safari on OSX and on Android phone and iPad one of two things happen
The progress page becomes the start page but the report page is not opened in tab
The Progress page becomes the report page
My question is does opening window in new tab with _blank have all the problems of using popup windows. If so should I modify my prcoess so that at stage 3 it just displays report page, and then add a back button or navigable footer to the report to allow user to get back to start page ?
I can think of some options you could use instead of new tab.
Modal with Ajax
-- With jQuery it is posible to open modal
dialogs they can be populated with html (or other data) fetched with ajax (async). I am a big fan of these and use them all over my projects. Users will not be annoyed with pop-up warning messages, etc. Once the content is read (or whatever) the user can simply close the dialog. (If I had to make your app I would certainly implement this).
Besides the jQuery dialogs, other modal/dialog scripts are out there. Check out Bootstrap Modal if you like it modern.
Serve report as download
-- Depending on what the user can/will do with the report, it might be interesting to write the report page in a way that it sends back a .pdf file, or another type of file, as download. Loading the URL in a new tab will now always start a download. Triggering this from JS without user interaction might be a problem though (same as with pop-up / new tab). Adding a button to trigger the download on complete will solve this.
I know the question was about the use of tabs.. But try to avoid it. Browsers handle it all in their own way. And many users get confused when suddenly stuff is opening in tabs when they did not ask for it. In case of pop-ups, it is possible for users to turn them of or convert into opening a new tab from within the browser settings. If they have been fiddling with browser defaults, you'll have troubles of keeping the 'flow' of the app the same for all users (and cross browser).
I'm working in a Windows Phone 8.1 Project and have created it from a WP blank page (XAML and C#). After that added a new blank page and I navigate from main page through a blank page using a button. Now I'm struggling to navigate between pages.
If I'm at main page and press the physical back key button of my cellphone, my app doesn't terminate, instead it goes to background.
If I'm at blank page and press the physical back key button of my cellphone, my app doesn't go back to main page, instead it goes to background.
I have tried several methods from internet (most of them using silverlight which is not my case) but I didn't understand how to create an event handler to deal with that.
Navigation doesn't work in 8.1 because it isn't built in by default as it was in 8.0. You either have to do it yourself or instead of using a new Blank Page use a Basic Page.
The first time you add a Basic Page to your project the IDE will automagically add all the stuff to do automatic back page navigation. It will add a new NavigationHelper class under the Common directory. It will also add NavigationHelper methods to the page where you can add code for recreating the page after a terminate and resume.
I'm creating a chrome packaged app, and I need to navigate my htmls without creating a lot of windows, like, if the user click one button, it opens the html in the same window the user are.
Is it even possible? If not, is there a way to make windows modal? So the user can't focus another window without closing the current?
Packaged apps intentionally do not support navigation. Apps are not in a browser, there is no concept of forward, back, or reload. Applications which do require the concept of navigation, or modal dialogs, should use a user interface framework that supports that functionality. In fundamentals, you can navigate by manipulating the DOM or by using CSS to animate and control visibility of components of your app.
The page you want to navigate to can be opened in a new window, then the previous page can be closed.
function navigateToLink (link) {
var current = chrome.app.window.current();
chrome.app.window.create(link);
current.close();
}
I am developing a web application using jsp , struts framework and i have to develop 4 different pages. In each page it will be present a horizontal tab menu.I do not have a lot of expertize in web development. So i ask what should be the best way to the develop this feature.
1) Use one iframe to display one of the four different pages , i would have a tab menu and each time i click in a different tab it will reload the iframe.
2) each time i click in a tab it reloads the full page.
The second question that i make is : how can i store the values inserted in the last tab ?
For example : If i have two tab like this :
<ul id="tablist">
<li><a class="current" href="/action1">Tab0</a></li>
<li>Tab1</li>
</ul>
Each time i click in one tab i will lose all the data inserted in the page ?
The data is only sent if is inside a form element , correct ?
A better approach is to use client side (javascript) tab handling.
Populate all the tabs with data and make only one tab visible at a time.
There are bunch of javascript tab libs out there.
One of them is this
http://jqueryui.com/demos/tabs/