GithubHelp home page GithubHelp logo

wsick / fayde Goto Github PK

View Code? Open in Web Editor NEW
189.0 189.0 27.0 75.76 MB

Inspired by Silverlight; XAML engine using Javascript and rendering to the HTML5 Canvas.

License: MIT License

JavaScript 3.50% C# 9.24% HTML 3.84% TypeScript 83.22% ASP.NET 0.19%

fayde's People

Contributors

asthomas avatar bsick7 avatar dp901 avatar gitter-badger avatar hypersw avatar jazzonaut avatar ronmenator avatar sally-xu avatar ssickles avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fayde's Issues

Error in Fayde Nuget Package v0.9.5.9

You cannot call a method on a null-valued expression.
At C:\Users\ssickles\Desktop\FaydeSample\packages\Fayde.0.9.5.9\tools\common.psm1:4 char:26

  • $item.Properties.Item <<<< ("ItemType").Value = $ItemType
    
    • CategoryInfo : InvalidOperation: (Item:String) [], RuntimeException
    • FullyQualifiedErrorId : InvokeMethodOnNull

You cannot call a method on a null-valued expression.
At C:\Users\ssickles\Desktop\FaydeSample\packages\Fayde.0.9.5.9\tools\common.psm1:25 char:68

  • $parentitem.ProjectItems.AddFromFile($childitem.Properties.Item <<<< ("FullPath").Value)
    
    • CategoryInfo : InvalidOperation: (Item:String) [], RuntimeException
    • FullyQualifiedErrorId : InvokeMethodOnNull

You cannot call a method on a null-valued expression.
At C:\Users\ssickles\Desktop\FaydeSample\packages\Fayde.0.9.5.9\tools\common.psm1:25 char:68

  • $parentitem.ProjectItems.AddFromFile($childitem.Properties.Item <<<< ("FullPath").Value)
    
    • CategoryInfo : InvalidOperation: (Item:String) [], RuntimeException
    • FullyQualifiedErrorId : InvokeMethodOnNull

TextBox Text Clearing

Inside an event binding, I have tried to clear the Text property on a TextBox by setting it to "". The value seems to update until you begin typing again. At that point, the original text (which should be gone) shows up along with whatever else you typed.

Image Source

Image Sources resolve like HTML. Would be better to be more like Silverlight.

ContextMenu Bug

I can't get ContextMenu to work.

Error Message:
0x800a138f - JavaScript runtime error: Unable to get property 'namespaceURI' of undefined or null reference

Testing XAML:

<TextBlock Text="Context Menu Test">
  <controls:ContextMenuService.ContextMenu>
    <controls:ContextMenu>
      <controls:MenuItem Header="Move Up">
        <controls:MenuItem.Icon>
          <Rectangle Width="16" Height="16" Fill="Red"/>
        </controls:MenuItem.Icon>
      </controls:MenuItem>
      <controls:MenuItem Header="Move Down">
        <controls:MenuItem.Icon>
          <Rectangle Width="16" Height="16" Fill="Green"/>
        </controls:MenuItem.Icon>
      </controls:MenuItem>
      <controls:Separator/>
      <controls:MenuItem Header="Delete">
        <controls:MenuItem.Icon>
          <Rectangle Width="16" Height="16" Fill="Blue"/>
        </controls:MenuItem.Icon>
      </controls:MenuItem>
    </controls:ContextMenu>
  </controls:ContextMenuService.ContextMenu>
</TextBlock>

multi-browser supporting issues

  1. TreeControl Open node icon doesn't show on Firefox.
  2. ContextMenu doesn't work on IE.
  3. Response seems sluggish on Safari
  4. Several demo pages are broken on Safari. The page just shows [object Object]. Need to do more test to find out which control caused the problem.
  5. Font looks ugly on Safari.

ObservableCollection and Binding

Controls don't seem to be able to handle an ObservableCollection when it comes to bindings. In my example, I bind to an Array of items. It works fine until I convert the Array to an ObservableCollection and then no items are rendered. I'm not getting any errors or messages in the chome console.

MergedDictionaries not working

Example:
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Parsing error: An unregistered attribute has been passed. ResourceDictionary.Source

TranslateTransform issue

Setting TranslateTransform.X and TranslateTransform.Y doesn't work correctly. It only works when the value is set in XAML or in code before the control is loaded. Changing the TranslateTransform.X/Y value in code after the control is loaded or use Binding doesn't seem to do anything to the control.

Testing XAML:

<StackPanel>
<TextBlock Text="X:"/>
<controls:NumericUpDown x:Name="XValue" DecimalPlaces="0" Increment="1" Value="10" />
<TextBlock Text="Y:"/>
<controls:NumericUpDown x:Name="YValue" DecimalPlaces="0" Increment="1" Value="30" />
<Button Content="Move Me" FontSize="20">
<Button.RenderTransform>
<TranslateTransform X="{Binding ElementName=XValue, Path=Value}" Y="{Binding ElementName=YValue, Path=Value}"/>
</Button.RenderTransform>
</Button>
<Button Content="Button" FontSize="20">
<Button.RenderTransform>
<TranslateTransform X="40" Y="40"/>
</Button.RenderTransform>
</Button>
</StackPanel >

BlurRadius on DropShadowEffect not observed

If you provide a BlurRadius setting on a DropShadowEffect, it doesn't seem to have an affect. It will always result in rendering a drop shadow with 0 blur radius.

<DropShadowEffect BlurRadius="20" ShadowDepth="20" Color="{StaticResource DarkGray}"/>

Built in visibility/bool converter

I want to specify a binding for UIElement.Visibility that resolves to a boolean true/false. Fayde should convert the boolean to Visible/Collapsed respectively.

Select Text on a TextBox can cause Text to disappear

Testing XAML;
<TextBox HorizonatalAlignment="Stretch" VerticalAlignment="Stretch" AcceptsReturn="True" Text="{Binding XAMLSource}" TextWrapping="Wrap"/>

The text would disappear when try to select the text in the TextBox. The error on the Javascript console is "Uncaught TypeError: Cannot call method '_ClearCache' of undefined".

You can see this problem in the following link by selecting text in the XAML Source tab in the following page:
http://faydedemo.azurewebsites.net/default.html#Input

Performance issue

I have noticed performance difference between a control in a simple test page from that of the same control nested in a more complicate page (in real application).

The GridSplitter control XAML on the Fayde.TestSite is exactly the same as that in my demo application. I did side by side comparison. It feels very responsive on the TestSite, but sluggish on my demo.

The difference is also browser dependent. The difference on IE and Chrome are much smaller than on FF or Safari. Safari is worst in this comparison.

Tab Control Bug

  1. Tab Control does not open 1st TabItem as default. Setting IsSelected = true on a TabItem only makes it looks like it is selected, but it doesn't show the tab content.

  2. I have the following XAML:

<controls:TabControl Margin="5" Grid.Row="0" >

         <controls:TabItem Header="One">
              <TextBlock Text="Tab 1 Content" />
          </controls:TabItem>

          <controls:TabItem >
              <controls:TabItem.HeaderTemplate>
                <DataTemplate>
                  <Ellipse Width="20" Height="20" Fill="Blue" />
                </DataTemplate>
              </controls:TabItem.HeaderTemplate>
              <TextBlock Text="Tab 2 Content"/>
          </controls:TabItem>

          <controls:TabItem>
              <controls:TabItem.Header>
                <StackPanel Orientation="Horizontal">
                  <TextBlock Text="Four"/>
                  <Ellipse Width="20" Height="20" Fill="Blue" />
                </StackPanel>
              </controls:TabItem.Header>
              <TextBlock Text="Tab 3 Content"/>
          </controls:TabItem>

/controls:TabControl

Tab1 works fine.
Tab2 doesn't show the Header correctly, but if I click the tab, it shows the tab 2 content.
Tab3 shows the header correctly. But when the tab is clicked, the following error message shows up: "0x800a139e - JavaScript runtime error: AttachException: Element is already a child of another element."

Style TargetType Required Error Message

If you forget to put the TargetType on a style, Fayde will error when trying to apply the style but the error message is not very helpful.

Uncaught Exception: Cannot have a null PropertyProperty value Fayde.js:5864

ComboBox changing selection

The scenario to recreate the issue is as follows:

Select an item from a ComboBox. Then, click the dropdown again to change the selection. At this point, I get the javascript error:

Error (http://localhost/Fayde/Fayde.js) @ 12468
Uncaught InvalidOperationException: Element is already a child of another element.

ICollectionView

Fully implement ICollectionView interface. This may require changes to Nullstone to allow interfaces to have interface registrations.

multi-browser supporting issues

  1. TreeControl Open node icon doesn't show on Firefox.
  2. ContextMenu doesn't work on IE.
  3. Response seems sluggish on Safari
  4. Several demo pages are broken on Safari. The page just shows [object Object]. Need to do more test to find out which control caused the problem.
  5. Font looks ugly on Safari.

Error loading any xaml document

A change in Chrome caused a crash in the xaml loader. When trying to resolve "getNodeValueImplicitDependency", was using Attribute.ownerElement which doesn't exist.

BindingExpressions not being parsed correctly

It appears that more complicated binding expressions that include for example "RelativeSource" or "StringFormat" are not working. (i.e. Text="{Binding FullName, StringFormat='My name is {0}.'}") As a workaround, the Binding can be defined in longhand format such as the following:

<TextBlock>
<TextBlock.Text>
<Binding Path="FullName" StringFormat="My name is {0}."/>
</TextBlock.Text>
</TextBlock>

HyperlinkButton Navigate code is broken in the latest build when targetName is set to a Frame

I use HyperlinkButton inside my TreeView Item Template. The TargetName is set to "ContentFrame" which is a Frame on the page. When the button is clicked, it should display the page which the URL pointing to in the Frame, which was working before version 0.9.8.18. Now it is broken. I debugged code and found the problem is in the HyperlinkButton._Navigate function, the following code no longer finds the Frame on the page.

var targetUie = this.FindName(targetName);

ProgressBar bug

  1. Progress Bar control missing Default Style. When using DefaultTheme, I can only see a blank box without Progress value. using MetroTheme, I can see the value.

  2. Setting Width on the ProgressBar make the Progress to show 100% regardless the current Value.

  3. Binding only works when set Mode=TwoWay, We should only need one way binding for ProgressBar as the control is a readonly control.

  4. Got "0x800a139e - JavaScript runtime error: Exception: UpdateLayout has entered infinite loop and has been aborted." error when setting ProgressBar value 100. This error can be seen on the demo page when using Metro Style, and setting 100 on the numericbox:
    http://faydedemo.azurewebsites.net/default.html#Slider

Listbox SelectedItem Binding Issue

When binding to a SelectedItem on a Listbox, the SelectedItem will not be set due to a timing issue. The ListBoxItems aren't generated at the time of the SelectedItem being bound so the original value never gets applied.

Transitions

In windows 8 store app development there is this neat feature for specifying animations applicable on a grid.

    <Grid.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition />
        </TransitionCollection>
    </Grid.ChildrenTransitions>

All children will then when the grid loads and displays, animate according to the collection, which is really easy then to specify page transition animations.

DomainUpDown bug

DomainUpDown box shows [object Object], when you click on the box, it shows the current item.
Testing XAML:

<controls:DomainUpDown Margin="5" IsCyclic="True" ItemsSource="{Binding List}" Height="Auto" HorizontalAlignment="Left" Width="400">
<controls:DomainUpDown.ItemTemplate>
<DataTemplate>
<TextBlock
Margin="4,2"
FontSize="34"
Text="{Binding Name}" />
</DataTemplate>
</controls:DomainUpDown.ItemTemplate>
</controls:DomainUpDown>

"Uncaught AttachException: Element is already a child of another element. " error

I have a page with the following XAML, it works fine. But if I move the style definition from the Page.Resources to the Application.Resources in Default.fap, the Page only works on the first time load. I would get an error saying "Uncaught AttachException: Element is already a child of another element. " when I come back to this page after switching to other pages.

<Style x:Key="RadioButtonList" TargetType="ListBox">
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
  <Setter Property="Margin" Value="2 0 2 0" />
  <Setter Property="ItemsPanel" Value="{StaticResource HorizontalStackPanel}"/>
  <Setter Property="ItemContainerStyle">
    <Setter.Value>
      <Style TargetType="ListBoxItem" >
        <Setter Property="Margin" Value="15 5 15 5" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
              <Border Background="Transparent">
                <RadioButton IsHitTestVisible="False" VerticalAlignment="Center" IsChecked="{TemplateBinding IsSelected}">
                  <ContentPresenter />
                </RadioButton>
              </Border>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
</Style>

</Page.Resources>

<StackPanel Margin="5">
  <TextBlock Text="RadioButton List"/>
  <ListBox Style="{StaticResource RadioButtonList}">
    <ListBox.Items>
      <ListBoxItem>opton1</ListBoxItem>
      <ListBoxItem>option2</ListBoxItem>
      <ListBoxItem>option2</ListBoxItem>
    </ListBox.Items>       
  </ListBox>
</StackPanel>

StringFormat

Binding.StringFormat is turning 0 into empty string.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.