Ionic 2 Full Swipe

Note: I will be updating this to RC0 shortly. I do know there is a minor issue with the button’s width not responding to the expanded space.

While working on my upcoming book on the Ionic framework from O’Reilly, I was reading over the blog post about some new additions to the <ion-item-sliding> component supporting a full swipe gesture. I hopped over to the docs to see if they explained how to enable it. Unfortunately, they did not have anything posted yet, so I began to deconstruct it from the code sample. Here is the sample:

<ion-item-sliding>
  <ion-item> Item 1 </ion-item>
  <ion-item-options side="left">
    <button>Mail</button>
  </ion-item-options>
  <ion-item-options side="right" (ionSwipe)="saveItem(item)">
    <button danger>
      Trash
    </button>  
    <button secondary expandable (click)="saveItem(item)">  
       Save
    </button>  
  </ion-item-options> 
</ion-item-sliding>

To support this interaction, two things must be added to our<ion-item-sliding>. First, we need to add the expandable directive to the button.

<button secondary expandable (click)=”saveItem(item)”>

This allows for the visual feedback of the button growing as the user swipes across the item.

swipe_demo

Typically this is attached to the item that is closest to the end of the row. To listen for the swipe gesture, we only need to include an ionSwipe event listener to the <ion-item-options> component. This listener should call the same function as if the user tapped on the item. Here is a simple Plunker showcasing it.

ConfiGAP updated – 2.0.2

config_announce_small

We released a new version of ConfiGap that now supported auto-updating for OSX users. We also addressed a minor build issue for Windows users. You can download it from http://configap.com/.

What’s next?

We are looking at extending this tool so it will work with non-PhoneGap Build config.xml files. Under the hood, we are looking to migrate the code base to Angular 2 and Angular Material.

If there is a feature you want to be added into ConfiGAP, just let us know.

Learn Apache Cordova: The Basics Released!

lynda-cordova

Apache Cordova is the open-source version of PhoneGap, the leading tool for cross-platform app development. It’s a write-once, run-anywhere solution specifically designed for mobile. But to ensure a smooth cross-platform workflow, it helps to know some setup and configuration basics. In this course, Chris Griffith introduces Apache Cordova and the PhoneGap ecosystem, including the two command-line interface (CLI) tools and the PhoneGap desktop app. He shows how to set up your local system and how to create, configure, and build your first project with the Cordova CLI. Once you’ve mastered the fundamentals, Chris shows how to extend your app with native and third-party plugins that enable features such as QR code detection and geolocation, and debug your app, preview it in an emulator or on an actual device, and then prep it for release in the Apple Store or on Google Play.

Duration: 1 hr, 24 minutes

Check it out!

ConfiGAP 2.0a released!

Leif Wells (@leifwells) and I are proud to release the new version of ConfiGAP! This version was a complete rewrite of the entire application. We moved off using Adobe AIR and Flex as our technology stack, onto one based on Electron and AngularJS.

advanced_settings

There were a lot of learning pains along the way, but that was part of the reason to migrate, to learn a new set of skills.

icon_settings

The development took a bit longer than expected, in part, some additional technology migrations. Our early efforts were based on using nwjs as our desktop shell, but as that project seemed to slow in its development, we shifted over to the Electron shell.

Also, our initial UI layer was built using Bootstrap, but we opted to explore using Zurb for Apps instead. Although we got the job done with Zurb, we are now looking to migrate again, this time to Angular Material. In addition, we are also planning to upgrade from Angular 1.x to 2.

advanced_settings

There are some additional features that we will be adding in coming weeks (Better Windows Platform support).

We hope you find ConfiGAP useful in your PhoneGap Build workflow. Drop us a line if you find an issue or want a feature. Download it from configap.com.

-Chris & Leif

Hiking Guide: Sedona released!

sedona_site_hero

After some unforeseen hiccups, we have finally released our first paid app, Hiking Guide: Sedona! It is available for both iOS and Android for $1.99. The app contains over 130 hikes in the Sedona region. You can find a wide range of hikes; from easy to hard, from short to long, the perfect hike is a few taps away.

The app contains USGS topographic maps that outline each trail’s route, as well as providing descriptions of the trail and directions to the trail head.

We hope you enjoy the app and use it explore the many hikes in Arizona’s Red Rock Country.

 

Farewell to the Edge…

Adobe Edge Preview

Adobe announced today that it was ending their Edge Tools and Services experiment. I use the term experiment, as these products were built as part of a transition period for Adobe, shifting away from the Flash Platform toward a web platform stack. I was fortunate enough to be a part of the early development of many of these tools (as an Adobe Community Professional), but their usefulness as stand-alone elements was always troublesome.

For example, there was never a simple workflow to take your Edge Reflow work into a larger web project. Nor was it easy to fully interact with Edge Inspect from your system and devices.

But these experiments did lead to some tangible enhancements in Adobe’s main product lines. The responsive media query tool in Dreamweaver CC is a direct result of the groundwork laid by Reflow. The device preview features in PhotoShop and Illustrator are based in part on Edge Inspect.

But the mother of the Edge Tools and Services was Edge Animate (for those who remember, it was just Edge at first). EA was a interesting tool, focusing on animating the DOM rather than just painting to the HTML canvas. The timeline explored new ideas for animation control. Part of its appeal was that it was not Flash, which carried a dreaded (and partially unwarranted) stigma for many. But like all technologies, the web and its tools evolve. Although you could create some incredibly rich and interactive animations, EA never seemed to fit in. That Flash Professional app kept evolving as well, supporting more formats as publishing options (Canvas, WebGL, OAM). Take a look at last year’s Adobe MAX conference, and you can see that Flash’s animation roots were still strong and growing (judging by the number of sessions).

I have given several web animation talks, and could never quite explain how both tools fit under the Adobe umbrella. With today’s announcement, I will no longer be faced with that issue. Edge Animate’s development has been ended. It is still available as part of your CC subscription (heck, Fireworks is still there!), so you can continue to use it on your projects. However, as the web evolves with new browsers, standards, and libraries, EA will not be updated.

In its place, we can turn to Animate, the renamed Flash Professional. Like a phoenix rising from the ashes, Flash has really returned to its roots as a first class animation tool and is now reborn.

Now, designers can use a tool that they are all probably comfortable with, without worrying about backlash from managers or clients who didn’t understand that the tool was more than just a SWF creator.

I am looking forward to exploring Flash’s Animate’s new future as part of my design toolkit. To all those at Adobe who worked on these products, thanks for the efforts and experiments.

 

A quick look at Ionic Creator

creator-preview

Recently I had the chance to talk with Matt Kremer, the project lead behind the Ionic Creator web app. For those not familiar with this app, it is an online design tool for creating Ionic frameworks apps. Drifty (the company behind Ionic) has a long history of developing tools like this; Codiqa (for jQuery Mobile) and JetStrap (for Bootstrap), so seeing a visual design tool for Ionic was to be expected.

I had explored an earlier version of the tool, and it had a number of rough edges. Recently, Matt has made a number of improvements to it, and spent an hour showing me the new features.

Right off the bat, Creator now supports multiple projects via a nice clean landing page. If you had used the app before, you might remember how clunky it was. Where this comes into play, is you can now have team accounts, thus allowing your designers, developers, and other team members the ability to reference the project. The team feature is a paid option for the service.

Next up is the expansion of starter templates. For those who use the Ionic CLI, you are probably familiar with the three templates available; Blank, Side Menu, and Tabs. Creator has a slightly different set of templates; Blank, Login, Signup and Tabs. Now, the Login and Signup templates are very similar. One noticeable difference is the lack of a SideMenu template. Matt explained some of the difficulties in integrating this template into the app. He is hopeful as the app migrates to leverage the v2 framework, those issues will be resolved.

 

CreatorUI

In the past, I had tried to mockup a simple tab based UI and had a lot of trouble. I can say in this latest build of the tool, I was able to mockup my UI with little or no trouble. One area in particular was being able to properly set the tab’s icon.

Another improvement is the app is now smarter about components themselves. Previously, when you tried to add a checkbox and did not have a containing form element, the app would not allow it. Not only that, there was no feedback as to why you could not drag and drop the component onto the canvas. The underlying answer was there was no containing form element for the checkbox. So, Creator will now automatically add a containing form element if one is not already there. No longer do you have the appearance of the tool being broken.

Through the app, I was also impressed with the performance gains that had been made. The earlier version was quite sluggish. While there is still more to be done (isn’t that always the case?), the app has reached an acceptable level of performance for my usage.

Now, once we are done with the design, what can we do with it? Creator allows the project to be shared via URL, email or SMS, and can also require a passcode to view it. But beyond that we can reference it as a template source directly from the Ionic CLI. Simply click the export button and select the Ionic CLI option, and a unique code will be generated. Or if you prefer, you can download it as a .zip file.

As with all visual editors, there comes the question of what does the code look like? Again, I am pleased to say that Matt has done a nice job at providing a decent starting point to begin build your awesome Ionic app.

I am looking forward to the continued development of the this tool, as it is great way for my students to mock up their apps quickly. Plus, there is some more cool stuff coming that I can’t reveal yet, so stay tuned.