Salient Soft

I wanted to try showing a centered title with a back button on the left, in the NavBar.

I tried various ways of doing this with css hacks, using floated <h1> and <div> combinations, but could not get it all to line up correctly.

The correct way is just to include an <ion-title> in the NavBar, as follows. This can be centred via the text-center attribute.

<ion-header>
  <ion-navbar>
    <ion-title text-wrap>
      {{place.localisedName}}
    </ion-title>
  </ion-navbar>
</ion-header>

Whilst text-center worked correctly in the title, note that text-wrap did not and was ignored.

As I did not take this pattern any further (I decided not to use titles in the toolbars but to put titles immediately underneath) I did not investigate this further.

This highlights an important issue. Too much CSS hacking breaks the encapsulation of the CSS model used by Ionic/Angular which is a bad thing – other things are in danger of breaking even if it does work initially.

it is obviously better to go with the tools/tags provided and investigate this way thoroughly first for a solution – in this case I did not and initially went down a blind alley which took time as well as being a suboptimal approach which did not work and broke encapsulation.

No Comments »

This isn’t obvious when you browse the documentation, at least when starting out.

I’m coming from having used for example ThemeRoller with PrimeFaces, where structural css is defined by the components, to give size, shape, layout etc. Theming css   is defined by the theme, using common style classes etc. used by all components, to give colours, textures and fonts etc. The two concepts are mutually orthogonal, so you can use any theme with any component, and create your own theme.

I’ve seen theming and themes mentioned on a number of Angular/Ionic related sites, but without the same concept of orthogonality – themes are mentioned along with specialised components which are deemed to be part of a theme. Therefore, theming in Angular appears to encompass more than just the look and styling of components, but also the actual components and their functionality.

This could be summarised simply as follows:- ThemeRoller encompasses the look of an application, with components such as Primefaces encompassing the feel of the application.

With Angular/Ionic, the concept of theming is broader and appears to encompass both look and feel.

Some excellent posts by Josh Morony on how to theme an ionic application help to get under the hood on all this, and are available here:-

https://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/

https://www.joshmorony.com/a-list-of-common-css-utility-attributes-in-ionic-2/

https://www.joshmorony.com/tips-tricks-for-styling-ionic-2-applications/

https://www.joshmorony.com/hacking-css-in-ionic-2/

No Comments »

Whilst Angular 2 routing is handled via routers, Ionic takes a different approach with the use of the NavController and related components based on it like Nav and Tab.

Ionic navigation allows views to be pushed and popped from a navigation stack, and allows a root page to be established for a particular navigation stack.

A useful tutorial on Ionic Navigation may be found here.

No Comments »

An <ion-item> is used (among other things) as the child of an ion-list and has a number of options, detailed here.

A particular issue I hit was that by default text in an item is truncated with an ellipsis on the end, whereas I wanted it to wrap and grow the item height.

Points on this:-

1. The item is set to have a min-height and so is capable of expanding down.
2. By default, it is set to have white-space:nowrap which prevents wrapping, and text-overflow:ellipsis which gives the ellipsis.
3. Wrap can be enabled per the text alignment section in the above ion-item page, using a utility attribute documented here. These attributes are useful as they allow general types of text transformation on a variety of components. In this case, adding the text-wrap attribute to the ion-item allows the text to wrap – it triggers a css attribute selector to set white-space:wrap (a neat use of custom attributes on a custom tag to trigger a css style rule directly).
4. Note that the container for the ion-item and its various parent containers are all set to overflow:hidden, but this does not prevent text wrapping when white-space:wrap is in effect as above.

No Comments »

Having already configured Angular 2 with Webstorm  here, this post details the steps to get Ionic working in similar fashion, to be able to run and debug an ionic application running in a browser. The use of an android emulator/ a real android (and then IOS) will be dealt with later.

1. First install Ionic 2 as detailed similarly either here or here.
2. Next, configure Webstorm as detailed in this post here. Note that the first step adds a phonegap/cordova plugin which allows Ionic serve to be started within Webstorm, without using a separate command window. This trick is similar to step 10 in this post which does the same thing for angular 2/npm start. Note that I had to dig around for the phonegap/cordova executable – in my case it was a command/batch file located at C:/Users/SteveW/AppData/Roaming/npm/ionic.cmd , and note that Webstorm did require the .cmd extension explicitly to work. Per the instructions, ensure you select serve as the command and at this stage browser for the platform.
3. The second step in the post configures a Javascript Debug configuration. Enter the name and the target URL. Note that in order to get breakpoints to be obeyed, I had to add an entry in the Remote URLs of local files section. In my case I just added the same url as at the top, against the top level project folder which was already shown. Prior to this, I could set a breakpoint successfully (meaning I did not have any sourcemap issues like the ones I hit with vs code here), but the breakpoint was not obeyed. Once I added the remote URL everything worked.

No Comments »