May be a noob question about appcelerator titanium:
I have an index.xml page like this :
<Alloy>
<Window class="container" layout="composite" backgroundImage="/images/login/background.png" id="wLogin">
<!-- Here content-->
</Window>
and the controller to open page2 :
function openPage2() {
var win = Alloy.createController('page2').getView().open();
$.wLogin.close();
};
This works fine, but i want slide (left to right or right to left) each time i change page, i test on iphone simulator.
I think it should be a basic functionnality, or i'm wrong?
Thank you.
To have the native transition you must add your Window into a NavigationWindow : http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.iOS.NavigationWindow
<NavigationWindow id="nav">
<Window class="container" layout="composite" backgroundImage="/images/login/background.png" id="wLogin">
<!-- Here content-->
</Window>
<NavigationWindow>
Then in your .js :
function openPage2() {
var win = Alloy.createController('page2').getView();
$.nav.openWindow(win, {animated:true});
};
Related
I try out and build my first App on Svelte Native. I develop this for an Tablet.
The standard ListView only supports vertical stacking.
I need this for horizontal.
This part only works for vertical:
<listView items="{listOfItems}" on:itemTap="{onItemTap}">
<Template let:item>
<!-- Shows the list item label in the default color and style. -->
<label text="{item}" />
</Template>
</listView>
<script>
import { Template } from 'svelte-native/components'
let listOfItems = ['one', 'two', 'three']
</script>
I also try this:
Here i have the Problem that nothing is showing.
{#each one as ones}
<button on:tap={addToList(ones)} text="{ones.name}" class="prod-btn" />
{/each}
So i need help to show a list of objects in an horizontal view.
I am trying to implement a list where I should pick an item from it, I am trying to use a ListPicker:
<StackLayout verticalAlignment="top">
<ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</StackLayout>
Is there any way to make the ListPicker modal, and show it by clicking on a readonly TextField?
I am using Javascript on Nativescript.
Thanks!
Put ListPicker to modal dialog wont be good idea as u need to create platform dependend creating and processing that picker
So first approach would be dialogs actions and on tap open dialog with options,
array of options, only strings
http://docs.nativescript.org/cookbook/ui/dialogs#action
Example (taken from link above if it happens it wont work for u and little rewrited for your case):
var options = {
title: "Inquiry Type",
message: "Choose inquiry type",
cancelButtonText: "Cancel",
actions: inquiryTypeItems
};
dialogs.action(options).then((result) => {
console.log(result);
});
or as second approach,
U can set ListPicker as hidden on load of page after tapping on something(definitely not TextField, as u can get problem with showing keyboard, either Label or Button) show ListPicker with animation or visibility property and on change or maybe on Done button which would be together with ListPicker it would let people to choose from list of items :)
If u have other data together with other properties better for second approach but if u have some simple array of strings u can use first one
I am not sure how you would do this in plain NativeScript, however, if you are using Angular2, then you can use an angular modal and then nest the nativescript ListPicker inside that.
So the README of the Angular2 Modal Project describes creating ui agnostic modals very thoroughly. Then in its content, you would do something like:
<div class="container-fluid custom-modal-container">
<div class="row custom-modal-header">
<div class="col-sm-12">
<h1>A Custom modal design</h1>
</div>
</div>
<div class="row" [ngClass]="{'myclass' : shouldUseMyClass}">
<div class="col-xs-12">
<div class="jumbotron">
<h1>Pick Something:</h1>
<ListPicker id="inquiryType" items="{{ inquiryTypeItems }}" />
</div>
</div>
</div>
</div>`
Here shows how the components might fit together.
You can see the issue which track supporting this in NativeScript.
I have to download a remote image and show it in a ImageView. In iOS works prefectly but in Android doesn't work. The image size is 190x190, and the url is correct because the same url works in iOS. This is my code:
View:
<ScrollView id="scrollView" showVerticalScrollIndicator="true">
<Label id="titleLabel"></Label>
<ImageView id="qr"></ImageView>
<View id="codigoView">
<Label id="codigoLabel"></Label>
<Label id="numeroLabel"></Label>
</View>
<Button id="condicionesButton" onClick="condicionesAction"></Button>
<Button id="localizacionButton" onClick="localizacionAction"></Button>
<Button id="emailButton" onClick="emailAction"></Button>
</ScrollView>
Style:
"#qr":{
top: 5,
width: 190,
height: 190
}
Controller:
var qrString = args.get('qrcode');
$.qr.image = Alloy.Globals.qr_url + qrString;
$.qr.addEventListener('load', function(e){
alert('Picture loaded');
});
This alert does never showed.
The url is:
https://api.qrserver.com/v1/create-qr-code/?size=190x190&data="akjlsdfkjalskdjfal"
And the image is a png.
My question in Appcelerator Q&A
EDIT:
This can cause the problem?
For Android, if there is a redirect and change in protocol, it will not
follow. For example, from http to https and vice versa
I've tried to implement your example, and anything works fine, both on iOS and Android!
This is index.xml (view):
<Alloy>
<Window class="container">
<ImageView id="qr"/>
</Window>
</Alloy>
And this is index.js (controller):
$.qr.addEventListener('load', function() {
alert('picture loaded');
});
$.qr.image = "https://api.qrserver.com/v1/create-qr-code/?size=190x190&data=akjlsdfkjalskdjfal"
$.index.open();
There are no problems of any type: no redirects and no changes in the used protocol! Anything seems to be ok.
Your problem is probably due to the fact that you add the EventListener after the operation that can fire the event! Indeed, if the event 'load' is fired very soon there is nothing which is listening for it!!
Even if the problem is not caused by that, remember to add the EventListener always before the lines which could fire the event!
in my xul file:
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="browserOverlay.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="xyz.showPanel()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
<panel id="thepanel">
<hbox align="start">
<image src="warning.png"/>
<vbox>
<description value="You have 6 new messages."/>
<hbox>
<button label="Read Mail"/>
<button label="New Message"/>
</hbox>
</vbox>
</hbox>
</panel>
</overlay>
when calling the function "xyz.showPanel()" which has the following code:
var xyz = {
showPanel: function (e)
{
var button = document.getElementById('custom-button-1');
var panel = document.getElementById('thepanel');
panel.openPopup(button, 'after_start', 0, 0, false, false);
}
}
it gives me error in the error console that says:
Error: TypeError: panel is null
I want to show a panel like "Downloads" toolbar button in Firefox
I am new to Firefox addons,
so how to show a panel when clicking on toolbar button ??
In overlays, the first level of nested elements must refer to something already in the DOM (the element stuff will be added to), or else these elements will be ignored. (Some exceptions to that rule, like <script>.)
Your panel definition basically says (contrary to what you want it to say)
Find an existing panel with id "thepanel"
If found, add a hbox and its children to the panel
If not, ignore the subtree.
You need to change your XUL to provide a container for your panel, e.g. #mainPopupSet, like you did with #BrowserToolbarPalette for your toolbarbutton.
<overlay ...>
...
<popupset id="mainPopupSet">
<panel id="thepanel">
...
</panel>
</popupset>
</overlay>
I am using the Alloy MVC framework over Titanium and want to make a slideshow between views. When I swipe on the screen, I want to display the next/previous view with a slide effect from right to left or left to right.
I am using this code:
A tab in my index.xml:
<Tab title="Bilan" icon="KS_nav_ui.png">
<Window title="Bilan" id="bilanTab" onSwipe="doBilanSwipe">
</Window>
</Tab>
The question view dynamically added and filled inside bilanTab:
<Alloy>
<Collection src="ReponsePossible">
<View id="questionContainer" class="container">
<Label id="questionText" />
<Button id="buttonNextQuestion">Question suivante</Button>
</View>
</Alloy>
and my two functions (3 with prevQuestion not printed here) inside index.js controller:
var previousQuestion;
var nextQuestion;
function doBilanSwipe(e){
if (e.direction == 'left'){
nextQuestion();
}
else if (e.direction == 'right'){
prevQuestion();
}
}
function nextQuestion(){
if (questionsCurrentIndex < questions.length-1){
questionsCurrentIndex++;
$.previous = previousQuestion;
$.next = Alloy.createController('question', questions.at(questionsCurrentIndex));
nextQuestion = $.next;
$.next.questionContainer.left = 320;
$.bilanTab.add($.next.questionContainer);
$.next.questionContainer.animate({left:0, duration:200});
$.previous.questionContainer.animate({left:-320, duration:200},function(){
$.previous = previousQuestion;
$.next = nextQuestion;
$.bilanTab.remove($.previous.questionContainer);
previousQuestion = $.next;
$.previous.destroy();
});
}
}
My problem is that first animation (first view moving to the left) is ok but after that, the next view just appear without any animation.
Could someone help? Thanks!
There is already the Titanium.UI.ScrollableView that does this exact thing, for all platforms.
Use it in Alloy like this:
<Alloy>
<Window id="win">
<ScrollableView id="scrollableView" showPagingControl="true">
<View id="view1" backgroundColor="#123" />
<View id="view2" backgroundColor="#246" />
<View id="view3" backgroundColor="#48b" />
</ScrollableView>
</Window>
</Alloy>
You can dynamically add views to it inside the controller like this:
$.scrollableView.addView(Ti.UI.createView({ // your custom attributes here});