In Ionic2,my tabs dont shown - ionic2

I am trying to show tabs on android but not shown
it is shown on web page
Where is the problem
My code is ->
html part:
<ion-tabs>
<ion-tab tabIcon="water" tabTitle="Water" [root]="Tabroot1"></ion-tab>
<ion-tab tabIcon="leaf" tabTitle="Life" [root]="Tabroot2"></ion-tab>
<ion-tab tabIcon="flame" tabTitle="Fire" [root]="Tabroot3"></ion-tab>
<ion-tab tabIcon="magnet" tabTitle="Force" [root]="Tabroot4"></ion-tab>
</ion-tabs>
typscript part
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {IsimPage} from '../game/isim/isim';
import {SehirPage} from '../game/sehir/sehir';
import {HayvanPage} from '../game/hayvan/hayvan';
import {BitkiPage} from '../game/bitki/bitki';
#Component({
selector:'page-yeniOyun',
templateUrl:'yeniOyun.html'
})
export class YeniOyunPage{
Tabroot1: any
Tabroot2: any
Tabroot3: any
Tabroot4: any
constructor(public naVCtrl: NavController){
this.Tabroot1 = IsimPage;
this.Tabroot2 = SehirPage;
this.Tabroot3 = HayvanPage;
this.Tabroot4 = BitkiPage;
}
}

Thank you 'Dag'.I solved problem in differen way and solve is about my ionic html structure.
Typescipt part and html part true,wrong is my tabs page
html part:
<ion-tabs>
<ion-tab tabIcon="water" tabTitle="Water" [root]="Tabroot1"></ion-tab>
<ion-tab tabIcon="leaf" tabTitle="Life" [root]="Tabroot2"></ion-tab>
<ion-tab tabIcon="flame" tabTitle="Fire" [root]="Tabroot3"></ion-tab>
<ion-tab tabIcon="magnet" tabTitle="Force" [root]="Tabroot4"></ion-tab>
typescript part
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {IsimPage} from '../game/isim/isim';
import {SehirPage} from '../game/sehir/sehir';
import {HayvanPage} from '../game/hayvan/hayvan';
import {BitkiPage} from '../game/bitki/bitki';
#Component({
selector:'page-yeniOyun',
templateUrl:'yeniOyun.html'
})
export class YeniOyunPage{
Tabroot1: any
Tabroot2: any
Tabroot3: any
Tabroot4: any
constructor(public naVCtrl: NavController){
this.Tabroot1 = IsimPage;
this.Tabroot2 = SehirPage;
this.Tabroot3 = HayvanPage;
this.Tabroot4 = BitkiPage;
}
}
IsimPage:
<ion-header>
<ion-navbar>
<ion-title>
IsimPage
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
//Mytab interface here
</ion-content>
SehirPage:
<ion-header>
<ion-navbar>
<ion-title>
SehirPage
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
//Mytab interface here
</ion-content>
HayvanPage:
<ion-header>
<ion-navbar>
<ion-title>
HayvanPage
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
//Mytab interface here
</ion-content>
BitkiPage:
<ion-header>
<ion-navbar>
<ion-title>
BitkiPge
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
//Mytab interface here
</ion-content>

Related

Vue JS widgets in hybrid application

I have a hybrid Django/VueJS application. I combine Django templating pages with VueJS widgets because that allows to take best of the 2 different worlds. However, I face an issue when I need to place multiple VueJS widgets. When I need to embed only 1 widget, I just use to embed it. But when I have multiple widgets, I don't know what to do.
Do I need to mount multiple widget separately? Is this a good practice?
Here's how my main.js looks like:
import Vue from "vue";
import vuetify from "./plugins/vuetify";
import router from "./router";
import AccountApp from "./AccountApp.vue";
import store from "./store/index.js";
import i18n from "./i18n";
Vue.config.productionTip = false;
const accountApp = new Vue({
vuetify,
router,
store,
i18n,
render: (h) => h(AccountApp),
});
accountApp.$mount("#app");
Could this be a possible solution?
import Vue from "vue";
import vuetify from "./plugins/vuetify";
import router from "./router";
import AccountApp from "./AccountApp.vue";
import UserApp from "./UserApp.vue";
import store from "./store/index.js";
import i18n from "./i18n";
Vue.config.productionTip = false;
const accountApp = new Vue({
vuetify,
router,
store,
i18n,
render: (h) => h(AccountApp),
});
accountApp.$mount("#account");
const userApp = new Vue({
vuetify,
router,
store,
i18n,
render: (h) => h(UserApp),
});
userApp.$mount("#user");

Ember add customEvents

I'm using Ember 2.9 and would like to use the "paste" event.
How I can add paste as an customEvent on start up the application:
This is my current app.js:
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
I've setup a demo Ember.js 2.9 app at https://github.com/bartocc/stackoverflow-2176861 that demonstrates the code below.
Here's is an example app.js to configure the Ember.js to listen to the paste event:
// /app/app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
let App;
Ember.MODEL_FACTORY_INJECTIONS = true;
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver,
// This is how you make your ember app listen the paste event
customEvents: {
paste: 'paste'
}
});
loadInitializers(App, config.modulePrefix);
export default App;
Find more information in the Ember.js 2.9 API.
Then, make any component listen to the paste event with:
import Ember from 'ember';
export default Ember.Component.extend({
paste(event) {
const text = event.originalEvent.clipboardData.getData('Text');
alert(`you've just pasted the text '${text}'`);
}
});

i am learning django websocket everything is working fine except for my JS function in HTML file

I am working on django websocket and creating an Echo app but i don't know why i am getting this error
Here is my html code
{% load staticfiles %}
<html>
<head>
<title>Notifier</title>
<script src="{% static '/channels/js/websocketbridge.js' %}" type="text/javascript"></script>
</head>
<body>
<h1>Notifier</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
const webSocketBridge = new channels.WebSocketBridge();
webSocketBridge.connect('/ws/');
webSocketBridge.listen(function(action, stream) {
console.log("RESPONSE:", action, stream);
})
document.ws = webSocketBridge; /* for debugging */
})
</script>
</body>
</html>
This is my views.py
from django.views.generic import TemplateView
class HomeView(TemplateView):
template_name = "home.html"
This is my routing.py
from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import path
from notifier.consumers import EchoConsumer
application = ProtocolTypeRouter({
"websocket": URLRouter([
path("ws/", EchoConsumer),
])
})
Tihs is my counsumers.py
from channels.consumer import AsyncConsumer
class EchoConsumer(AsyncConsumer):
async def websocket_connect(self, event):
await self.send({
"type": "websocket.accept"
})
async def websocket_receive(self, event):
# Echo the same received payload
await self.send({
"type": "websocket.send",
"text": event["text"]
})
Guide me with my mistake where and what i am doing wrong in this whole system i do not find any solution on internet i would expect this code to run properly and do an Echo on my browser console.

Opening new tab in Ionic2 app

I am trying to add a new tab to the app, just as info page. The extra page is added and I created a new tab but it is not working at all. Not even displaying a basic ionic details. I have added the new page in app.module.ts and also in tabs folder.
tabs.ts
import { Component } from '#angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { InfoPage } from '../info/info';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
tab4root: any = InfoPage;
constructor() {
}
}
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Geo" tabIcon="md-globe"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="info" tabIcon="football"></ion-tab>
</ion-tabs>
app.module.ts
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ScanPage,
TabsPage,
InfoPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
ScanPage,
TabsPage,
InfoPage
],

Dajax not working

Dajax is not working, I am not able to understand why. I am using Django 1.7
My ajax.py file looks this:
from dajax.core import Dajax
from dajaxice.decorators import dajaxice_register
#dajaxice_register
def jmc_foundation_tower_number(request, option):
print("It works!")
My template call is as follows:
<div class='col-lg-3'>
<select id='id_tower_number' name='tower_number' onchange="Dajaxice.core.views.jmc_foundation_tower_number(Dajax.process, {'option':$this.value})" onclick="Dajaxice.core.views.jmc_foundation_tower_number(Dajax.process, {'option':$this.value})" class='form-control'>
{% for tower in towers %}
<option value='{{ tower }}'>{{ tower }}</option>
{% endfor %}
</select>
</div>
My urls.py is as follows:
from django.conf.urls import patterns, include, url
from django.contrib import admin
from dajaxice.core import dajaxice_autodiscover, dajaxice_config
dajaxice_autodiscover()
urlpatterns = patterns('',
url(r'^index$', 'core.views.index', name='index'),
url(r'^admin/', include(admin.site.urls)),
url(dajaxice_config.dajaxice_url, include('dajaxice.urls')),
)
django-dajax and django-dajaxice
Should I use django-dajax or django-dajaxice?
In a word, No. I created these projects 4 years ago as a cool tool in
order to solve one specific problems I had at that time.
These days using these projects is a bad idea.
(...)
If you want to use this project, you are probably wrong. You should
stop couplig your interface with your backend or... in the long term
it will explode in your face.
jorgebastida/django-dajax
Apparently javascript function names with underscores('_') don't work when using functions like onclick.It's better to use functions like somefunction() instead of some_function() to make Dajax work.
The following is an example to make Helloworld using dajax
models.py:
from django.db import models
from dajax.core import Dajax
from dajaxice.decorators import dajaxice_register
#dajaxice_register
def say_hello(request,value):
dajax = Dajax()
dajax.alert(value)
return dajax.json()
urls.py:
urlpatterns = patterns('',
# Examples:
url(r'^$', 'server.views.index', name='index'),
where "server" in server.views.index is the application name inside your project
in index.html file you have to use a jquery function to call this dajax request as following
index.html:
<html>
<script>
function print_helloworld(){
var value = Dajaxice.server.models.say_hello(Dajax.process,{'value':'Hello World!'});
}
</script>
<body>
<button id='mybtn' class='btn btn-primary' onclick='print_helloworld()'>Hello World</button>
</body>
</html>
if you need to access the index file from public ip you have to add the {% csrf_token %} token before button