I have been trying out NativeScript Angular and started with the default Angular app on Windows using VSCode (that shouldn't matter). The default app has the following xml for the items component:
<GridLayout>
<ListView [items]="items">
<ng-template let-item="item">
<StackLayout>
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name"></Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
Now if I add an additional space before the terminating GridLayout tag, i.e. on last line above, the app breaks up with following message:
An uncaught Exception occurred on "main" thread.
Calling js method run failed
Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1)
I could not find any documentation where it is specified that the xml must be formatted. Is this expected behavior or is there something wrong with my setup?
As far as I know
</ListView>
</GridLayout>
this should work..!!
see if you can re-produce this error on playground and share here..
Related
I apologize at the start for the lengthy explanation that follows. I believe it is necessary to fully explain what is going on.
I setup my NS app to used tabbed navigation with a login screen by following the writeup here.
The overall structure of the app is identical to the structure of the app in the git repo here.
Instead of the players and teams in the git repo I have 3 tabs: Dashboard, Advisor, and Tasks. The tasks component uses a tasks service to get the tasks for the user via an API call and then displays a list of tasks. The user can tap on the task to view the task details. I use a class called Global that is imported by all of the components to store context info such as the username and the API token that was acquired after authenticating.
I replaced the welcome component with a profile component, the idea being that a profile button is displayed in the ActionBar, and from anywhere in the tab view the user can tap the profile button to view the profile page. I achieved this by including the following code in each of the tab components:
toProfile() {
this.re.navigateByUrl("/profile");
}
I am sure that is not the most efficient way to do it but it was what I came up with and it works. The profile page shows a bit of info and allows the user to log out. If the user is designated as an admin it provides a form to allow the admin user to impersonate any other user and see the app exactly as that user would.
The following code displays the impersonate form:
<GridLayout *ngIf="isAdmin" columns="auto, auto" rows="auto, auto">
<TextField hint="username" [(ngModel)]="impersonateUser" row="1" col="0"></TextField>
<button text="Impersonate" (tap)="impersonate()" row="1" col="1"></button>
</GridLayout>
The profile component imports the user service, task service, and the Global class. When an admin user enters a username (for example we will use "user2") and taps "impersonate" the following function in the profile component is called:
impersonate() {
Global.username = this.impersonateUser;
Global.isAdmin = "0";
this.taskService.reset();
this.userService.getUserInfo(Global.username)
.subscribe(
(resp) => {
this.userService.saveSession(Global.username, Global.token, Global.expires);
this.re.navigateByUrl("/tabs/default", {clearHistory: true});
},
(exception) => {
alert("Something went wrong.");
}
);
}
The task service reset function just clears any data the task service had in memory. I am navigating to /tabs/default at the end to trigger the onInit functions of the components so that new tasks will get pulled for the user being impersonated. The tasks page loads and displays the correct tasks that correspond to user2 via the following code:
<ng-template ngFor let-task [ngForOf]="tasks">
<GridLayout class="data-container" columns="*, auto" rows="auto, auto" [nsRouterLink]="['../task', task.ID]">
<Label [text]="task.TITLE" class="task-title" row="0" col="0"></Label>
<FlexboxLayout class="task-date" row="1" col="0">
<Label [text]="task.START_DATE | slice:0:10 | date:'MMM d, yyyy'"></Label>
<Label text=" - "></Label>
<Label [text]="task.END_DATE | slice:0:10 | date:'MMM d, yyyy'"></Label>
</FlexboxLayout>
<Label text="" class="fas task-status" [ngClass]="{'completed' : task.COMPLETED}" rowSpan="2" col="1"></Label>
</GridLayout>
</ng-template>
Everythign works up to this point. When the admin user taps on one of the tasks to view the task details I get the following error:
Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'this.currentOutlet.peekState')
When I inspect the elements with Chrome dev tools I can see that the GridLayout element has the proper ID that matches the task it should link to
<GridLayout ng-reflect-params="../task,5e46c219add54" iosOverflowSafeArea="true" classNAme="data-container">
Any help or insight would be greatly appreciated. I am relatively new to both Angular and NativeScript.
EDIT:
Here is a link to a NS playground where you can see the issue in action. I have removed just about everything that is not needed to replicate the issues.
To replicate:
Sign in with the username "u1".
Go to the tasks tab and tap one of the tasks. You will be taken to the task details.
Tap the Profile button on the Activity bar.
On the profile page enter u2 in the username field under Admin and tap the impersonate button. You will be returned to the dashboard as user2.
Go to the tasks tab and tap one of the tasks.
Tapping on the task should take you to the task details but instead, it produces the error described above.
NOTE: Tapping on any of the tasks on the dashboard at any time will not work. That is another issue I am trying to figure out. If you can help me figure out what I am doing wrong there as well it would be much appreciated.
When i tried to load gif to my project suddenly return me error:
Java.Lang.IllegalStateException: 'Unable to parse composition'
Image for more information link
I want to insert gif to my project I tried to use Lottie and Json File
My code so far
<forms:AnimationView
x:Name="animationView"
Grid.Row="1"
Animation="first.json"
Loop="false"
AutoPlay="false"/>
Please add xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms" to your XAML head and use this component
<lottie:AnimationView
x:Name="AnimationView"
Animation="first.json"
AutoPlay="True" Loop="true"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
and dont forget to init AnimationViewRenderer.Init(); on MainActivity and AppDelegate
In my case i replaced app:lottie_url with app:lottie_rawRes , and it worked just fine
need determine json like
Android: DroidProject/Assets/filename.json like AndroidAsset
iOS: iOSProject/filename.json like BundleResource
This error occurred when lottie.setAnimation(""); is not set or blank
In Windows 8/Store programming, how would you go about databinding an image to a URL. In other platforms I've worked with, I would set the source property (or equivalent) to the URL and the platform would handle it for me, but that doesn't seem to be the case here.
I'm currently binding it to a property for my business object that is of type "string", and returns the URL of the image that I want populated in the image control. How would I go about doing this?
Turns out this is really easy.
Code:
<Image Stretch="UniformToFill">
<Image.Source>
<BitmapImage UriSource="{Binding Path=ImageUrl}" />
</Image.Source>
</Image>
ImageUrl is a Uri containing the path to the remote image.
I tried this code, but it didn't work:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<MediaElement Height="120"
HorizontalAlignment="Left"
Margin="-12,148,0,0"
Name="mediaPlayer"
VerticalAlignment="Top"
Width="474"
AutoPlay="True"
/>
</Grid>
C#:
Uri Path = new Uri("http://streaming.acc.net:8000/kalilo");
mediaPlayer.Source = Path;
Looks like you're using a unsupported type of stream. And since your link isn't valid, that's all the info we can provide.
Remember that you can't play music in the emulator, and on the device you need to use WPConnect.exe to connect instead of Zune, to make it actually play.
If that is a streaming service, MediaElement is a basic, but often unreliable source because of possible interruptions (e.g. switching from WiFi to a cell data connection). It works in most situations, but it has restrictions on media content that is passed through it.
Assuming that the URI you are showing belongs to a Shoutcast stream, it is not supported by default and you need to implement a connector through MediaStreamSource, even if you receive MP3 bytes.
Here is a great MediaStreamSource example from Tim Heuer.
Also worth checking out - ManagedMediaHelpers.
I have made a webpage. The IE 7 of windows 7 doesn't execute Javascript. How do I enable Javascript on the Windows Phone?
Windows Phone 7 runs a mobile version of IE9 so there should be no problems executing javascript. The only thing I can think of with the little information is that you are trying to use a webbrowsercontrol from within an application. In that case you should set the IsScriptEnabled property to true to enable scripts within the control.
chirag !
In window phone 7, you can enable Javascript.
in xaml , you can set isScriptEnabled= true.
Examle:
<phone:WebBrowser HorizontalAlignment="Left" Width="480" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="webBrowser" Height="80" VerticalAlignment="Bottom" IsScriptEnabled="True" ScriptNotify="webBrowser_ScriptNotify" Navigated="webBrowser_Navigated" Navigating="webBrowser_Navigating" />
you can use event :
private void webBrowser_ScriptNotify(object sender, Microsoft.Phone.Controls.NotifyEventArgs e)
{
//your code : e is returned from the javascript code if javaScript is active
}
You can down load HTML content by use : webClient or string htmlcontent = webBrowser.SaveToString
Hope this help ! Thongaduka