Ionic 2 - Tabs at the bootom for side menu pages - menu

I want to have something like IONIC Conference App. Here is image flow about what I have and what I want to have. Any idea how can I solve this problem?

Try import your support page to your tabs.ts page
import { SupportPage } from '../support/support';

Related

how Can I I embed instagram code in flutter web project?

I am searching for a way in which I can include the embed code from Instagram to fetch public post and display it on my screen...I tried many packages from pub.dev like flutter_html_view and in this package, you have to run the project without null safety so I skipped it.
I tried this method too ui.platformViewRegistry.registerViewFactory () but there is no response and nothing to display to the browser.
so how can I implement this embed code and show it on the screen of my browser? please help!
This is what is shown whenever I tried to fetch the embed code
This is the embed code that I meant which I want to implement

Flutter Web - How to reload currently Active Page

I am using Flutter for developing a website. Everything is working fine with Flutter except when it comes to reloading the page. When I press the refresh button in the browser, the whole web app gets reloaded.
For example, if I have navigated to four pages from the initial page, when I press the refresh button from the fourth page, the initial page gets loaded and I'll have to manually browse all the way to the fourth page again.
Is there any way to load the currently active page in Flutter?
Or you can just use this as it refreshes the whole window natively
import 'dart:html' as html;
html.window.location.reload();
Check out navigation with named routes as it maps URLs seamlessly when using Flutter Web.
EDIT : If you want URL parameters (like an id, a token...), check out this article.
Use Navigator to push to the same page. .ie.
If CurrentPage() is your page that needs to be refreshed then use:
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => CurrentPage()));
This will reload the page.
import 'dart:html' as html;
html.window.location.reload();
as this is not allowed according to
https://dart-lang.github.io/linter/lints/avoid_web_libraries_in_flutter.html
this is how i have resolved my issue:
import this package
https://pub.dev/packages/universal_html/install
import whereever you want to use
import 'package:universal_html/html.dart' as html;
and you can use it like this
html.window.location.reload();

Invoking Browser via application Icon Like Youtube Application Without Showing My Application

i want to invoke browser with a specific url like youtube application. I've try using Navigator Invoke but, its show my application. i dont want to show my application just show browser when user click the application icon, can anybody help me please ..
Put this into your main() in main.cpp
QDesktopServices::openUrl(QUrl("http://example.com",QUrl::TolerantMode));
But you MUST remove (comment) the following lines:
new ApplicationUI(&app);
return Application::exec();
Otherwise application will open anyway

WebView, opening link in different window/tab

Is it possible to open a link like this to be opened in Safari by only changing the contents of the HTML file only?
My WebView loads a local HTML page with this source:
Link to Fanpage
How do I make it so that it opens in Safari? By default it should also open in Facebook app if it was downloaded?
It's annoying that it opens the Facebook page on the same webview and the user won't be able to go back to the previous webpage.
Would I have to face a new approach? Thank you.
I looked at other solutions but I don't know what it means by adding a delegate to the webview?
I think you are trying to get get back-history working with anchors on iOS? I have been dealing with the same issue.
Thanks to inspiration from http://www.bennadel.com/, created the following angular directive that fixes this back-history issue. Basically it overrides the default html anchor behavior.
.directive('anchorOpenInNewWin',function() {
return {
restrict : 'A',
link : function($scope,$element,$attrs) {
$element.bind('click touchstart',function(e) {
e.preventDefault();
e.stopPropagation();
location.href = $attrs.href;
});
}
}
});
<a anchor-open-in-new-win href="http://www.google.com" target="_blank">google</a>
This solution could be easily translated into jquery or whatever you are using. Hope this helps

How do I load phonegap/cordova with jade?

I am developing a Web Application using node.js, express and jade. I have the following jade template which I am seeing using a WebView in a Phonegap application:
doctype mobile
html
head
script(src="cordova-2.1.0.js")
script
var ready = function() {
alert(\'Ready\');
}
document.addEventListener("deviceready", ready);
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
h1= title
button(id='vibrateButton', onclick='navigator.notification.vibrate(2000);')Confirm
#services
- each service in services
div.service
a(href=service.link)!= service.name
div.desc= service.description
What this template will produce is a webpage with a list of items (a description and a link) which will be fetched from a mongo database. The page is served using node.js
Now, the cordova script is not loading because the alert ("Ready") is not being displayed. Also, if I hit the button the device won't vibrate and the console will display the following message:
Uncaught TypeError: Cannot call method 'vibrate' of undefined at http://xx.xxx.xx.x:3000/:5
How can I include the Phonegap script using jade? I have tried to load simple scripts with just an alert and it works, but in this case I don't know why it is not working.
Could anyone provide advise please? Thanks.
With recent changes to cordova, you should take a look into InAppBrowser api. That's the recommended way to deal with remote pages embedded in your application.
In the end, you'll probably have a single index.html on the application to make sure the cordova js api is loaded and everything is ok. Then you'll open an InAppBrowser targeting your remote page (remember to whitelist it on config.xml for a better experience!).
The dot after the script is missing. Read this:
"Often you might want large blocks of text within a tag. A good
example is with inline scripts or styles. To do this, just add a .
after the tag (with no preceding space)"
It's taken from the jade-lang reference.
Example:
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
Will render:
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
these will never work.
the html pages needs to be on the client side( app side ) not in the server side(node).
Example. In a android phonegap proyect on the assets\www folder.
i dont know for wat SO is your app, but
App client side: views, phonegap, jquery .... and all the stuff to request the data to the node server.
Server side: dbStuff, and all the stuff to retrieve the data to the app requests.
hope it helps.

Resources