Organizing i18n source file for data binding - internationalization

I have a SAPUI5 SplitApp application written in English. There is a need to add translation into another language.
I have already made changes to all my detail views using this documentation and I have used the first approach (jQuery.sap.resources). All translations are in WebContent>i18n>i18n.properties file and in another .properties file for another language. And it works.
The problematic part is my main menu that is situated on the master page. To build my main menu I use data binding approach. Here are the elements of the menu and how I bind them: JSBIN.
I still want to use data binding for the master page.
What is the best way to create/organize file with menu elements and file with translation of those elements?

I don't quite get your question.
You want to use Databinding for your controls and for your i18n - that's not a problem, just use two models and give one of them a name.
var oModel = [The model with the data]
var oModeli18n = [The i18n model]
sap.ui.getCore().setModel(oModel);
sap.ui.getCore().setModel(oModeli18n, "i18n");
Now you can bind your normal data using just the paths, e.g. in an XML-View:
<Text text="{title}" />
You can bind to the i18n model by just prefixing the path with the model name you set before:
<Text text="{i18n>SOME_TEXT}" />
You can use this approach with any type of model and choose any name you want to.
If I did not answer your question, please explain your problem in more detail.
Update:
I used your code to make a working simple example of the basic binding:
http://jsbin.com/wafecaqezu/1/edit?html,js,output
You just have to add the bundle...

Related

How to make admin-on-rest render a custom list component?

I am using this to build a admin UX https://github.com/marmelab/admin-on-rest and it seems to fit perfectly into what I want to build except one feature:
My work project needs to display a tree grid to display groups or subgroups of items in a tree form and also to show a drop-down to display and select a grouping field.
I think this is what is needed to achieve this:
a) Write a custom "Datagrid" which I am able to write
b) Custom "List" component to show grouping combo
c) Add custom List actions to add '_grouping' parameter to the REST request
I am unable to pass my list component to 'Resource' since it breaks the whole app rending / events logic. In OO programming lingo this will be called a classic sub classing but React framework does not support it.
What would be a proper way to achieve this functionality ?
PS: I am new to react, redux, saga so please excuse me if this is already supported in admin-on-rest. I would appreciate if such feature is possible or can be added without forking the whole repo ( modifying the existing )
I don't think you need to implement a custom <List> component for that need. A replacement for <Datagrid> should to the trick. You just need to add a custom action button, and you've already localized the place to add it to (<List actions>).
Try like this first, and then if it doesn't work (but you'll have to illustrate why), I can maybe look into replacing the <List> component.

Using variables in custom joomla module for tooltips

I'm new to joomla development, but I can't seem to figure out how to dynamically fetch descriptions to be displayed as tool tips for the form data of a module backend. I'm looking at an example module from joomlart and their code for a single field element in their xml file looks like this.
<field
name="mainWidth"
type="text"
default="auto"
size="5"
label="MAIN_WIDTH"
description="MAIN_WIDTH_DESC" />
MAIN_WIDTH and MAIN_WIDTH_DESC are obviously variables that are somehow being accessed and rendered later when the module is run in the backend but I can't find where the values to these variables are stored or how to replicate this behavior. Any help would be appreciated.
Label is the label that prints to screen, and description is rendered as the tooltip.
You can just replace these variable names with the actual text and it will work when the form is rendered.
However, in your example, I believe they are using language files to get the text to display.
Whilst you can set a language file within your module for that module's use, naming convention suggests to me that these are being pulled from somewhere like the template's language file.
( Such a file is likely to be found either under /language or /administrator/language or /templates/yourtemplate/language )
The benefit of such files is to allow for translations of the site to exist without having to write a new module / template each time.
Ultimately, if you don't want various language versions of your site, and you only intend to use the module on one site and not sell it as an extension, then there is no strong need to create a language file for your own bespoke modules (though best practise would probably be to do so).

Internationalising with multiple views

I have an action called index that returns a view and I've defined 3 views: index.cshtml, index.fr.cshtml and index.sv.cshtml, each of which contains my page in a different language. I expected my app would automatically find these views and serve them according to the browser language preference set, but it doesn't seem to.
is there some switch I have to turn on to make this work? I did add <globalization uiCulture="auto" culture="auto" /> to the <system.web> section of my web.config
TIA - e
If you go down this road, make a view per language you will end up with a lot a views and DUPLICATE code. something you want to avoid. A better approuch is the use of resources.
You can decide how far you go with globalisation : javascript / urls / tekst. The key is to make use of resources and put the key value pair there. Please look at http://channel9.msdn.com/Events/aspConf/aspConf/How-To-Achieve-World-Ready-Domination-In-ASP-NET-MVC-4
The index.mode.cshtml is for browser display mode of the ViewEngine.
You have to create a custom ViewEngine for localization. Here is one for WebForm. Just modify it to your needs and inherit from RazorViewEngine instead of WebFormViewEngine.

Need clarifications on adding regions dynamically in Marionette

I have an application where I need to display metrics. The application needs to display a separate vertical section for each metric. When I started this, there were only 5 metrics so I naively created a template with 5 regions, one for each metric I needed to display. Now, new metrics need to be added and I want to avoid adding "hardcoded" region divs in the template. I want to refactor this and create the required regions dynamically at startup time based on some configuration data.
So I have been looking at the latest Marionette release and in question "Dynamically add regions to Marionette layout", Derick Bailey mentions that Marionette v1.0 supports dynamic regions in Layouts through addRegion(), as in:
var layout = new MyLayout();
layout.render()
layout.addRegion("someRegion", "#some-element");
layout.someRegion.show(new MyView());
I have tried that in my code (using Marionette 1.0.2) and I am not getting it to work. I don't have a div with id="some-element" in my template and I suspect this could be the reason. I was hoping that Marionette would create that div itself.
Perhaps my expectation of what dynamically adding a region means is wrong. So my first question is: when adding regions dynamically to a layout, must the element id passed in the addRegion() function already exist in the layout?
If so, then I am back to the problem of having to "burn" in the template those divs for the regions to attach themselves too. My follow-up question is then: What is the best way of doing this in a data-driven fashion? Is it a matter of writing my own render() function so that the right set of divs get created? Or perhaps providing my Layout with a model object that will contain data which the template can then iterate through to create the necessary divs? How do we add regions dynamically to a Layout object if we don't know in advance how many regions we will actually need?
Aa #aaronfay specified, we need to use jQuery to create the element on the page. Here is some sample code:
var layout = new MyLayout();
layout.render()
var regionName = "dynamicRegion";
layout.$el.append('<div id="'+regionName+'"></div>');
layout.addRegion("someRegion", "#"+regionName);
layout.someRegion.show(new MyView());
I believe you would need to use jQuery (or similar) to create the element on the page. A Region expects the element to exist.
Otherwise, I believe your answer is here.

How can I take better advantage of Entity Model validation?

I currently have:
#Html.EditorFor(model => model.PurchasePrice)
I would like to split this into 2 separate fields separated by a decimal (for price input obviously). But if I do that using basic text boxes I will loose the ability to take advantage of ASP.NET's validation.
Is there a way to do this, in Razor or by using attributes, so that I am able to keep the JS and server-side validation against my Entity model?
I can easily do it somewhere else by creating my own functions within the viewmodel, but I'm new to MVC3 and not entirely sure if that would be the best route or there is a simpler method.
Edit:
This is kind of the direction I am thinking, I do not fully understand how this works.
I set 2 fields, 1 as ppDollar and 1 as ppCents. In the controller I have:
modelname.PurchasePrice = Request["ppDollar"] + Request["ppCent"];
But, I can look at that and tell that's not going to work. So, I guess the question really is how is user input validated against the entity model and how can I better take advantage of the built in functionality?
You can create custom editors for particular types that are rendered by EditorFor. You can find a lot of examples of how to do this online, most of them focusing on a custom DateTime editor but the same idea applies to any type. Just one example from a quick search:
http://buildstarted.com/2010/09/10/overriding-displayfor-and-editorfor-to-create-custom-outputs-for-mvc/
In short, the process is:
Create a partial view template, placed in the Views\Shared\EditorTemplates folder, with the same name as the type (e.g. Decimal.cshtml).
The view should use, as its model, the type you want to display: #inherits System.Web.Mvc.WebViewPage<System.Decimal>
Make the view display whatever you want, using some field naming convention or whatever.
You can also pass HTML attributes via the appropriate EditorFor overload, referenced in your template through the ViewData.ModelMetadata.AdditionalValues property.
One thing to note: once you define an editor template it will be used for every call to EditorFor. You can scope them to a specific controller by moving the EditorTemplates folder into the appropriate view subfolder instead of the shared one.

Resources