I build a simple application by using Titanium Studio.
From normal window, when I click a button it must go back to the tab view and activate the third tab but now it show the full screen window of that third tab instead. What should I do ?
This is my ApplicationTabGroup.js
function ApplicationTabGroup(Window) {
//create module instance
var self = Ti.UI.createTabGroup(),
MapWindow = require('ui/common/MapTab'),
ListWindow = require('ui/common/ListTab'),
ContactWindow = require('/ui/common/ContactTab');
//create app tabs
var win1 = new MapWindow('MapTab'),
win2 = new ListWindow('ListTab')
win3 = new ContactWindow('Contact')
//Tab1
var tab1 = Ti.UI.createTab({
//title: 'MapTab',
icon: '/images/icmapactive.png',
window: win1
});
win1.containingTab = tab1;
//Tab2
var tab2 = Ti.UI.createTab({
//title: 'ListTab',
icon: '/images/iclistactive.png',
window: win2
});
win2.containingTab = tab2;
//Tab3
var tab3 = Ti.UI.createTab({
//title: 'Contact',
icon: '/images/icmailactive.png',
window: win3
});
win3.containingTab = tab3;
self.addTab(tab1);
self.addTab(tab2);
self.addTab(tab3);
return self;
};
module.exports = ApplicationTabGroup;
And this is my button's eventListener. It is in normal window.
btInfo.addEventListener('click', function(e) {
var ContactTab = require('/ui/common/ContactTab');
new ContactTab(Window).open();
});
Many thanks !!!
Use setActiveTab function. In your eventlistener, create ApplicationTabGroup and set the contact tab to be active. You can use object or tab index as parameter.
Related
On the same page, i have differents maps loaded with Here maps API for each map i have loaded a specific kml file.
When i try to click, it works only on the last kml loaded and not others one, so how to make working event on each map ? This my code, it's taken from the example but a little bit modified :
function renderSchoenefeldAirport(map, ui, renderControls, kmlfile) {
// Create a reader object, that will load data from a KML file
var reader = new H.data.kml.Reader(kmlfile);
// Request document parsing. Parsing is an asynchronous operation.
reader.parse();
reader.addEventListener('statechange', function () {
// Wait till the KML document is fully loaded and parsed
if (this.getState() === H.data.AbstractReader.State.READY) {
var parsedObjects = reader.getParsedObjects();
// Create a group from our objects to easily zoom to them
var container = new H.map.Group({objects: parsedObjects});
// So let's zoom to them by default
map.setViewBounds(parsedObjects[0].getBounds());
// Let's make kml ballon visible by tap on its owner
// Notice how we are using event delegation for it
container.addEventListener('tap', function (evt) {
var target = evt.target, position;
// We need to calculated a position for our baloon
if (target instanceof H.map.Polygon || target instanceof H.map.Polyline) {
position = target.getBounds().getCenter();
} else if (target instanceof H.map.Marker) {
position = target.getPosition();
}
if (position) {
// Let's use out custom (non-api) function for displaying a baloon
showKMLBallon(position, target.getData(), ui);
}
});
// Make objects visible by adding them to the map
map.addObject(container);
}
});
}
/**
* Boilerplate map initialization code starts below:
*/
// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
'app_id': 'myappid',
'app_code': 'myappcode',
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
// Step 2: initialize a map
// Please note, that default layer is set to satellite mode
var map = new H.Map(document.getElementById('mapcontainer1'), defaultLayers.satellite.map, {
zoom: 1,
pixelRatio: pixelRatio
});
var map_secondary = new H.Map(document.getElementById('mapcontainer2'), defaultLayers.satellite.map, {
zoom: 1,
pixelRatio: pixelRatio
});
// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var behavior_secondary = new H.mapevents.Behavior(new H.mapevents.MapEvents(map_secondary));
// Template function for our controls
function renderControls(buttons) {
var containerNode = document.createElement('div');
containerNode.setAttribute('style', 'position:absolute;top:0;left:0;background-color:#fff; padding:10px;');
containerNode.className = "btn-group";
Object.keys(buttons).forEach(function (label) {
var input = document.createElement('input');
input.value = label;
input.type = 'button';
input.onclick = buttons[label];
input.className="btn btn-sm btn-default"
containerNode.appendChild(input);
});
map.getElement().appendChild(containerNode);
}
function showKMLBallon(position, data, ui) {
var content = data.balloonStyle.text;
if (content) {
// Styling of the balloon text.
// The only supported wilde cards are $[text] and $[description].
content = content
.replace('$[name]', data.name || '')
.replace('$[description]', data.description || '');
// Note how we are caching our infoBubble instance
// We create InfoBubble object only once and then reuse it
var bubble = showKMLBallon.infoBubble;
if (!bubble) {
bubble = new H.ui.InfoBubble(position, {content: content});
ui.addBubble(bubble);
bubble.getContentElement().style.marginRight = "-24px";
// Cache our instance for future use
showKMLBallon.infoBubble = bubble;
} else {
bubble.setPosition(position);
bubble.setContent(content);
bubble.open();
}
}
}
// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);
var ui_secondary = H.ui.UI.createDefault(map_secondary, defaultLayers);
// Step 5: main logic goes here
renderSchoenefeldAirport(map, ui, renderControls, 'path/to/file1.kml');
renderSchoenefeldAirport(map_secondary, ui_secondary, renderControls, 'path/to/file2.kml');
Thanks by advance
In the provided snippet there is a line 106: var bubble = showKMLBallon.infoBubble; where the info bubble is "cached", the problem is that when the user clicks on one of the maps the infobubble is created and cached, and when somebody clicks on the second map the the info bubble from the first is used.
In the simplest case this line should be:
var bubble = ui.infoBubble;
so the bubble for each map instance in cached. In general, depending on the desired outcome, the proper caching strategy should be devised.
Hope this helps.
I have a problem with showing popup dialogue using angularJS. I'm trying to exercise with the demo site.
https://material.angularjs.org/latest/demo/dialog.
following code is my controller js code.
(function () {
'use strict';
angular
.module('FramesPopup', ['ngRoute', 'ngMaterial' ])
.controller('PopupController', PopupController);
PopupController.$inject = ['$scope'];
function PopupController($scope, $mdDialog) {
$scope.title = 'PopupController';
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAlert = function (ev) {
// Appending dialog to document.body to cover sidenav in docs app
// Modal dialogs should fully cover application
// to prevent interaction outside of dialog
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
activate();
function activate() {
console.log("test");
}
}
})();
The $mdDialog service is missing from the $inject annotation list:
angular
.module('FramesPopup', ['ngRoute', 'ngMaterial' ])
.controller('PopupController', PopupController);
̶P̶o̶p̶u̶p̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶.̶$̶i̶n̶j̶e̶c̶t̶ ̶=̶ ̶[̶'̶$̶s̶c̶o̶p̶e̶'̶]̶;̶
PopupController.$inject = ['$scope','$mdDialog'];
function PopupController($scope, $mdDialog) {
$scope.title = 'PopupController';
$scope.status = ' ';
$scope.customFullscreen = false;
$scope.showAlert = function (ev) {
// Appending dialog to document.body to cover sidenav in docs app
// Modal dialogs should fully cover application
// to prevent interaction outside of dialog
$mdDialog.show(
$mdDialog.alert()
I have a select interaction - to select features associated with a vector layer. My goal is to edit the feature attributes and save back to a database.
import Map from 'ol/Map';
import View from 'ol/View';
import Select from 'ol/interaction/Select.js';
...
this.map = new Map({
target: 'map',
view: new View({
center: this.$root.mapState.center,
zoom: this.$root.mapState.zoom
})
});
AddLayers(this.map, this.$root.map.layers, this.$root.register);
this.select = new Select();
this.map.addInteraction(this.select);
this.select.on('select', function(e) {
e.target.getFeatures().forEach(function(feature) {
alert('Selected ' + feature.getId());
});
});
How do I get the layer from the feature?
The answer to this question from 2015 would appear to work.
Do I really have to go through all this? In OpenLayers 2, I would refer to feature.layer - this functionality appears to have gone.
Thanks to #Mike, I added me.select.getLayer(feature) in the loop over the features.
Full solution is:
import Map from 'ol/Map';
import View from 'ol/View';
import Select from 'ol/interaction/Select.js';
...
this.map = new Map({
target: 'map',
view: new View({
center: this.$root.mapState.center,
zoom: this.$root.mapState.zoom
})
});
AddLayers(this.map, this.$root.map.layers, this.$root.register);
this.select = new Select();
this.map.addInteraction(this.select);
var me = this;
this.select.on('select', function(e) {
e.target.getFeatures().forEach(function(feature) {
var layer = me.select.getLayer(feature);
alert('Selected ' + feature.getId());
});
});
I've 3 different Lists that I want to display next to each other, however for some reason they are being displayed under each other.
I am using JSViews.
Here is the relevant parts of my code and screenshot ;
in my JSView ;
var keysList = new sap.m.List(this.createId("keysList"), {
});
var valList1 = new sap.m.List(this.createId("valList1"), {
});
var valList2 = new sap.m.List(this.createId("valList2"), {
});
var vBox2 = new sap.m.VBox({
alignItems: "Start",
justifyContent: "Start",
items: [
keysList,
valList1,
valList2
]
}).addStyleClass("vbox2");
var oPageMerkliste2 = new sap.m.Page({
showHeader: false,
content: [
toolbar,
vBox1,
vBox2
]
});
return oPageMerkliste2;
my Controller ;
var keysList = this.byId("keysList");
var keysModel = new sap.ui.model.json.JSONModel();
keysModel.setData(keysObj);
console.log("keysList", keysList);
keysList.setModel(keysModel);
var template0 = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text : "{}"
})
]
}).addStyleClass("listSize")
]
}).addStyleClass("");
keysList.bindAggregation("items", "/", template0);
//val list 1
var valList1 = this.byId("valList1");
var valList1Model = new sap.ui.model.json.JSONModel();
valList1Model.setData(valsObj1);
console.log("valList1", valList1);
valList1.setModel(valList1Model);
var template1 = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text : "{}"
})
]
}).addStyleClass("listSize")
]
}).addStyleClass("");
valList1.bindAggregation("items", "/", template1);
//val2 list
var valList2 = this.byId("valList2");
var valList2Model = new sap.ui.model.json.JSONModel();
valList2Model.setData(valsObj2);
console.log("valList2", valList2);
valList2.setModel(valList2Model);
var template2 = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text : "{}"
})
]
}).addStyleClass("listSize")
]
}).addStyleClass("");
valList2.bindAggregation("items", "/", template2);
I thought VBox was actually for displaying the items next to each other but apparently in my case it doesn't behave in the way it actually should.
I tried to play with it on Chrome Dev. Tools and edited styles with changing width s but it didn't help either.
How can I display them next to each other ? ( Like 0. index of the first List is next to 0. index of the second List etc.)
And here is a screenshot how my "List" looks so far ( sorry about bad paint skills)
Try changing VBox with HBox.
sap.m.HBox
In your code, your using VBox, so it is doing the expected.
I am trying to make a newsfeed similar to twitter, where new records are not added to the UI (a button appears with new records count), but updates, change reactively the UI.
I have a collection called NewsItems and I a use a basic reactive cursor (NewsItems.find({})) for my feed. UI is a Blaze template with a each loop.
Subscription is done on a route level (iron router).
Any idea how to implement this kind of behavior using meteor reactivity ?
Thanks,
The trick is to have one more attribute on the NewsItem Collection Say show which is a boolean. NewsItem should have default value of show as false
The Each Loop Should display only Feeds with show == true and button should show the count of all the items with show == false
On Button click update all the elements in the Collection with show == false to show = true
this will make sure that all your feeds are shown .
As and when a new feed comes the Button count will also increase reactively .
Hope this Helps
The idea is to update the local collection (yourCollectionArticles._collection): all articles are {show: false} by default except the first data list (in order not to have a white page).
You detect first collection load using :
Meteor.subscribe("articles", {
onReady: function () {
articlesReady = true;
}
});
Then you observe new added data using
newsItems = NewsItems.find({})
newsItems.observeChanges({
addedBefore: (id, article, before)=> {
if (articlesReady) {
article.show = false;
NewsItems._collection.update({_id: id}, article);
}
else {
article.show = true;
NewsItems._collection.update({_id: id}, article);
}
}
});
Here is a working example: https://gist.github.com/mounibec/9bc90953eb9f3e04a2b3.
Finally I managed it using a session variable for the current date /time:
Template.newsFeed.onCreated(function () {
var tpl = this;
tpl.loaded = new ReactiveVar(0);
tpl.limit = new ReactiveVar(30);
Session.set('newsfeedTime', new Date());
tpl.autorun(function () {
var limit = tpl.limit.get();
var time = Session.get('newsfeedTime');
var subscription = tpl.subscribe('lazyload-newsfeed', time, limit);
var subscriptionCount = tpl.subscribe('news-count', time);
if (subscription.ready()) {
tpl.loaded.set(limit);
}
});
tpl.news = function() {
return NewsItems.find({creationTime: {$lt: Session.get('newsfeedTime')}},
{sort: {relevancy: -1 }},
{limit: tpl.loaded.get()});
},
tpl.countRecent = function() {
return Counts.get('recentCount');
},
tpl.displayCount = function() {
return Counts.get('displayCount');
}
});
Template.newsFeed.events({
'click .load-new': function (evt, tpl) {
evt.preventDefault();
var time = new Date();
var limit = tpl.limit.get();
var countNewsToAdd = tpl.countRecent();
limit += countNewsToAdd;
tpl.limit.set(limit);
Session.set('newsfeedTime', new Date());
}
});