Step by Step for Creating Your First Angular Element

July 6, 2018, 3:53 am

≪ Previous: Infragistics Team visited South Korea

Angular Elements allow us to create reusable Angular components, which can be used outside of the Angular application. You can use an Angular Element in any other application such as normal HTML, React, etc. Essentially, Angular Elements are normal components, which are packaged as Custom Elements. You can learn more about Custom Elements here.

Angular Elements are reusable components, which can be used outside Angular. You can learn more about

We will keep things simple in this post and, in a step by step manner, learn to create a basic Angular Element. So, let us get started.

Step 1: Installation

Create a new project using Angular CLI

ng new demo1

Once the project is created, change directory to demo1 and install Angular Elements. For that, run an npm command, as shown below:

npm install @angular/elements

To work with older browsers, we need polyfill. So, let us install that also as shown below:

npm install @webcomponents/custom-elements

After installing polyfill, open polyfills.ts file and add these two entries:

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

Step 2: Create the Component

In this step, we will create a reusable component, which would be used as an Angular Element.

   import { Component, Input } from '@angular/core';
 
  @Component({
      selector: 'app-message',
      template: `
 <h1 style='text-center'>{{title}}</h1>
  <h2>hey {{name}} loving Angular Elements {{answer}}</h2>
`,
      styles: ['h2 {color:red;}']
  })
  export class MessageComponent {
      title = 'Angular Elements';
      @Input() name: string;
      @Input() answer: string;
  }

MessageComponent is a very simple component with two properties decorated with the @Input() decorator.

Step 3: Register the Component

To register a component to be used as an Angular Element, we need to perform following tasks:

Import component.
Pass it in declarations array.
Pass component in entryComponents array.
Do not pass any component in bootstrap array.

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { MessageComponent } from './message.component';
 
 @NgModule({
     declarations: [
         MessageComponent
     ],
     imports: [
         BrowserModule
     ],
     providers: [],
     bootstrap: [],
     entryComponents: [MessageComponent]
 })
 export class AppModule {
 
 }

We do not need to bootstrap custom elements. They will be created automatically when added to the DOM and destroyed when removed from the DOM, however, they have to created somehow hence we are adding them in entryComponents array. You must be knowing this property from dynamic component.

Step 4: Create Element from the component

We need to invoke createCustomElement to create a custom element from an Angular Component. To do that, first import following items in angular.module.ts

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

After importing required modules in the AppModule, we need to create custom element as shown in the listing below. Also, we are manually calling ngDoBootstrap.

export class AppModule {
 
      constructor(private injector: Injector) {
          const customElement = createCustomElement(MessageComponent, { injector });
          customElements.define('app-message', customElement);
      }
 
      ngDoBootstrap() {
 
      }
  }

Step 5: Use Custom Element

Ideally, we will use the custom element in any external html file. In a further article, we will cover that. To use created custom element in index.html of same angular application, just place it in body, as shown below:

<body>        <!-- <app-root></app-root> -->        <app-message name="dj" answer="yes"></app-message></body>

Now run the application using command ng serve and you should have custom element rendered, as shown in below image:

Image may be NSFW.
Clik here to view.

Therefore, we can conclude that to work with Angular Custom Element, we need to perform following steps:

Install @angular/elements
Create component
Register component in entryComponent
Invoke createElement to create custom element
Use it on html

I hope you find this post useful. Thanks for reading. If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.

Image may be NSFW.
Clik here to view.

↧

All About the Developers

July 6, 2018, 7:43 am

≫ Next: Exciting Additions to Our Angular Data Grid

≪ Previous: Step by Step for Creating Your First Angular Element

This week, SD Times turns its light on developers – their jobs, their roles, and the way they work.

One of the top-trending articles on the site gives developers a list of questions to ask before joining a new project team or taking a new job. These questions will help developers get to the crux of the matter: Is the team they’re joining effective?

While there are no magic metrics that can quantify effectiveness, these questions will help developers gain a deeper understanding into how the new organization works.

Developers in the cloud

A recent survey of developers found that just about half lack an understanding of serverless computing, but growth opportunities and salary rank high in the things they want out of their jobs. According to an article in SD Times,

the number one reason developers leave their jobs is because of a lack of training and opportunities to work in new technologies. Immediately following were pay concerns, poor leadership and outdated technologies.

The study also found that about half of all developers responding to the survey are using containers. As IT organizations continue to see the time and cost savings of breaking applications down to small, interchangeable bits of logic, functionality and data.

Twenty years of open source

In its July issue, SD Times looks at the history of open source, from the early efforts of pioneers such as Richard Stallman (GNU, free Software ) up to popular projects today such as Angular JS, node, Git and Kubernetes. SD Times editor-in-chief David Rubinstein shares his introduction to the open-source community and looks at some of the seminal moments in the movement in his latest column and declares that open source has won.

We see it with the embrace of open source by longtime community arch-rival Microsoft, which was scorned for being the antithesis of open source by trying to lock users in to its operating system, its database, its developer tools and more. Today, Microsoft is a major contributor to many open-source projects and though its recently announced acquisition of GitHub sent some shock-waves through a still skeptical open-source community,

Microsoft appears to be setting itself up as a proper steward. As reported in SDTimes, “As part of the acquisition, GitHub will continue to focus on developers. Microsoft corporate vice president and founder of Xamarin, Nat Friedman, will become the new GitHub CEO. GitHub’s current CEO Chris Wanstrath will become a Microsoft technical fellow, reporting to executive vice president Scott Guthrie.

“So as we look to the next decade of software development and beyond, we know it’s all about the developer. And as we’ve gotten to know the team at Microsoft over the past few years through collaborating on projects from Git LFS to Electron, we’ve learned that they agree. Their work on open source has inspired us, the success of the Minecraft and LinkedIn acquisitions has shown us they are serious about growing new businesses well, and the growth of Azure has proven they are an innovative development platform,” Wanstrath wrote in a blog post.

Image may be NSFW.
Clik here to view.

↧

Exciting Additions to Our Angular Data Grid

July 6, 2018, 8:00 am

≫ Next: Simplifying Different Types of Providers in Angular

≪ Previous: All About the Developers

Our Angular Data Grid has had some user-friendly and powerful changes come with the launch for v6.1. With our development looking to keep the grid updated with a mobile-first design, it shows in the components that they're implementing along the way to bring customization and data control to the developers. Let's take a look at the newest updates to Ignite UI for Angular and the impact it'll have on your Angular grid options.

Multi-column Headers

Multi-column headers have now made their way into the extensive column features that we have, joining the likes of Column Pinning, Column Moving, Column Resizing, and Summaries. With the columns, you can now group them under a common header. It's an excellent way to organize columns and make sure that each grouping best represents your data.

Image may be NSFW.
Clik here to view.

GroupBy

The GoupBy component also works with column grouping, as it helps you visualize your data records in hierarchical groups. The grouping is going to be dependent on the column values, and it can be expanded, collapsed, and reordered through the UI or API.

Image may be NSFW.
Clik here to view.

Updates to Cell Editing

More customization choices have been added to the cell features, helping you tailor the Angular grid to your needs.

Copy and Paste: You can easily copy and paste information amongst individual cells and across cell ranges.
Selection: Effortlessly select or deselect individual cells.
Styling: You can apply specific styles of your choice to cells to help highlight certain data points.
Templates: You can also choose or create custom templates for your cells.

Image may be NSFW.
Clik here to view.

Columns: Moving and Hiding

You can move your columns around, helping you to reorder, organize, and drag your information around. This works well with the Column Pinning feature, since moving a column into the pinned area will automatically pin the column to that area.

You can also quickly hide your columns from view, displaying your most pertinent data.

Image may be NSFW.
Clik here to view.

The Toolbar

You now have a container for UI operations with the toolbar that's located at the top of the Angular grid. It'll match the grid's horizontal size and contains UI controls that are related to grid features like the column hiding, column pinning, Excel exporting, and others.

Image may be NSFW.
Clik here to view.

Combo

The igx-combo component proves itself to be a strong input feature, as it combines the elements of the basic HTML input and select function and the igx-drop-down component. The combo component offers you a way to easily filter and select multiple items, group custom values, and also add custom values to a particular dropdown list.

There are custom templates that you can use to change the header, footer, and items, plus the component integrates with the template driven and reactive forms.

The igx-combo component also reaps the benefits of our virtualization directive and our ARIA support, since you're able to interact with intuitive keyboard navigation and quick, smooth dropdowns.

Image may be NSFW.
Clik here to view.

Dropdown

The dropdown component offers a variety of handy features: single-selection, keyboard navigation, and full accessibility compliance.

Image may be NSFW.
Clik here to view.

Overlay

The overlay service for our Angular grid is tied directly to our toggle directive. A developer can set additional overlay parameters to the toggle content to change the way it's rendered.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

The New Filtering UI

With the overlay replacing the toggle component, you have more control over the parameters with which you'd use to filter your data. You can easily add your own custom filtering conditions and scale up in complexity to filter by what you need.

Chips

With the addition of chips to the UI, you can now see a display of individual and keyboard accessible values.

Image may be NSFW.
Clik here to view.

Keyboard Navigation

The keyboard navigation has expanded, offering accessibility support and navigational ease. For instance, now the Tab button will automatically move you to the next cell while saving your data in the previous cell. If you hit Shift plus Tab, you'll be brought back to the previous cell.

Global Search

The new global search feature will apply the search to all of the grid's columns, making it easy to find what you need.

Overall, these additions are sure to enhance your applications built with Ignite UI for Angular and its powerful Angular Data Grid.

Image may be NSFW.
Clik here to view.

↧

Simplifying Different Types of Providers in Angular

July 11, 2018, 12:55 am

≫ Next: Infragistics Windows Forms Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

≪ Previous: Exciting Additions to Our Angular Data Grid

An Angular Service provider delivers a runtime version of a dependency value. Therefore, when you inject a service, the Angular injector looks at the providers to create the instance of the service. It is the provider that determines which instance or value should be injected at the runtime in component, pipes, or directives. There are many jargons involved here, so to understand purpose of types of providers, let us start with creating a service. Let’s say we have a service called ErrorService, which is just logging the error message.

import { Injectable } from '@angular/core';@Injectable()export class ErrorService {    logError(message: string) {        console.log(message);    }}

Now, we can use this service in a component, as shown in the listing below:

import { Component } from '@angular/core';import { ErrorService } from './errormessage.service';@Component({    selector: 'app-root',    template: `
  <input [(ngModel)]='err' type='text'/>
  <button (click)='setError()'>set error</button>
  `,    providers: [ErrorService]})export class AppComponent {    constructor(private errorservice: ErrorService) { }    err: string;    setError() {        this.errorservice.logError(this.err);    }}

We are importing the service, passing it in the providers array, and injecting it in the constructor of component. We are calling the service method on click of the button, and you can see error message passed in the console. Very simple right?

Here, Angular will rely on the values passed in the providers array of component (or module) to find which instance should be injected at the run time.

“A Provider determines that how object of certain token can be created.”

So, when you pass a service name in providers array of either component or module, like below:

providers: [ErrorService]

Here, Angular is going to use token value ErrorService and, for token ErrorService, it will create object of ErrorService class. The above syntax is a shortcut of the below syntax:

providers: [{    provide: ErrorService, useClass: ErrorService}]

The provide property holds the token that serves as the key for

locating the dependency value.
registering the dependency.

The second property (it is of four types) is used to create the dependency value. There are four possible values of second parameter, as follows:

useClass
useExisting
useValue
useFactory

We just saw example of useClass. Now, consider a scenario that you have a new class for better error logging called NewErrorService.

import { Injectable } from '@angular/core';@Injectable()export class NewErrorService {    logError(message: string) {        console.log(message);        console.log('logged by DJ');    }}

useExisting

Now, we want that instead of the instance of ErrorService, the instance of NewErrorService should be injected. Also, ideally, both classes must be implementing the same Interface, which means they will have same method signatures with different implementation. So now, for the token ErrorService, we want the instance of NewErrorService to be injected. It can be done by using useClass, as shown below:

providers: [    NewErrorService,    { provide: ErrorService, useClass: NewErrorService }]

The problem with the above approach is that there will be two instances of NewErrorService. This can be resolved by the use of useExisting.

providers: [    NewErrorService,    { provide: ErrorService, useExisting: NewErrorService }]

Now there will be only one instance of NewErrorService and for token ErrorService instance of NewErrorService will be created.

Let us modify component to use NewErrorService.

import { Component } from '@angular/core';import { ErrorService } from './errormessage.service';import { NewErrorService } from './newerrormessage.service';@Component({    selector: 'app-root',    template: `
  <input [(ngModel)]='err' type='text'/>
  <button (click)='setError()'>set error</button>
  <button (click)='setnewError()'>Set New eroor</button>
  `,    providers: [        NewErrorService,        { provide: ErrorService, useExisting: NewErrorService }    ]})export class AppComponent {    constructor(private errorservice: ErrorService, private newerrorservice: NewErrorService) { }    err: string;    setError() {        this.errorservice.logError(this.err);    }    setnewError() {        this.newerrorservice.logError(this.err);    }}

Here, for demonstration purpose, I am injecting service in the component, however, to use service at the module level you can inject in the module itself. Now, on the click of set error button NewErrorService would be called.

useValue

Both useClass and useExisting create instance of a service class to inject for a particular token, but sometimes you want to pass value directly instead of creating instance. So, if you want to pass readymade object instead of instance of a class, you can use useValue as shown in the below listing:

providers: [    {        provide: ErrorService, useValue: {            logError: function (err) {                console.log('inhjected directly ' + err);            }        }    }

So here, we are injecting a readymade object using useValue. So for token ErrorService, Angular will inject the object.

useFactory

There could be scenario where, until runtime, you don’t have idea about what instance is needed. You need to create dependency on basis of information you don’t have until the last moment. Let us consider example that you may need to create instance of ServiceA if user is logged in or ServiceB if user is not logged in. Information about logged in user may not available until last time or may change during the use of application.

We need to use useFactory when information about dependency is dynamic. Let us consider our two services used in previous examples:

ErrorMessageService
NewErrorMessageService

For token ErrorService on a particular condition we want either instance of ErrorMessageService or newErrorMessageService. We can achieve that using useFactory as shown in the listing below:

providers: [    {        provide: ErrorService, useFactory: () => {            let m = 'old'; // this value can change
            if (m === 'old') {                return new ErrorService();            } else {                return new NewErrorService();            }        }    }]

Here, we have taken a very hardcoded condition. You may have complex conditions to dynamically create instance for a particular token. Also, keep in mind that in useFactory, you can pass dependency. So assume that you have dependency on LoginService to create instance for ErrorService token. For that pass LoginService is deps array as shown in the listing below:

providers: [    {        provide: ErrorService, useFactory: () => {            let m = 'old'; // this value can change
            if (m === 'old') {                return new ErrorService();            } else {                return new NewErrorService();            }        },        deps: [LoginService]    }]

These are fours ways of working with providers in Angular. I hope you find this post useful. Thanks for reading. If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.

Image may be NSFW.
Clik here to view.

↧

Infragistics Windows Forms Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

July 10, 2018, 3:21 pm

≫ Next: Infragistics WPF Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

≪ Previous: Simplifying Different Types of Providers in Angular

Release notes reflect the state of resolved bugs and new additions from the previous release. You will find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

↧

Infragistics WPF Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

July 10, 2018, 3:25 pm

≫ Next: A Comparison Between the Microsoft SharePoint Mobile App and Infragistics SharePlus: Powerful Functionality

≪ Previous: Infragistics Windows Forms Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

In order to download release notes, use the following links:

WPF 2017 Volume 1 Service Release (Build 17.1.20171.2200)

• PDF - Infragistics for WPF 2017 Volume 1
• Excel - Infragistics for WPF 2017 Volume 1

WPF 2017 Volume 2 Service Release (Build 17.2.20172.2143)

• PDF - Infragistics for WPF 2017 Volume 2
• Excel - Infragistics for WPF 2017 Volume 2

WPF 2018 Volume 1 Service Release (Build 18.1.20181.176)

• PDF - Infragistics for WPF 2018 Volume 1
• Excel - Infragistics for WPF 2018 Volume 1

Image may be NSFW.
Clik here to view.

↧

A Comparison Between the Microsoft SharePoint Mobile App and Infragistics SharePlus: Powerful Functionality

July 11, 2018, 6:01 am

≫ Next: Ignite UI Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

≪ Previous: Infragistics WPF Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

For a mobile app to be successfully adopted, it must have the necessary functionality to drive mobile team productivity. Centralized management capabilities also come into play in determining if a mobile app is enterprise ready and can be easily deployed across the organization. This article in our SharePlus vs SharePoint comparison series explores additional core functionality that can make or break successful app adoption and deployment.

Integration with Leading File Providers

SharePoint for iOS App Review: “You can't connect any other services like Google Drive or Dropbox.”

SharePoint's homogenous environment relegates the user to a cloud-based experience with OneDrive only. While this is helpful if your business already runs with SharePoint or OneDrive, this becomes difficult for those who are looking to adopt a mobile solution but have a different file-hosting sites. These businesses would need to migrate their data from their original file-hosting sites.

SharePlus has been designed with openness in mind and works seamlessly with all leading file-hosting sites and popular mobile device management systems - including Google Drive, Dropbox, Box, and OneDrive. This gives companies and mobile teams the freedom and flexibility to access and work with content no matter where it lives.

Image may be NSFW.
Clik here to view.

Automated Offline Sync

SharePoint for iOS App Review:

"...The apps on other eco systems have more functionality."

Mobile teams don't always know ahead of time if they’ll be in an offline environment let alone what specific files they will need to access while offline. Having an Enterprise-ready solution means ensuring that the solution anywhere and anytime access to a mobile team’s important data.

The SharePoint mobile application requires teams to know in advance what files they would need to access prior to going out into the field, and then requires end users to proactively download files one at a time while they are online and connected. This is a lot to ask of mobile teams and inevitably leads to the inability to access content to make the sale, solve a customer issue, or keep work flowing in the field.

Image may be NSFW.
Clik here to view.

SharePlus enables administrators to centrally batch download and automatically sync files for mobile teams. This takes all of the end user guesswork out of what files they will need and there is no need for mobile teams to think about this ahead of time. The latest version is just always there for mobile teams to access and do their jobs.

Image may be NSFW.
Clik here to view.

Enabling Data Driven Teams

A key to transforming mobile teams and drive competitive advantage is to enable them to make better decisions on the spot. SharePlus empowers mobile workers create and share data visualizations right within the app to help them gain insights and better analyze the data they have at hand. Using data to make better decisions can resolve customer issues in the moment and can dramatically increase customer response times.

One App to Manage

What also makes an app enterprise ready is the ability to centrally manage and deploy it. SharePlus comes with a single administration tool to centrally provision users, enable quick mobile solution configuration. IT administrators can quickly and easily create and deploy custom mobile workspaces without code using mobile workspace templates. SharePlus also integrates with leading MDM providers, including Airwatch, MobileIron, and Citrix to ensure secure data access and to reduce deployment risk.

Compare for Yourself

If you'd like to see SharePlus file integration, data visualizations, and management capabilities in action, be sure to head over to our demo for SharePlus where you can learn more. You can also explore the how important a simple UX and curated content experience is mobile teams as well as how choosing the right mobile app can drive business transformation in our other SharePlus vs SharePoint comparison series blogs.

Image may be NSFW.
Clik here to view.

↧

Ignite UI Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

July 13, 2018, 7:29 am

≫ Next: Infragistics ASP.NET Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

≪ Previous: A Comparison Between the Microsoft SharePoint Mobile App and Infragistics SharePlus: Powerful Functionality

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Note: This is the last service release of Ignite UI 2017 Volume 1

Download the Release Notes

Ignite UI 2017 Volume 1

Ignite UI 2017 Volume 2

Ignite UI 2018 Volume 1

Image may be NSFW.
Clik here to view.

↧

Infragistics ASP.NET Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

July 13, 2018, 7:40 am

≫ Next: Module Pattern in JavaScript

≪ Previous: Ignite UI Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

Note: This is the last service release of ASP.NET 2017 Volume 1

Download the Release Notes

ASP.NET 2017 Volume 1

ASP.NET 2017 Volume 2

ASP.NET 2018 Volume 1

Image may be NSFW.
Clik here to view.

↧

Module Pattern in JavaScript

July 16, 2018, 10:24 pm

≫ Next: Infragistics Heads to ng-Nepal

≪ Previous: Infragistics ASP.NET Release Notes - July 2018: 17.1, 17.2, 18.1 Service Release

In JavaScript, code encapsulation can be achieved using Modules Patterns. In addition, it is used to create private and public properties. There are various ways a module pattern can be implemented. In this article, we will learn to create a module pattern in ES5. Before we go ahead and start looking into implementation of the module pattern, here are some of the benefits:

Freeze the scoping
Code encapsulation
Creating private or public scope
Creating a namespace
Creating public and private encapsulation

We can implement a module pattern using JavaScript Object Literals and Immediately- Invoked function expression. Just to refresh your memory, an object literal will look like the below listing:

var Product = {
 
    price: 600,
    setOrder: function () {
        return this.price;
    }
}
 
console.log(Product.setOrder());

You can add properties after creation of object. Also, an Immediately- Invoked function expression looks like the example below:

var add = function (num1, num2) {
    let res = num1 + num2;
    console.log(res);
}(7, 2);

With combination of these two, we can implement Module Patterns in JavaScript. Let us start with creating the module:

(function () {
    'use strict';
    // Your code here
    // All function and variables are scoped to this function
    var price = 99;
 
}());
 
console.log(price); // undefined

It is a self-contained module or an anonymous closure. It creates the scope for the function and everything is wrapped inside that function itself. So, when we tried to access price outside the function, it was undefined. Keep in mind that this anonymous module is present in the global scope.

We can export the module by assigning it to a variable using expression, and then creating private and public encapsulation using the return statement. Consider below code:

var module1 = (function () {
    'use strict';
 
    //private 
    let color = 'red';
 
    // public 
    return {
        price: 800
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.color); // undefiend

We are doing following in above code snippet,

Creating an IIFE.
Assigning IIFE function to a variable
Returning an anonymous object literal to create private and public encapsulation.

All properties of returned object would become public and can be accessed outside the module, however, any variable not part of the returned object cannot be accessed outside module. That is why for price we are getting 800 as the output, but, for color, value is undefined because it is private to the module1. Let us modify module1 to have more private and public properties, as shown in the listing below:

var module1 = (function () {
 
    //private 
    let color = 'red';
    let model;
    function setModel(m) {
        model = m;
    }
    // public 
    return {
        price: 800,
        getModel: function (m) {
            setModel(m);
            return model;
 
        }
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.getModel('bmw')); // bmw

As you see that, we can access private encapsulated variables using the public encapsulated functions. Mainly in module pattern, every variable is private until it is part of return object.

Module pattern emulates classes in JavaScript. It creates private and public encapsulated variables by returning an object. It encapsulates privacy using closures. In a diagram, we can show:

Image may be NSFW.
Clik here to view.

Another variation of module pattern is Revealing Module Pattern. The only variation is we return object as shown in the listing below:

var module1 = (function () {
 
    //private 
    let color = 'red';
    let model;
    function setModel(m) {
        model = m;
    }
    let privatePrice = 800;
    let getModel = function (m) {
        setModel(m);
        return model;
 
    }
    // public 
    return {
        price: privatePrice,
        model: getModel
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.model('audi')); // audi

Module Revealing Pattern has more consistent naming and better readability of the code. To summarize using module pattern, we can achieve public and private encapsulation in JavaScript. I hope you find this post useful and now implement Module Pattern in your JavaScript application.

hope you find this post useful. Thanks for reading. If you like this post, please share it. Also, if you have not checked out Infragistics Ignite UI for Angular Components, be sure to do so! They have 30+ material based Angular components to help you code web apps faster.

Image may be NSFW.
Clik here to view.

↧

Infragistics Heads to ng-Nepal

July 20, 2018, 10:02 am

≫ Next: As You Develop Software, Always Consider the User Experience

≪ Previous: Module Pattern in JavaScript

Do you hear that in the distance? The faint murmurings of converting custom elements and third-party schematics are growing louder as the ng-Nepal conference draws closer. Heralded as the largest Angular gathering to grace Nepal, its advent on July 21st aims to bring together a vast array of respected authors and speakers to dive into the world of Angular.

Broadcast live in five major cities across Nepal, there are 130 developers attending the day to listen to in-depth Angular talks spread across eight highly respected speakers. The talks will range around topics like working with forms in Angular, customizing attribute directives, and increasing the performance of an Angular application.

With the conference sponsored and partnered with by over twenty major tech companies, like Infragistics, Microsoft, NPCERT, Subisu, and QuestPond, the organizers of the event worked to create an extensive conference set to help participants learn.

Infragistics’ own Dhananjay Kumar was an integral piece in bringing the conference together and is a three-time speaker at the event. His talks will elide closely to some of his most popular articles, introducing attendees to Ignite UI for Angular, holding an in-depth Angular session, and speaking to change detection in Angular.

Image may be NSFW.
Clik here to view.

Along with Kumar’s talks, every attendee at the conference will receive and Ignite UI for Angular promo code through their email, allowing them to jump-start their Angular projects with the fastest Angular data grid in the world.

Image may be NSFW.
Clik here to view.

As the conference moves throughout the day, make sure to follow the updates on Twitter with the hashtag, #ngNepal. Also, you can follow Infragistics for the latest Angular updates and check out the newest features added to Ignite UI for Angular’s powerful component suite.

Image may be NSFW.
Clik here to view.

↧

As You Develop Software, Always Consider the User Experience

July 24, 2018, 10:34 am

≫ Next: Indigo.Design 2018 Roadmap

≪ Previous: Infragistics Heads to ng-Nepal

By David Rubinstein

You may have written the most elegant code to create your latest application, receiving kudos from other developers on your team for the effort. But if it fails to satisfy users, it’s all for naught. That’s why keeping the user experience in mind from application concept to deployment is so important.Josh Ulm, group vice president of UX Design, PaaS and IaaS at Oracle, spoke to SDTimes online editor Jenna Sargent recently on how to organize a UX team to complement your development team.

Developers, he posited, are only one leg of the three-legged stool of application creation. The other two are product managers and designers. The key, he said, is to keep designers feeling like they’re a part of the development process.

One platform that helps designers and developers work together is the Indigo.Design platform from Infragistics.

The platform is composed of four key elements. Sketch UI Kits is a library of UI components, patterns, pre-defined screens, with each symbol in the UI kit mapping to an Angular compionent in Ignite UI for Angular. Indigo Cloud allows designers to add hotspot navigation and screen transitions to their applications, and more. A Code Generation Service, that is a Visual Studio Code extension, integrates with designs in the Indigo Cloud to create UI code in Angular, and Ignite UI for Angular, which comprises more than 50 UI components built on the Angular framework – including extremely fast data grid and data chart.

When the design prototype is complete, the design team can share the URL with the development team, which can access the design in the Infragistics Visual Studio Code plug-in and generate code for whichever part of the screen they want.

Angular wants developers to build better app experiences

AngularJS was created with developers in mind, and recent advances have focused on the tool chain more than the framework. In an interview with Stephen Fluin, Angular developer advocate at Google, he told SD Times his team is doubling down on the tools that help developers keep up with the rapidly evolving tool ecosystem. He cited ng update, a tool created to help developers stay on top of dependencies and update to the latest version of Angular or other third-part tools, and will make changes to the application driven by those third-party updates.

In the interview, he also noted that most all Angular teams are using component libraries, due to Angular’s architecture.

All of which means better experiences for application users.

Image may be NSFW.
Clik here to view.

↧

Indigo.Design 2018 Roadmap

July 24, 2018, 12:16 pm

≫ Next: From Design to Code: Announcing Indigo.Design

≪ Previous: As You Develop Software, Always Consider the User Experience

Indigo.Design is a unified platform for visual design, UX prototyping, code generation, and app development. Our goal with Indigo.Design is to give you the tools and capabilities to drive productivity across all the personas that make up teams charged with delivering amazing experiences to customers. It is comprised of four parts:

Sketch UI Kits in the form of Sketch Libraries that include components, patterns, and apps;
Indigo.Design Cloud includes services for image-based prototyping, collaboration with stakeholders, and unmoderated usability studies;
Visual Studio Code Extension that generates Angular code;
Ignite UI for Angular UI components & controls for high-performance, touch-first mobile, and desktop web apps.

Each piece has its own roadmap, based on a couple factors:

How we deliver value across the tool chain to drive collaboration & productivity for teams
How we deliver best-of-breed capabilities for each target persona’s tool of choice

For the remainder of 2018, we have aggressive goals for each tool in the tool-chain, as shown in the following sections:

Graphic Designer / Visual Designer Role

As Sketch is currently the core Visual Design tool, we've centered the UI Kits around it. Sketch gives us the ability to customize our UI Kits with custom overrides on the symbols we provide - thus allowing the detail we need to ensure code is generated accurately. We will continue to improve the features in the Sketch symbols in our libraries. In Q3 2018, we will ship:

Additional UI Patterns – UI patterns are the basis of apps, and they help drive productivity by removing repetitive work for commonly used scenarios. We’ll ship more patterns that will help you design / build apps faster.
Additional Typography, Shapes, and Density Features – One of the more important aspects of Sketch is its flexibility, and with the Material 6 restrictions removed on what it means to deliver a Material-based app, we are going to improve our Sketch UI kits to take advantage of the Material 6 features, so you deliver more creative designs with Material & Indigo.Design.
Stencils – Apps are made more complete with a polished UI, highly stylized stencils, graphics, & imagery. These not only help support the meaning and intent of a page but can add real polish to your apps. We are going to ship domain specific stencil libraries, like Finance, Medical, Manufacturing, etc., so you can design more beautiful apps and use these graphics in your production experiences.
Sketch Plug-ins – There are two areas in Sketch that we want to improve as soon as we can:
1. A Sketch plugin that automatically syncs your artboards with the Indigo.Design Workspace. This makes keeping the work between the visual designer and the UX designer in sync.
2. A visual configure that will let you create and lay out controls directly to an artboard through a custom dialog. This means it’ll be easy to add rich controls like Charts & Grids to your designs quickly, saving time and ensuring the richer controls are set up currently in Sketch for the code-generation service.

UX Designer / Architect Role

Indigo.Design Cloud will receive significant, very exciting updates, as our goal between Q3 and early 2019 is to move our desktop-based prototyping tool to an HTML Web-based experience. You’ll have a high-performance design tool accessible via the web to design and share prototypes easier than ever with stakeholders. The Q4 plan is:

Cloud-based Screen Designer Preview – The current incarnation of our image-based prototyping tool on Indigo.Design allows you to upload images and add navigation or flows to those images. With the screen designer, you’ll be able to design new screens and experiences within the same UI. We’ll have a toolbox / property editor experience, coupled with a WYSIWYG design surface, that includes all the core components from the Sketch UI kits, as well as the shipped UI patterns. This provides complete control of new screen and app design, without needing to use Sketch to access & use the Sketch UI kits and pattern libraries in our design system.

The unique benefit of this approach is that a visual designer, UX architect, or even a developer can cobble together screens, flows of screens, interaction states, and entire apps in a cloud-based WYSIWYG that will output best-practices Angular code!

Developer Role

The Visual Studio Code extension is the glue between designs in Indigo.Design and your Angular codebase. In the current iteration of the extension, a link opens your prototype and you select for what you want Angular code generated, and it inserts the HTML, CSS, TS into your Angular project. There is significant improvement coming in the next few months:

We are adding a "Login" to the extension which will give you more flexibility on what you might want to code-generate and when. You'll have access to all of your workspaces and designs in the Indigo.Design cloud. This will give developers more flexibility to choose what the design team has in process or completed, and the dev team can choose the right time to get code integrated into their app.
Flutter Code Generation – We are moving beyond Angular and delivering code generation for Flutter. We’ll be adding new UI kits for Sketch in the design system and additional features to support Flutter. This is really exciting for us; we previewed our Flutter capability during Google I/O in May of this year, and we are looking forward to delivering this in 2018.
More templates and starter-apps – Part of the excitement around Indigo.Design is that anyone can create screens, UI patterns, and apps in Sketch using the design system and get Angular code. We will add more artifacts to the design system, so you can get benefit from apps faster, without having to be an expert designer!

We are also adding a ton of features in Ignite UI for Angular, some of the highlights for Q3 / Q4 are an Angular Spreadsheet, a complete Excel library, a cloud-based styling tool that makes it easier to create beautiful CSS for Angular apps with a WYSIWYG tool, higher performing React Grids & Charts, and many more. For the complete roadmap for the web UI controls, check out the roadmap here:

https://www.infragistics.com/community/blogs/b/infragistics/posts/coming-up-2018-roadmap-for-ignite-ui-for-angular.

If you have any questions, or features you'd like to see, please shoot me an email at jasonb@infragistics.com

Image may be NSFW.
Clik here to view.

↧

From Design to Code: Announcing Indigo.Design

July 26, 2018, 5:48 am

≫ Next: Step-by-Step with Images to add Ignite UI for Angular in an Existing Angular Project

≪ Previous: Indigo.Design 2018 Roadmap

Back in May, I announced our design to code vision for how visual designers, UX Architects, Product Managers, & Application Developers can participate in a collaborative software design and development process, allowing each stakeholder to use the tools they love the most, including Sketch, Indigo Studio and Visual Studio Code and the frameworks they love the most like Angular & Flutter.

Today I am excited to announce the release of Indigo.Design, a unified, cloud-based platform for visual design, UX prototyping, code generation and app development.

Image may be NSFW.
Clik here to view. Indigo.Design Design to Code Sketch & Angular

We believe that you'll get the best outcomes if we participate in the ecosystem of tools that you love the most and that give you the most productivity – we aren’t trying to wrestle you out of Sketch if you are a visual designer, or Indigo Studio if you are a UX Architect, or Visual Studio Code if you are a developer. We know you are most productive in the tools you use every day, all day, we aren’t asking you to change. We'll bring the tooling into your process, not the other way around. We won't force you down an uncomfortable path that will deliver less then amazing results.

What you get with Indigo.Design

Indigo.Design includes four key components that make up the design to development process of creating amazing experiences, with the goal of ensuring that stakeholders are involved in the design process, and the elimination of the error-prone & tedious hand off of designs from designer to developer - Indigo.Design lets you generate code instead, delivering unparalleled team flow and productivity.

Design System - 50+ UI components surfaced as Sketch UI Kits that map to our Ignite UI for Angular UI toolset.  Designs created using these components will generate HTML, CSS & Angular code. We’ve also included 45+ UX/UI patterns and complete applications to jumpstart your design projects, plus a couple completed app designs that you can learn from. Our libraries are designed with extensibility in mind, allowing you to customize components or UX patterns easily for your brand needs.

Image may be NSFW.
Clik here to view.

Design Cloud– Is our cloud experience that has a few key features & benefits. An image-based prototyping tool with built-in group collaboration allows you to organize your teams around public and private workspaces. With image-based prototyping, you can Import your Sketch documents or images and then add interactions and transitions to show user flows, then share your prototype with others and view on any device.  Add to that the unmoderated usability studies feature, which lets you create task-based tests for your prototypes, and we’ll record audio & video, so you can watch your users interact with your prototypes all while returning real-time analytics and reports as tasks are completed.

Image may be NSFW.
Clik here to view.

Design Code Generation Service: Is surfaced via a Visual Studio Code extension that links your cloud-based designs to your development team. Use the URL generated from your Indigo.Design prototype to access your prototype from the Visual Studio Code extension, select the components or views you want HTML, CSS & code for, and with 1 click, we’ll generate best-practices Angular code and add it to your application.

Image may be NSFW.
Clik here to view.

Ignite UI for Angular: 50+ Material-based UI components designed and built on Google's Angular framework, including the fastest Angular data grid and data chart on the market. Each symbol in the Sketch UI kits map to our Angular components, ensuring full-featured, enterprise ready capabilities in your apps.

Image may be NSFW.
Clik here to view.

Who can benefit from using Indigo.Design?

Indigo.Design can help anyone that uses Sketch & Angular bring productivity in their teams and drive amazing experiences to their customers.

Development managers can get unparalleled team flow and productivity. Combine UX guidance and Sketch Libraries for the designers with the powerful Indigo Studio for prototyping and user testing and bringing it all together in an Ignite UI for Angular project.
UX Architects can share, collaborate, & test the experience with users. With an Indigo.Design prototype, they get user videos and analytics from usability studies to decide on the right design before coding.  
Sketch designers can craft best-in-class, functional designs using our components & UX patterns in the expressive Indigo Design System with Sketch UI kits. Extensibility is built in with easy customization to match the brand experience their app needs.
Angular developers can skip handoffs - everything a design team crafts in Sketch from the design system matches our Angular components, so there is 100% certainty in the outcome of high-quality HTML, CSS & Angular code from the design.

What about Flutter? What about React?

My original post around Design to Code was all about Flutter (http://flutter.io), a killer new mobile framework from Google that seems to be taking the world by storm. Flutter is super exciting to us; at Goggle I/O we demoed an early version of our code generator for Flutter from a Sketch design with Indigo.Design. We are working on Flutter now, stay tuned for access to Flutter beta's in Q3.

We are investing in React controls now - by Q4 this year, you'll see new a new React Data Grid, React Chart, React Financial Chart, 100% framework-free - no 3rd party dependencies. Just like our Angular Grid & Charts, we are focused on high-volume, real-time data scenarios and will bring the fastest React grid and charts to the market. Following that, we'll ship React code generation as part of Indigo.Design.

For the complete roadmap on Indigo.Design, visit: https://www.infragistics.com/community/blogs/b/infragistics/posts/indigo-design-2018-roadmap

Availability & Pricing

Indigo.Design is available today for immediate trial and purchase. We’re offering 2 pricing models for the Enterprise SKU that includes everything described in this blog post. There is a yearly subscription for $995 or a very attractive $99 per month option. Check out the pricing page here:

https://www.infragistics.com/products/indigo-design/pricing

Wrap Up & Resources

I hope you are as excited as we about Indigo.Design and its potential to help design & development teams build amazing app experiences while reducing time, cost and rework.

We have a lot of guidance – help, videos and samples - to help you get started and successful on day 1, get started here:

Getting Started Overview: http://indigo.design/help/getting-started.html
Learning Library: http://indigo.design/help/video-tutorials.html. There are 12 videos today, we’ll be posting more every week.
Sample Apps & Demos: http://indigo.design#app-gallery. These include 2 complete demos (Sketch, Indigo.Design files plus complete Angular apps).

Please visit the Forums for help if you need: https://www.infragistics.com/community/forums/f/indigo-design.

If you have any other questions, comments, feedback, shoot me an email at jasonb@infragistic.com. In the mean-time, get started today by going to http://indigo.design and sign up for your trial!

Image may be NSFW.
Clik here to view.

↧

Step-by-Step with Images to add Ignite UI for Angular in an Existing Angular Project

July 26, 2018, 12:46 pm

≫ Next: Working with Ignite UI for Angular Toolbox extension in Visual Studio Code

≪ Previous: From Design to Code: Announcing Indigo.Design

Let’s say that you’re already working on an existing Angular project, and you wish to add the Ignite UI for Angular library into the project. In this blog post, we will follow a step-by-step approach to add the Ignite UI for Angular library in existing Angular project.

Step 1: Add Ignite UI for Angular library

Begin with adding the Ignite UI for Angular library in the project. We can use npm to do this. So, run the command shown below to install Ignite UI for Angular.

npm install igniteui-angular

Image may be NSFW.
Clik here to view.

Step 2: Add HammerJS

Next, you need to install Hammerjs, as Ignite UI for Angular uses Hammerjs for gesture.

npm install Hammerjs

Image may be NSFW.
Clik here to view.

Step 3: Modify angular.json file

After installing Ignite UI for Angular, let us make sure that the project references the Ignite UI for Angular styles and the Hammerjs library in the angular.json. Modify angular.json as shown below:

"styles": [
   "src/styles.css",
   "node_modules/igniteui-angular/styles/igniteui-angular.css" ],
 "scripts": [ "node_modules/hammerjs/hammer.min.js" ]

We have added references in styles and scripts section, as depicted in the image below:

Image may be NSFW.
Clik here to view.

Step 4: Modify style.css

Ignite UI for Angular styles uses the Material Icons. Let us import those in the styles.css, as shown below:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Step 5: Import Hammerjs

We have installed Hammerjs and next we need to install Hammerjs in main.ts as shown below:

import 'hammerjs';

After importing, main.ts should have following imports:

Image may be NSFW.
Clik here to view.

By this step, we have added Ignite UI for Angular in existing Angular project and configured required files.

Step 6: Use component

We are going to use Ignite UI for Angular DatePicker component to test whether everything is configured and installed correctly or not.

Add igxDatePicker on the component template, as shown in the below listing:

<igx-datePicker item-width="50%"                [value]="date" [formatter]="formatter"></igx-datePicker>

Then add below code in the component class to configure:

Day formatter
Month formatter

public date: Date = new Date(Date.now());
   private dayFormatter = new Intl.DateTimeFormat('en', { weekday: 'long' });
   private monthFormatter = new Intl.DateTimeFormat('en', { month: 'long' });
 
    public formatter = (_: Date) => {
       return `You selected ${this.dayFormatter.format(_)}, ${_.getDate()} ${this.monthFormatter.format(_)}, ${_.getFullYear()}`;
   }

In addition, to work with DatePicker component, you need to add following modules.

imports: [
      BrowserModule, BrowserAnimationsModule, IgxDatePickerModule
  ],

Run application

Now, when you run the application, you should get DatePicker component from Ignite UI for Angular added in the application. You can select a date and that will be displayed.

Image may be NSFW.
Clik here to view.

I hope this article will help you in adding Ignite UI for Angular library in existing Angular project.

Image may be NSFW.
Clik here to view.

↧

Working with Ignite UI for Angular Toolbox extension in Visual Studio Code

July 30, 2018, 8:29 am

≫ Next: Saving Money With Consistent Enterprise Applications

≪ Previous: Step-by-Step with Images to add Ignite UI for Angular in an Existing Angular Project

Ignite UI for Angular is 50+ Material-based UI components to help you build enterprise Angular application faster. Learn more about Ignite UI for Angular: here

You can add Ignite UI for Angular in your project in various ways:

Use Ignite UI CLI : Learn more about Ignite UI CLI : here
Use npm to add Ignite UI in existing project: Learn in detail here
Use Ignite UI for Angular toolbox extension in Visual Studio Code.

In this post, we will follow steps by steps approach to work with Ignite UI for Angular toolbox extension. You can learn more about extension: here . It allows you to add Ignite UI for Angular components easily to the template.

Let us start with browsing for the extension. To browse extensions preform click on the Extensions in activity either bar or click shortcut key Ctrl+ Shift+ x

Image may be NSFW.
Clik here to view.

Clicking this will open search screen to search an extension in marketplace. In the search box enter text Ignite UI and as a result you will find two results.

Infragistics Ignite UI for Angular Tooltips
Infragistics Ignite UI for Angular Toolbox

Image may be NSFW.
Clik here to view.

Feel free to install both extensions to speedup Angular development process with Ignite UI for Angular components. To install just click on the Install button.

Now to add any Ignite UI for Angular component, right click on HTML file and select option “Open Ignite UI Angular Toolbox” as shown in the image below:

Image may be NSFW.
Clik here to view.

You should get Ignite UI for Angular toolbox opened as shown in the image below:

Image may be NSFW.
Clik here to view.

Select a component to add. Let us say, we want to select Grid. Double click on Grid and Ignite UI will start installing all the dependencies and will add reference code. Essentially, it does following tasks for u

Installs all modules dependencies using npm
Import required modules for the added component to the application module or next available module.
Creates reference code.

You can verify that, it has added Ignite UI for Angular Grid modules in app.module as shown in the image below:

Image may be NSFW.
Clik here to view.

And on the HTML it has added reference code as shown in the image below:

Image may be NSFW.
Clik here to view.

In this way, you can work with Ignite UI for Angular Toolbox. Please give a try and let us know your feedback.

Image may be NSFW.
Clik here to view.

↧

Saving Money With Consistent Enterprise Applications

July 20, 2018, 11:21 am

≫ Next: Nimble Prototyping Backed By Usability Studies & User-Videos

≪ Previous: Working with Ignite UI for Angular Toolbox extension in Visual Studio Code

In most companies, employees struggle to use a wide variety of inconsistent applications. Some are old enterprise software systems bought from the major vendors, some are internally-built applications developed over the years by different teams using a variety of platforms, and others are more modern, web-based applications. Typically the only thing they have in common is that they all have very inconsistent interaction and visual design. Adding your company’s header, logo, and colors to each application merely papers over the many interaction inconsistencies.

When employees have to use inconsistent applications, they constantly need to adapt to different interactions. What worked successfully on Application A, doesn’t do anything on Application B, and may cause you to lose data on Application C. It results in lost time, inefficiency, lost productivity, and increased errors – all of which waste company money and resources. As new applications are developed by different teams, designers and developers waste additional time creating very different designs.

Employees are very resilient at adapting to even the most cumbersome and inefficient software if they use it constantly. However, inefficiently working around system problems isn’t ideal, and no one adapts to applications that are used less frequently. Each time an employee switches to another application, with a completely different interface, they have to try to remember how they used it last time and adjust their behavior appropriately.

The solution to all these problems is to study employees’ tasks, and then design consistent applications that help them accomplish their tasks easily and efficiently. Luckily, conducting user research with your employees is extremely easy and inexpensive, because they’re easily available, nearby, and they’re already being paid. All you need to do is go to them and observe them doing their work.

Once you have an understanding of employees and their tasks, you can design applications around the tasks they perform. Establish a design system with consistent interactions and create standard elements to use when designing applications. As future applications are created, the designers and developers will save time by following the standards and using the established design components.

It may sound overwhelming to think about redesigning all of your company’s applications, but you don’t need to it all at once. You can do it in a phased approach, designing all new applications using the consistent design system, and selectively redesigning older applications over time.

Establishing a consistent design system across applications will allow employees to easily learn new applications and to effortlessly switch between the tools they need to use to accomplish their work. For the company, consistent applications save money in employee productivity, increased satisfaction, and in decreased design and development cost.

Image may be NSFW.
Clik here to view.

↧

Nimble Prototyping Backed By Usability Studies & User-Videos

July 31, 2018, 10:13 am

≫ Next: The Chemistry of Indigo.Design UI Kits

≪ Previous: Saving Money With Consistent Enterprise Applications

Creating wireframes or mock-ups before coding can make it much easier to collaborate on designs and requirements. By structuring discussions around what the user will see, fewer things are left to interpretation. However, without testing the designs with the target audience, it’s an incomplete UX process.

With Indigo.Design, all you need is a web-browser to go from prototyping to watching videos of how people used your prototype. And the best part is that you can create your designs in any tool you like. Yes, even Microsoft PowerPoint!

Create prototypes in the cloud

To start creating your prototypes, visit Indigo.Design to sign in or create a free user account.

Image may be NSFW.
Clik here to view. Introducing prototyping in the cloud

After signing in, use the web-based editor to import your images. Then simply select an image, click+drag to create a hotspot and add an interaction to link to a destination screen/image. That’s how simple it is to create an interactive prototype.

When you are ready, click publish to get a link that can be shared with anyone to view the prototypes. Your reviewers can view the prototype on any device using a web-browser.

Learn more: Create your first prototype

Importing Sketch documents and flows

If you use Sketch app to create your designs and prototypes, you can easily publish it as an Indigo.Design prototype and get the all the benefits of collaboration, and usability testing with user-videos.

The best part is that you don’t have to recreate the flows that you created in Sketch. Simply drag and drop your Sketch file in the prototype editor, set a starting point, and hit publish. Now you are all set to kick-off a usability study or share a link with others!

Use Indigo.Design desktop to design your prototypes

The desktop app provides a WYSIWYG experience to create your prototypes from scratch. You can design screens by adding UI components from toolbox or from your own reusable design library.

Image may be NSFW.
Clik here to view. Desktop app screenshot

More importantly, the desktop app allows you to easily create UI states to simulate rich interactivity and custom transitions using an animation timeline. You can even import from Sketch using our Sketch plugin to add more interactivity. And naturally, you can use the desktop app whether you are online or offline!

You can then publish your prototypes to the cloud or your on-prem server to get all the benefits of collaboration, commenting, and usability studies.

Learn more: Indigo.Design Desktop features

Unlimited usability testing

You can set up a usability study for any prototype published on Indigo.Design. Creating a study let’s you collect usability analytics and user-videos for each participant.

Image may be NSFW.
Clik here to view. Task report

You do this by setting up tasks for people to complete with the prototype, and specifying an expected set of steps. Participants can complete the task however they like, but you will be able to learn whether the “expected path” is the popular one. And when watching video replays, our unique timeline visualization let’s you quickly jump to interesting events (e.g., misclicks)

If you add the usability study to a group workspace, you can let any invited member analyze the reports and videos. You can even delegate the usability study responsibility to another member of your team.

Image may be NSFW.
Clik here to view. Video player

Study owners will receive email notifications with a study progress report as and when participants complete the study.

Learn more:

Get started with Indigo.Design!

Don't stop with prototypes; get it in the hands of real users with our 1-click sharing and the ability to view prototypes on any device. Harness the power of Indigo.Design Cloud for recording user sessions and task analytics.

Image may be NSFW.
Clik here to view. Design-prototype-generate code

Use our Essential Plan for free or upgrade to Indigo.Design Professional starting at $39/mo. Want Code Generation? Get Indigo.Design Enterprise for $99/month!

Image may be NSFW.
Clik here to view.

↧

The Chemistry of Indigo.Design UI Kits

August 7, 2018, 7:41 am

≫ Next: Easily create your first Ignite UI for Angular application

≪ Previous: Nimble Prototyping Backed By Usability Studies & User-Videos

"How we have defined our atoms, molecules, and organisms.*"

By Stefan Ivanov

Image may be NSFW.
Clik here to view.Unparalleled productivity, absolute consistency, and improved collaboration: design systems have definitely changed our perspective on design. About a year ago, our team stumbled into this new and trendy concept, and it was definitely a love at first sight. As a company that is mostly recognized as a component vendor, we were able in the past years to truly commit to design and embed it deeply into our culture. We saw how our processes and products improved, but it still felt as if design failed to keep its promise. This came from the realization that at Infragistics we may have 1:10 designer-developer ratio, but that was rarely the case throughout the industry. Many of the enterprises we talk to or have been long time customers and partners of ours, live in a different world. Their designer-developer ratio is usually around 1:100, which basically means that design is the bottleneck in the process and sheds light on just a few hand-picked projects from the myriad of software that is being built. With design systems, we saw the opportunity to turn things around and boost design to have for more significant impact on large software organizations.

The Inspiration

One of the cornerstones for design systems is the work of Brad Frost and, more precisely, a book he published in 2016 called Atomic Design. It draws an interesting parallel between chemistry and design systems, looking at interface elements from the perspective of Atoms that when combined build up Molecules that constitute larger Organisms. The Indigo.Design UI Kits for Sketch take this approach by providing three libraries. Styling has sub-atomic pieces such as colors, shadows, typography styles, and icon glyphs that define the looks of the Atoms and Molecules found in the Components library. The concept of a component is familiar to developers, and this is usually a button or a hyperlink that represents an Atom but could also be a more elaborate layout such as a calendar interface or a list with templated items, where multiple Atoms are used to form a Molecule. When mixed with caution and under proper guidance, Atoms and Molecules can turn into a beautiful Organism. And this brings us to the third piece, the Patterns library. It allows people to skip mundane tasks for assembling login forms, user profiles, and detail pages by providing them with a preset collection of UI patterns, inspired from numerous real-world scenarios and guaranteed to meet your practical necessities because of that. Note that the patterns are still in their infancy and feedback or suggestions are very much appreciated!

Image may be NSFW.
Clik here to view.

To make sure your design does not catch fire or explode in your hands, the reactions we absolutely wanted to avoid during chemistry classes in high school, our team has crafted a lot of prescriptive guidance that should let even a developer to craft decent design. Not that we underestimate developers, but their design work has been quite notorious in regard to aesthetics. Indigo.Design was brought to the world to change this and let anyone, designer, developer, product owner or business analyst, be able to confidently create a good and stable piece of design as long as they follow the provided guidance.

Moving Beyond Sketch Libraries

Having provided the context and foundations for our Indigo.Design UI Kits, the leap in productivity and the improved consistency should be without doubt. But how about collaboration? Indigo.Design is much more than a collection of Sketch libraries, and the rest of the tooling speaks to collaboration. Being able to upload the Sketch project you crafted with the libraries to the Indigo.Design Cloud, define the precise interactions, and run a usability study is priceless when on a tight schedule and trying to get things right from the first time. But once you are convinced that your design functions and meets all user needs, you can leapfrog the annoying process handing off your designs to a team of developers, simply by generating most of the code assets yourself with our Visual Studio Plugin. As long as you have the data you will be consuming, you can specify your bindings by going back to Sketch and using some of the special override properties we have defined, or work alongside a developer and fill in the gaps so that your assets flow in a beautiful Ignite UI for Angular app.

Image may be NSFW.
Clik here to view.

*The parallel between design systems and chemistry was first described by Brad Frost, who explains the organization of Design Systems at length in his book, Atomic Design.

Image may be NSFW.
Clik here to view.

↧

Easily create your first Ignite UI for Angular application

August 7, 2018, 7:46 am

≫ Next: The Alchemy of Indigo.Design UI Kits

≪ Previous: The Chemistry of Indigo.Design UI Kits

I wanted to share with you how easy it is to create Angular application with our Ignite UI for Angulartoolset.

What is the purpose of this application? First of all, to demonstrate our Angular components. Second, it’s to demonstrate a real use case, and I wanted to create a system that will track my cryptocurrencies portfolio in order to check my daily gains and losses. As for the third reason, to demonstrate the use of different Аngular techniques like utilizing Guards, Pipes, and Custom Templates with our components and, of course, using of Firebase for data storing and authentication.

Image may be NSFW.
Clik here to view.

The topic will cover:

The use of Ignite UI Angular CLI
Data services, Routing, Templating, Pipes, etc.
The use of Firebase Data Storage, Authentication, and CRUD operations
Coinmarketcap API to Retrieve real-time and historical price information

Ignite UI CLI

Okay, let's start! So, have you heard about Ignite UI CLI? Yep, this is a real thing that we’ve developed that helps you create Angular applications with a predefined set of components, executing just a few commands. It takes less than three minutes to install all necessary packages and to run the project with the help of our CLI, just follow our official Getting started page.

After the building of the app is completed along with the installation of all necessary packages, you will notice that Navigation drawer and Grid components were added and already configured. The same applies for the different responsive views, routing, styles, module imports, etc. - awesome, right?

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

Okay, what's next? We want our app to show variety of things: we want to have user authentication, to track crypto data changes, and to store our Cryptocurrencies portfolio somewhere. For that purpose, Ignite UI for Angular provides all suitable components out of the box. We are going to use Chart for historical data changes and a Grid to show our crypto portfolio and provide the ability to add/update/delete cryptocurrencies, also List and Card.

For all of the above requirements we need to get the data from somewhere, this is where the Coinmarketcap API steps in - This is a free service that provides information for all active cryptocurrencies in one call.

getData() {
    if (!this.cachedData) {
      this.cachedData = this._http.get('https://api.coinmarketcap.com/v2/ticker/?convert=BTC&limit=1000')
      .map(result =>  {
        let newData = [];

        if (result['metadata'].error === null) {
          const fetchedData = Object.keys(result['data']);

          for (const key of fetchedData) {
            newData.push(this.flattenObject(result['data'][key]));
          }
        } else {
          newData = offlineData;
        }

        return newData;
      });
    }
    return this.cachedData;
}

App authentication

Below I’ve highlighted some steps that I’ve took in order to set up the Firebase authentication of the Crypto App. AngularFireAuth is going to be used for user authentication and all related actions like login and logout. This firebase service provides methods for sign in with email and password, Google authentication provider, and Facebook auth provider. For a more detailed explanation, I recommend checking up the official Angular firebase repository and documentation.

Set up a firebaseproject.
Go to the Authentication tab and enable Google, Facebook, and Email/password sign-in providers.
Based on the methods, generate Facebook ID and later on OAuth redirect URI.
Add rules and publish the changes.
Add the firebaseConfig to the Angular project.
Create Login, Signup and Email components. (code for all)
Create auth.service that will handle the redirects of registered and unregistered users (Route guards). As you can see from the code, (add code), the Portfolio page is accessible only for authorized users.

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute) {}

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {
      return Observable.from(this.auth.authState)
        .take(1)
        .map(state => !!state)
        .do(authenticated => {
          if (!authenticated) {
            this.router.navigate([ '/login' ], {
              queryParams: {
                return: routerState.url
              }
            });
          }
      });
    }

}

For more details, have a look at the official firebase authentication getting started topic, and I can guarantee that you won't feel any kind of difficulties when setting it up.

Data storage and CRUD operations

For data storing and data updates, our application is using Firebase Realtime Database which is a cloud-hosted database, stored as JSON and synchronized in realtime to every connected user. All users share on Realtime Database instance and automatically receive updates with the newest data.

Reading and writing of data is easy, and below are the steps that you could follow in order to achieve CRUD operations:

Create a separate service for data manipulations
Define `BlockItem` class that is going to be used for data fetch, adding, updating and removing of records.
Create a list binding/retrieve that will return an observable of data as a synchronized array of JSON objects. With metadata (underlying DBReference and snapshot key)

For more information check the official firestore documentation.

What about Grid CRUD? Yep, this is possible with the help of Firebase data storage and our great api. Check this file for more information on how to setup your Firebase platform which could provide you abilities for data storage, authentication, etc.

  public deleteRow(item) {
    this.selectedRow = Object.assign({}, this.selectedCell.row);
    this.deleteItem(this.selectedCell.cell.row.rowData);

    // store deleted data
    this.deletedItem.coinName = this.selectedCell.cell.row.rowData.coinName;
    this.deletedItem.holdings = this.selectedCell.cell.row.rowData.holdings;
    this.deletedItem.cryptoId = this.selectedCell.cell.row.rowData.cryptoId;
....
    this.selectedCell = {};
    this.snack.show();
  }

  public updateRow(obj) {
    const updatedItem = obj.row.rowData;
    updatedItem.holdings = obj.newValue;

    this.updateItem(updatedItem);
  }

Full code here.

Configure all components that are going to be used in the application

Fetched data is used from Charts, Grids, Listsand Cardcomponents (provide code for each).

For example, the Card component is using filtering pipes and sorting of data.

export class HomeComponent implements OnInit {
....
  public search1: string;
....
  get filterOptions() {
    const fo = new IgxFilterOptions();
    fo.key = 'name';
    fo.inputValue = this.search1 ? this.search1 : '';
    return fo;
  }
  .....

Check up the code in order to see how each of the components is bound.

Grid

This is the main page that is going to be used for data manipulating and tracking of price changes. We are going to define a grid with five column (count depends on the screen size) and each column will have its own ng template for data representation. This includes images, icons for price movements, and using of decimal pipes.

The action buttons above the grid will handle manual data refresh and adding of new coins. igxDialogis going to be used for that purpose. A minimal validation of the coins is applied. For example, you won't be able to add already existing coins or coins that are not present in the coinmarketcap api. Each notification message is going to be shown via igxSnackBar.

For the coin holding updates, we are going to handle (onEditDone) and from there use the methods that we defined in the BlockItemService. Same applied for the `delete` and `add` coin buttons.

<igx-grid #grid1 [data]="blockItems" width="100%" height="500px" (onEditDone)="updateRow($event)" (onSelection)="selectCell($event)"><igx-column field="coinSymbol" sortable="true" [width]="'25%'"><ng-template igxHeader let-column="column">
			Coin symbol</ng-template><ng-template igxCell let-cell="cell" let-item let-ri="rowIndex" let-column="column"><a class="aStyle" (click)="openChart($event, cell.row.rowData.coinSymbol)"><div class="positionTop"><img src="https://s2.coinmarketcap.com/static/img/coins/32x32/{{ cell.row.rowData.cryptoId }}.png" /><span class="symbolPosition">{{ cell.row.rowData.coinSymbol }}</span></div></a></ng-template></igx-column><igx-column field="holdings" header="Holdings" editable="true" sortable="true" [width]="'25%'"><ng-template igxCell let-cell="cell" let-item let-ri="rowIndex" let-column="column"><div class="positionTop">
				${{ calculateHoldings(cell.row.rowData.holdings, cell.row.rowData.usdPrice) | number:'0.2-2' }}<br /><b>{{ cell.row.rowData.holdings | number:'1.0-5'}}</b></div></ng-template></igx-column><igx-column header="Price" field="usdPrice" sortable="true" [width]="'25%'"><ng-template igxCell let-cell="cell" let-item let-ri="rowIndex" let-column="column"><div class="positionTop">
				${{ cell.row.rowData.usdPrice | number:'0.2-2' }}<br /><span class="percent-style-{{ cell.row.rowData.oneDayPercentChange >= 0 ? 'up' : 'down'}}"> {{ cell.row.rowData.oneDayPercentChange }} % </span></div></ng-template></igx-column><igx-column [width]="'25%'"><ng-template igxHeader let-column="column">
			Actions</ng-template><ng-template igxCell let-item let-ri="rowIndex" let-column="column"><span igxButton="icon" igxRipple (click)='deleteRow(item)' style="margin-top: -9px;"><igx-icon name="highlight_off"></igx-icon></span></ng-template></igx-column></igx-grid>

Chart

This component is going to be used for visual representation of the coin price changes per day. Our igxFinancialChartis easily configurable, as you just pass the fetched data to “dataSource” and, voila, everything else will be handled by the chart. Additionally, the chart respects the general financial data structure.

<igx-financial-chart [dataSource]="data" height="400px" width="100%" style="margin-top: 20px;" isToolbarVisible="false" chartType="candle"></igx-financial-chart>

Image may be NSFW.
Clik here to view.

One interesting item here that should be mentioned is the use of routes to pass data between views. The Statistics page is accessible through a couple of Views which are passing different coin names to be loaded in the chart.

IgxListand IgxCardcomponents are used to show a different visual representation of all properties associated with the returned items.

Image may be NSFW.
Clik here to view.

To sum up, everything is possible with the right tooling, and with that said, you definitely should consider using of our Ignite UI for Angular components for your next web/mobile application.

In the next blog of this series, you will learn how to transform the Angular web application that we’ve created into a native android mobile application. We are going to create a JS/HTML Cordova application and deploy it to native mobile app using the cordova command-line interface (CLI).

GitHub repository and hosted application.

Image may be NSFW.
Clik here to view.

↧

Windows Forms 2017 Volume 1 Service Release (Build 17.1.20171.2108)

Windows Forms 2017 Volume 2 Service Release (Build 17.2.20172.2076)

Windows Forms 2018 Volume 1 Service Release (Build 18.1.20181.177)

WPF 2017 Volume 1 Service Release (Build 17.1.20171.2200)

WPF 2017 Volume 2 Service Release (Build 17.2.20172.2143)

WPF 2018 Volume 1 Service Release (Build 18.1.20181.176)

Download the Release Notes

Ignite UI 2017 Volume 1

Ignite UI 2017 Volume 2

Ignite UI 2018 Volume 1

Download the Release Notes

ASP.NET 2017 Volume 1

ASP.NET 2017 Volume 2

ASP.NET 2018 Volume 1

Graphic Designer / Visual Designer Role

UX Designer / Architect Role

Developer Role

What you get with Indigo.Design

Who can benefit from using Indigo.Design?

What about Flutter? What about React?

Availability & Pricing

Wrap Up & Resources

Create prototypes in the cloud

Importing Sketch documents and flows

Use Indigo.Design desktop to design your prototypes

Unlimited usability testing

Get started with Indigo.Design!