Rendering UIs / Generating GSPs directly from pencil or balsamiq wireframes - grails

Are there any existing tools/combination-of-tools I can use so that my wireframes built using pencil or balsamiq can be directly used by my application (grails) for rendering the UI? Or maybe a way to generate GSP's out of my wireframes (assuming there is a set style guide etc.)? I am essentially looking to do away with having to code the HTML/GSP for each and every page.

Napkee is a commercial solution. I don't know any completely free one, though

Related

Embed Unreal Engine 4 project into another app

I've been trying to work on a proof of concept (POC) where I can embed a UE4 project into an existing application (in my case NativeScript) but this could just as easily apply to Kotlin or ReactNative.
In the proof of concept I've been able to run the projects on my iPhone launching from UE4 pretty easily by following the Blueprint and C++ tutorials for the FPS. However the next stage of my POC requires that I embed the FPS into an existing NativeScript application, this application will manage the root menu, chat, and store aspects of the platform in the POC.
The struggle I'm running into is that I cannot find how to interact with the xcode project generated from the blueprint tutorial and the C++ tutorial generates a xcode project that i'm unsure where the actual root is that I need to wrap.
Has anyone seen a project doing this before and if so are there any blogs or guidance that you can point me to? I've been Googling and looking around for a couple weeks and have hit a dead end. I found a feedback post here from April of 2020, that was referring to a post in January 2020 that talked about how Unity has a way to embed into other applications additionally a question from 2014 here. But other than that it's a dead end.
A slightly different approach
Disclaimer: I'm not an UE4 developer. Guilty as charged for seeing an unanswered bounty too big to ignore. So I started thinking and looking - and I've found something that could be bent to your needs. Enters pixelstreaming.
Pixelstreaming is a beta feature that is primarily designed to allow for embedding the game into a browser. This opens a two way communication between a server where the GPU heavy computations happen and a browser where the player can interact with the content - the mouseclick & other events are sent back to the server. Apparently it allows some additional neat stuff, however that is not relevant for the question at hand.
Since you want to embedd the Unreal application into your NativeScript tool(menu of some kind if I understood correctly), you could make your application a from two separate parts:
One part would run the server.
The second part would handle the overlay via the pixelstreaming.
This reduces the issue of embedding the UE4 into an application to the(possibly easier) issue of embedding a browser into your application. (Or if your application is browser based - voila, problem solved.)
If you don't want to handle the remote communication, just have the server-side run on the localhost.(With the nice sideeffect of saving bandwidth.)
Alternatively, if you are feeling adventurous, you could go and write your own WebRTC support on the application side to bypass the need for the browser alltogether. It might not be worth the effort though.
Side note: The first of the links you provided is a feature request which hints at the unfortunate fact that UE4 doesn't support embedding. This is further enforced by the fact that one of the people there says somethig along the lines "Unity can to this, it would be nice if UE4 could as well."
Yet a different approach:
You could embedd and use a virtual display to insert the UE4 part into your controller - you would be basically tricking UE4 into thinking that the desired display device is a canvas inside your application.
This thread suggests a similar approach:
In general, the way to connect two libraries like this would be through a platform dependent window handle, e.g. a HWND under Windows. Check the UE api if you find any way to bind the render target to a HWND. Then you could create a wxWindow in wxWidgets and tell UE to render into that window. That would be a first step.
I'm not sure if anything I've listed will be of much help but hey, at least I tried :-). Good luck with your game.
At the same time, the author suggests to:
Reverse the problem:
Using the UE4 slate framework and online subsystem. You would use the former to create the menus you need directly in the UE4 and then use the latter to link to the logic you want to have outside of the UE4. However that is not what you asked for so I'm listing it only for the completeness sake.

Existing iOS form framework

Hello I am building forms over and over in iPhone and iPad apps:
Custom UITableViewCells for labels with input
Localization for labels, placeholder text and section headers
Validation that marks the cells red or something and does not allow "Submit" if form is incomplete
Clicking in the cell activates the editable text box
Next / previous buttons
Reliable across devices, orientations, iOS versions
I can't imagine I'm the only one doing this. Is there a mature framework or something that can drop in and use? Could you please comment on how you use this library with designs other than vanilla UITableViews with your own colors etc.?
Take a look at IBAForms - an open source project from from Itty Bitty Apps. I haven't used it yet myself, however I believe it does most of what you want, except for validation. Here is the github page: IBA Forms
It hasn't been maintained in a while, but if you're looking for a forms library - it's mature and works. At the very least, it could be the starting point for something you take further.
Update: There is also Chris Miles' EZForm library, which is very nice.
Update #2: Have also started checking out QuickDialog, which seems to be very popular.
Update #3: Nick Lockwood has created one called FXForms
Update #4: Martin Barreto has created one called XLForm
I don't know if this counts as an answer, but i use Sensible Cocoa - Sensible TableView (STV) for this purpose a lot. It's not a "forms" framework (on top of UITableView) as such, but it can be used for this purpose in a very flexible way. It still requires some coding to build a full-fledged form but the UITableView/UITableViewController boilerplate code is reduced to a minimum. Unfortunately the developers bumped the price tag quite high with version 3.0, so i'm actually looking for a STV replacement right now. (I'd stick with STV if it wasn't for the price!)
I don't know of anything that combines all those features, but I recently open-sourced my validation library PMValidation on github, which I used developing the iPhone app Imprints. PMValidation comes with many basic types suitable for validating forms, and in fact that's what I originally built it for.
Using the PMValidationManager class you can easily listen to UITextViews or UITextFields, and update whatever graphical widgets you want via notifications. It's very modular and easily extendable, should you have more unique needs. It's under the MIT license.

How to implement a user definable interactive map in Delphi 2010?

I'd like to have an interactive floor map (so they're not huge) in my application. The maps will be different for every user, but contain similar elements which only differ by quantity and location. The application will show the map, identify certain elements and link them to information from the database.
To design and store the map, I'd rather not roll my own editor and/or come up with some custom file format. However, it would be nice if the format were open and easily readable. SVG seems to be the perfect candidate for the job. All there needs to be is a convention of how to name the elements to make them identifiable. But how to go from there? I need something that can render the SVG and distinguish between the different layers.
TSVG can do exactly this but depends on FireMonkey which I'd rather avoid - it's not even present in Delphi 2010, so I'd have to use another version and do DLL tricks.
Another option would be to use the Chromium Embedded Framework and create the map using HTML, CSS and JavaScript. That feels very bulky, and would be hard to get right.
Are there any simpler ways to do this that I overlooked, either using SVG or perhaps something completely different?
I'm not sure if a GIS system is appropriate for this. It may very well be overkill.
In the end I decided to go for D3.js using Chromium Embedded, to have a flexible and more portable solution.

WebWorks UI structure: All in one HTML, or separate files?

What is the right way to design the page structure of a WebWorks app? I'm using jQuery-mobile as well.
A: Should all the pages be in a single HTML, each page being a:
<div data-role="page">...</div>
B: Should pages be separated in different HTML files linking to each other?
I am currently using approach A, but the app is a slow when transitioning from a page to another. I suspect one of the reasons is the size of the single HTML that includes all pages.
Also another issue I'm having is that pressing the physical "back" button on the phone exits the app which is another reason I'm doubting my approach in having all pages in one HTML.
A very opinionated answer: You're using the wrong framework. jQuery Mobile is extremely bloated and I've seen it perform poorly even on recent iOS devices, not to mention BlackBerry's not exactly very performant OS.
If you continue to go down the jQuery Mobile route, I would still recommend you have all your pages in a single HTML file, not least because the user experience on WebWorks is a bit sub-par when moving between separate HTML pages. For example, you'll get very noticeable "white flashes" when you follow a link to a different HTML file, especially on older/less powerful devices (although you can mitigate that a bit by setting a background colour for your rim:loadingScreen element in the config.xml). It's up to you to decide whether that is better or worse than the slow transitions in jQuery Mobile.
As for the back button, you can override the default behaviour by attaching an event handler to the back key like so (don't forget to have the blackberry.system.event feature enabled in your config.xml):
blackberry.system.event.onHardwareKey(blackberry.system.event.KEY_BACK, function() {
// Back key pressed, go back to previous screen
}
If you're still open to an alternative solution though, I highly recommend you give bbUI.js a try (https://github.com/tneil/bbUI.js) - it's a semi-official framework that looks a lot more at home on the BB than jQuery Mobile and is better optimised for the platform (e.g. allowing you to only load scripts that you need for the particular page you're showing at that very moment, working around some WebWorks/BB-specific issues, etc.) - combine it with Zepto (http://zeptojs.com/) which is a blazingly fast jQuery replacement and you'll end up with an app that is significantly less sluggish than a jQuery Mobile based one.
You can use which ever way suits your project best. For a large app, it's probably worth having a single "index.html" which then links off to several other pages. Can make editing your code easier as well.

Creating own iOS-controls with Flex

I was looking into creating iOS-apps (especially for the iPad) with the Adobe-Flex framework. It looks very promising to code apps this way.
Is it possible to create own controls/widgets? In the far future I might want to create my own kind of gantt-calender or whatever. Is something like this possible and are there any good tutorials/book out there?
Thanks in advance!
UPDATE: I want to create iOS Components that I can use in Flex. Controls, that are not aviable by default in Flex. Is that possible? By derivating or something?
UPDATE 2: In the meanwhile I found FlexLib to be useful. How hard is it to create stuff like this on your own? Especially for mobile devices. Are there any good tutorials, books, etc. out there?
Yes, you can create your own Controls in Flex. They are commonly called Components. I suggest you start by reading the Flex Docs on how to do so. There are also plenty of other resources out there. One is a screencast series that I created for The Flex Show. Here is episode 1.
You had asked:
How hard is it to create stuff like this on your own?
It depends on what the component wants to do. The commercial components we've built at www.flextras.com have taken from three to twelve months to build. Our Calendar is built from scratch, but most of the other components extend existing Flex Framework components.
The Flextras stuff are architected for reuse. A "single use" component for a specific app can be built in 1 hour [and up].
Once again, the purpose of a component will affect how long it takes to build.
#chiffre
Ok, maybe I am guessing wrong but "iOS controls" makes me think not to "flex controls".
Anyway with Flex 4.5.1 you can add any controls you want, the only thing that you must count (and this counts a lot) is performance.
Read especially about item renderers since scrolling list is not so fast on iOS and how you can make use of cacheAsBitmap.
Also keep in mind to always use light controls when needed if not extend base controls like UIComponent or Sprite and not Button if you just need a rectangle.
Here are some links
http://blogs.adobe.com/flashplayer/2011/06/adobe-air-2-7-now-available-ios-apps-4x-faster.html
http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.

Resources