PHPackages                             uvicate/webapp - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. uvicate/webapp

ActiveLibrary[Utility & Helpers](/categories/utility)

uvicate/webapp
==============

Creating and manage Ajax-Translatable Applications

v1.0.5(11y ago)280[1 issues](https://github.com/uvicate/WebApp/issues)MITJavaScript

Since Sep 19Pushed 11y ago2 watchersCompare

[ Source](https://github.com/uvicate/WebApp)[ Packagist](https://packagist.org/packages/uvicate/webapp)[ Docs](https://github.com/uvicate/WebApp)[ RSS](/packages/uvicate-webapp/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)DependenciesVersions (7)Used By (0)

WebApp
======

[](#webapp)

AJAX WebApp handler.

Create AJAX web apps with translation support

How to use it?
--------------

[](#how-to-use-it)

The first thing to do is initialize an object and tell it the modules you are going to use in your platform.

```
var modulesApp = {
	module1: {url: 'modules/', nombre: 'module1'},
	module2: {url: 'modules/', nombre: 'module2'}
}

```

the previous code is a JSON with the modules that the platform will have. Then, proceed to create the Object.

```
var j = {name: 'My App', modules:modules, div:'#content'};
App = new AppSystem(j);
App.init(function(){});

```

The main object is initialized now. This object will hold all the neccesary variables for us. Although the main object is all set up an ready to rumble, the modules have not yet been initialized, so you may want to create a menu to tell the user about your modules or start a module right away, in any case you have to start a module.

```
App.getModule('module1');
App.current.start()

```

getModule will set the current module to the one you searched, and then you have to start it. The start process will call this files in order:

1. The CSS file
2. The main HTML file
3. The XML file of the current language
4. The main JS file

Setting up the ftp Structure
----------------------------

[](#setting-up-the-ftp-structure)

A modules folder will hold all the client side (JS, HTML, CSS) called "modules" or a custom name. Inside that folder all the existing modules will be put.

Each module will have 3 folders with the following files:

- css/style.css
- html/main.html
- js/main.js

For the languages, you have to create a folder called "language" and within will have all the supported languages of your platform. For default the main language is English, the "English" language folder must be called with the language code "en", for spanish would be "es" and so on.

- language/
    - en
    - es

Each language folder must contain a main xml file called "main" and must have all the modules in folders aswell. Each module in the language folder must have a "content.xml" as following:

- en/
    - main.xml \*module1/ \*content.xml \*module2/ \*content.xml

The main xml of the language is intended for all the texts you may repeat in some or all the modules, like name days or month names, etc. And the content xml of each module is for that module specifically.

All the xml files must be as following

```

			Hello, I'm a web app
			Change language

		Oh noes!

```

1. An optional utf encoding at the beginning of the file [http://www.w3schools.com/xml/xml\_encoding.asp](http://www.w3schools.com/xml/xml_encoding.asp)
2. The "content" node must exist, although the name is not mandatory.
3. the "dom" node is mandatory.

Linking the HTML with the Language
----------------------------------

[](#linking-the-html-with-the-language)

It is advised that you don't use any text in your HTML files or the translation will not be possible. The desired DOM nodes to be translated must have a tag called "data-ltag" which will have the name of the tag in the XML file.

```

```

The h1 tag will call the "title" node in the XML explained before. The translation will happen automatically when starting the module. All the tags within the "dom" tag in the XML file will be searched in the HTML file each time the module is translated.

But if you create dom dinamically you have two options of calling Language text.

1. Re-translating the site.

```
App.current.translate()

```

This will read the current dom and re translate all that matches

2. Calling the nodes manually.

```
var text = App.current.language.getText('exra-text');

```

the "getText" method will search only in the current XML file, but if you want to get text of the main XML of the language, use this.

```
var mainText = App.current.language.getMainText('main-text');

```

the text variable will hold the "Oh noes!" string, doesn't matter that it is outside the "dom" tag of the XML, and it is better that it is outside, because this string will be used dynamically and only in certain cases, not every time the html is called.

Translating the app to another language
---------------------------------------

[](#translating-the-app-to-another-language)

If the application is English and the user wants it in Spanish, this is done as following

```
App.current.translateTo('es');

```

Setup
-----

[](#setup)

For easy startup I added a Python script that helps to create all the needed directories, which can be a very repetitive task if you have many projects.

The first thing to do is to configure the `setup.json`

```
{
	"project":"foo",
	"project_path":"bar",
	"modules":["login", "backend", "frontend"],
	"module_path":"modules",
	"languages":["en", "es"]
}

```

First of all, the `project` will specify the root path of the project, if you are starting a new project the name of the project will be the new directory in which all the modules and languages will be stored. Inside this new path, you will have to create the index.html and all that. See the demo for a better example :)

The modules are inside an array, in this case there are three of them: `login`, `backend` and `frontend` every module will have all required files. The `module_path` will be the path for all the modules, in this case it will be to `bar/modules/`

The languages work the same way, in this case my application will support `english` and `spanish`.

After all the configuration is ready then go to the terminal and type

```
python setup.py

```

All the files will be created after that, now you are ready to go!

Requirements
------------

[](#requirements)

Modern Browser:

- Firefox
- Google Chrome
- Safari
- Opera
- IE > 9

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance10

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~48 days

Total

6

Last Release

4371d ago

Major Versions

V0.9 → V1.0.12013-11-26

### Community

Maintainers

![](https://www.gravatar.com/avatar/675b0d79d51f7fab64ab9c5b0384f891ff675ccd5a7e194bc04aa5b73ed1d26a?d=identicon)[victorhqc](/maintainers/victorhqc)

---

Top Contributors

[![victorhqc](https://avatars.githubusercontent.com/u/726113?v=4)](https://github.com/victorhqc "victorhqc (31 commits)")

---

Tags

translateajaxwebapp

### Embed Badge

![Health badge](/badges/uvicate-webapp/health.svg)

```
[![Health](https://phpackages.com/badges/uvicate-webapp/health.svg)](https://phpackages.com/packages/uvicate-webapp)
```

###  Alternatives

[kartik-v/yii2-tree-manager

An enhanced tree management module with tree node selection and manipulation using nested sets.

156529.0k15](/packages/kartik-v-yii2-tree-manager)[ziffmedia/nova-select-plus

A Nova select field for simple and complex select inputs

96578.4k1](/packages/ziffmedia-nova-select-plus)[jaxon-php/jaxon-core

Jaxon is an open source PHP library for easily creating Ajax web applications

73142.3k25](/packages/jaxon-php-jaxon-core)[demogorgorn/yii2-ajax-submit-button

AjaxSubmitButton renders an ajax button which is very similar to ajaxSubmitButton from Yii1.

29132.8k](/packages/demogorgorn-yii2-ajax-submit-button)[risul/laravel-like-comment

Ajax based site wide like and comment system for laravel

1116.9k](/packages/risul-laravel-like-comment)[lampjunkie/php-datatables

PHP Library for (http://www.datatables.net)

5817.4k](/packages/lampjunkie-php-datatables)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)