Laser-Focused Internet Searching

Introduction

I work at Infragistics. Our company has been publishing UI control suites for many years. For each major release of a control suite, we publish online documentation specific to that release.

Today, when I perform a search for, “xamdatagrid fieldlayoutsettings” I get results for many previous versions of our WPF Help Docs that relate to the search. Unfortunately, the results contain links to old versions of our help docs; this is not what I’m looking for, but this is the nature of Internet searching.

I’ve tried limiting my results to the last year, but the results are still not optimal.

Solution

By providing the search engine (I’ve tested with both Google and Bing) with a “site:” argument, the search only returns results from the specified site. The site can be much more than just a domain name.  You must supply the subdomain such as “www”, and then you can specify a top-level fold to search.

If I modify the above search to this:   “site:www.infragistics.com/help/wpf/ xamdatagrid fieldlayoutsettings” I’ll get laser focus search results, drawn from the current documentation only because the current Infragistics English WPF docs are all under this URL, https://www.infragistics.com/help/wpf/

Having to remember and type “site:www.infragistics.com/help/wpf/” each time I need to search the current Infragistics WPF Help Docs would be a bit of a pain.

Happy Searching

The solution to never having to remember or re-enter the “site” argument is to set up a browser Favorite for each of the sites you search most often.

To do this:

  • Open your browser of choice
  • Navigate to your search engine of choice
  • For each site, you need laser focused search results for, type in or paste in the site criteria into the search and press Enter.
  • Save the current URL to a Favorite.  (I have several I’ve dragged to my Favorites bar.)

Below, I have provided some Infragistics site criteria that you can use to create search favorites for these products.

English Help Sites

site:www.infragistics.com/help/wpf/

site:www.infragistics.com/help/xamarin/

site:www.infragistics.com/help/winforms/

Japanese Help Sites

site:jp.infragistics.com/help/wpf/

site:jp.infragistics.com/help/xamarin/

site:jp.infragistics.com/help/winforms/

Searching

Now to search, open the favorite, this will cause the browser to navigate to the search engine and place the “site:” argument in the search box.  Now, you just enter your search criteria and enjoy happy and productive searching.

  1. Click on the Favorite you created
  2. Enter your additional search criteria.

9-20-2017 10-45-02 AM

Close

Obviously, this technique will work for any site, not just Infragistics. If you find yourself wanting to search a specific site or folders within that site, considering setting up a Favorite for that search.

Have a great day,

Just a grain of sand on the worlds beaches.

Enterprise Xamarin.Forms Training

Profissional Xamarin.Forms development has a sizable concept count.

Anyone with a little XAML experience can follow the many getting started tutorials and successfully create a Xamarin.Forms application for iOS, Android, UWP, and soon to RTM macOS.

However, once your application evolves beyond demoware towards a paid for or corporate enterprise application that must be maintainable over time,  the developer and team will need to start addressing the many facets of professional mobile development.

The best place to start is with the Xamarin.Forms documentation.  I always tell folks, “when all else fails, Read The Free Manual. (RTFM).” From here invest in your skill set and attend https://university.xamarin.com.

Personally, I’m looking forward to the next RTM release of Xamarin.Forms and it’s full support for .NET Standard 2.0.  This release will provide for much easier to share code without the confusing and frustrating assembly target profiles.  The number of available API’s will also be greatly enhanced.

I don’t like reinventing the wheel, especially on platforms that are not my primary development platform.  Instead, I like to leverage the knowledge and experience of professionals that their day-to-day focus is the platform I’m learning.

I just found an outstanding resource for Profissional Enterprise Xamarin.Forms Development by MVP Adam Pedley here:

https://training.xamarinhelp.com/course/enterprise-xamarin-forms-development/

Adam’s blog is located here:  http://xamarinhelp.com/

Adam’s training site is new and the content is ever growing. I just completed this course and learned a lot on these topics:

  • Architecture
  • Cross-cutting concerns
  • Security
  • Analytics

Xamarin.Forms Development Tooling

  • Cross-platform Environment Setup
  • Debugging
  • Application Profiling
  • Unit Testing
  • UI Testing
  • Continuous Integration and Deployment

This course will expose you to the high number of considerations and essential topics for creating a Profissional Xamarin.Forms application.

Have a great day,

Just a grain of sand on the worlds beaches.

Infragistics Xamarin Toolbox Free For All Users

Infragistics has published two Xamarin productivity tools on the Visual Studio Marketplace and made them free for all developers.

The Infragistics Xamarin.Forms Toolbox is the first NuGet-powered toolbox.  It includes all the Xamarin.Forms controls by Infragistics, as well as the Xamarin controls native to the platform.  The Toolbox enables developers to quickly design your page – automatically adding the namespace and XAML for your selected control.

The Infragistics Xamarin.Forms Control Configurators provides visual configuration of rich Infragistics controls like charts, gauges, and the data grid right in the XAML editor, shaving hours off your development time. Configure your controls and bind data directly from XAML files with pre-built styles and themes and rich property editing. Use the control configurator to learn the rich API’s of the Xamarin Forms controls.

Please visit the above links to install and for detailed documentation.

Enjoy!

Just a grain of sand on the world’s beaches

Updated My Visual Studio Extensions for VS 2017

I’ve updated the following extensions for Visual Studio 2017:

XAML Power Toys for Visual Studio 2015 and Visual Studio 2017

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.XAMLPowerToysforVisualStudio2015

Mole for Visual Studio 2017

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.MoleforVisualStudio2017

I’ve added the following extensions for Visual Studio 2017:

Tame Visual Studio Editor Tool Tips

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.TameVisualStudioEditorToolTips

Font Sizer

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.FontSizer

Enjoy!

Just a grain of sand on the world’s beaches

 

Ocean Validation for Xamarin Forms

Introduction

This blog post is about an example Xamarin Forms project I wrote to show using Prism, Unity, and Ocean Validation in several scenarios.

I decided to make this a video blog post and have six videos for you.

You learn the following:

  • Using the sample Xamarin Forms app and understanding the line of business scenarios it covers.
  • Using Prism and Unity in a real-world Xamarin Forms App
  • Dependency injection in a real-world Xamarin Forms App
  • Abstracting Static services and Static Device information behind interfaces to promote testing and maintainable code
  • Using Prism NavigationService and PageDialogService
  • Async Await contrasted with the Promise pattern in a Xamarin Forms App
  • Ocean validation framework with Xamarin Forms
  • Using IDataErrorInfo to surface validation errors for properties or the entire object.  (Yes, IDataErrorInfo!)  This also works for UWP.  These two platform’s binding pipeline lack data validation.  No worries, it’s very easy to do now.
  • Using Ocean validation to validate an object in multiple states.  Multiple validation states imply that the object is going through a workflow, where an object can be valid for a certain state, but not valid for other states.  This is a common scenario in complex business applications like insurance claims or when an object is completed over several Xamarin Forms pages.
  • At the end of November 2016, the Xamarin Forms ListView view began to have some problems that cost me over a day.  In the last video, I explain the issues and what I did to get around them.  I also wrote up bugs and communicated with Microsoft about these issues.

Introduction to Ocean for Xamarin Forms

Prism and Dependency Injection in Ocean for Xamarin Forms

Async Await and Promise Pattern in Ocean for Xamarin Forms

Introduction to Ocean Validation Framework for Xamarin Forms

Ocean Multi-Object State Validation for Xamarin Forms

Xamarin Forms ListView Troubles (as of 1 Dec 2016)

Source Code

https://github.com/Oceanware/OceanForXamarinForms

Close

I hope these videos have helped with your understanding of Prism, Unity, and Ocean in Xamarin Forms.

Have a great day,

Just a grain of sand on the world’s beaches

Updated Xamarin Forms BindablePicker

Introduction

On 9/30/2016 I updated the Xamarin Forms Bindable Picker, correcting it to handle the view model clearing the Items ObservableCollection.

When the view model exposes an ObservableCollection as the BindablePickers ItemsSource and the view model clears that collection, the BindablePicker now responds correctly and updates the UI as expected by:

  • Removing all items in its collection
  • Setting SelectedItem to null
  • Setting SelectedValue to null
  • Setting SelectedIndex to -1

Much appreciate the feedback and bug reports I’ve received to make this control much better.

Close

Have a great day,

Just a grain of sand on the world’s beaches

AngularJS 1.5 Input Components

Introduction

The promise of JavaScript component-based architecture frameworks such as AngularJS 1.5, Angular 2, or Aurelia is enabling developers to write less code, both HTML markup, and JavaScript.  The ability to encapsulate HTML and JavaScript into reusable components should simplify the application consuming these components greatly.

Please, review this post and code, and then start your own component library for your applications. There are enough components here to get you started.  I have chosen to make these components granular with a single responsibility, rather that make a single component with many properties to change the behavior. This approach provides clean and readable HTML markup, clearly describing the components role and behavior.

This blog post and GitHub repo are written using ES6. I wrote why I use ES6 JavaScript here. I also leverage ES7 experimental class property features in my applications.

AngularJS 1.5 components are uncomplicated element directives. These components can encapsulate business logic and are testable.

If you have time, compare the amount of JavaScript code is required by Angular 2 components to the AngularJS 1.5 components. You’ll find that AngularJS 1.5 is simpler and currently requires considerably less framework code to register. You’ll also see that I separate the component registration from the component, this removes Angular from the component enabling very fast executing unit tests.  See the Review Presentation repo example.

The below images show the clean and minimal HTML required to produce a typical data form with comprehensive validation and associated messages, including password strength metrics. The “match” directive (see app.module.js) on the second input-password component handles comparing the two passwords. The corresponding error message is displayed below these components. The input control placeholder is included for instructional purposes only and is probably not needed in a simple form like this one.

html

form

References

I did my research before embarking on creating these input components. I’m very grateful to the many community authors for their blog posts and answers on StackOverflow. The below links helped me to understand this problem space and I recommend that you study them:

Creating a custom form field with validation using AngularJS 1.5 and TypeScript

Password Strength Meter

InputBaseComponent

The InputBaseComponent is the base class for the text input components. It exposes properties common to all HTML text input controls.

The InputBaseComponent creates the component label from the name attribute if the label attribute is not supplied. It’s onInit, onChange, and validate methods are invoked by deriving classes.

Normally an AngularJS 1.5 component does not update it’s parent model directly. As explained in the above blog post this component design calls for updating the model instead of using two-way bindings or a one-way binding with a corresponding event.

I agree with this architecture in this specific use case because it mimics the interaction that an input control would have if it was not encapsulated in a separate component. It is assumed that the form these components are hosted on would be adhering to the typical AngularJS component design pattern described in the AngularJS documentation.

By requiring the model in the component registration (see input-components.module.js), the model will be injected and is available to the component controller for reading and writing. When the view needs to be updated, $render is invoked and the below function updates the component value. When the component value is changed, the model value is set in the onChanage method.

COMPONENT REGISTRATION: 
require: {
    model: "ngModel"
}

ONINIT:
this.model.$render = () => {
  this.value = this.model.$viewValue;
}

ONCHANGE:
this.model.$setViewValue(this.value);

This base class handles setting sane values for the maximumLength and for setting  isRequired based on the minimumLength. The isRequired property is used in the HTML to set a required attribute.

The onChange method provides data input length validation by limiting the value length to the maximumLength.  This code is wrapped in try-catch block to provide a seam for logging an obvious attempt to hack your site. Remember, always defend in layers and never trust any data from the internet either on the client or server.

The validate method checks the input for minimum or maximum length validation rule violations. What is nice about this implementation is that the validation messages can easily be customized to provide the user with good information.  In this application, I’ve chosen to display the validation message next to the label.  If you don’t do this, then be sure to include the label in your validation message.

export default class InputBaseComponent {

  label;
  model;
  value;
  name;
  validationError;
  minimumLength;
  maximumLength;
  isRequired = false;

  constructor(StringUtility) {
    this.StringUtility = StringUtility;
    if(this.name && !this.label) {
      this.label = this.StringUtility.parseWords(this.name);
    }
  }

  onInit() {
    this.model.$render = () => {
      this.value = this.model.$viewValue;
    }
    if(!this.maximumLength) {
      this.maximumLength = 200;
    }
    if(this.minimumLength) {
      this.isRequired = true;
    }
  }

  onChange() {
    try {
      if(this.value && this.maximumLength && 
          this.value.length > this.maximumLength) {
        this.value = this.value.substring(0, this.maximumLength);
      }
    } catch(e) {
      this.value = '';
      // log this to your system as a security message
    }
    this.model.$setViewValue(this.value);
  }

  validate() {
    if(this.isRequired && this.minimumLength) {
      if(!this.value || this.value.length < this.minimumLength) {
        this.validationError = `has a minium length of ${this.minimumLength}`;
        return false;
      }
    }
    if(this.value && this.maximumLength && 
        this.value.length > this.maximumLength) {
      this.validationError = `has a maximum length of ${this.maximumLength}`;
      // log this to your system as a security message
      return false;
    }

    this.validationError = '';
    return true;
  }

}

InputBaseComponent.$inject = ['StringUtility'];

InputTextComponent

Now that we have all the hard work done, let’s extend InputBase and call the required methods.  For an input of type text, no additional validation is required.

import InputBase from '../input-base'

export default class InputTextComponent extends InputBase {

  constructor(StringUtility) {
    super(StringUtility);
  }

  $onInit() {
    super.onInit();
    super.validate();
  }

  onChange() {
    super.onChange();
    super.validate();
  }
}

InputTextComponent.$inject = ['StringUtility'];

InputEmailComponent

The InputEmailComponent extends the InputBase and adds email input validation. Notice that if the call to super validate returns false, this validation does not run.  You can change this logic to display all validation errors or display them one at a time as I do.

import InputBase from '../input-base'

export default class InputEmailComponent extends InputBase {

  constructor(StringUtility) {
    super(StringUtility);
  }

  $onInit() {
    super.onInit();
    this.validate();
  }

  onChange() {
    super.onChange();
    this.validate();
  }

  validate(){
    if(super.validate()) {
      if(this.value && 
          !this.StringUtility.isEmailValid(this.value)) {
        this.validationError = ' has invalid format';
        return;
      }
    }
  }
}

InputEmailComponent.$inject = ['StringUtility'];

InputTextComponent Template

This template has four groups:

  • input-group – apply CSS styles for spacing and alignment
  • form – subform container for the component
  • label-area – displays the label and associated validation messages
  • input – the input control

The validation messages are shown when:

  • the form control is invalid
  • and validation error text has a value
  • and
    • the control has been touched
    • or parent form has been submitted

You can choose when users see validation messages. I’ve used the above logic in my applications and users are happy with the experience.

<input-group>
  <ng-form name="{{vm.name}}Form">
    <label-area>
      <label for="{{vm.name}}">{{vm.label}}</label>
      <error-message ng-show="{{vm.name}}Form.{{vm.name}}.$invalid && 
        vm.validationError && 
        ({{vm.name}}Form.{{vm.name}}.$touched || 
        {{vm.name}}Form.$$parentForm.$submitted)">
          {{vm.validationError}}</error-message>
    </label-area>
    <input
      type="text"
      placeholder="{{vm.label | lowercase}}"
      autocomplete="off"
      ng-model-options="{allowInvalid: true, debounce: 250}"
      name="{{vm.name}}"
      id="{{vm.name}}"
      ng-model="vm.value"
      ng-change="vm.onChange()"
      ng-required="vm.isRequired"
      ng-minlength="vm.minimumLength"
      ng-maxlength="vm.maximumLength"
      maxlength="{{vm.maximumLength}}"
      >
    </input>
  </ng-form>
</input-group>

HTML Input Control

  • placeholder – optional.  I like, that I can bind the label and then use an Angular filter to change the label to lower case.
  • autocomplete – choose the option that meets your requirements
  • ng-model-options
    • allowInvalid – when true, allow ng-change to be raised on keystrokes when the control is invalid.
    • debounce – the time delay for model updating since the last keyboard input.
  • ng-model – binds to the component value
  • ng-change invokes the onChange method
  • ng-required – when true, sets the required attribute on the control
  • ng-minlength – sets the minimum length rule for the control
  • ng-maxlength – sets the maximum length rule for the control
  • maxlength – I STRONGLY urge you to ALWAYS set this attribute on any text input control.  Setting this attribute limits the number of characters that can be entered, pasted or dragged into the control at runtime. Remember that security is always in layers.

Form Submit Button Options

There are two schools of thought around form submit buttons.  One is to disable the submit button when the form is invalid, the other to allow the user to click the submit button and then show all input validation messages.

Your choice will depend on the application requirements and stakeholder choices.

The submit button strategy needs to take into account the applications timing of when to render validation messages.

I prefer to only show validation messages after the user visits the control or when the user submits the form and the control is invalid.

Thoughts

Whether you’re using AngularJS 1.5, Angular 2, Aurelia, et al., components provide the HTML and JavaScript developer a powerful programming paradigm that embraces separation of concerns, test ability, maintainability, readability, and are down right fun to work with.

Download

https://github.com/Oceanware/InputComponents

Close

Have a great day,

Just a grain of sand on the world’s beaches