Search

Search results

  1. In this example we show how to create a drag-to-reorder behaviour on a list of items. This was made possible by the introduction of IdentityKey property on Each tag, which takes care of figuring out which items are where after a list has been modified. Making a component Since we want to have code that we can reuse in multiple places, we build a custom ux:Class component for our SortableList element. We will need to change the order of items that we pass in through ux:Property, so that list ha...

    Custom control JavaScript Reusable components Animation
  2. This example uses Router and Navigator to create a list of pages that can be navigated to with corresponding buttons. We create a list of 20 pages by calling the createPage function inside a for-loop and adding each page to an Observable. Each page has a title string and a clicked function. When clicked is called on a page, it pushes a new instance of subPage onto the router's navigation stack, and sends the title of the page as a parameter. var Observable = require("FuseJS/Observable"); func...

    Navigation JavaScript
  3. This example shows how we can create a segmented code input control with neat animations between focused and non-focused states. Design inspiration was taken from the clean and attractive Code input field concept by Samuel Kantala. Our SegmentedInput is a reusable component and contains both UX code for layout and JavaScript for the logic. Let's take a look at the basic structure of it: <StackPanel ux:Class="SegmentedInput" HitTestMode="LocalBounds"> <string ux:Property="Label" /> <str...

    Animation Custom control JavaScript Reusable components
  4. This example shows how one can make a simple todo-app with plenty of animations. The model We make a JavaScript class to work as a model for each element and an Observable to contain them. Each Task has a title and a checked field. They also have a derived field, hidden, which observes checked. Hidden is used in markup to show and hide Tasks based on which tab is chosen. function Task(title){ var self = this; this.title = title; this.checked = Observable(false); this.hidden = ...

    JavaScript
  5. This example demonstrates how we can create an endless scrolling list that removes elements as they scroll out of view. When making large lists, we use Each and data-bind its Items property to an Observable list in JavaScript. When making infinite lists, we have to avoid extensive memory use by employing two less known properties available on Each: Limit and Offset. By setting the Limit we limit the number of items being output by the Each at any given moment, and by changing the Offset we can ...

    JavaScript
  6. In this example we'll explore how to create a simple news feed using JavaScript data binding. In this example we will be fetching data from http://www.digg.com popular articles JSON feed. You can look at the raw data here. <App Background="#ECEFF1"> <JavaScript> var Observable = require("FuseJS/Observable"); var data = Observable(); function Article(data) { this.title = data.content.title; this.description = data.content.description; ...

    JavaScript
  7. A tiny example of how to download a JSON file over HTTP, parse it and populate the user interface based on the contents. <App Background="#eee"> <DockPanel> <StatusBarBackground Dock="Top" /> <BottomBarBackground Dock="Bottom" /> <ScrollView> <Grid ColumnCount="2"> <JavaScript> var Observable = require("FuseJS/Observable"); var data = Observable(); fetch('https://gist.githubuser...

    JavaScript
  8. This example shows how to implement tab bar navigation using PageControl, PageIndicator and GridLayout. The markup <App Background="#333"> <JavaScript> var pages = [ {"name":"page1", "highlight":"#34495e", "icon":"Assets/icon-hexagon.png"}, {"name":"page2", "highlight":"#3498db", "icon":"Assets/icon-star.png"}, {"name":"page3", "highlight":"#aa3377", "icon":"Assets/icon-square.png"}, {"name":"page4", "highlight":"#88cc22", "icon":"Ass...

    Tabs Menu Navigation JavaScript
  9. Here we combine several different UX and JavaScript features to create a more involved app screen. This app screen shows how to: * Summon and dismiss the side menu using a Clicked-event and an EdgeNavigator * Move the main client area in response to the sidebar coming on screen * Animate the side menu icon, turning a familiar "hamburger"-menu icon into a "cross" dismiss-icon using Translation-, Rotation- and Opacity-transforms * Animate the menu choices in the side bar using the WhileIn...

    Sidebar JavaScript