Hi Friends,
Me also, i am planning to improve the Arabic package, it should include in addition to the words translation, the Right to Left layout which should be added without affecting the left to fight languages on the same installed alfresco.
If anyone is interested in cooperation, i would be thankful.
Hi Yazid,
In Alfresco Explorer problem is as what Younis said, you need to edit all JSP files, it will take a long time of editing especially if you want to support multilingual interface.
BUT, I solve this problem by thinking about out-of-box solution, using JQuery !
You need a little modifying for some files, Images, add JSs , edit few JSP files.
First in Images, I copied original Image folder to new folder in same path with "images-ar" name, and flip most of images horizontally.
Anyway I uploaded the folder rared:
http://www.4shared.com/file/IjkaMM7F/images-ar.html
just extract it (use extract here) into :
\tomcat\webapps\alfrescoSecond I add 2 js files, the JQuery framework (download it from http://jquery.com/) and empty JS file in path :
\tomcat\webapps\alfresco\scriptsand then I call these files in titlebar.jsp file :
\tomcat\webapps\alfresco\jsp\parts\titlebar.jspby adding the following code in the start of the file (after comments) :
<%@ page import="javax.faces.context.FacesContext" %>
<%
FacesContext fc2 = FacesContext.getCurrentInstance();
String layoutLanguage = Application.getLanguage(fc2).toString();
%>
and add the following applied in all containers (Like container.jsp, browser.jsp,…etc) as the following:
in files:
\tomcat\webapps\alfresco\jsp\browse\browse.jsp
\tomcat\webapps\alfresco\jsp\browse\dashboard.jsp
\tomcat\webapps\alfresco\jsp\dashboards\container.jsp
\tomcat\webapps\alfresco\jsp\dialog\container.jsp
\tomcat\webapps\alfresco\jsp\dialogs\container.jsp
at the start of these files (after comments and after existing imports and be sure first if this import already not called 😞
<%@ page import="javax.faces.context.FacesContext" %>at the end of these files but before '</f:view>':
<%
FacesContext fc2 = FacesContext.getCurrentInstance();
String layoutLanguage = Application.getLanguage(fc2).toString();
if(layoutLanguage.equals("ar_JO")) {
%>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.min.js">
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/for-ar.js">
</script>
<%
}
%>
in for-ar.js file I put the following code that read css property need to filp and swap between them, as example (swap between margin-left and margin-right) , and replace the paths of images to new path:
jQuery(function () {
jQuery("body").css("direction","rtl");
jQuery("img").each(function(i){
var oldLink = jQuery(this).attr("src");
var newLink = oldLink.replace("/images","/images-ar");
jQuery(this).attr("src",newLink);
});
jQuery.each(jQuery("*").get().reverse(), function (i) {
var backgroungImg = jQuery(this).css("background-image");
var textalign = jQuery(this).css("text-align");
var leftPadding = jQuery(this).css("padding-left");
var rightPadding = jQuery(this).css("padding-right");
var leftBorderWidth = jQuery(this).css("border-left-width");
var rightBorderWidth = jQuery(this).css("border-right-width");
var leftMargin = jQuery(this).css("margin-left");
var rightMargin = jQuery(this).css("margin-right");
var floatVal = jQuery(this).css("float");
var align = jQuery(this).attr("align");
if (backgroungImg != "none")
{
var newValue = backgroungImg.replace("/images","/images-ar");
jQuery(this).css("background-image",newValue);
}
if (jQuery.browser.msie == false || jQuery.browser.msie == undefined) {
if (textalign == "left") {jQuery(this).css({'text-align': 'right'});}
else if (textalign == "right"){jQuery(this).css({'text-align': 'left'});}
}
if (floatVal == "left") {jQuery(this).css({'float': 'right'});}
else if (floatVal == "right"){jQuery(this).css({'float': 'left'});}
if (align == "left") {jQuery(this).attr("align","right")}
else if (align == "right") {jQuery(this).attr("align","left")}
if (rightPadding != leftPadding)
{
jQuery(this).css("padding-left",rightPadding);
jQuery(this).css("padding-right",leftPadding);
}
if (rightMargin != leftMargin)
{
jQuery(this).css("margin-left", rightMargin);
jQuery(this).css("margin-right", leftMargin);
}
if (leftBorderWidth != rightBorderWidth)
{
jQuery(this).css("border-left-width", rightBorderWidth);
jQuery(this).css("border-right-width", leftBorderWidth);
}
});
});
In login page has not title bar so you need to add the following code and that will be a solution if you need this:
login page location
\tomcat\webapps\alfresco\jspthe code (place it after line 85) :
<%– JQuery Call–%>
<%
String layoutLanguage = Application.getLanguage(fc).toString();
if(layoutLanguage.equals("ar_AR")) {
%>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/for-ar.js"></script>
<script type="text/javascript">
$("body").css("background-position","right top");
</script>
<%
}
%>
The positives of this solution are:
How much you are great JQuery
BTW, I have a little problem, the components using "ajax" is still out of JQuery hands, like Navigation, I just trying to solve this problem using JQuery too 😎 .
I hope this will be helpful for you
.Regards,
Al-Mothafar Al-Hasan
Dear Al-Modhafar,
I am very thankful for your efforts in writing this and your invention in this domain, i will check it later, benefit of it and give my comments and recommendations in God Well!
Thank you very much bro.
You are welcome
I hope my solution help all.
