Triggering Haxe functions from within OpenFL TextField HTML links

It’s been a while since I posted anything useful (not sure if I ever have) but anyway here’s a tip for the Haxe / OpenFL coders out there.

Sometimes you need to have responsive, flowing text in your application and still use it to trigger functions, just like a webpage. So here is the solution. This works with a regular OpenFL text field, or a Label in FeathersUI.

var walkThruText = new TextField(); //or new Label();
walkThruText.htmlText = 'Want a walkthrough on how to use the tool?<br /><font color="#0000ff"><a href="event:tutorialClick">Watch this short tutorial</a></font> to become an expert.';

walkThruText.addEventListener(TextEvent.LINK, (linkEvent:TextEvent)->{
	switch (linkEvent.text){
		case "tutorialClick":
			trace("You clicked the link!");
	}
});

So the secret is to add an event with a name as the href on the <a> tag, then listen for the TextEvent when it gets clicked.

Bonus tip: text formatting within a TextField can be applied by either using the “setTextFormat” method on a text field and providing a start/end range, or you can use various html tags as listed here.

I hope this helps someone!

Mobile First?

One of the recent catch phrases in web development these days is “Mobile First”. The idea behind it is that since mobile now comprises the majority of web traffic, that’s what should get our most attention.

To many web designers, mobile first means “do a mobile layout first and then worry about the desktop experience later.” As a result, these designers give up the freedom that having a blank canvas affords. In other words, their designs look overly simplistic when viewed on a large device.

Should it take many screens of scrolling to find the information I need?

We fought for this

I started building websites professionally in 1996, when dial-up internet was the norm, and layouts were done using HTML tables. Once a page size exceeded 200KB, it was considered too large. We designed for 640 pixel wide screens at first, and if you happened to have 800 pixels on your CRT monitor you learned to live with condensed layouts.

Imagine my delight when CSS allowed designers to really work with the screen size instead of against it. Soon you could use fancy graphic backgrounds, custom graphic buttons, even rollover effects which didn’t require JavaScript programming.

Along the way bandwidth steadily increased. Nowadays a single homepage can easily exceed 10 MB and nobody complains. In the right hands, this can result in very beautiful experiences on the web.

The better way: User First

Websites are for people, not devices. If you remember that, a lot of the building blocks become easier to craft:

  • User interface isn’t just simple—it should be always organised to take advantage of the space available so the user can get more done, quicker.
  • Use less data if you can provide a comparable user experience. Compress your scripts. Lazy load your images. Choose the right image formats. Use an adaptive image compressor on your server to serve smaller images to mobile users.
  • Make it pretty and then simplify for mobile. People simply like to see graphics and the simple fact is that larger screens allow for more. Make sure it’s appropriate, but let your creative muscle get some exercise.

Web design is a craft, and it is communication. Embrace your end user and you will enjoy your job, and your users will enjoy what you produce.

Work Update – Building a 3-D Web Store

Lately I’ve been working on a couple projects which use 3-D technology to arrange and display merchandise. One project is tied to a Joomla web store which will handle organising the 3-D models, saving scenes and selling of the real merchandise. The other is done using Haxe and Away3D, and would be compatible with mobile devices potentially.

View of the 3-D scene builder Currently used controls on the 3-D shopping cart

Please  if this interests you for your business. I will likely post more about this later!