We all know that prototype design is required before Software Project (Web) development, and axure RP is one of the most used prototype design software. InThe prototype on axure RP does not require any coding capability, and the generated prototype can run on the browser. Apart from the absence of databases and the absence of some logic, the generated prototype is almost the same as the real website.
However, you can see thatThe prototype file generated by axure RP is in HTML format. If we want to reuse this prototype in our actual developmentCodeHTML must be converted to JSP format. Some software claimed to have such a function: Converting HTML into JSP, but I tried it. The transferred JSP is very strange, which is much inferior to the previous HTML display.
Therefore, if we want to convert the prototype into a webpage that can be used for development, and convert HTML into JSP, we still need to do it ourselves.
Step 1: generate a prototype
With axure RP, you can directly generate a prototype (F5). After you select a path, a folder (for example, prototype) appears on the path, which is our prototype.
The HTML file is the main page.
The file in the prototype \ resources \ CSS directory is used to describe the unified display style in axure Rp.
The prototype \ resources \ scripts directory contains some script files.
The prototype \ page name_files \ directory is a unique page style description file, script file, and image resources used on the page.
Step 2: Create and configure a WEB Project
Since it is web development, myeclipse is used. JDK configuration and tomcat configuration will be skipped. Create a project named myweb, right-click the project name myweb, and create a new JSP page called myjsp.
For such a JSP page, we need to slightly modify it to support some things in HTML. In fact, you only need to modify the first line: pageencoding = "ISO-8859-1", the subsequent encoding format to "UTF-8" on the line.
Step 3: Add HTML and modify other configurations
We open the HTML file of a page in the prototype in text format, select all, and copy ~~~ Open the myjsp. jsp file of the project and copy the file to <HTML> ArticleWhat is the significance? (* ^__ ^ *)
What is the problem with our JSP file? First, it does not contain image resources, CSS and other resources that will be used. Second, it has a problem with the path for obtaining resources. Another important thing is that the HTML Resource Directory generated by axure RP contains Chinese characters, but this resource directory with Chinese characters cannot be identified by JSP... I will mention this.
Now that you know these problems, change them. Copy the prototype Resource Directory to the project's webroot directory, and then copy the page name_files folder to the webroot directory. Then, we first Replace the CSS directory used in such code into the <link href = "Resources/CSS/jquery-ui-themes.css" type = "text/CSS" rel = "stylesheet"> we just copied the corresponding CSS file in the resource file under webroot (the file is the same ). Modify the JS file in <SCRIPT src = "Resources/scripts/jquery-1.4.2.min.js"> </SCRIPT>, or find the corresponding file in the file we just copied into webroot, replace the path of this file with the previous path.
Finally, modify the image resource path. In the code, we carefully find <input type = "image" id = u2 src = "Images \ transparent.gif" class = "u2"> and code, this Code indicates that the image is referenced and displayed on the webpage. We still find the corresponding image in the folder just copied to the project in the same way as we just did, and change its relative path to src =.
Note that the image path and CSS path must not contain Chinese characters, or JSP cannot recognize them ~~~ I discovered this problem after more than an hour.
Okay, the project is basically done. Let's run it.
Step 4: Release and run
Publish the project with tomcat, and then enterHttp: // localhost: 8080/project name/myjsp. jsp. Have you found that the page display effect is exactly the same as that of the axure RP prototype?
Now, we're done!
The purpose of writing this article is to hope that you can easily make a beautiful website.(* ^__ ^ *)
If it is helpful to you, please take a look at me ~~~ O (partition _ partition) O
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
